/*=================================
  Dark‑theme colors (no layout change)
=================================*/
:root {
  --bg: #121212;             /* page background */
  --surface: #1e1e1e;        /* headers, cards, toasts */
  --text-primary: #e0e0e0;   /* main text */
  --text-secondary: #888888; /* muted text */
  --border: #333333;         /* light borders */
  --accent: #0a84ff;         /* links & buttons */
  --error: #cf6679;          /* badges, errors */
}


/* Body */
body {
    font-family: 'Punk', sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 8vw;
    background-color: var(--bg);
    color: var(--text-primary);
    overflow-y: auto;
    font-weight: normal;
  
}
@font-face {
  font-family: 'Punk';
  src: url('/static/Punk.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


.animated-bg {
  position: fixed;
  top: 30%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  /* Use no-repeat + larger background-size for smooth positional animation */
  background: radial-gradient(
    circle at center,
    rgba(155, 81, 224, 0.3),
    rgba(6, 147, 227, 0.2),
    transparent 70%
  ) no-repeat;
  background-size: 200% 200%;
  animation: shiftGradient 12s ease-in-out infinite;
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.8;
}

@keyframes shiftGradient {
  0% {
    /* Start left */
    background-position: 0% 50%;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    /* Move to right and slightly scale */
    background-position: 100% 50%;
    transform: translate(-48%, -52%) scale(1.2);
  }
  100% {
    /* Back to start */
    background-position: 0% 50%;
    transform: translate(-50%, -50%) scale(1);
  }
}
.floating-skater {
  position: fixed;
  width: 5vw;               /* very small */
  max-width: 80px;
  opacity: 0.2;             /* subtle */
  pointer-events: none;     /* never catch clicks */
  z-index: 0;               /* behind everything */
  will-change: transform;   /* smoother anim */
}
h2 {
  font-weight: normal;
  
}
a {
  text-decoration: none;
  
}
a:hover {
  color: #c2a8ff; /* lighter purple on hover */
}

/* Headings & paragraphs */
h1 {
  color: var(--text-primary);
  font-weight: normal;
  font-size: clamp(1.5rem, 4vw, 2.5rem)
  
}

p {
  color: var(--text-secondary);
  font-size: clamp(1rem, 2.5vw, 1.5rem);

  
  
}

/* global.css */
.site-header {
  position: fixed;       /* pins it to the top */
  top: 0;
  left: 0;
  right: 0;
  height: 80px;          /* pick the real header height */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  background-color: var(--surface);
  z-index: 1000;
}

/* push the main content down */
main {
  margin-top: 80px;      /* should match .site-header height */
  padding: 1rem;         /* prevents edge‑to‑edge bleeding */
}

/* container in the corner */
.site-logo {
  position: absolute;
  top: 2%;            /* 2% down from the top of the viewport */
  left: 2%;           /* 2% in from the left */
  margin: 0;          /* remove default margins */
  z-index: 1000;      /* keep it above other content */
  /* optional touch target padding */
  padding: 0.5rem;    /* increases clickable area on mobile */
  
}

.site-logo__img {
  display: block;
  width: 20vw;        /* 20% of the viewport width */
  max-width: 150px;   /* never exceed 150px on large screens */
  min-width: 50px;    /* never shrink below 50px on tiny screens */
  height: auto;       /* maintain aspect ratio */
}

.cart-container {
  position: absolute;
  top: 2%;          /* same inset as logo for consistency */
  right: 2%;
  z-index: 1000;
  
}

.cart-link {
  display: inline-block;
  position: relative;
  text-decoration: none;
  padding: 0.5rem;  /* touch‑friendly hit area */
  color: var(--accent);
}

.cart-icon {
  display: block;
  width: 8vw;       /* 8% of the viewport width */
  max-width: 64px;  /* cap so it doesn’t get enormous */
  min-width: 32px;  /* ensure tappable on very small screens */
  height: auto;
}

.cart-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(25%, 25%);
  background-color: var(--error);
  color: var(--text-primary);
  border-radius: 50%;

  /* font scales with viewport but is never smaller than 0.75rem or larger than 1rem */
  font-size: clamp(0.75rem, 0.25 * 8vw, 1rem);

  /* vertical padding: min 2px, ideal 0.06*8vw, max 4px
     horizontal padding: min 4px, ideal 0.12*8vw, max 6px */
  padding:
    clamp(2px, 0.06 * 8vw, 4px)
    clamp(4px, 0.12 * 8vw, 6px);

  line-height: 1;
  font-weight: bold;

  /* keep it round even when clamped */
  min-width: 1rem;
  min-height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* a) Make padding/borders count inside element width */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* c) The flex‑grid container */
#template-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1%;             /* small percent gap */
  justify-content: center;
  margin: 0 auto;
  max-width: 1200px;    /* caps overall width */
  padding: 1%;
  row-gap: 2rem;        /* vertical space between rows */
  column-gap: 1rem; 
  visibility: hidden;
  opacity: 0;
  transition: opacity .6s ease;

}

#template-container.visible {
  opacity: 1;
  visibility: visible;
}

/* d) Your card style — preserves your original look */
.template {
  border: 1px solid var(--border);
  background-color: var(--surface);
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);

  /* responsive sizing */
  flex: 1 1 100%;      /* full width by default */
  max-width: 100%;     /* never exceed its container */

  /* internal spacing */
  padding: 1%;
  
  text-align: center;
  
  
}


/* image wrapper (optional positioning) */
.template-image-wrapper {
  position: relative;
  width: 100%;
  
}

/* fluid images */
.template img,
.template-image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  
}

/* e) Two‑across beginning at 600px */
@media (min-width: 600px) {
  .template {
    flex: 1 1 calc(48%);   /* roughly half minus gap */
    max-width: calc(48%);
  }
}

/* f) Hard cap on each card at very large widths */
@media (min-width: 900px) {
  .template {
    max-width: 300px;      /* matches your original px‑based cap */
  }
}

.inv a {
  text-decoration: none; /* removes underline */
  color: inherit;        /* makes the link text use the parent color */
  
}

.thumbnail {
  width: 80px;
  margin: 5px;
  border: 1px solid var(--border);
  display: inline-block;
}

select {
  padding: 6px;
  border-radius: 4px;
  margin-top: 10px;
  border: 1px solid var(--border);
}

/* make list clean */
.cart-list {
  list-style: none;
  padding: 0;
}

.cart-item {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}

/* thumbnail */
.cart-thumb {
  width: 80px;
  height: auto;
  border: 1px solid var(--border);
  margin-right: 0.5em;
}
.cart-thumb.placeholder {
  background-color: var(--surface);
  display: inline-block;
}

/* details next to thumb */
.cart-details {
  flex-grow: 1;
}

/* the little “×” button */
.remove-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-secondary);
  padding: 0 0.5em;
  cursor: pointer;
}
.remove-btn:hover {
  color: var(--error);
}

/* container stays full‑width at top so toasts stack there if you ever want multiples */
#toast-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none; /* lets clicks through except on the toast itself */
  display: flex;
  justify-content: center;
  padding-top: 3%;       /* space from the very top */
  z-index: 9999;
}

.toast {
  visibility: hidden;
  width: 80%;            /* 80% of viewport width */
  max-width: 400px;      /* don’t get crazily wide on desktop */
  /* no more margin-left hack—flex centering handles it */
  background-color: var(--surface);
  color: var(--text-primary);
  text-align: center;
  border-radius: 0.25rem; /* 4px = 0.25rem if base font is 16px */
  padding: 1rem;          /* 16px padding */
  font-size: 1.5rem;        /* scalable text */
  opacity: 0;
  transform: translateY(-20px); /* slide down into view */
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s;
  pointer-events: auto;   /* allow hover / click on the toast itself */
}

.toast.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.gelato-img.processing {
  visibility: hidden;    /* or opacity: 0; */
}
.productPage {
  width: fit-content;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease;
}
.productPage.visible {
  opacity: 1;
  visibility: visible;
}
.productTitle {
  text-align: center;
  padding-bottom: 3rem;
}
.secure-checkout-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;                  /* space between icon and text */
  padding: 0.75rem 1.5rem;      /* vertical | horizontal padding */
  font-size: 1rem;              /* 16px if root is 16px */
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #0a84ff 0%, #000000 75%, #000000 100%);
  background-size: 200% 200%;
  background-position: 10% 50%;
  animation: subtleGradientSway 14.5s ease-in-out infinite;
  background-repeat: no-repeat;
  
  border: 2px solid transparent;
  border-radius: 0.5rem;        /* 8px corners */
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
}
@keyframes subtleGradientSway {
  0% {
    background-position: 5% 50%;
  }
  50% {
    background-position: 60% 50%;
  }
  100% {
    background-position: 5% 50%;
  }
}
.secure-checkout-btn .icon {
  font-size: 1.2em;             /* slightly larger than text */
  
}

.secure-checkout-btn:hover {
  background: linear-gradient(135deg, #2196ff 0%, #000000 80%, #000000 100%);
   
  border-color: #6b7280;
}

/* .secure-checkout-btn:active {
  transform: translateY(1px);
  
} */


.cartTitle{
  margin-bottom: 2.5rem;
}
.backShop{
  margin-bottom: 4.5rem;
  margin-top: 2.5rem;
}
label{
  color: var(--text-secondary);
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}
#size {
  background-color: #2a2a2a;         /* dark background */
  color: #ffffff;                    /* white text */
  border: 2px solid transparent;
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);    /* outer glow */
  outline: none;
  box-sizing: border-box;

}

#size:hover{
  border-color: #6b7280;  
}



#size option {
  background-color: #2a2a2a;     /* background of dropdown items */
  color: #ffffff;                /* item text color */
}
.productDescrip {
  padding: 3rem;
}

.site-footer {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 7rem;
  padding: 2rem;
  text-align: left;
  z-index: 10;
  font: 1rem/1.5 sans-serif;
}
.cartPage {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}

.cartPage.visible {
  opacity: 1;
  visibility: visible;
}