/* ==========================================================================
   THEME PARK CHUCKLE — VILLAIN DROP
   Handwritten CSS. No frameworks. No build step.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:#05040a;
  --ink-2:#0b0916;
  --ink-3:#12102130;
  --bone:#f4f1ea;
  --smoke:#a49fb5;

  --teal:#21f3e0;
  --cyan:#00d5ff;
  --magenta:#ff2e9a;
  --violet:#8b5cf6;
  --gold:#ffc93c;

  --glow-teal:0 0 12px rgba(33,243,224,.55), 0 0 42px rgba(33,243,224,.22);
  --glow-mag:0 0 12px rgba(255,46,154,.55), 0 0 42px rgba(255,46,154,.22);

  --font-display:"Anton", "Arial Black", "Haettenschweiler", sans-serif;
  --font-body:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw:1220px;
  --pad:clamp(1.1rem, 4vw, 3rem);
  --radius:14px;

  --nav-h:64px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:.01em;line-height:.95;text-transform:uppercase}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Any element given an explicit display: overrides the browser's built-in
   [hidden] rule, which silently breaks every hidden="" in the markup.
   This one line makes hiding actually mean hiding. */
[hidden]{display:none!important}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{
  font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--teal);margin:0 0 .9rem;font-weight:700;
}
.eyebrow--mag{color:var(--magenta)}

/* ---------- 3. BACKDROP FX ---------- */
.fx{position:fixed;inset:0;pointer-events:none;z-index:0}
.fx__grid{
  position:absolute;inset:-40% -10% -10%;
  background-image:
    linear-gradient(rgba(33,243,224,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,.07) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(520px) rotateX(62deg);
  transform-origin:50% 0;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 30%, #000 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 30%, #000 10%, transparent 72%);
  animation:gridDrift 22s linear infinite;
}
@keyframes gridDrift{to{background-position:0 64px, 64px 0}}
.fx__orb{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.4;
  will-change:transform;
}
.fx__orb--a{width:46vw;height:46vw;left:-12vw;top:-8vw;background:var(--violet);animation:float1 26s ease-in-out infinite}
.fx__orb--b{width:38vw;height:38vw;right:-10vw;top:18vh;background:var(--magenta);opacity:.28;animation:float2 32s ease-in-out infinite}
.fx__orb--c{width:34vw;height:34vw;left:28vw;bottom:-14vw;background:var(--cyan);opacity:.22;animation:float1 38s ease-in-out infinite reverse}
@keyframes float1{50%{transform:translate3d(6vw,4vh,0) scale(1.12)}}
@keyframes float2{50%{transform:translate3d(-7vw,6vh,0) scale(.9)}}
.fx__noise{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx__scan{
  position:absolute;inset:0;opacity:.28;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
}
main,header,footer{position:relative;z-index:1}

/* ---------- 4. PRELOADER ---------- */
#loader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;gap:1rem;
  transition:opacity .5s ease, visibility .5s;
}
#loader.done{opacity:0;visibility:hidden}
.loader__logo{
  width:min(300px,58vw);
  filter:drop-shadow(0 0 18px rgba(33,243,224,.5));
  animation:pulseMark 1.5s ease-in-out infinite;
}
@keyframes pulseMark{
  50%{filter:drop-shadow(0 0 30px rgba(255,46,154,.65)) drop-shadow(0 0 60px rgba(33,243,224,.35))}
}
.loader__bar{width:min(220px,50vw);height:2px;background:#ffffff1a;overflow:hidden;border-radius:2px}
.loader__bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--teal),var(--magenta));animation:load 1.1s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
@keyframes pulseGlow{50%{text-shadow:0 0 22px rgba(255,46,154,.7),0 0 60px rgba(33,243,224,.4)}}

/* ---------- 5. NAV ---------- */
.nav{
  position:sticky;top:0;z-index:90;height:var(--nav-h);
  display:flex;align-items:center;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(5,4,10,.62);
  border-bottom:1px solid #ffffff12;
  transition:background .3s, border-color .3s;
}
.nav.solid{background:rgba(5,4,10,.92);border-color:#ffffff1f}
.nav__in{display:flex;align-items:center;gap:1.2rem;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.nav__brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-size:1.02rem;letter-spacing:.16em}
.nav__brandtext{white-space:nowrap}
@media(max-width:520px){.nav__brandtext{display:none}}
.nav__brand b{color:var(--teal);text-shadow:var(--glow-teal);font-weight:400}
.nav__links{display:flex;gap:1.6rem;margin-left:auto;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase}
.nav__links a{position:relative;padding:.4rem 0;color:var(--smoke);transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--teal);box-shadow:var(--glow-teal);transition:width .28s cubic-bezier(.2,.8,.2,1)}
.nav__links a:hover{color:var(--bone)}
.nav__links a:hover::after{width:100%}
.cart-btn{
  margin-left:auto;display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem .95rem;border:1px solid #ffffff26;border-radius:999px;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.nav__links + .cart-btn{margin-left:1.4rem}
.cart-btn:hover{border-color:var(--teal);box-shadow:var(--glow-teal)}
.cart-btn:active{transform:scale(.96)}
.cart-btn .count{
  min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--magenta);color:#fff;font-size:.68rem;font-weight:700;
  display:grid;place-items:center;letter-spacing:0;
}
.cart-btn .count.zero{display:none}
.cart-btn.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.14)}}

/* ---------- 6. HERO ---------- */
.hero{
  min-height:calc(100svh - var(--nav-h));
  padding-bottom:clamp(3rem,8vh,5rem);
  display:grid;place-items:center;text-align:center;
  padding:clamp(2rem,7vh,5rem) 0 clamp(2rem,6vh,4rem);
  position:relative;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='none'/%3E%3Crect width='4' height='1' fill='%23000' opacity='.35'/%3E%3C/svg%3E");
  opacity:.5;
}
.hero__media{
  background:#05040a url("../img/hero-poster.jpg") center/cover no-repeat;
}
.hero__media::before{
  content:"";position:absolute;inset:-4%;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  pointer-events:none;
}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease;
  filter:saturate(1.2) contrast(1.06) blur(3px);
  transform:scale(1.06);            /* hides the blur's soft edges */
}
.hero__video.on{opacity:1}
.hero__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(52% 42% at 50% 42%, rgba(5,4,10,.72) 0%, rgba(5,4,10,.35) 60%, transparent 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 0%, rgba(5,4,10,.5) 55%, rgba(5,4,10,.9) 100%),
    linear-gradient(180deg, rgba(5,4,10,.75) 0%, rgba(5,4,10,.25) 30%, rgba(5,4,10,.55) 70%, var(--ink) 100%),
    linear-gradient(100deg, rgba(139,92,246,.28), transparent 45%, rgba(255,46,154,.22));
}
.hero__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.hero__kicker{
  display:inline-flex;
  /* sits on its own line — the title is a block below it */align-items:center;gap:.6rem;
  padding:.42rem .95rem;border:1px solid rgba(255,46,154,.45);border-radius:999px;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--magenta);
  background:rgba(255,46,154,.07);margin-bottom:1.6rem;
}
.hero__kicker{margin-bottom:1.1rem}
.hero__kicker i{width:6px;height:6px;border-radius:50%;background:var(--magenta);box-shadow:var(--glow-mag);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}

.hero__mark{margin:0;line-height:0}
.hero__mark img{
  width:min(clamp(280px,42vw,520px),82vw);height:auto;margin-inline:auto;
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,.9))
    drop-shadow(0 6px 24px rgba(0,0,0,.7))
    drop-shadow(0 0 34px rgba(33,243,224,.42))
    drop-shadow(0 0 90px rgba(255,46,154,.26));
  animation:markIn 1.1s cubic-bezier(.2,.8,.2,1) both;
}

.hero__title{
  font-size:clamp(3.6rem, 15vw, 12rem);
  line-height:.82;letter-spacing:-.01em;margin:0;
  position:relative;display:block;text-align:center;
}
.hero__title span{
  display:block;
  background:linear-gradient(180deg,#fff 12%, #cfd3e6 52%, #7f86b0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(33,243,224,.28));
}
.hero__title::before,.hero__title::after{
  content:attr(data-text);position:absolute;inset:0;
  font:inherit;letter-spacing:inherit;line-height:inherit;
  pointer-events:none;
}
.hero__title::before{color:var(--magenta);mix-blend-mode:screen;animation:glitchA 5.5s steps(1) infinite}
.hero__title::after{color:var(--teal);mix-blend-mode:screen;animation:glitchB 5.5s steps(1) infinite}
@keyframes glitchA{
  0%,88%,100%{transform:translate(0);opacity:0}
  89%{transform:translate(-4px,2px);opacity:.85}
  91%{transform:translate(3px,-2px);opacity:.6}
  93%{transform:translate(-2px,0);opacity:.4}
  95%{opacity:0}
}
@keyframes glitchB{
  0%,88%,100%{transform:translate(0);opacity:0}
  90%{transform:translate(4px,-2px);opacity:.8}
  92%{transform:translate(-3px,2px);opacity:.55}
  94%{transform:translate(2px,1px);opacity:.35}
  96%{opacity:0}
}
.hero__sub{
  margin-top:1.1rem;
  font-size:clamp(1rem,2.4vw,1.42rem);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);font-weight:500;text-shadow:0 2px 18px rgba(0,0,0,.8);
}
.hero__sub em{font-style:normal;color:var(--teal);text-shadow:var(--glow-teal)}
.hero__blurb{max-width:46ch;margin:.9rem auto 1.9rem;color:#c8c4d6;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.hero__cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

.scrollhint{
  position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:#ffffff55;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.scrollhint i{width:1px;height:34px;background:linear-gradient(var(--teal),transparent);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.2;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- 7. BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.9rem;border-radius:999px;
  font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s, border-color .25s;
  overflow:hidden;isolation:isolate;
}
.btn:active{transform:scale(.97)}
.btn--primary{background:linear-gradient(100deg,var(--teal),var(--cyan));color:#04141a;box-shadow:0 0 0 rgba(33,243,224,0)}
.btn--primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--magenta),var(--violet));
  opacity:0;transition:opacity .3s;
}
.btn--primary:hover{color:#fff;box-shadow:var(--glow-mag);transform:translateY(-2px)}
.btn--primary:hover::before{opacity:1}
.btn--ghost{border:1px solid #ffffff30;color:var(--bone)}
.btn--ghost:hover{border-color:var(--teal);box-shadow:var(--glow-teal);transform:translateY(-2px)}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn--locked{
  background:none!important;border:1px dashed rgba(33,243,224,.55);color:var(--teal)!important;
  opacity:.9!important;
}
.btn--locked::before{display:none}

/* ---------- 8. COUNTDOWN ---------- */
.count-wrap{margin:1.8rem auto 0;display:inline-block}
.count-wrap .lbl{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--smoke);margin-bottom:.75rem}
.count{display:flex;gap:.5rem;justify-content:center}
.count__unit{
  min-width:74px;padding:.7rem .4rem .55rem;
  background:linear-gradient(180deg,#ffffff0f,#ffffff05);
  border:1px solid #ffffff1c;border-radius:12px;
  backdrop-filter:blur(8px);
}
.count__unit b{
  display:block;font-family:var(--font-display);font-size:1.9rem;line-height:1;
  color:var(--bone);text-shadow:0 0 18px rgba(33,243,224,.35);font-weight:400;
  font-variant-numeric:tabular-nums;
}
.count__note{margin:.9rem auto 0;max-width:34ch;font-size:.76rem;color:var(--smoke);line-height:1.5}
.count__unit span{display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--smoke);margin-top:.4rem}

/* ---------- 9. MARQUEE ---------- */
.marquee{
  border-block:1px solid #ffffff14;
  background:linear-gradient(90deg,rgba(255,46,154,.1),rgba(33,243,224,.1));
  overflow:hidden;padding:.85rem 0;
  --dur:26s;
}
.marquee__track{display:flex;width:max-content;animation:slide var(--dur) linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{
  font-family:var(--font-display);font-size:clamp(.95rem,2vw,1.35rem);
  letter-spacing:.14em;padding-inline:1.4rem;color:var(--bone);opacity:.9;white-space:nowrap;
  display:flex;align-items:center;gap:1.4rem;
}
.marquee span::after{content:"✦";color:var(--teal);text-shadow:var(--glow-teal)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 10. SECTIONS ---------- */
.section{padding:clamp(4rem,11vh,8.5rem) 0}
.section__head{max-width:60ch;margin-bottom:clamp(2rem,5vh,3.4rem)}
.section__head h2{font-size:clamp(2.1rem,6.2vw,4.6rem)}
.section__head p{color:var(--smoke);margin-top:1rem;max-width:52ch}
.section--alt{background:linear-gradient(180deg,transparent,#0b091640 12%,#0b091640 88%,transparent)}

/* ---------- 11. PRODUCT ---------- */
.product{display:grid;gap:clamp(1.6rem,4vw,3.4rem);grid-template-columns:1fr}
@media(min-width:900px){.product{grid-template-columns:1.05fr .95fr;align-items:start}}

.gallery{position:relative}
.gallery__stage{
  position:relative;border-radius:20px;overflow:hidden;
  border:1px solid #ffffff1f;
  background:#f7f7f9;
  aspect-ratio:3/4;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 60px -10px var(--stage-glow, rgba(33,243,224,.35));
}
.gallery__stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.gallery__stage img.on{opacity:1;transform:scale(1)}
.gallery__glow{
  position:absolute;left:50%;bottom:-18%;translate:-50% 0;
  width:70%;aspect-ratio:2/1;border-radius:50%;
  background:var(--c,var(--teal));filter:blur(60px);opacity:.4;transition:background .5s;
  pointer-events:none;
}
.gallery__badge{
  position:absolute;top:14px;left:14px;z-index:3;
  padding:.4rem .8rem;border-radius:999px;
  background:rgba(10,8,20,.88);color:var(--bone);
  border:1px solid rgba(255,255,255,.28);
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.gallery__badge.is-low{background:var(--gold);color:#231a00;border-color:transparent;
  box-shadow:0 0 14px rgba(255,201,60,.5)}
.gallery__badge.is-out{background:var(--magenta);color:#fff;border-color:transparent;
  box-shadow:var(--glow-mag)}
.gallery__thumbs{display:flex;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}
.gallery__thumbs button{
  width:60px;aspect-ratio:3/4;border-radius:9px;overflow:hidden;
  border:1px solid #ffffff1c;opacity:.5;transition:.2s;background:#f7f7f9;
}
.gallery__thumbs button img{width:100%;height:100%;object-fit:cover}
.gallery__thumbs button[aria-selected="true"]{opacity:1;border-color:var(--teal);box-shadow:var(--glow-teal)}

.buy h1{font-size:clamp(2.4rem,7vw,4.2rem);line-height:.9}
.buy .sub{color:var(--teal);letter-spacing:.2em;text-transform:uppercase;font-size:.76rem;margin:.7rem 0 1.1rem;font-weight:700}
.price-row{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.4rem}
.price{font-family:var(--font-display);font-size:2.4rem;line-height:1}
.price-was{color:var(--smoke);text-decoration:line-through;font-size:1.05rem}
.price-off{
  font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(33,243,224,.14);color:var(--teal);border:1px solid rgba(33,243,224,.35);
  padding:.28rem .6rem;border-radius:999px;
}
.buy .desc{color:var(--smoke);margin-bottom:1.8rem}

.field{margin-bottom:1.6rem}
.field__label{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--smoke);margin-bottom:.7rem;
}
.field__label b{color:var(--bone);letter-spacing:.1em;font-weight:600}

/* wrapped grid of swatches — everything visible, no side-scrolling */
.swatches{display:flex;flex-wrap:wrap;gap:.7rem}
.swatch{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .95rem .55rem .55rem;border-radius:999px;
  border:1px solid #ffffff20;background:#ffffff08;
  font-size:.78rem;letter-spacing:.06em;transition:.2s;
}
.swatch i{
  width:22px;height:22px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1px #ffffff30;
}
.swatch:hover{border-color:#ffffff4d}
.swatch[aria-pressed="true"]{border-color:var(--teal);box-shadow:var(--glow-teal);background:rgba(33,243,224,.08)}
.swatch.out{opacity:.45;cursor:not-allowed}
.swatch.out span{text-decoration:line-through}
.swatch__tag{
  font-style:normal;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--magenta);border:1px solid rgba(255,46,154,.5);border-radius:999px;
  padding:.16rem .45rem;margin-left:.15rem;
}

.stepper{display:inline-flex;align-items:center;border:1px solid #ffffff20;border-radius:999px;overflow:hidden}
.stepper button{width:44px;height:44px;font-size:1.2rem;color:var(--bone);transition:background .2s}
.stepper button:hover{background:#ffffff12}
.stepper input{width:52px;height:44px;text-align:center;background:none;border:0;font-variant-numeric:tabular-nums;font-weight:700}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input[type=number]{-moz-appearance:textfield}

/* colorway story */
.cw-story{
  margin:-.6rem 0 1.6rem;padding:.9rem 1.1rem;
  border-left:2px solid var(--teal);
  background:linear-gradient(90deg,rgba(33,243,224,.08),transparent 70%);
  color:#cfcbdd;font-size:.94rem;line-height:1.55;border-radius:0 10px 10px 0;
}

/* availability — never shows a number */
.availability{
  margin:-.6rem 0 1.4rem;font-size:.84rem;color:var(--smoke);
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.availability b{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.74rem;
  padding:.24rem .6rem;border-radius:999px}
.av-low{color:var(--gold);background:rgba(255,201,60,.12);border:1px solid rgba(255,201,60,.4)}
.av-out{color:var(--magenta);background:rgba(255,46,154,.12);border:1px solid rgba(255,46,154,.45)}

.trust{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.5rem;font-size:.74rem;color:var(--smoke)}
.trust span{display:flex;align-items:center;gap:.45rem}
.trust svg{width:15px;height:15px;stroke:var(--teal);fill:none;stroke-width:2}

/* ---------- 12. SPEC GRID ---------- */
.specs{display:grid;gap:1px;background:#ffffff14;border:1px solid #ffffff14;border-radius:16px;overflow:hidden}
@media(min-width:640px){.specs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.specs{grid-template-columns:repeat(3,1fr)}}
.spec{background:#08060fCC;padding:1.6rem 1.4rem;transition:background .3s}
.spec:hover{background:#141127}
.spec h3{font-size:.72rem;letter-spacing:.24em;color:var(--teal);margin-bottom:.5rem;font-family:var(--font-body);font-weight:700}
.spec p{margin:0;color:var(--bone);font-size:1rem}

/* ---------- 12b. CRAFT (close-up + specs) ---------- */
.craft{display:grid;gap:1.4rem}
@media(min-width:920px){.craft{grid-template-columns:minmax(280px,.85fr) 1.15fr;align-items:stretch}}
.craft__shot{
  position:relative;margin:0;border-radius:16px;overflow:hidden;
  border:1px solid #ffffff1c;min-height:280px;
  box-shadow:0 24px 60px -28px #000, 0 0 60px -18px rgba(33,243,224,.4);
}
.craft__shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.craft__shot:hover img{transform:scale(1.05)}
.craft__shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.2rem .95rem;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone);
  background:linear-gradient(0deg,#05040aee,transparent);
}
.craft .specs{align-self:start}
@media(min-width:920px){.craft .specs{grid-template-columns:repeat(2,1fr);height:100%}}

/* ---------- 13. LOOKBOOK ---------- */
.look{
  display:grid;gap:0;border-radius:20px;overflow:hidden;
  border:1px solid #ffffff18;
  background:linear-gradient(135deg,#161029,#0a0714 60%,#12091d);
  box-shadow:0 40px 100px -40px #000;
}
@media(min-width:900px){.look{grid-template-columns:.92fr 1.08fr}}
.look__shot{position:relative;margin:0;min-height:min(70vh,620px);overflow:hidden}
.look__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.look__shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,#0a0714 2%,transparent 34%);
}
@media(min-width:900px){
  .look__shot::after{background:linear-gradient(90deg,transparent 60%,#0a0714 100%)}
}
.look__copy{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.6rem,4.5vw,3.4rem);
}
.look__copy h2{font-size:clamp(1.9rem,4.6vw,3.4rem);max-width:16ch}
.look__copy p{color:var(--smoke);max-width:46ch;margin-top:1rem}
/* the cut-out hat, floating in the panel rather than framed in a box */
.look__float{
  position:relative;margin:1.6rem 0 0;
  width:min(340px,78%);
  isolation:isolate;
}
.look__float::before{                 /* the light it seems to sit in */
  content:"";position:absolute;z-index:-1;
  left:50%;top:52%;translate:-50% -50%;
  width:118%;aspect-ratio:1/.82;border-radius:50%;
  background:radial-gradient(closest-side, rgba(33,243,224,.34), rgba(139,92,246,.18) 55%, transparent 78%);
  filter:blur(14px);
}
.look__float::after{                  /* a soft contact shadow underneath */
  content:"";position:absolute;z-index:-1;
  left:50%;bottom:2%;translate:-50% 0;
  width:64%;height:16px;border-radius:50%;
  background:rgba(0,0,0,.65);filter:blur(11px);
}
.look__float img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.6));
  animation:hatFloat 7s ease-in-out infinite;
}
@keyframes hatFloat{50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.look__float img{animation:none}}
@media(max-width:899px){.look__float{width:min(300px,70%);margin-inline:auto}}

/* ---------- 14. FAQ ---------- */
.faq{border-top:1px solid #ffffff16}
.faq details{border-bottom:1px solid #ffffff16}
.faq summary{
  list-style:none;cursor:pointer;padding:1.35rem 2.6rem 1.35rem 0;position:relative;
  font-family:var(--font-display);font-size:clamp(1.05rem,2.6vw,1.45rem);letter-spacing:.02em;
  text-transform:uppercase;transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--teal)}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:13px;height:13px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s;
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq .a{padding:0 0 1.45rem;color:var(--smoke);max-width:70ch}

/* ---------- 15. NOTIFY ---------- */
.notify{
  border:1px solid #ffffff1c;border-radius:20px;padding:clamp(1.6rem,4.5vw,3rem);
  background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(255,46,154,.08));
  text-align:center;
}
.notify h2{font-size:clamp(1.8rem,5vw,3.2rem)}
.notify p{color:var(--smoke);max-width:46ch;margin:.9rem auto 1.7rem}
.notify form{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.notify input{
  flex:1 1 260px;max-width:360px;padding:1rem 1.2rem;border-radius:999px;
  background:#ffffff0d;border:1px solid #ffffff24;
}
.notify input::placeholder{color:#ffffff55}
.notify input:focus{border-color:var(--teal);outline:none;box-shadow:var(--glow-teal)}
.notify .msg{margin:1rem auto 0;font-size:.84rem;color:var(--smoke);min-height:1.2em;transition:color .2s}
.notify .msg--ok{color:var(--teal);text-shadow:0 0 14px rgba(33,243,224,.35)}
.notify .msg--warn{color:var(--gold)}
.notify button[disabled]{opacity:.55;pointer-events:none}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}

/* ---------- 16. CART DRAWER ---------- */
.scrim{
  position:fixed;inset:0;z-index:100;background:#02010666;
  backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.3s;
}
.scrim.on{opacity:1;visibility:visible}
/* THE BAG
   The whole panel is one scroll area, deliberately. It used to be the items
   list that scrolled with the totals pinned underneath — which is tidier right
   up until PayPal expands its card form inside the footer. That form is taller
   than a phone screen, the pinned footer had nowhere to go, and the Pay button
   ended up below the fold with no way to reach it. One scroll container can
   always reach the bottom of whatever is put inside it. */
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:101;
  width:min(430px,100%);
  background:#0a0814;border-left:1px solid #ffffff1c;
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;          /* don't drag the page behind it */
  transform:translateX(102%);transition:transform .38s cubic-bezier(.2,.85,.25,1);
  box-shadow:-30px 0 80px -20px #000;
}
.drawer.on{transform:none}
.drawer__head{
  position:sticky;top:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem var(--pad);border-bottom:1px solid #ffffff16;
  background:#0a0814;
}
.drawer__head h2{font-size:1.15rem;letter-spacing:.14em}
.drawer__close{width:38px;height:38px;border-radius:50%;border:1px solid #ffffff22;display:grid;place-items:center;transition:.2s;font-size:1.1rem;flex:none}
.drawer__close:hover{border-color:var(--magenta);box-shadow:var(--glow-mag)}
/* grows to push the footer down when the bag is nearly empty, never shrinks
   below its own content when it isn't */
.drawer__body{flex:1 0 auto;padding:1.1rem var(--pad)}
.drawer__foot{
  flex:0 0 auto;
  border-top:1px solid #ffffff16;background:#0a0814;
  padding:1.1rem var(--pad) calc(1.4rem + env(safe-area-inset-bottom,0px));
}
/* THE PAYMENT PANEL
   PayPal's card form is a cross-origin iframe — we cannot restyle a single
   character inside it. Its labels ("Billing address", "Ship to billing
   address", the Fastlane small print) are drawn in mid-grey, for a light
   background, and the iframe itself is transparent. Over our near-black
   drawer that grey is close to invisible.

   The only lever we have is what sits behind it. So the whole checkout area
   gets the light surface PayPal designed against. It reads as a deliberate
   "secure payment" panel, which is a pattern people already know, and every
   label inside it lands back at the contrast PayPal intended. */
#paypal-buttons{
  color-scheme:light;
  background:#f4f3f7;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:.9rem .85rem;
  margin-top:1rem;
  min-height:48px;
}
/* belt and braces: whatever PayPal nests inside stays on a light surface */
#paypal-buttons > div,
#paypal-buttons .paypal-buttons{background:transparent}
#paypal-buttons iframe{max-width:100%;color-scheme:light}
/* nothing rendered yet — don't show an empty white slab */
#paypal-buttons:empty{background:none;border:0;padding:0;margin:0}

.line{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;padding:.9rem 0;border-bottom:1px solid #ffffff10;align-items:center}
.line__img{width:64px;aspect-ratio:3/4;border-radius:9px;object-fit:cover;background:#141127}
.line__name{font-weight:600;font-size:.94rem;line-height:1.3}
.line__meta{font-size:.74rem;color:var(--smoke);margin-top:.2rem}
.line__price{font-variant-numeric:tabular-nums;font-weight:700;font-size:.94rem;text-align:right}
.line__rm{display:block;margin-top:.35rem;font-size:.68rem;color:var(--smoke);text-decoration:underline;transition:color .2s}
.line__rm:hover{color:var(--magenta)}
.line__qty{display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;font-size:.78rem}
.line__qty button{width:24px;height:24px;border:1px solid #ffffff24;border-radius:6px;line-height:1;transition:.2s}
.line__qty button:hover{border-color:var(--teal)}

.totals{font-size:.9rem}
.totals div{display:flex;justify-content:space-between;padding:.3rem 0;color:var(--smoke)}
.totals .grand{color:var(--bone);font-weight:700;font-size:1.1rem;padding-top:.7rem;margin-top:.5rem;border-top:1px solid #ffffff16}
.totals .free{color:var(--teal)}
.ship-nudge{font-size:.76rem;color:var(--smoke);margin:.2rem 0 .8rem}
.ship-nudge b{color:var(--teal)}

/* checkout opt-in */
.optin{
  display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;
  margin:1rem 0 .2rem;padding:.85rem .95rem;border-radius:12px;
  border:1px solid #ffffff1f;background:#ffffff08;
  transition:border-color .2s, background .2s;
}
.optin:hover{border-color:#ffffff33;background:#ffffff0d}
.optin input{position:absolute;opacity:0;width:0;height:0}
.optin__box{
  flex:none;width:19px;height:19px;margin-top:1px;border-radius:5px;
  border:1.5px solid #ffffff45;position:relative;transition:.18s;
}
.optin__box::after{
  content:"";position:absolute;left:5.5px;top:1.5px;width:5px;height:10px;
  border:solid #04141a;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.5);
  opacity:0;transition:.18s;
}
.optin input:checked + .optin__box{background:var(--teal);border-color:var(--teal);box-shadow:0 0 12px rgba(33,243,224,.45)}
.optin input:checked + .optin__box::after{opacity:1;transform:rotate(45deg) scale(1)}
.optin input:focus-visible + .optin__box{outline:2px solid var(--teal);outline-offset:3px}
.optin__text{display:block;line-height:1.4}
.optin__text b{display:block;font-size:.84rem;font-weight:600;color:var(--bone)}
.optin__text em{display:block;font-style:normal;font-size:.72rem;color:var(--smoke);margin-top:.2rem}

.pay-note{font-size:.7rem;color:#ffffff5c;text-align:center;margin:.85rem 0 0;line-height:1.5}
.empty{text-align:center;padding:3.5rem 1rem;color:var(--smoke)}
.empty b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--bone);margin-bottom:.6rem;letter-spacing:.08em}

/* ---------- 17. TOAST ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:150;
  padding:.85rem 1.4rem;border-radius:999px;
  background:#12102b;border:1px solid rgba(33,243,224,.4);box-shadow:var(--glow-teal);
  font-size:.82rem;opacity:0;pointer-events:none;transition:.3s;
}
.toast.on{opacity:1;translate:-50% -6px}

/* ---------- 18. FOOTER ---------- */
.footer{border-top:1px solid #ffffff14;padding:3rem 0 2.4rem;margin-top:2rem}
.footer__in{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:space-between;align-items:center}
.footer__brand{display:block;line-height:0}
.footer__brand img{width:clamp(150px,17vw,196px);height:auto;opacity:.72;transition:opacity .25s}
.footer__brand:hover img{opacity:1}
.footer nav{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.footer nav a:hover{color:var(--teal)}
.footer__legal{width:100%;margin-top:1.8rem;font-size:.7rem;color:#ffffff44}

/* ---------- 19. REVEALS ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- 20. SMALL SCREENS ---------- */
@media(max-width:760px){
  .nav__links{display:none}
  .count__unit{min-width:62px}
  .count__unit b{font-size:1.5rem}
}

/* ---------- 21. LOGO MARK (swaps in when villain-logo.png is present) ---------- */
@keyframes markIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.nav__logo{height:30px;width:auto;flex:none;filter:drop-shadow(0 0 10px rgba(33,243,224,.45))}

/* ==========================================================================
   22. MOBILE — menu, brand name, and getting the colorway picker
       next to the photo instead of half a screen below it
   ========================================================================== */

/* hamburger (hidden on desktop) */
.menu-btn{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;margin-left:.55rem;flex:none;
  border:1px solid #ffffff26;border-radius:12px;
  transition:border-color .2s, box-shadow .2s;
}
.menu-btn span{display:block;height:2px;width:18px;margin-inline:auto;background:var(--bone);border-radius:2px;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s}
.menu-btn:hover{border-color:var(--teal)}
.menu-btn[aria-expanded="true"]{border-color:var(--teal);box-shadow:var(--glow-teal)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* the slide-down panel */
.mnav{
  position:sticky;top:var(--nav-h);z-index:88;
  display:none;flex-direction:column;
  background:rgba(8,6,16,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid #ffffff1f;
  overflow:hidden;max-height:0;transition:max-height .32s cubic-bezier(.2,.8,.2,1);
}
.mnav.on{max-height:60vh}
.mnav a{
  padding:1.05rem var(--pad);border-bottom:1px solid #ffffff12;
  font-family:var(--font-display);font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,color .2s;
}
.mnav a:last-child{border-bottom:0}
.mnav a:active,.mnav a:hover{background:#ffffff0d;color:var(--teal)}

@media(max-width:760px){
  .menu-btn{display:flex}
  .mnav{display:flex}

  /* Three things across the bar: brand left, bag centre, menu hard right.
     space-between does the work, so no margin tricks are needed — and the
     desktop `.nav__links + .cart-btn` margin has to be cancelled or it wins
     on specificity and shoves everything back to the left. */
  .nav__in{gap:.5rem;justify-content:space-between}
  .nav__brand{gap:.5rem;min-width:0;flex:0 1 auto}
  .nav__links + .cart-btn{margin-left:0}
  .cart-btn{margin:0;flex:none;padding:.5rem .95rem;font-size:.68rem;gap:.45rem}
  .menu-btn{margin:0;flex:none}

  .nav__brandtext{display:inline!important;font-size:.62rem;letter-spacing:.1em;line-height:1.15}
  .nav__logo{height:24px}
}

/* only stack the two words when there genuinely isn't room for one line */
@media(max-width:360px){
  .nav__brandtext{font-size:.55rem;letter-spacing:.06em}
  .nav__brandtext b{display:block}
}

/* ---- colorway picker moves up under the photo on small screens ---- */
@media(max-width:899px){
  .buy{display:flex;flex-direction:column}
  .buy h1{order:1}
  .buy .sub{order:2}
  .buy .price-row{order:3}
  .buy .field--colorway{order:4}      /* straight after the price */
  .buy .cw-story{order:5}
  .buy .desc{order:6}
  .buy .field:not(.field--colorway){order:7}
  .buy .availability{order:8}
  .buy #addBtn{order:9}
  .buy .trust{order:10}

  /* make the swatches read as buttons you can hit with a thumb */
  .swatches{gap:.55rem}
  .swatch{padding:.62rem 1rem .62rem .62rem;font-size:.86rem}
  .swatch i{width:26px;height:26px}
}

/* the selected colorway name, said loudly enough to see at a glance */
.field--colorway .field__label b{
  color:var(--teal);letter-spacing:.16em;font-size:.72rem;
  text-shadow:0 0 12px rgba(33,243,224,.4);
}

/* brief pulse on the photo when you switch colorway, so the change registers */
@keyframes stageFlash{
  0%{box-shadow:0 30px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06),0 0 60px -10px var(--stage-glow,rgba(33,243,224,.35))}
  35%{box-shadow:0 30px 80px -30px rgba(0,0,0,.95),0 0 0 2px var(--stage-glow,rgba(33,243,224,.6)),0 0 90px 0 var(--stage-glow,rgba(33,243,224,.55))}
  100%{box-shadow:0 30px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06),0 0 60px -10px var(--stage-glow,rgba(33,243,224,.35))}
}
.gallery__stage.flash{animation:stageFlash .85s ease-out}

/* on a phone a 3:4 photo eats the whole screen — shorten it so the picker
   and the price can share the view with the hat */
@media(max-width:640px){
  .gallery__stage{aspect-ratio:4/5}
  .gallery__thumbs button{width:52px}
  .buy h1{font-size:clamp(2.1rem,11vw,3rem)}
  .buy .sub{margin:.5rem 0 .7rem}
  .price-row{margin-bottom:1rem}
  .buy .field--colorway{margin-bottom:1.1rem}
  .cw-story{margin-top:0}
}

/* ==========================================================================
   23. THE SALE IS LIVE — what replaces the countdown at zero
   ========================================================================== */
.live{
  margin:1.8rem auto 0;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  animation:liveIn .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes liveIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

.live__badge{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.75rem 1.5rem;border-radius:999px;
  font-family:var(--font-display);
  font-size:clamp(1.05rem,3.4vw,1.6rem);letter-spacing:.16em;text-transform:uppercase;
  color:#04141a;
  background:linear-gradient(100deg,var(--teal),var(--cyan));
  box-shadow:0 0 26px rgba(33,243,224,.55), 0 0 70px rgba(33,243,224,.28);
  animation:livePulse 2.2s ease-in-out infinite;
}
@keyframes livePulse{
  50%{box-shadow:0 0 34px rgba(33,243,224,.8), 0 0 100px rgba(33,243,224,.45)}
}
.live__badge i{
  width:11px;height:11px;border-radius:50%;background:#04141a;flex:none;
  animation:liveDot 1.1s ease-in-out infinite;
}
@keyframes liveDot{50%{opacity:.25;transform:scale(.7)}}

.live__line{
  margin:0;font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bone);text-shadow:0 2px 14px rgba(0,0,0,.8);
}

/* the kicker pill switches from magenta "while supplies last" to teal "live" */
.hero__kicker.is-live{
  border-color:rgba(33,243,224,.55);
  background:rgba(33,243,224,.1);
  color:var(--teal);
}
.hero__kicker.is-live i{background:var(--teal);box-shadow:var(--glow-teal)}

@media(prefers-reduced-motion:reduce){
  .live__badge,.live__badge i{animation:none}
}

/* ==========================================================================
   24. COUPON CODE
   ========================================================================== */
.promo{margin:.4rem 0 1rem}
.promo__label{
  margin:0 0 .5rem;font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--smoke);
}

.promo__form{display:flex;gap:.5rem}
.promo__form input{
  flex:1;min-width:0;padding:.7rem .9rem;border-radius:10px;
  background:#ffffff0d;border:1px solid #ffffff26;color:var(--bone);
  font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;
}
.promo__form input::placeholder{color:#ffffff44;letter-spacing:.04em;text-transform:none}
.promo__form input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px rgba(33,243,224,.2)}
.promo__apply{
  flex:none;padding:.7rem 1.1rem;border-radius:10px;
  border:1px solid #ffffff2b;color:var(--bone);
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:.2s;
}
.promo__apply:hover{border-color:var(--teal);color:var(--teal)}
.promo__apply[disabled]{opacity:.5;pointer-events:none}

.promo__applied{
  display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  padding:.6rem .8rem;border-radius:10px;
  background:rgba(33,243,224,.1);border:1px solid rgba(33,243,224,.38);
  font-size:.82rem;
}
.promo__applied b{color:var(--teal);letter-spacing:.1em}
.promo__applied em{font-style:normal;color:var(--smoke);margin-left:.35rem}
.promo__applied button{color:var(--smoke);font-size:.9rem;padding:.1rem .3rem;transition:color .2s}
.promo__applied button:hover{color:var(--magenta)}

.promo__msg{margin:.5rem 0 0;font-size:.76rem;min-height:1em;color:var(--gold)}
.promo__msg.ok{color:var(--teal)}

.totals .discount span:last-child{color:var(--teal)}

/* ==========================================================================
   THE SHOP GRID
   Cards for every product. A card has to say four things at a glance: what
   it is, what it costs, whether you can buy it, and when it turns up.
   ========================================================================== */
.anchor{display:block;position:relative;top:-84px;visibility:hidden}
.section--top{padding-top:clamp(7rem,14vh,10rem)}

.crumbs{padding:6.5rem 0 0}
.crumbs a{color:var(--smoke);text-decoration:none;font-size:.82rem;letter-spacing:.06em}
.crumbs a:hover{color:var(--bone)}

.shopgrid{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.shopempty{color:var(--smoke);text-align:center;padding:3rem 1rem;font-size:1.02rem}

.pcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,#ffffff0d,#ffffff05);border:1px solid #ffffff14;
  border-radius:18px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.pcard:hover{transform:translateY(-5px);border-color:#ffffff2e;box-shadow:0 22px 50px -28px rgba(0,0,0,.9)}
.pcard:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.pcard--quiet .pcard__shot img{filter:grayscale(.55) brightness(.72)}

.pcard__shot{position:relative;display:block;aspect-ratio:4/5;background:#0a0812;overflow:hidden}
.pcard__shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pcard:hover .pcard__shot img{transform:scale(1.045)}

.pcard__tags{position:absolute;left:.75rem;top:.75rem;display:flex;flex-wrap:wrap;gap:.35rem;max-width:calc(100% - 1.5rem)}
/* Tags sit on top of product photography, which can be any colour at all —
   a hat shot on white made the old translucent-yellow chip vanish. So every
   tag keeps a solid dark base and white text, and carries its meaning in a
   bright border and a coloured dot. Legible on a black hat or a white studio
   backdrop, and still obviously colour-coded. */
.tag{display:inline-flex;align-items:center;gap:.4rem;
  font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.34rem .66rem;border-radius:999px;backdrop-filter:blur(8px);
  background:rgba(10,8,18,.9);border:1px solid #ffffff2e;color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.45)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.tag--pre{border-color:rgba(178,150,255,.85)}
.tag--pre::before{background:#b296ff;box-shadow:0 0 8px #b296ff}
.tag--soon{border-color:rgba(255,206,84,.95)}
.tag--soon::before{background:#ffce54;box-shadow:0 0 8px #ffce54}
.tag--low{border-color:rgba(255,206,84,.95)}
.tag--low::before{background:#ffce54;box-shadow:0 0 8px #ffce54}
.tag--ends{border-color:rgba(255,122,89,.95)}
.tag--ends::before{background:#ff7a59;box-shadow:0 0 8px #ff7a59}
.tag--out{border-color:rgba(255,90,175,.9)}
.tag--out::before{background:#ff5aaf;box-shadow:0 0 8px #ff5aaf}

.pcard__body{display:flex;flex-direction:column;gap:.32rem;padding:1.05rem 1.15rem 1.15rem;flex:1}
.pcard__name{font-family:"Anton",system-ui,sans-serif;font-weight:400;font-size:1.3rem;letter-spacing:.02em;line-height:1.1}
.pcard__sub{color:var(--smoke);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.pcard__note{color:var(--smoke);font-size:.85rem;line-height:1.45;margin-top:.2rem}
.pcard__foot{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.9rem}
.pcard__price{font-weight:700;font-size:1.05rem}
.pcard__cta{color:var(--teal);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pcard--quiet .pcard__cta{color:var(--smoke)}

/* How it ships — right above the buy button, where people look for it. On a
   pre-order this is the most important text on the page: it is the answer to
   "when do I actually get this", and the honest caveat that goes with it. */
.shipnote{display:flex;flex-direction:column;gap:.3rem;margin:.2rem 0 .1rem;font-size:.86rem;color:var(--smoke);line-height:1.5}
.shipnote.is-preorder{color:#d9ccff;background:rgba(139,92,246,.12);border:1px solid rgba(167,139,250,.32);
  border-radius:10px;padding:.75rem .9rem}
.shipnote__eta{color:var(--bone);font-size:.92rem}
.shipnote__eta b{color:#fff}
.shipnote.is-preorder .shipnote__eta{color:#efe9ff}
.shipnote__caveat{font-size:.78rem;line-height:1.5;color:var(--smoke);opacity:.95}
.shipnote__ends{color:#ffb199;font-size:.86rem}
.shipnote__ends b{color:#fff}
.shipnote.is-preorder .shipnote__caveat{color:#b9a9e0}

.pcard__eta{font-size:.78rem;color:#cbb9ff;margin-top:.15rem}
.bagnote__caveat{display:block;font-style:normal;margin-top:.5rem;font-size:.76rem;line-height:1.5;color:#b9a9e0}

/* the bag's "these ship together" line */
.bagnote{margin:0 0 1rem;font-size:.84rem;line-height:1.5;color:#d9ccff;
  background:rgba(139,92,246,.12);border:1px solid rgba(167,139,250,.3);border-radius:10px;padding:.7rem .85rem}
.bagnote__tag{color:#fff;letter-spacing:.08em;text-transform:uppercase;font-size:.68rem;margin-right:.35rem}
.bagnote b{color:#fff}

/* Countdown and live banner when they're the page's own header rather than
   something sitting inside the hero. .count-wrap is inline-block so it can hug
   its contents in the hero — here it has to be a full-width centred block, or
   margin:auto has nothing to centre. */
.count-wrap--page,.live--page{
  display:block;width:100%;max-width:var(--maxw);
  margin:2.6rem auto 0;padding-inline:var(--pad);text-align:center;
}
.count-wrap--page .count{justify-content:center}
.count-wrap--page .count__note{margin-left:auto;margin-right:auto;max-width:38ch}
.live--page{margin-top:1.8rem}
.live--page .live__line{margin-left:auto;margin-right:auto}

@media(max-width:640px){
  .crumbs{padding-top:5.5rem}
  .shopgrid{gap:1rem}
  .pcard__name{font-size:1.16rem}
}

/* specs on a product page, where there's no craft photo beside them */
.specs--wide{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));max-width:none}