/*
Theme Name: Sneaker ID
Theme URI: https://www.nzimasolutions.co.za/
Author: Sneaker ID
Description: Cinematic scroll-scrubbed video hero, SNKID particle-dissolve section, working cart drawer, quick-view "ID card" modal, and a FluentCRM-ready newsletter popup — built for the Sneaker ID one-pager and packaged as a theme so the same UI components can be reused across the rest of the site.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: sneakerid
*/

:root{
  /* dark tokens — used only inside the .cine video hero */
  --ink:#08080a;
  --panel:#111113;
  --panel-2:#17171a;
  --line: rgba(255,255,255,0.09);
  --paper:#f3f1ea;
  --muted: rgba(243,241,234,0.6);

  /* light tokens — used everywhere below the hero, à la reference */
  --bg:#f4f3fb;
  --bg-soft:#ebe9f6;
  --card:#ffffff;
  --text:#14141c;
  --text-muted:#6b6b78;
  --line-light: rgba(20,20,28,0.08);
  --shadow-card: 0 24px 50px -24px rgba(20,20,40,0.18);

  --amber:#ff5a1f;
  --amber-dim: rgba(255,90,31,0.14);
  --gold: #cfae6b;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--text); font-family:'Inter',sans-serif; overflow-x:hidden;
  /* Gradient mesh instead of a flat fill — three soft, barely-there light
     sources that drift the page from a warm top-left glow to a cool
     lower field, so the light-mode content has the same depth the dark
     cinematic hero has, instead of reading as a flat CSS color once you
     scroll past it. */
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 700px at 8% -8%, rgba(255,140,80,0.10), transparent 60%),
    radial-gradient(900px 600px at 96% 18%, rgba(180,170,255,0.14), transparent 55%),
    radial-gradient(1200px 800px at 50% 100%, rgba(160,150,235,0.10), transparent 60%);
  background-attachment:fixed;
}
::selection{ background:var(--amber); color:#fff; }
/* ---------- FILM GRAIN — ties the flat light sections back to the
   atmosphere of the cinematic hero, so scrolling past it doesn't feel
   like stepping onto a different, flatter site. Fixed, tiny, tiled,
   and low-opacity so it reads as texture, not noise. ---------- */
.grain{
  position:fixed; inset:-200px; z-index:998; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
@media (pointer:coarse){ .grain{ opacity:0.025; } }
/* ---------- CUSTOM SCROLLBAR ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(20,20,28,0.18); border-radius:100px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--amber); }
html{ scrollbar-color:rgba(20,20,28,0.25) transparent; scrollbar-width:thin; }
h1{ font-family:'Anton', sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:0.01em; margin:0; }
h2{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; letter-spacing:-0.01em; margin:0; color:var(--text); }
h3{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; margin:0; color:var(--text); }
h2 .accent{ color:var(--amber); font-style:italic; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1280px; margin:0 auto; padding:0 40px; }
@media (max-width:720px){ .wrap{ padding:0 20px; } }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- PRELOADER ---------- */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--amber);
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:0 clamp(20px,4vw,56px) 64px;
}
.preloader-num{
  font-family:'Fraunces',Georgia,serif; font-weight:300; color:#fff;
  font-size:clamp(80px,14vw,190px); line-height:1; letter-spacing:-0.02em;
  position:absolute; left:clamp(20px,4vw,56px); bottom:74px;
}
.preloader-num .pct{ font-size:.4em; vertical-align:top; }
.preloader-num-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.preloader-num-inner{ display:inline-block; will-change:transform; }
.preloader-bar{
  position:absolute; left:clamp(20px,4vw,56px); right:clamp(20px,4vw,56px); bottom:56px;
  height:2px; background:rgba(255,255,255,0.35); border-radius:2px; overflow:hidden;
}
.preloader-bar-fill{ height:100%; width:0%; background:#fff; }

/* ---------- CUSTOM CURSOR (desktop / fine-pointer only) ---------- */
.cursor-dot, .cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:999; border-radius:50%; transform:translate(-50%,-50%); will-change:transform; }
.cursor-dot{ width:6px; height:6px; background:var(--amber); }
.cursor-ring{ width:38px; height:38px; border:1px solid rgba(255,90,31,0.5); transition:width .25s ease, height .25s ease, border-color .25s ease, background .25s ease; }
.cursor-ring.hovered{ width:64px; height:64px; background:rgba(255,90,31,0.08); border-color:var(--amber); }
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button{ cursor:none; }
@media (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none !important; } }

/* ---------- NAV ---------- */
header{ position:fixed; top:0; left:0; right:0; z-index:300; padding:22px 0; transition: padding .4s ease; }
header .wrap{ transition: background .4s ease, box-shadow .4s ease, border-radius .4s ease, padding .4s ease, max-width .4s ease; border-radius:100px; }
nav{ display:flex; align-items:center; justify-content:space-between; }
.logo{ font-family:'Anton',sans-serif; font-size:20px; letter-spacing:0.02em; color:#fff; transition:color .4s ease; }
.logo span{ color:var(--amber); }
/* !important here is deliberate: this is critical header chrome that
   must never lose a specificity fight against a plugin's generic "img"
   rule (WooCommerce's own default stylesheet did exactly that — see
   functions.php — this is belt-and-braces in case anything else ever does). */
.logo-img{ height:42px !important; width:auto !important; display:block; }
.logo-img--dark{ width:100px !important; height:auto !important; }
.logo-img--light{ display:none; }
header.light-nav .logo-img--dark{ display:none; }
header.light-nav .logo-img--light{ display:block; }
.navlinks{ display:flex; gap:32px; font-size:13px; font-weight:600; color:rgba(255,255,255,0.75); transition:color .4s ease; list-style:none; margin:0; padding:0; }
.navlinks a{ position:relative; padding-bottom:4px; transition:color .25s; }
.navlinks a:hover, .navlinks a:focus-visible{ color:#fff; }
.nav-cta{
  display:inline-flex; align-items:center; gap:10px; background:#fff; color:#0a0a0d;
  padding:8px 8px 8px 22px; font-size:13px; font-weight:700; border-radius:100px; white-space:nowrap;
  transition: transform .25s, background .4s, color .4s;
}
.nav-cta .bubble{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--amber); color:#fff; }
.nav-cta{ will-change:transform; }
.burger{ display:none; }

/* Past the hero: page is light, so the nav becomes a floating white pill */
header.light-nav{ padding:16px 0; }
header.light-nav .wrap{
  max-width:1180px; background:#fff; box-shadow:0 12px 40px -14px rgba(20,20,40,0.25);
  padding:10px 14px 10px 26px; border:1px solid var(--line-light);
}
header.light-nav .logo{ color:var(--text); }
header.light-nav .navlinks{ color:var(--text-muted); }
header.light-nav .navlinks a:hover{ color:var(--text); }
header.light-nav .nav-cta{ background:#14141c; color:#fff; }

/* Non-homepage pages: a plain bar instead of the floating "sticky" pill
   above — there's no dark hero underneath these pages to transition away
   from. position:relative (not fixed) means it scrolls away with the
   page rather than staying pinned, and the logo/nav read as true black
   rather than the homepage's scrolled-state dark-grey/near-black. */
header.header-static{
  position:relative; padding:20px 0; background:transparent; border-bottom:1px solid var(--line-light);
}
header.header-static .wrap{ max-width:1280px; background:none; box-shadow:none; border:none; border-radius:0; }
header.header-static .logo{ color:#000; }
header.header-static .navlinks{ color:#000; }
header.header-static .navlinks a:hover{ color:var(--amber); }
header.header-static .nav-cta{ background:#14141c; color:#fff; }

@media (max-width:900px){
  .navlinks{ display:none; }
  /* Frosted-glass circular icon button (matching .hero-card's treatment)
     instead of a text pill — holds a 3-bar icon that morphs to an X. */
  .burger{
    display:block; position:relative; width:44px; height:44px; padding:0; flex-shrink:0;
    background:rgba(20,20,24,0.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.16); border-radius:50%; cursor:pointer;
  }
  header.light-nav .burger, header.header-static .burger{ background:rgba(20,20,28,0.05); border-color:var(--line-light); }
  /* Stepped, decreasing-width bars (left-aligned) rather than three equal
     lines. The outer two grow to match width as they rotate into the X so
     the open state still reads as a clean, even cross. */
  .burger-bars{ position:relative; display:block; width:18px; height:13px; margin:0 auto; }
  .burger-bars span{
    position:absolute; left:0; height:2px; border-radius:2px; background:#fff;
    transition:transform .4s cubic-bezier(.76,0,.24,1), opacity .25s ease,
               top .4s cubic-bezier(.76,0,.24,1), width .4s cubic-bezier(.76,0,.24,1);
  }
  header.light-nav .burger-bars span{ background:var(--text); }
  header.header-static .burger-bars span{ background:#000; }
  .burger-bars span:nth-child(1){ top:0; width:100%; }
  .burger-bars span:nth-child(2){ top:5.5px; width:70%; }
  .burger-bars span:nth-child(3){ top:11px; width:45%; }
  .burger.open .burger-bars span:nth-child(1){ top:5.5px; width:100%; transform:rotate(45deg); }
  .burger.open .burger-bars span:nth-child(2){ opacity:0; transform:scaleX(0); }
  .burger.open .burger-bars span:nth-child(3){ top:5.5px; width:100%; transform:rotate(-45deg); }
}

/* ---------- MOBILE SIDE MENU (opens from the burger button) ----------
   Same beats as the reference: staggered nav items that flip up into
   view (rotateX, per-item delay via --index), an arrow icon that fades
   in alongside each, and a social row at the foot — rebuilt natively
   instead of porting the Elementor-jQuery plugin it came from, which
   depends on markup/classes (.elementor-widget-button, .e-con, etc.)
   that don't exist in this file. */
.mmenu-overlay{
  position:fixed; inset:0; z-index:250; background:rgba(8,8,10,0.6); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.mmenu-overlay.open{ opacity:1; pointer-events:auto; }
.mmenu{
  position:fixed; top:86px; right:16px; z-index:251; width:min(300px,84vw);
  background:#1c1c22; border:1px solid rgba(255,255,255,0.18); border-radius:24px;
  padding:20px 18px 22px; box-shadow:0 30px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.4);
  transform-origin:top right; transform:scale(0.9); opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .4s cubic-bezier(.76,0,.24,1);
}
.mmenu.open{ opacity:1; transform:scale(1); pointer-events:auto; }
.mmenu-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.mmenu-links li{ perspective:600px; }
.mmenu-links a{
  display:flex; align-items:center; gap:10px; padding:11px 6px; color:#fff; font-size:17px; font-weight:700;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.mmenu-icon{
  display:inline-flex; width:15px; height:15px; color:var(--amber); flex-shrink:0;
  opacity:0; transform:translateX(-6px); transition:opacity .3s ease, transform .3s ease;
}
.mmenu-icon svg{ width:100%; height:100%; }
.mmenu-text{
  display:inline-block; opacity:0; transform:rotateX(90deg) translateY(14px); transform-origin:center bottom;
  transition:opacity .3s ease, transform .5s cubic-bezier(.215,.61,.355,1);
}
.mmenu.open .mmenu-icon, .mmenu.open .mmenu-text{
  opacity:1; transform:none;
  transition-delay: calc(var(--index) * 0.07s + .15s);
}
.mmenu-social{ display:flex; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.08); }
.mmenu-social a{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.14);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.7);
  transition:border-color .2s, color .2s;
}
.mmenu-social a:hover{ border-color:var(--amber); color:var(--amber); }
.mmenu-social svg{ width:15px; height:15px; }
@media (min-width:901px){ .mmenu-overlay, .mmenu{ display:none; } }

/* ---------- CINEMATIC SCROLL-SCRUBBED VIDEO ---------- */
/* One tall wrapper; the video inside never "plays" on its own — JS sets
   video.currentTime directly from scroll position, so scrolling down
   advances the clip and scrolling up reverses it, frame for frame. */
/* Sticky video only fills the first 500vh of this 600vh box (its own 100vh
   height counts against the dwell); the last 100vh always exposes this flat
   background once the video has scrolled off. The video fades to solid
   black (via .cine-blackout) before that happens, so this can just match
   that same black with zero seam instead of chasing the footage's color. */
.cine{ position:relative; height:600vh; background:#08080a; } /* tune height = more vh -> slower scrub per second of footage */
.cine-stick{ position:sticky; top:0; height:100vh; overflow:hidden; background:#000; }
.cine video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* On a tall portrait phone, a landscape clip can't fill the full-bleed
   100vh box AND show the whole uncropped frame at once — that's a hard
   geometry mismatch, not a setting. Sized a bit smaller than earlier
   attempts (2:3 instead of 3:5) specifically so there's more black space
   around it for a longer, more generous gradient to dissolve into.
   The vignette is a mask-image on the video itself, not a separate
   overlay element or box-shadow — iOS composites <video> on its own
   hardware layer that sits above sibling elements regardless of DOM
   order/z-index, so nothing painted "on top of" it (an overlay div, a
   box-shadow) reliably renders — which is why both of those were
   invisible despite not breaking playback. mask-image instead fades the
   video's own alpha at the edges, revealing .cine-stick's black
   background genuinely behind it — it doesn't need to composite above
   anything, so it isn't subject to that layering quirk. */
@media (max-width:860px){
  .cine video{
    inset:auto; top:50%; left:0; right:0; bottom:auto;
    width:100%; height:auto; aspect-ratio:2/3;
    transform:translateY(-50%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 46%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 46%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
  }
}
.cine-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.45)); pointer-events:none; }

/* Fades the video itself to solid black right before it scrolls off (the
   sticky wrapper releases ~5/6 of the way through this section) — rather
   than trying to match a flat CSS color to a filmed frame, which can never
   be pixel-perfect and always leaves a faint seam, this makes the footage
   genuinely become black before the handoff, so everything downstream
   (.cine's tail, #brand-cloud) can just BE black with zero visible edge. */
.cine-blackout{ position:absolute; inset:0; z-index:1; background:#08080a; opacity:0; pointer-events:none; }
.cine-dust{ position:absolute; inset:0; overflow:hidden; }
.cine-dust span{
  position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.5), rgba(255,255,255,0) 70%);
  animation: dustDrift 7s ease-in-out infinite;
}
.cine-dust span:nth-child(1){ width:5px; height:5px; top:20%; left:12%; animation-duration:8s; }
.cine-dust span:nth-child(2){ width:3px; height:3px; top:55%; left:28%; animation-duration:6.5s; animation-delay:-1.5s; }
.cine-dust span:nth-child(3){ width:6px; height:6px; top:35%; left:48%; animation-duration:9s; animation-delay:-3s; }
.cine-dust span:nth-child(4){ width:4px; height:4px; top:68%; left:62%; animation-duration:7.5s; animation-delay:-2s; }
.cine-dust span:nth-child(5){ width:3px; height:3px; top:25%; left:78%; animation-duration:6s; animation-delay:-4s; }
.cine-dust span:nth-child(6){ width:5px; height:5px; top:60%; left:88%; animation-duration:8.5s; animation-delay:-5s; }
@keyframes dustDrift{ 0%,100%{ transform:translateY(0) translateX(0); opacity:0.15; } 50%{ transform:translateY(-24px) translateX(8px); opacity:0.55; } }

.cine-overlay{ position:absolute; inset:0; z-index:2; }

/* ---------- HERO FLOATING CARDS (visible only before scrolling starts) ---------- */
#heroCards{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.hero-card{
  position:absolute; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:18px;
  background:rgba(20,20,24,0.55); border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 40px -18px rgba(0,0,0,0.6); color:#fff;
}
.hero-card .ic{ width:36px; height:36px; border-radius:10px; background:rgba(255,90,31,0.18); color:var(--amber); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.hero-card b{ display:block; font-size:14px; font-family:'Plus Jakarta Sans',sans-serif; }
.hero-card span{ font-size:11px; color:rgba(255,255,255,0.6); }
.hero-card.thumb img{ width:44px; height:44px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.hc-1{ top:28%; left:8%; }
.hc-2{ top:26%; right:8%; }
.hc-3{ bottom:20%; left:11%; }
@media (max-width:860px){
  .hero-card{ padding:10px 12px; max-width:200px; }
  /* Both hidden on mobile — the smaller screen doesn't have room for
     floating trust cards without them crowding the door graphic. */
  .hc-1{ display:none; }
  .hc-2{ display:none; }
  .hc-3{ display:none; }
}

/* ---------- WELCOME CARDS (once the hero cards have cleared, timed to the video's own seconds) ---------- */
#welcomeCards{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.welcome-card{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.welcome-card.in{ opacity:1; transform:translateY(0); }
.wc-1{ top:26%; right:8%; }
.wc-2{ bottom:20%; left:11%; }
@media (max-width:860px){ .wc-1{ top:20%; right:4%; } .wc-2{ bottom:16%; left:4%; } }

/* ---------- SNKID CLOUD DISSOLVE (between the box animation and the rest of the page) ---------- */
/* Plain black — the cine hero above now fades its own video to this same
   black (via .cine-blackout) before handing off, so there's nothing left
   to color-match here; both sides are already identical. */
#brand-cloud{ position:relative; height:340vh; background:#08080a; }
.cloud-stick{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cloud-word{ position:relative; z-index:2; display:flex; }
.cloud-word .cl{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(44px,9vw,140px); color:#fff; line-height:1; display:inline-block; }
.cloud-particles{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.cloud-particle{ position:absolute; top:0; left:0; border-radius:50%; opacity:0; background:radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0) 72%); }

/* Text extracts — once SNKID dissolves, a short pull-quote takes its place,
   then dissolves in turn and hands off to a second one, before the brand
   callouts close the section. Same blur+scale dissolve language as the
   wordmark so the handoffs feel like one continuous effect, not a cut. */
.cloud-extract{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 28px; opacity:0; filter:blur(14px); transform:scale(1.08); pointer-events:none;
}
.cloud-extract .extract-quote{ max-width:460px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:clamp(16px,1.8vw,20px); line-height:1.5; color:#fff; margin:0 auto 12px; }
.cloud-extract .extract-cite{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.cloud-extract .extract-stat{ font-family:'Anton',sans-serif; font-size:clamp(20px,2.6vw,28px); text-transform:uppercase; color:#fff; margin:0 auto 6px; line-height:1.2; }
.cloud-extract .extract-stat strong{ color:var(--amber); font-style:normal; }
@media (max-width:720px){ .cloud-extract{ padding:0 20px; } }

/* Brand proof callouts — the closing claims ("Verified. Rare. Yours."),
   staggered in after the extracts resolve. Scoped to this section only so
   the packaging callouts on the video hero above keep their vignette +
   shadow (they still need contrast to read over raw footage). */
.brand-callouts{ position:absolute; left:0; right:0; bottom:14%; z-index:3; display:flex; justify-content:center; gap:56px; padding:0 40px; flex-wrap:wrap; pointer-events:none; }
#brand-cloud .anatomy-callout{
  position:static; max-width:220px; padding:0; border:none; box-shadow:none; backdrop-filter:none;
  background:none;
}
#brand-cloud .anatomy-callout::before, #brand-cloud .anatomy-callout::after{ display:none; }
#brand-cloud .anatomy-callout p, #brand-cloud .anatomy-callout h3, #brand-cloud .anatomy-callout .idx{
  text-shadow:none;
}
#brand-cloud .anatomy-callout.in{ text-align:left; }
@media (max-width:720px){ .brand-callouts{ gap:28px; bottom:9%; } #brand-cloud .anatomy-callout{ max-width:150px; } }

/* Botanical corner frame — layered fern fronds echoing a nature-illustration
   border, rendered as translucent silhouettes so it sits with the dark
   cinematic look instead of literal grayscale-on-paper. */
.brand-frame{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.brand-frame .frond{ position:absolute; color:#fff; }
.brand-frame .frond svg{ display:block; width:100%; height:100%; }
.brand-frame .fr-tl{ top:-9%; left:-7%; width:190px; height:360px; transform:rotate(201deg); opacity:0.38; }
.brand-frame .fr-tl.f2{ top:1%; left:-3%; width:140px; height:270px; transform:rotate(196deg); opacity:0.2; }
.brand-frame .fr-tr{ top:-9%; right:-7%; width:190px; height:360px; transform:rotate(201deg) scaleX(-1); opacity:0.38; }
.brand-frame .fr-tr.f2{ top:1%; right:-3%; width:140px; height:270px; transform:rotate(196deg) scaleX(-1); opacity:0.2; }
.brand-frame .fr-bl{ bottom:-9%; left:-7%; width:190px; height:360px; transform:rotate(-21deg); opacity:0.38; }
.brand-frame .fr-bl.f2{ bottom:1%; left:-3%; width:140px; height:270px; transform:rotate(-16deg); opacity:0.2; }
.brand-frame .fr-br{ bottom:-9%; right:-7%; width:190px; height:360px; transform:rotate(-21deg) scaleX(-1); opacity:0.38; }
.brand-frame .fr-br.f2{ bottom:1%; right:-3%; width:140px; height:270px; transform:rotate(-16deg) scaleX(-1); opacity:0.2; }
@media (max-width:720px){
  .brand-frame .fr-tl,.brand-frame .fr-tr,.brand-frame .fr-bl,.brand-frame .fr-br{ width:110px; height:210px; }
  .brand-frame .fr-tl.f2,.brand-frame .fr-tr.f2,.brand-frame .fr-bl.f2,.brand-frame .fr-br.f2{ width:80px; height:155px; }
}
.cine-phase{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; opacity:0; padding:0 24px; pointer-events:none; }
.cine-phase.show{ pointer-events:auto; }

.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--amber); border:1px solid rgba(255,106,47,0.35); background:var(--amber-dim); padding:8px 16px; border-radius:100px; margin-bottom:26px; }
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 12px var(--amber); }
.cine-phase h1{ font-size:clamp(40px,7.5vw,104px); line-height:0.96; max-width:1000px; }
.cine-phase .outline{ -webkit-text-stroke:1.5px var(--paper); color:transparent; }
.cine-phase p.lede{ max-width:520px; margin:26px auto 0; color:var(--muted); font-size:16px; line-height:1.6; }
.cine-ctas{ display:flex; gap:16px; justify-content:center; margin-top:36px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:100px; font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; border:none; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.btn-primary{ background:var(--amber); color:#0a0a0d; }
.btn{ will-change:transform; }
.btn-primary:hover{ box-shadow:0 14px 30px -10px rgba(255,106,47,0.5); }
.btn-ghost{ background:transparent; color:var(--paper); border:1px solid var(--line); backdrop-filter:blur(6px); }
.btn-ghost:hover{ border-color:var(--paper); }

.cine-tagline{ font-size:clamp(24px,3.6vw,40px); font-family:'Anton',sans-serif; text-transform:uppercase; max-width:640px; }

/* phase 3: exploded-view callouts positioned around the shoe in-frame */
.cine-anatomy{ display:block; }
.anatomy-callout{
  position:absolute; max-width:230px; opacity:0; transform:translateY(14px); text-align:left;
  transition:opacity .6s ease, transform .6s ease;
  background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  border:none; border-radius:16px; padding:14px 16px; box-shadow:none;
}
.anatomy-callout.in{ opacity:1; transform:translateY(0); }
/* Exits upward as the blackout color transition begins — placed after .in
   so it wins the cascade once both classes are present on the same element. */
.anatomy-callout.out{ opacity:0; transform:translateY(-18px); transition:opacity .5s ease, transform .5s ease; }
.anatomy-callout .idx{
  font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--amber); text-transform:uppercase; display:block; margin-bottom:5px;
  text-shadow:none;
}
.anatomy-callout h3{ font-size:14px; margin-bottom:8px; color:#fff; text-shadow:none; }
.anatomy-callout p{ font-size:10px; color:var(--muted); line-height:1.45; margin:0; text-shadow:none; }
.anatomy-callout.right{ text-align:right; }

/* leader line pointing from each callout toward the shoe — a joint dot where
   it bends, an end dot at the target. */
.angled-tech-line{ position:absolute; top:50%; transform:translateY(-50%); pointer-events:none; line-height:0; }
.angled-tech-line svg{ display:block; width:150px; height:auto; overflow:visible; }
.leader-path{ stroke:var(--amber); stroke-width:1.5; }
.leader-dot{ fill:var(--amber); filter:drop-shadow(0 0 5px rgba(255,90,31,0.85)); }
.ac-1 .angled-tech-line,.ac-2 .angled-tech-line,.ac-3 .angled-tech-line{ left:100%; }
.ac-4 .angled-tech-line,.ac-5 .angled-tech-line,.ac-6 .angled-tech-line{ right:100%; transform:translateY(-50%) scaleX(-1); }

.ac-1{ top:calc(28% - 10px); left:13%;  width:230px; }
.ac-2{ top:48%; left:10%;  width:220px; }
.ac-3{ top:calc(68% + 10px); left:13%;  width:230px; }
.ac-4{ top:calc(28% - 10px); right:13%; width:230px; }
.ac-5{ top:48%; right:10%; width:220px; }
.ac-6{ top:calc(68% + 10px); right:13%; width:230px; }
@media (max-width:900px){
  /* Full-width instead of side-anchored — there's no room for 6 boxes
     scattered around the edges on a narrow phone. JS shows only one at a
     time here (see anatomyCallouts stagger logic), crossfading rather
     than accumulating like the desktop corner layout does. */
  .anatomy-callout{
    max-width:none; width:auto; left:16px; right:16px;
    font-size:13px; padding:14px 16px; text-align:left;
  }
  .anatomy-callout.right{ text-align:left; }
  .anatomy-callout h3{ font-size:15px; }
  .anatomy-callout p{ font-size:12px; }
  /* The line no longer points off to a side (nothing to point at once
     full-width) — sits as a small decorative accent under the text instead. */
  .angled-tech-line{ display:block; position:static; top:auto; transform:none; margin-top:10px; }
  .angled-tech-line svg{ width:70px; }
  .ac-1 .angled-tech-line,.ac-2 .angled-tech-line,.ac-3 .angled-tech-line{ left:auto; }
  .ac-4 .angled-tech-line,.ac-5 .angled-tech-line,.ac-6 .angled-tech-line{ right:auto; transform:scaleX(-1); }
}

.cine-scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.cine-scroll-cue .line{ width:1px; height:36px; background:linear-gradient(var(--amber), transparent); animation:scrolldown 1.8s ease-in-out infinite; }
@keyframes scrolldown{ 0%{opacity:0; transform:scaleY(.3);} 50%{opacity:1; transform:scaleY(1);} 100%{opacity:0; transform:scaleY(.3) translateY(10px);} }

/* Fills the dead-tail gap after the sticky video releases (the final 100vh
   of .cine's 600vh box, where nothing is pinned) — position:fixed since
   it isn't inside any sticky container; a dedicated ScrollTrigger scoped
   to exactly that range shows/hides it and drives the ring's fill. */
.cine-tail-cue{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:50;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
.tail-cue-glow{
  position:absolute; top:50%; left:50%; width:140px; height:140px;
  transform:translate(-50%,-50%); border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(255,90,31,0.16), rgba(255,90,31,0) 72%);
  animation:tailGlowPulse 2.6s ease-in-out infinite;
}
.tail-cue-ring{ position:relative; width:64px; height:64px; animation:tailFloat 2.6s ease-in-out infinite; }
.tail-cue-ring svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.tail-cue-ring .ring-track{ stroke:rgba(255,255,255,0.14); }
.tail-cue-ring .ring-fill{
  stroke:var(--amber); stroke-dasharray:175.93; stroke-dashoffset:175.93;
  filter:drop-shadow(0 0 6px rgba(255,90,31,0.75));
  transition:stroke-dashoffset .1s linear;
}
.tail-cue-mouse{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:20px; height:32px; border-radius:100px; border:1.5px solid rgba(255,255,255,0.5);
}
.tail-cue-dot{
  position:absolute; top:6px; left:50%; width:3px; height:3px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 6px rgba(255,90,31,0.9);
  animation:tailDot 1.8s ease-in-out infinite;
}
.cine-tail-cue .tail-cue-label{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
@keyframes tailFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes tailGlowPulse{ 0%,100%{ opacity:0.6; transform:translate(-50%,-50%) scale(0.92); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); } }
@keyframes tailDot{ 0%{ transform:translate(-50%,0); opacity:0; } 25%{ opacity:1; } 70%{ opacity:0; } 100%{ transform:translate(-50%,14px); opacity:0; } }

/* ---------- MARQUEE ---------- */
.marquee{ border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light); padding:22px 0; overflow:hidden; white-space:nowrap; background:var(--card); position:relative; z-index:5; }
.marquee-track{ display:inline-flex; gap:48px; animation:marquee 28s linear infinite; }
.marquee-track span{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:18px; color:var(--text-muted); display:inline-flex; align-items:center; gap:48px; }
.marquee-track span em{ font-style:normal; color:var(--amber); }
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- SECTION SCAFFOLD ---------- */
section{ position:relative; padding:100px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.section-head .tag{ font-size:13px; font-weight:700; color:var(--amber); margin-bottom:14px; display:block; }
.section-head h2{ font-size:clamp(30px,4.4vw,48px); max-width:640px; line-height:1.1; }
.section-head p{ max-width:360px; color:var(--text-muted); font-size:15px; line-height:1.6; }
/* .reveal elements are shown by default; GSAP (if available) hides and animates them in via inline styles — see script at bottom */

/* ---------- CATEGORY BENTO ---------- */
.bento{ display:grid; grid-template-columns:1.1fr 1fr 1fr 0.9fr; gap:20px; margin-bottom:28px; perspective:1200px; }
.bento-tile{
  position:relative; border-radius:26px; padding:26px; min-height:170px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .35s ease, box-shadow .35s ease;
}
.bento-tile{ will-change:transform; transform-style:preserve-3d; }
.bento-tile .shine{ position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .3s; pointer-events:none;
  background:radial-gradient(circle 180px at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.35), transparent 70%); }
.bento-tile:hover .shine{ opacity:1; }
.bento-tile.orange{ background:linear-gradient(155deg,#ff6a2f,#ff3d1f); color:#fff; box-shadow:var(--shadow-card); }
.bento-tile.white{ background:var(--card); border:1px solid var(--line-light); box-shadow:0 14px 30px -20px rgba(20,20,40,0.12); }
.bento-tile.black{ background:#14141c; color:#fff; }
.bento-tile .ic{ width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:20px; background:rgba(255,255,255,0.18); }
.bento-tile.white .ic{ background:var(--amber-dim); color:var(--amber); }
.bento-tile h3{ font-size:17px; color:inherit; }
.bento-tile span.count{ font-size:12px; opacity:0.75; font-weight:600; }
.bento-tile.orange h3, .bento-tile.orange span.count{ color:#fff; }
@media (max-width:980px){ .bento{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .bento{ grid-template-columns:1fr; } }

/* ---------- DROPS GRID ----------
   Editorial asymmetric layout instead of a uniform 3-up: one wide hero
   product, a staggered trio underneath, and a full-width "closer" card —
   rather than every product getting identical treatment. */
.drops{ display:grid; grid-template-columns:repeat(6,1fr); gap:32px; perspective:1200px; }
.drops .card:nth-child(1){ grid-column:span 4; }
.drops .card:nth-child(2){ grid-column:span 2; align-self:start; }
.drops .card:nth-child(3){ grid-column:span 2; }
.drops .card:nth-child(4){ grid-column:span 2; margin-top:44px; }
.drops .card:nth-child(5){ grid-column:span 2; }
.drops .card.wide{ grid-column:span 6; display:flex; align-items:center; gap:36px; padding:28px; }
.drops .card.wide .imgbox{ flex:1.15; margin-bottom:0; aspect-ratio:16/10; }
.drops .card.wide .card-info{ flex:1; }
.drops .card.wide h3{ font-size:26px; margin-bottom:10px; }
.drops .card.wide .meta{ margin-bottom:16px; }
@media (max-width:980px){
  .drops{ grid-template-columns:repeat(2,1fr); }
  .drops .card:nth-child(1),.drops .card:nth-child(2),.drops .card:nth-child(3),.drops .card:nth-child(4),.drops .card:nth-child(5){
    grid-column:span 1; margin-top:0; align-self:stretch;
  }
  .drops .card.wide{ grid-column:span 2; flex-direction:column; align-items:stretch; }
  .drops .card.wide .imgbox{ aspect-ratio:1/1; }
}
@media (max-width:640px){ .drops{ grid-template-columns:1fr; } .drops .card.wide{ grid-column:span 1; } }
.card{ position:relative; background:var(--card); border:1px solid var(--line-light); border-radius:26px; padding:20px; overflow:hidden; box-shadow:0 20px 40px -28px rgba(20,20,40,0.18); transition:box-shadow .4s; will-change:transform; transform-style:preserve-3d; }
.card:hover{ box-shadow:var(--shadow-card); }
.card .shine{ position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .3s; pointer-events:none; z-index:3;
  background:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.5), transparent 70%); }
.card:hover .shine{ opacity:1; }
.card .imgbox{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:1/1; background:var(--bg-soft); margin-bottom:18px; }
.card .imgbox img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.card:hover .imgbox img{ transform:scale(1.06); }
.card .badge{ position:absolute; top:12px; left:12px; background:var(--amber); color:#fff; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:6px 12px; border-radius:100px; z-index:2; }
.card h3{ font-size:18px; margin-bottom:6px; }
.card .meta{ display:flex; justify-content:space-between; align-items:center; color:var(--text-muted); font-size:13px; }
.card .price{ color:var(--text); font-weight:800; font-size:15px; }

/* ---------- STORY (light, two-column card) ---------- */
/* Editorial asymmetric rework: the section itself carries a huge, barely-
   visible index numeral (the way a print magazine spread would number a
   feature), and the media column bleeds past the container's right edge
   instead of sitting neatly inside it — that single break in the grid is
   what makes a page feel art-directed rather than templated. */
.story{ position:relative; overflow:hidden; }
.story::before{
  content:"02"; position:absolute; top:-0.12em; left:clamp(-10px,-1vw,10px); z-index:0;
  font-family:'Fraunces',Georgia,serif; font-weight:300; font-size:clamp(140px,22vw,340px);
  line-height:1; color:var(--text); opacity:0.035; pointer-events:none; user-select:none;
}
.story-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.25fr 1fr; gap:0; align-items:center; }
@media (max-width:900px){ .story-grid{ grid-template-columns:1fr; gap:36px; } }
.story-media{ position:relative; z-index:0; aspect-ratio:4/5; }
/* The clipping/mask/shadow live on this inner frame rather than
   .story-media itself, so .story-chip below — a sibling, not a child —
   can overhang the frame's edge without .story-media's own
   overflow:hidden clipping it off. */
.story-media-frame{
  position:absolute; inset:0; border-radius:32px; overflow:hidden; box-shadow:var(--shadow-card);
  /* Fades the image's own right edge into the page background rather
     than cropping it — the copy column then pulls left on top of that
     faded zone (see .story-copy), so the text visibly overlaps the
     image instead of sitting in a clean, safe second column. */
  -webkit-mask-image:linear-gradient(to right, #000 55%, transparent 95%);
  mask-image:linear-gradient(to right, #000 55%, transparent 95%);
}
@media (max-width:900px){ .story-media-frame{ -webkit-mask-image:none; mask-image:none; } }
.story-media-frame img{ width:100%; height:100%; object-fit:cover; }
.tag-num{
  font-family:'Inter',sans-serif; font-weight:800; color:var(--amber);
  font-size:12px; letter-spacing:.14em; margin-right:12px; opacity:0.85;
}
.story-quote{
  font-family:'Fraunces',Georgia,serif; font-weight:300; font-style:italic; color:var(--text);
}
.story-chip{
  position:absolute; z-index:1; left:-20px; bottom:36px; background:var(--card); border-radius:20px; padding:16px 20px;
  box-shadow:0 20px 40px -18px rgba(20,20,40,0.3); display:flex; align-items:center; gap:12px;
}
.story-chip .ic{ width:40px; height:40px; border-radius:12px; background:var(--amber-dim); color:var(--amber); display:flex; align-items:center; justify-content:center; font-size:18px; }
.story-chip b{ display:block; font-size:18px; font-family:'Plus Jakarta Sans',sans-serif; }
.story-chip span{ font-size:12px; color:var(--text-muted); }
@media (max-width:520px){ .story-chip{ left:12px; } }
.story-copy{ position:relative; z-index:2; margin-left:clamp(-150px,-9vw,-60px); }
@media (max-width:900px){ .story-copy{ margin-left:0; } }
.story .tag{ font-size:13px; font-weight:700; color:var(--amber); display:block; margin-bottom:16px; }
.story h2{ font-size:clamp(28px,4vw,42px); margin-bottom:18px; line-height:1.15; }
.story p{ color:var(--text-muted); font-size:16px; line-height:1.7; max-width:480px; }
.story-stats{ display:flex; gap:40px; margin-top:36px; flex-wrap:wrap; }
.story-stats div b{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:30px; color:var(--text); }
.story-stats div span{ font-size:12px; color:var(--text-muted); font-weight:600; }

/* ---------- DARK PANEL (process / stats — contrast band like the reference) ---------- */
.dark-panel{ position:relative; overflow:hidden; background:linear-gradient(165deg,#17171d,#0b0b0f); border-radius:36px; padding:64px 48px; color:#fff; }
.dark-panel::before{
  content:""; position:absolute; top:-160px; right:-140px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,90,31,0.22), transparent 70%); pointer-events:none;
}
.dark-panel::after{
  content:""; position:absolute; bottom:-180px; left:-120px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(120,110,220,0.16), transparent 70%); pointer-events:none;
}
.dark-panel > *{ position:relative; z-index:1; }
@media (max-width:720px){ .dark-panel{ padding:44px 24px; border-radius:26px; } }
.dark-panel .section-head h2, .dark-panel .section-head p{ color:#fff; }
.dark-panel .section-head p{ color:rgba(255,255,255,0.6); }
.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:48px; }
@media (max-width:980px){ .features{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .features{ grid-template-columns:1fr; } }
.feature{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09); border-radius:20px; padding:26px 22px; transition:transform .4s ease, background .4s; }
.feature:hover{ transform:translateY(-6px); background:rgba(255,255,255,0.08); }
.feature .num{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:13px; color:var(--amber); margin-bottom:16px; display:block; }
.feature h3{ font-size:17px; margin-bottom:8px; color:#fff; }
.feature p{ color:rgba(255,255,255,0.6); font-size:14px; line-height:1.6; margin:0; }
.dark-stats{ display:flex; gap:56px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,0.1); padding-top:36px; }
.dark-stats div b{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:38px; }
.dark-stats div span{ font-size:13px; color:rgba(255,255,255,0.55); }

/* ---------- TESTIMONIAL ---------- */
.testimonial{ background:var(--card); border:1px solid var(--line-light); border-radius:32px; padding:56px; display:grid; grid-template-columns:0.8fr 1.2fr; gap:46px; align-items:center; box-shadow:var(--shadow-card); will-change:transform; }
#reviews .wrap{ perspective:1400px; }
@media (max-width:860px){ .testimonial{ grid-template-columns:1fr; padding:32px; } }
.testimonial .photo{ border-radius:22px; overflow:hidden; aspect-ratio:4/5; }
.testimonial .photo img{ width:100%; height:100%; object-fit:cover; }
.testimonial .stars{ color:var(--amber); font-size:16px; letter-spacing:2px; margin-bottom:16px; }
.testimonial blockquote{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:clamp(20px,2.6vw,28px); line-height:1.35; margin:0 0 22px; color:var(--text); }
.testimonial cite{ font-style:normal; color:var(--text-muted); font-size:14px; }
.testimonial cite b{ color:var(--text); }

/* ---------- CTA / NEWSLETTER ---------- */
.cta-band{ text-align:center; }
.cta-card{ position:relative; overflow:hidden; background:linear-gradient(160deg,#fff,#fdf2ec); border:1px solid var(--line-light); border-radius:36px; padding:80px 40px; box-shadow:var(--shadow-card); }
.cta-card::before{
  content:""; position:absolute; top:-140px; left:50%; transform:translateX(-50%); width:520px; height:280px;
  background:radial-gradient(ellipse, rgba(255,90,31,0.16), transparent 70%); pointer-events:none;
}
.cta-card > *{ position:relative; z-index:1; }
.cta-band h2{ font-size:clamp(30px,5vw,58px); max-width:760px; margin:0 auto 20px; line-height:1.1; }
.cta-band p{ color:var(--text-muted); max-width:440px; margin:0 auto 36px; }
.form-row{ display:flex; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
.form-row input{ flex:1; min-width:220px; background:#fff; border:1px solid var(--line-light); border-radius:100px; padding:15px 22px; color:var(--text); font-size:14px; font-family:'Inter',sans-serif; }
.form-row input:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.form-row input::placeholder{ color:var(--text-muted); }

/* ---------- LOOKBOOK / COMMUNITY GALLERY ---------- */
.lookbook-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:18px; }
.lookbook-grid .lb-item:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.lookbook-grid .lb-item:nth-child(4){ grid-row:span 2; }
@media (max-width:980px){ .lookbook-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; } .lookbook-grid .lb-item:nth-child(4){ grid-row:span 1; } }
.lb-item{ position:relative; border-radius:22px; overflow:hidden; cursor:pointer; }
.lb-item img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.lb-item:hover img{ transform:scale(1.12); }
.lb-item .lb-caption{
  position:absolute; left:0; right:0; bottom:0; padding:18px 20px; color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,0.7), transparent 80%);
  transform:translateY(12px); opacity:0; transition:opacity .35s ease, transform .35s ease;
}
.lb-item:hover .lb-caption{ opacity:1; transform:translateY(0); }
.lb-item .lb-caption b{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; }
.lb-item .lb-caption span{ font-size:12px; opacity:0.8; }

/* ---------- BRAND STATEMENT MARQUEE ---------- */
.brand-marquee{ overflow:hidden; white-space:nowrap; padding:30px 0; }
.brand-marquee-track{ display:inline-flex; gap:56px; animation:marquee 22s linear infinite; }
.brand-marquee-track span{
  font-family:'Anton',sans-serif; font-size:clamp(48px,9vw,120px); text-transform:uppercase;
  -webkit-text-stroke:1.5px var(--text); color:transparent; letter-spacing:0.01em; display:inline-flex; align-items:center; gap:56px;
}
.brand-marquee-track span em{ font-style:normal; -webkit-text-stroke:0; color:var(--amber); }

/* ---------- NAV LINK ANIMATED UNDERLINE ---------- */
.navlinks a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:currentColor; transition:width .3s ease; }
.navlinks a:hover::after{ width:100%; }

a:focus-visible, button:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

/* ---------- NAV CART ICON ---------- */
.cart-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.25); cursor:pointer; transition:border-color .3s, color .3s, background .3s; }
header.light-nav .cart-btn{ color:var(--text); border-color:var(--line-light); }
header.header-static .cart-btn{ color:#000; border-color:var(--line-light); }
.cart-btn:hover{ background:rgba(255,90,31,0.12); border-color:var(--amber); color:var(--amber); }
.cart-badge{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px; border-radius:100px;
  background:var(--amber); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center;
  transform:scale(0); transition:transform .2s;
}
.cart-badge.show{ transform:scale(1); }

/* ---------- PRODUCT CARD: quick-actions, size picker, add-to-bag ---------- */
.wish-btn{
  position:absolute; top:12px; right:12px; z-index:4; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(4px); border:none; display:flex; align-items:center; justify-content:center;
  color:#14141c; cursor:pointer; box-shadow:0 6px 16px -6px rgba(20,20,40,0.35); transition:color .2s;
}
.wish-btn svg{ width:16px; height:16px; transition:fill .2s, stroke .2s; }
.wish-btn.active svg{ fill:var(--amber); stroke:var(--amber); }

.size-picker{
  position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
  padding:12px 10px; background:linear-gradient(0deg, rgba(0,0,0,0.72), rgba(0,0,0,0));
  transform:translateY(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.card:hover .size-picker{ transform:translateY(0); }
.size-picker button{
  min-width:28px; height:28px; padding:0 6px; border-radius:8px; border:1px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.08); color:#fff; font-size:12px; font-weight:700; cursor:pointer; transition:background .2s, border-color .2s;
}
.size-picker button:hover{ border-color:var(--amber); }
.size-picker button.selected{ background:var(--amber); border-color:var(--amber); color:#fff; }

.add-to-bag{
  margin-top:14px; width:100%; padding:12px; border-radius:100px; border:none; background:#14141c; color:#fff;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.02em; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; transition:background .25s;
}
.add-to-bag:hover{ background:var(--amber); }
.add-to-bag .check{ display:none; }
.add-to-bag.added{ background:#1a8a4a; }
.add-to-bag.added .label{ display:none; }
.add-to-bag.added .check{ display:inline; }

.cart-fly{ position:fixed; z-index:500; border-radius:14px; overflow:hidden; pointer-events:none; box-shadow:0 10px 30px -8px rgba(0,0,0,0.4); }
.cart-fly img{ width:100%; height:100%; object-fit:cover; }

/* ================================================================
   THE VAULT — real, working cart drawer
   A slide-over that actually holds what's been added: image, name,
   size, qty stepper, line price, remove — with a live subtotal and
   an empty state that stays on-brand rather than a placeholder.
   ================================================================ */
.drawer-overlay{
  position:fixed; inset:0; z-index:900; background:rgba(10,10,14,0.55); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.drawer-overlay.open{ opacity:1; pointer-events:auto; }
.vault{
  position:fixed; top:0; right:0; bottom:0; z-index:901; width:min(440px,100vw);
  background:var(--card); box-shadow:-30px 0 60px -20px rgba(10,10,20,0.35);
  transform:translateX(100%); transition:transform .45s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column;
}
.vault.open{ transform:translateX(0); }
.vault-head{ display:flex; align-items:center; justify-content:space-between; padding:26px 28px 20px; border-bottom:1px solid var(--line-light); }
.vault-head h3{ font-family:'Anton',sans-serif; font-weight:400; font-size:20px; text-transform:uppercase; letter-spacing:.02em; }
.vault-head span{ display:block; font-size:12px; color:var(--text-muted); margin-top:2px; font-weight:600; }
.vault-close{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-light); background:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); flex-shrink:0; transition:background .2s,border-color .2s; }
.vault-close:hover{ background:var(--bg-soft); border-color:var(--amber); color:var(--amber); }
.vault-items{ flex:1; overflow-y:auto; padding:10px 28px; display:flex; flex-direction:column; }
.vault-empty{ margin:auto; text-align:center; padding:40px 10px; color:var(--text-muted); }
.vault-empty .box-ic{ font-size:34px; margin-bottom:14px; }
.vault-empty b{ display:block; font-family:'Plus Jakarta Sans',sans-serif; color:var(--text); font-size:16px; margin-bottom:6px; }
.vault-empty p{ font-size:13px; margin:0 0 20px; }
.vault-line{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line-light); animation:lineIn .3s ease; }
@keyframes lineIn{ from{ opacity:0; transform:translateX(10px); } to{ opacity:1; transform:translateX(0); } }
.vault-line img{ width:74px; height:74px; border-radius:14px; object-fit:cover; flex-shrink:0; background:var(--bg-soft); }
.vault-line .vl-info{ flex:1; min-width:0; }
.vault-line h4{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:14px; margin:0 0 3px; }
.vault-line .vl-meta{ font-size:12px; color:var(--text-muted); margin-bottom:10px; }
.vault-line .vl-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.qty-stepper{ display:inline-flex; align-items:center; gap:0; border:1px solid var(--line-light); border-radius:100px; overflow:hidden; }
.qty-stepper button{ width:24px; height:24px; border:none; background:none; cursor:pointer; font-size:14px; color:var(--text); display:flex; align-items:center; justify-content:center; }
.qty-stepper button:hover{ background:var(--amber-dim); color:var(--amber); }
.qty-stepper span{ font-size:12px; font-weight:700; width:20px; text-align:center; }
.vl-price{ font-weight:800; font-size:14px; white-space:nowrap; }
.vl-remove{ background:none; border:none; color:var(--text-muted); font-size:11px; text-decoration:underline; cursor:pointer; padding:0; margin-top:6px; }
.vl-remove:hover{ color:var(--amber); }
.vault-foot{ padding:22px 28px 28px; border-top:1px solid var(--line-light); }
.vault-subrow{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-muted); margin-bottom:8px; }
.vault-subrow.total{ font-size:16px; color:var(--text); font-weight:800; margin-bottom:18px; }
.vault-subrow.total span:last-child{ font-family:'Plus Jakarta Sans',sans-serif; }
.vault-checkout{ width:100%; justify-content:center; }
.vault-note{ text-align:center; font-size:11px; color:var(--text-muted); margin-top:14px; display:flex; align-items:center; justify-content:center; gap:6px; }

/* ================================================================
   ID CARD — quick-view modal, styled as an authentication ticket
   (ties back to the brand: every pair gets verified before it ships)
   ================================================================ */
.idcard-overlay{
  position:fixed; inset:0; z-index:920; background:rgba(10,10,14,0.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.idcard-overlay.open{ opacity:1; pointer-events:auto; }
.idcard{
  position:relative; width:100%; max-width:760px; max-height:88vh; overflow-y:auto;
  background:var(--card); border-radius:28px; box-shadow:0 60px 100px -30px rgba(10,10,20,0.5);
  display:grid; grid-template-columns:1fr 1fr; transform:scale(0.94) translateY(14px); opacity:0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.idcard-overlay.open .idcard{ transform:scale(1) translateY(0); opacity:1; }
@media (max-width:720px){ .idcard{ grid-template-columns:1fr; max-height:92vh; } }
.idcard-media{ position:relative; background:var(--bg-soft); border-radius:28px 0 0 28px; overflow:hidden; min-height:280px; }
@media (max-width:720px){ .idcard-media{ border-radius:28px 28px 0 0; } }
.idcard-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.idcard-serial{ position:absolute; left:16px; bottom:16px; background:rgba(10,10,14,0.72); backdrop-filter:blur(6px); color:#fff; padding:9px 14px; border-radius:12px; font-size:11px; letter-spacing:.06em; display:flex; align-items:center; gap:8px; }
.idcard-serial .dot{ width:7px; height:7px; border-radius:50%; background:#3ddc72; box-shadow:0 0 8px #3ddc72; flex-shrink:0; }
.idcard-close{ position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; background:rgba(10,10,14,0.55); backdrop-filter:blur(6px); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.idcard-body{ padding:34px 34px 30px; display:flex; flex-direction:column; }
.idcard-tag{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); font-weight:700; margin-bottom:10px; }
.idcard-body h3{ font-family:'Syne',sans-serif; font-weight:800; font-size:24px; margin-bottom:6px; }
.idcard-price{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:20px; margin-bottom:18px; }
.idcard-stamp{ display:flex; align-items:center; gap:10px; background:var(--amber-dim); color:var(--amber); border-radius:14px; padding:12px 14px; font-size:12px; font-weight:700; margin-bottom:22px; }
.idcard-stamp .ic{ font-size:16px; }
.idcard-body .lbl, .pdp-info .lbl{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:10px; display:block; }
.idcard-sizes{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.idcard-sizes button{ min-width:44px; height:44px; padding:0 8px; border-radius:12px; border:1px solid var(--line-light); background:none; font-size:13px; font-weight:700; color:var(--text); cursor:pointer; transition:border-color .2s, background .2s, color .2s; }
.idcard-sizes button:hover{ border-color:var(--amber); }
.idcard-sizes button.selected{ background:var(--amber); border-color:var(--amber); color:#fff; }
.idcard-perf{ border-top:1px dashed var(--line-light); margin:auto 0 20px; padding-top:18px; font-size:12px; color:var(--text-muted); line-height:1.6; }
.idcard-add{ width:100%; justify-content:center; }
.idcard-hint{ font-size:11px; color:var(--text-muted); text-align:center; margin-top:4px; min-height:16px; }

/* ================================================================
   NEWSLETTER POPUP — surfaces once, after the visitor has actually
   scrolled down through the page and back up to the top. Deliberately
   built on the dark cinematic tokens (--ink/--panel/--paper) instead of
   the light site tokens used everywhere else below the hero, so it reads
   as its own premium "moment" rather than another light-mode card.
   ================================================================ */
.newsletter-overlay{
  position:fixed; inset:0; z-index:950; background:rgba(8,8,10,0.72); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.newsletter-overlay.open{ opacity:1; pointer-events:auto; }
.newsletter-modal{
  position:relative; width:100%; max-width:460px; overflow:hidden;
  background:linear-gradient(160deg,#18181c,#0b0b0d); border:1px solid rgba(255,255,255,0.08);
  border-radius:28px; box-shadow:0 60px 120px -30px rgba(0,0,0,0.65);
  padding:44px 40px 36px; text-align:center;
  transform:scale(0.92) translateY(18px); opacity:0;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.newsletter-overlay.open .newsletter-modal{ transform:scale(1) translateY(0); opacity:1; }
.newsletter-modal::before{
  content:""; position:absolute; top:-130px; right:-110px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,90,31,0.38), transparent 70%); pointer-events:none;
}
.newsletter-modal::after{
  content:""; position:absolute; bottom:-150px; left:-100px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,90,31,0.16), transparent 70%); pointer-events:none;
}
.nl-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:var(--muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s, color .2s; z-index:2;
}
.nl-close:hover{ background:rgba(255,255,255,0.14); color:#fff; }
.newsletter-modal .eyebrow{ position:relative; z-index:1; margin-bottom:22px; }
.nl-head{
  position:relative; z-index:1; font-family:'Fraunces',Georgia,serif; font-weight:300; font-style:italic;
  font-size:clamp(24px,3vw,30px); line-height:1.3; color:#fff; margin-bottom:14px;
}
.nl-copy{ position:relative; z-index:1; font-size:14px; line-height:1.65; color:var(--muted); margin-bottom:26px; }
.nl-form{ position:relative; z-index:1; display:flex; gap:10px; margin-bottom:14px; }
@media (max-width:420px){ .nl-form{ flex-direction:column; } }
.nl-input{
  flex:1; min-width:0; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14);
  color:#fff; font-size:14px; font-family:'Plus Jakarta Sans',sans-serif; border-radius:100px;
  padding:14px 20px; outline:none; transition:border-color .2s, background .2s;
}
.nl-input::placeholder{ color:rgba(243,241,234,0.4); }
.nl-input:focus{ border-color:var(--amber); background:rgba(255,255,255,0.08); }
.nl-submit{
  flex-shrink:0; background:var(--amber); color:#0a0a0d; border:none; font-weight:800; font-size:14px;
  font-family:'Plus Jakarta Sans',sans-serif; border-radius:100px; padding:14px 24px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; transition:transform .2s ease, background .2s ease, opacity .2s ease;
}
.nl-submit:hover{ transform:translateY(-2px); background:#ff6c38; }
.nl-submit:active{ transform:translateY(0); }
.nl-trust{
  position:relative; z-index:1; font-size:11px; color:rgba(243,241,234,0.45); display:flex;
  align-items:center; justify-content:center; gap:6px;
}
.nl-error{ position:relative; z-index:1; font-size:12px; color:#ff8a6a; margin:-4px 0 14px; min-height:14px; }
.nl-success{ position:relative; z-index:1; display:none; }
.newsletter-modal.sent .nl-form,
.newsletter-modal.sent .nl-error,
.newsletter-modal.sent .nl-trust,
.newsletter-modal.sent .nl-copy{ display:none; }
.newsletter-modal.sent .nl-success{ display:block; }
.nl-success .ic{
  width:52px; height:52px; border-radius:50%; background:var(--amber-dim); color:var(--amber);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 18px; font-weight:700;
}
.nl-success b{ color:#fff; }
.nl-success p{ font-size:14px; color:var(--muted); line-height:1.6; margin:0; }

/* ================================================================
   SHOP FILTER PILLS
   ================================================================ */
.shop-filters{ display:flex; gap:10px; flex-wrap:wrap; margin:28px 0 34px; }
.shop-filters button, .shop-filters a{
  display:inline-block; border:1px solid var(--line-light); background:var(--card); color:var(--text-muted); font-size:13px; font-weight:700;
  padding:10px 20px; border-radius:100px; cursor:pointer; transition:background .25s, color .25s, border-color .25s;
}
.shop-filters button:hover, .shop-filters a:hover{ border-color:var(--amber); color:var(--text); }
.shop-filters button.active, .shop-filters a.active{ background:#14141c; border-color:#14141c; color:#fff; }
.card.filtered-out{ display:none; }

/* ================================================================
   LIVE ACTIVITY TOAST — quiet social proof, bottom-left
   ================================================================ */
.live-toast{
  position:fixed; left:20px; bottom:20px; z-index:400; display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line-light); box-shadow:0 20px 40px -18px rgba(20,20,40,0.3);
  border-radius:16px; padding:13px 18px 13px 14px; max-width:300px;
  transform:translateY(140%); opacity:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
  pointer-events:auto;
}
.live-toast.show{ transform:translateY(0); opacity:1; }
.live-toast .lt-dot{ width:9px; height:9px; border-radius:50%; background:#3ddc72; box-shadow:0 0 0 4px rgba(61,220,114,0.16); flex-shrink:0; }
.live-toast .lt-text b{ display:block; font-size:13px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--text); line-height:1.35; }
.live-toast .lt-text span{ font-size:11px; color:var(--text-muted); }
.live-toast .lt-close{ background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:14px; padding:2px; margin-left:2px; flex-shrink:0; }
@media (max-width:520px){ .live-toast{ left:14px; right:14px; max-width:none; bottom:14px; } }

/* ================================================================
   EXPLORE THE SNEAKERHEAD — category tiles + spotlight wordmark
   Sits at the very end of the page: four tinted tiles, then a huge
   ghosted wordmark that a mouse-tracked spotlight sweeps color back
   into (amber, not the flat grey it starts as) before the footer.
   ================================================================ */
.explore-section{ padding:120px 0 40px; text-align:center; }
.explore-section h2{ font-size:clamp(26px,3.4vw,38px); margin-bottom:44px; }
.explore-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; text-align:left; }
@media (max-width:900px){ .explore-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .explore-grid{ grid-template-columns:1fr; } }
.explore-tile{
  position:relative; height:310px; border-radius:26px; overflow:hidden; display:flex; flex-direction:column;
  justify-content:space-between; padding:22px; box-shadow:0 30px 60px -30px rgba(20,20,40,0.35);
  transform-style:preserve-3d; will-change:transform; cursor:pointer;
}
.explore-tile .shine{ position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .3s; pointer-events:none; z-index:3;
  background:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.4), transparent 70%); }
.explore-tile:hover .shine{ opacity:1; }
.explore-tile .et-bg{ position:absolute; inset:0; z-index:0; }
.explore-tile .et-bg img{ width:100%; height:100%; object-fit:cover; }
.explore-tile .et-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,14,0.15), rgba(10,10,14,0.65) 85%); }
.explore-tile.et-app .et-bg{ background:linear-gradient(160deg,#e9e8f2,#d7d5e6); }
.explore-tile.et-app .et-bg::after{ display:none; }
.explore-tile.et-film .et-bg{ background:linear-gradient(155deg,#ff8a5c,#ff5a1f 60%,#ff3d1f); }
.explore-tile.et-film .et-bg::after{ display:none; }
.et-stat{ position:relative; z-index:2; color:#fff; font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; line-height:0.98; font-size:clamp(24px,2.4vw,30px); text-shadow:0 4px 20px rgba(0,0,0,0.25); }
.et-stat b{ color:#fff; }
.explore-tile.et-app .et-stat, .explore-tile.et-film .et-stat{ color:#fff; }
.et-pill{
  position:relative; z-index:2; align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:#14141c; font-size:13px; font-weight:700; padding:10px 10px 10px 18px; border-radius:100px;
}
.et-pill svg{ width:14px; height:14px; }
/* App mockup card: a small stack of skeleton phone rows, echoes the reference's flat UI silhouette */
.et-app-mock{ position:relative; z-index:2; margin:auto; width:70%; }
.et-app-mock .phone{ background:#fff; border-radius:20px; padding:16px; box-shadow:0 20px 40px -18px rgba(20,20,40,0.25); }
.et-app-mock .row{ height:9px; border-radius:5px; background:#e3e1ee; margin-bottom:10px; }
.et-app-mock .row.w60{ width:60%; }
.et-app-mock .row.w80{ width:80%; }
.et-app-mock .row.w40{ width:40%; background:var(--amber); opacity:0.7; }
/* Film card: orbiting text ring around a play button, spun with CSS */
.et-orbit{ position:relative; z-index:2; margin:14px auto 0; width:150px; height:150px; }
.et-orbit svg{ width:100%; height:100%; animation:orbitSpin 14s linear infinite; }
.et-orbit text{ font-family:'Plus Jakarta Sans',sans-serif; font-size:9.5px; font-weight:700; letter-spacing:2px; fill:rgba(255,255,255,0.85); text-transform:uppercase; }
@keyframes orbitSpin{ to{ transform:rotate(360deg); } }
.et-play{ position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,0.22); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; }
.et-play svg{ width:18px; height:18px; fill:#fff; margin-left:2px; }
@media (prefers-reduced-motion: reduce){ .et-orbit svg{ animation:none; } }

.spotlight-wrap{ position:relative; height:clamp(160px,22vw,300px); margin-top:60px; overflow:hidden; }
.spotlight-word{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Syne',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:-0.01em;
  font-size:clamp(52px,11vw,180px); line-height:1; white-space:nowrap; user-select:none;
}
.spotlight-word.base{ color:transparent; -webkit-text-stroke:0; background:linear-gradient(180deg, rgba(20,20,28,0.14), rgba(20,20,28,0.03)); -webkit-background-clip:text; background-clip:text; }
.spotlight-word.lit{
  color:transparent; background:linear-gradient(120deg,#ff8a3d,var(--amber) 55%,#ff3d1f);
  -webkit-background-clip:text; background-clip:text;
  -webkit-mask-image:radial-gradient(circle 220px at var(--sx,50%) var(--sy,50%), #000 0%, transparent 75%);
  mask-image:radial-gradient(circle 220px at var(--sx,50%) var(--sy,50%), #000 0%, transparent 75%);
}
@media (max-width:720px){ .spotlight-wrap{ height:140px; } }

/* ================================================================
   FOOTER — monogram-style brand mark, real logo restored below it,
   four link columns with an animated reveal arrow on hover (same
   language as the rest of the site's link/CTA affordances), and a
   bottom bar for legal links. Column headers are small tracked
   labels (matching .section-head .tag / .idx elsewhere) rather than
   bold headings, so the hierarchy reads as link groups, not titles.
   ================================================================ */
.site-footer{ padding:70px 0 40px; }
.footer-brand{ max-width:260px; }
.footer-brand .logo-img{ height:40px !important; width:auto !important; margin-bottom:18px; }
.footer-brand p{ color:var(--text-muted); font-size:13px; line-height:1.7; margin:0; }
.footer-cols{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:52px; padding-bottom:52px; border-bottom:1px solid var(--line-light); }
@media (max-width:900px){ .footer-cols{ grid-template-columns:1fr 1fr 1fr; row-gap:40px; } }
@media (max-width:600px){ .footer-cols{ grid-template-columns:1fr 1fr; } }
.footer-cols h4{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:18px; font-family:'Plus Jakarta Sans',sans-serif;
}
.footer-cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.footer-cols a{ font-size:14px; color:var(--text); opacity:0.8; display:inline-flex; align-items:center; transition:opacity .2s, color .2s; }
.footer-cols a:hover{ opacity:1; color:var(--amber); }
/* order:-1 puts the arrow before the text in the flex row; it starts
   collapsed to zero width so growing it on hover physically pushes the
   text to the right instead of just fading in place. */
.footer-cols a .arrow{
  order:-1; display:inline-block; opacity:0; width:0; margin-right:0; overflow:hidden; white-space:nowrap;
  transform:translateX(-6px);
  transition:opacity .3s ease, width .3s cubic-bezier(.16,1,.3,1), margin-right .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
}
.footer-cols a:hover .arrow{ opacity:1; width:16px; margin-right:8px; transform:translateX(0); }
.foot-social{ display:flex; gap:12px; margin-top:2px; }
.foot-social a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line-light); display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:border-color .2s, color .2s, background .2s; }
.foot-social a:hover{ border-color:var(--amber); color:var(--amber); background:var(--amber-dim); }
.foot-social svg{ width:15px; height:15px; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--text-muted); flex-wrap:wrap; gap:14px; }
.foot-bottom .foot-links{ display:flex; gap:26px; }
.foot-bottom .foot-links a:hover{ color:var(--amber); }

/* ================================================================
   GENERIC PAGE CONTENT — fallback template for anything without a
   more specific layout (see index.php): blog posts, search results,
   404s. The rest of the theme is a marketing one-pager, so this stays
   intentionally simple rather than trying to reuse the bento/card grid
   language for arbitrary WP content.
   ================================================================ */
/* Was 180px to clear the fixed header that used to sit over this content —
   header.header-static is position:relative now (see NAV above), so it
   already pushes this down via normal document flow and no longer needs
   manual compensation; this is just normal breathing room. */
.generic-content{ padding:60px 0 100px; }
.generic-content .wrap{ max-width:760px; }
/* Checkout (and cart) render as ordinary page content — a block inside
   the_content() — so they fall back to this generic template rather than
   woocommerce.php, and would otherwise get stuck in the narrow 760px
   blog-post column above. woocommerce-checkout/-cart are classes
   WooCommerce itself always adds to <body> on those pages regardless of
   which template ends up rendering them, so this targets them reliably
   without needing a template-level fix. */
body.woocommerce-checkout .generic-content .wrap, body.woocommerce-cart .generic-content .wrap{ max-width:1280px; }
.generic-content h1{ font-size:clamp(26px,4vw,40px); margin-bottom:18px; text-transform:none; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:-0.01em; }
.generic-content .entry-content{ color:var(--text-muted); font-family:'Inter',sans-serif; line-height:1.8; }
.generic-content .entry-content p{ margin:0 0 1.4em; }
.generic-content .entry-content a{ color:var(--amber); text-decoration:underline; }
/* The narrow 760px reading column above is right for blog-post-style
   content (index.php), but wrong for the product catalog. Scoped to the
   woocommerce-page class so it only overrides these, not the other
   .generic-content rules (heading styles) shared with plain pages.
   Deliberately narrower than the site's usual 1280px .wrap, with more
   side padding than the default 40px — the product grid reads as too
   close to the edges at full width, so this leaves a visibly wider
   gutter instead of stretching edge-to-edge. Also more top clearance
   than plain .generic-content pages: with the header now transparent
   (see NAV above), there's no color break to separate nav from heading,
   so the extra breathing room is what does that job instead. */
.generic-content.woocommerce-page{ padding-top:120px; }
/* Parent no longer sets its own width/padding — that's delegated to the
   elements below instead, so it can't clamp them narrower than intended. */
.generic-content.woocommerce-page .wrap{ max-width:1280px; padding:0; }

/* Explicit padding here (not just max-width) is what actually guarantees
   a visible gutter — max-width alone only creates margin once the
   browser is wider than 1280px, which isn't reliably true at the widths
   this was being tested at. */
.section-head, .shop-filters, .woocommerce-notices-wrapper, .shop-toolbar, .catalog-grid, .pdp, .pdp-related{
  max-width:1280px; margin-left:auto; margin-right:auto; padding-left:48px; padding-right:48px; padding-top:30px; box-sizing:border-box;
}
@media (max-width:600px){
  .section-head, .shop-filters, .woocommerce-notices-wrapper, .shop-toolbar, .catalog-grid, .pdp, .pdp-related{
    padding-left:20px; padding-right:20px;
  }
}

/* ================================================================
   CATALOG — the full /drops/ archive (archive-snkid_product.php).
   A plain responsive grid rather than .drops's fixed 6-card editorial
   layout, since the catalog can hold any number of products.
   ================================================================ */
.catalog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:32px; perspective:1200px; }
/* Result count + sort dropdown, pulled together into one row by
   sneakerid_wc_shop_toolbar() in woocommerce.php (WooCommerce outputs
   them as two separate, unstyled elements by default). */
.shop-toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  /* margin-bottom only (not the old shorthand's margin-left/right:0) —
     left/right need to stay auto so this centers along with the other
     woocommerce-page elements above instead of overriding that. */
  margin-bottom:32px; padding-bottom:20px; border-bottom:1px solid var(--line-light);
}
.woocommerce-result-count{ margin:0; color:var(--text-muted); font-size:13px; font-weight:600; }
.woocommerce-ordering{ margin:0; }
.woocommerce-ordering select{
  appearance:none; -webkit-appearance:none; border:1px solid var(--line-light); border-radius:100px;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6b78' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  padding:10px 38px 10px 18px; font-size:13px; font-weight:700; color:var(--text); cursor:pointer;
  transition:border-color .2s;
}
.woocommerce-ordering select:hover, .woocommerce-ordering select:focus{ border-color:var(--amber); outline:none; }
.snkid-pagination, .woocommerce-pagination{ display:flex; justify-content:center; gap:8px; margin-top:56px; flex-wrap:wrap; list-style:none; padding:0; }
.woocommerce-pagination ul{ display:flex; gap:8px; list-style:none; padding:0; margin:0; }
.snkid-pagination .page-numbers, .woocommerce-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 14px;
  border-radius:100px; border:1px solid var(--line-light); color:var(--text-muted); font-size:13px; font-weight:700;
  transition:background .2s, color .2s, border-color .2s;
}
.snkid-pagination .page-numbers:hover, .woocommerce-pagination .page-numbers:hover{ border-color:var(--amber); color:var(--text); }
.snkid-pagination .page-numbers.current, .woocommerce-pagination .page-numbers.current{ background:#14141c; border-color:#14141c; color:#fff; }
.snkid-pagination .page-numbers.dots, .woocommerce-pagination .page-numbers.dots{ border:none; }

/* ================================================================
   WOOCOMMERCE BASELINE — cart, checkout, and single-product pages still
   use WooCommerce's own markup (only the shop-loop item is fully
   reskinned, see woocommerce/content-product.php), so these rules just
   make sure that native markup reads as part of this site rather than
   an unstyled default WooCommerce page.
   ================================================================ */
.woocommerce-message, .woocommerce-info{
  display:flex; align-items:center; gap:10px; background:var(--amber-dim); border:1px solid rgba(255,106,47,0.35);
  color:var(--text); border-radius:16px; padding:16px 20px; margin:0 0 28px; list-style:none; font-size:14px;
}
.woocommerce-error{
  background:#fdeceb; border:1px solid #f3b9b3; color:#8a2c22; border-radius:16px; padding:16px 20px; margin:0 0 28px; list-style:none; font-size:14px;
}
.woocommerce-message .button, .woocommerce-info .button{ margin-left:auto; }
.woocommerce div.product .woocommerce-product-gallery{ border-radius:26px; overflow:hidden; background:var(--bg-soft); }
.woocommerce div.product .summary{ padding-top:8px; }
.woocommerce div.product .product_title{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:clamp(24px,3vw,34px); margin-bottom:10px; }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--text); font-weight:800; font-size:22px; font-family:'Plus Jakarta Sans',sans-serif; }
.woocommerce div.product .woocommerce-product-details__short-description{ color:var(--text-muted); line-height:1.7; margin:16px 0 24px; }
.woocommerce div.product form.cart{ margin-bottom:28px; }
.woocommerce div.product .stock{ font-size:13px; color:var(--text-muted); font-weight:600; }
.woocommerce div.product .stock.out-of-stock{ color:#c0392b; }
table.variations{ margin-bottom:18px; }
table.variations td, table.variations th{ padding:6px 0; }
.woocommerce table.shop_table{ border-collapse:collapse; width:100%; margin-bottom:28px; }
.woocommerce table.shop_table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); padding:12px 14px; border-bottom:1px solid var(--line-light); }
.woocommerce table.shop_table td{ padding:16px 14px; border-bottom:1px solid var(--line-light); }
.woocommerce table.shop_table img{ width:56px; height:56px; object-fit:cover; border-radius:12px; }
.woocommerce .cart-collaterals .cart_totals{ background:var(--card); border:1px solid var(--line-light); border-radius:22px; padding:24px; box-shadow:var(--shadow-card); }
.woocommerce-checkout #order_review{ background:var(--card); border:1px solid var(--line-light); border-radius:22px; padding:24px; box-shadow:var(--shadow-card); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce-checkout textarea{
  border:1px solid var(--line-light); border-radius:14px; padding:12px 16px; font-family:'Inter',sans-serif; font-size:14px; width:100%; background:#fff; color:var(--text);
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row select:focus{ outline:2px solid var(--amber); outline-offset:1px; }
.woocommerce #payment .payment_methods{ list-style:none; padding:0; }
.woocommerce #payment .payment_methods li{ border:1px solid var(--line-light); border-radius:14px; padding:14px 16px; margin-bottom:10px; }
.woocommerce a.remove{ color:var(--text-muted) !important; border-radius:50% !important; }
.woocommerce a.remove:hover{ color:#fff !important; background:#c0392b !important; }
.woocommerce .quantity .qty{ width:64px; border:1px solid var(--line-light); border-radius:10px; padding:8px 10px; }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.woocommerce #place_order, .woocommerce-checkout #payment #place_order{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--amber); color:#0a0a0d !important;
  border:none; border-radius:100px; padding:14px 26px; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer; transition:transform .25s, box-shadow .25s;
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover,
.woocommerce #place_order:hover{ box-shadow:0 14px 30px -10px rgba(255,106,47,0.5); }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3, .woocommerce-order-review h3{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:18px; margin:0 0 18px;
}

/* ================================================================
   PRODUCT PAGE (PDP) — woocommerce/content-single-product.php fully
   replaces WooCommerce's default single-product markup, so this is a
   real layout (not a reskin of theirs). Reuses .idcard-tag/.idcard-
   stamp/.idcard-sizes/.idcard-perf from the quick-view popup CSS above
   for the "verified authentic" language and size grid, so the two stay
   visually identical rather than drifting into two different looks.
   ================================================================ */
.pdp{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin-bottom:80px; }
@media (max-width:900px){ .pdp{ grid-template-columns:1fr; gap:32px; } }
.pdp-media-main{ border-radius:28px; overflow:hidden; aspect-ratio:1/1; background:var(--bg-soft); box-shadow:var(--shadow-card); }
.pdp-media-main img{ width:100%; height:100%; object-fit:cover; }
.pdp-thumbs{ display:flex; gap:12px; margin-top:16px; }
.pdp-thumbs img{ width:72px; height:72px; border-radius:14px; object-fit:cover; cursor:pointer; border:2px solid transparent; transition:border-color .2s; }
.pdp-thumbs img:hover{ border-color:var(--amber); }
/* Quieter, more considered title treatment than the first pass — Plus
   Jakarta Sans at a much more modest size (matching .idcard-body h3's
   restraint in the quick-view popup) instead of a huge heavy Syne
   headline that read as loud rather than premium. */
.pdp-info h1{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:clamp(22px,2.2vw,28px); letter-spacing:-0.01em; margin:8px 0 12px; text-transform:none; line-height:1.2; }
.pdp-price{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:20px; color:var(--text); margin-bottom:22px; }
.pdp-price del{ color:var(--text-muted); font-weight:600; font-size:15px; margin-right:8px; }
.pdp-price ins{ text-decoration:none; }
.pdp-desc{ color:var(--text-muted); font-size:14px; line-height:1.75; margin-bottom:6px; max-width:420px; }
.pdp-add{ width:100%; justify-content:center; margin-bottom:8px; border-radius:100px; padding:17px 30px; }
.pdp-hint{ font-size:12px; color:var(--text-muted); text-align:center; min-height:16px; margin-bottom:8px; }
.pdp-details{ border-top:1px solid var(--line-light); padding-top:24px; margin-top:8px; }
.pdp-details .entry-content{ font-size:14px; }
.pdp-related{ margin-top:60px; padding-top:60px; border-top:1px solid var(--line-light); }
.pdp-related .section-head{ margin-bottom:36px; }

/* ================================================================
   CHECKOUT (WooCommerce Blocks) — this store uses the newer, React-
   rendered Checkout block rather than the classic [woocommerce_checkout]
   shortcode, so none of the .woocommerce-checkout / .woocommerce
   form.form-row rules above ever match here — completely different class
   names (wc-block-components-*, wc-blocks-components-*). This is a
   dedicated pass for those. checkout-premium-* comes from the
   render_block_woocommerce/checkout wrapper in functions.php.
   ================================================================ */
/* A side-by-side grid here (image | form) was breaking WooCommerce
   Checkout block's OWN internal two-column layout (its main-form/order-
   summary split has its own responsive CSS, shipped separately from the
   classic .woocommerce stylesheet disabled in functions.php, keyed to
   viewport width, not container width) — squeezing it into a narrower
   column than it expects caused the overlap. A full-width banner above
   the form avoids competing with that layout entirely, and the form
   itself gets wrapped in one clean card instead. */
.checkout-premium-image{
  border-radius:28px; overflow:hidden; height:240px; background-size:cover; background-position:center 35%;
  box-shadow:var(--shadow-card); display:flex; align-items:flex-end; padding:24px; margin-bottom:40px;
}
.checkout-premium-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(10,10,14,0.72); backdrop-filter:blur(6px); color:#fff;
  padding:12px 18px; border-radius:100px; font-size:12px; font-weight:700; line-height:1.4;
}
.checkout-premium-form{
  /* No overflow:hidden here — WooCommerce's order-summary sidebar uses
     position:sticky internally, and a clipping ancestor breaks sticky
     positioning outright (which is why it disappeared entirely rather
     than just losing its rounded-corner clipping). */
  background:var(--card); border:1px solid var(--line-light); border-radius:28px; box-shadow:var(--shadow-card);
  padding:40px;
}
@media (max-width:600px){ .checkout-premium-form{ padding:24px; } }

.wc-block-checkout__form{ max-width:640px; }
.wc-block-components-checkout-step{ border-top:1px solid var(--line-light); padding:28px 0; }
#contact-fields{ border-top:none; padding-top:0; }
.wc-block-components-checkout-step__title{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:17px; margin:0 0 20px; color:var(--text); }
.wc-block-checkout__guest-checkout-notice{ font-size:12px; color:var(--text-muted); margin:-8px 0 0; }

/* Soft filled fields instead of bordered boxes on every single field —
   a page full of visible rectangles reads as a generic form, not a
   premium one. !important throughout this block because the Checkout
   block ships its own separate CSS (not the classic .woocommerce
   stylesheet disabled in functions.php), still loaded, still fighting
   some of these same properties — this is what was causing the select
   labels to overlap their own border instead of sitting inside it. */
.wc-block-components-text-input{ position:relative; margin-bottom:12px; }
.wc-block-components-text-input input{
  width:100% !important; border:1px solid transparent !important; background:var(--bg-soft) !important; border-radius:14px !important;
  padding:19px 16px 7px !important; font-size:14px !important; font-family:'Inter',sans-serif !important; color:var(--text) !important; box-shadow:none !important;
}
.wc-block-components-text-input input:focus{ border-color:var(--amber) !important; outline:none !important; background:#fff !important; }
.wc-block-components-text-input label{ position:absolute !important; left:16px !important; top:16px !important; font-size:13px !important; color:var(--text-muted) !important; pointer-events:none; transition:top .15s ease, font-size .15s ease, color .15s ease; }
.wc-block-components-text-input.is-active label{ top:7px !important; font-size:10.5px !important; color:var(--amber) !important; }

.wc-blocks-components-select__container{
  position:relative !important; border:1px solid transparent !important; background:var(--bg-soft) !important; border-radius:14px !important;
  padding:19px 16px 7px !important; margin-bottom:12px;
}
.wc-blocks-components-select__label{ position:absolute !important; left:16px !important; top:7px !important; font-size:10.5px !important; color:var(--amber) !important; }
.wc-blocks-components-select__select{ width:100% !important; border:none !important; background:none !important; font-size:14px !important; font-family:'Inter',sans-serif !important; color:var(--text) !important; appearance:none; -webkit-appearance:none; padding-right:24px !important; }
.wc-blocks-components-select__expand{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; fill:var(--text-muted); pointer-events:none; }

.wc-block-components-address-form__address_2-toggle{ color:var(--amber); font-size:12px; font-weight:700; cursor:pointer; display:inline-block; margin-bottom:14px; }
.wc-block-components-address-card{ border:1px solid transparent; background:var(--bg-soft); border-radius:14px; padding:16px; display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.wc-block-components-address-card__edit{ color:var(--amber); font-weight:700; cursor:pointer; }

.wc-block-components-radio-control__option{
  display:flex; align-items:center; gap:12px; border:1px solid transparent !important; background:var(--bg-soft) !important; border-radius:14px !important;
  padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:border-color .2s, background .2s;
}
.wc-block-components-radio-control__option-checked{ border-color:var(--amber) !important; background:var(--amber-dim) !important; }
.wc-block-components-radio-control__label{ font-size:14px; font-weight:700; color:var(--text); }
.wc-block-checkout__shipping-option--free{ color:var(--amber); font-weight:700; }

.wc-block-components-checkbox label{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-muted); cursor:pointer; }
.wc-block-components-checkbox__mark{ width:18px; height:18px; flex-shrink:0; }

.wc-block-checkout__terms{ font-size:12px; color:var(--text-muted); line-height:1.6; padding-top:20px; margin-top:8px; border-top:1px solid var(--line-light); }

.wc-block-components-notice-banner{
  display:flex; align-items:flex-start; gap:10px; background:#fdeceb; border:1px solid #f3b9b3; color:#8a2c22; border-radius:16px; padding:14px 16px; font-size:13px; margin-bottom:16px;
}
.wc-block-components-notice-banner svg{ flex-shrink:0; fill:#c0392b; width:20px; height:20px; }
/* .is-error carries its own higher-specificity radius from WooCommerce's
   own CSS that was beating the 16px above. */
.wc-block-components-notice-banner.is-error{ border-radius:14px !important; }

/* The checked-state highlight WooCommerce adds to the selected shipping
   option is a box-shadow ring that clashes with the amber border/tint
   this theme already uses for the same "selected" state. */
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted{
  box-shadow:none !important;
}

.wc-block-components-checkout-place-order-button{
  width:100%; justify-content:center; background:var(--amber) !important; color:#0a0a0d !important; border:none !important; border-radius:100px !important;
  padding:18px 30px !important; font-size:13px !important; font-weight:700 !important; letter-spacing:.04em; text-transform:uppercase; height:auto !important; margin-top:8px;
  transition:box-shadow .25s;
}
.wc-block-components-checkout-place-order-button:hover{ box-shadow:0 14px 30px -10px rgba(255,106,47,0.5); }

/* Order summary — WooCommerce renders this as a real, separately
   width-responsive component (JS-driven, not just a CSS media query),
   which decides on its own whether to show a side column or a
   collapsible toggle inline in the form depending on the container width
   it measures — that's what was making it disappear entirely once the
   surrounding layout changed the first time around. Rather than nest it
   inside another grid of mine (which is what broke it originally) or
   stack it below the form (correct, but not what was actually wanted),
   this forces WooCommerce's own two-item container directly into a grid
   — same predictable "I fully control this" approach, just as two
   columns instead of one. The duplicate inline/mobile version WC also
   renders (right above the Place Order button) stays hidden either way,
   so there's never two summaries on screen at once. */
.wc-block-components-sidebar-layout{ display:grid !important; grid-template-columns:1fr 380px !important; gap:48px; align-items:start; }
@media (max-width:860px){ .wc-block-components-sidebar-layout{ grid-template-columns:1fr !important; } }
.wc-block-components-sidebar-layout .wc-block-components-main{ width:100% !important; max-width:none !important; }
.checkout-order-summary-block-fill-wrapper{ display:none !important; }
.wc-block-components-sidebar{
  display:block !important; position:static !important; width:100% !important; max-width:none !important;
  background:var(--card); border:1px solid var(--line-light); border-radius:22px; padding:28px; box-shadow:var(--shadow-card);
}
@media (max-width:860px){ .wc-block-components-sidebar{ margin-top:32px; } }
.wc-block-components-checkout-order-summary__title-text{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:16px; letter-spacing:-0.01em; }
.wc-block-components-checkout-order-summary__title{ display:flex; align-items:center; padding-bottom:18px; margin-bottom:4px; border-bottom:1px solid var(--line-light); cursor:default; }
.wc-block-components-checkout-order-summary__title-price{ display:none; } /* redundant with the Total row below */
.wc-block-components-checkout-order-summary__title-icon{ display:none; } /* the expand/collapse chevron — always expanded here, nothing to toggle */
.wc-block-components-order-summary-item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-light); }
.wc-block-components-order-summary-item__image{ position:relative; flex-shrink:0; }
.wc-block-components-order-summary-item__image img{ width:60px; height:60px; border-radius:14px; object-fit:cover; }
.wc-block-components-order-summary-item__quantity{
  position:absolute; top:-8px; right:-8px; background:#14141c; color:#fff; font-size:10px; font-weight:800; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--card);
}
.wc-block-components-product-name{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14px; margin:0 0 4px; }
.wc-block-components-product-details__value, .wc-block-components-product-details__name{ font-size:12px; color:var(--text-muted); }
/* The per-unit price under the name is redundant with the line total on
   the right for the common qty-1 case — kept, but de-emphasized rather
   than repeating the same number at equal visual weight twice. */
.wc-block-components-order-summary-item__individual-prices{ font-size:11px !important; color:var(--text-muted) !important; font-weight:500 !important; }
.wc-block-components-order-summary-item__total-price .price{ font-weight:800; font-size:14px; color:var(--text); }
.wc-block-components-totals-item{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; font-size:13px; color:var(--text-muted); }
.wc-block-components-totals-footer-item{
  border-top:1px solid var(--line-light); margin:8px -28px -28px; padding:18px 28px; background:transparent !important;
  border-radius:0 0 22px 22px; font-size:16px; font-weight:800; color:var(--text);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-family:'Plus Jakarta Sans',sans-serif; }
.wc-block-components-totals-coupon{ margin:16px 0; }
.wc-block-components-totals-coupon .wc-block-components-panel__button{
  color:var(--amber); background:var(--amber-dim); outline:1px solid rgba(255,106,47,0.35); border:none; border-right:15px solid transparent !important;
  border-radius:100px; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:15px 20px !important;
}
.wp-block-woocommerce-checkout-order-summary-block{ border:none; }
.wc-block-components-totals-coupon .wc-block-components-panel__button-icon{ width:14px; height:14px; fill:var(--amber); }
.wc-block-components-totals-coupon__form{ display:flex; gap:8px; margin-top:12px; }
.wc-block-components-totals-coupon__form .wc-block-components-text-input{ flex:1; margin-bottom:0; }
.wc-block-components-totals-coupon__button{
  background:#14141c !important; color:#fff !important; border:none !important; border-radius:100px !important;
  padding:0 22px !important; font-size:12px !important; font-weight:700 !important; text-transform:uppercase;
}