/* =========================================================
   NUTRA WARRIOR — Redesign Design System v5
   "Beast Mode" palette — back to the dark obsidian + crimson + ember
   theme the client approved (v4's white shopping-canvas experiment was
   rejected as low-energy). One consistent dark theme everywhere now —
   no light/dark split — with the button-visibility safety habit from v4
   kept: every interactive element still sets its OWN explicit color
   instead of relying on inheritance, so nothing can silently go invisible
   again if the palette changes later.
   ========================================================= */

/* ---------- Dynamic Product Theme Engine ----------
   Registers the brand-accent custom properties as typed <color> values so
   that any element which ALREADY declares a transition on background/
   border-color/box-shadow (buttons, pills, tabs, badges, etc. — see their
   existing rules elsewhere in this file, none of which were touched) will
   smoothly interpolate when js/theme-engine.js swaps these variables for
   the active product's theme, instead of hard-snapping. This is purely
   additive: it does not change any existing selector, transition, layout,
   spacing, or animation — it only makes variables already used everywhere
   capable of tweening. Falls back gracefully (instant swap, same as
   before) in any browser without @property support. */
@property --volt{ syntax:'<color>'; inherits:true; initial-value:#ff1b3c; }
@property --volt-dark{ syntax:'<color>'; inherits:true; initial-value:#a30d20; }
@property --volt-glow{ syntax:'<color>'; inherits:true; initial-value:rgba(255,27,60,.42); }
@property --red{ syntax:'<color>'; inherits:true; initial-value:#ff1b3c; }
@property --red-dark{ syntax:'<color>'; inherits:true; initial-value:#a30d20; }
@property --red-glow{ syntax:'<color>'; inherits:true; initial-value:rgba(255,27,60,.42); }

:root{
  /* Obsidian base */
  --bg:            #07070a;
  --bg-soft:       #0d0d10;
  --surface:       #151417;
  --surface-2:     #1c1a1e;
  --border:        rgba(255,30,60,.12);
  --border-strong: rgba(255,30,60,.28);

  /* Crimson + Ember — matches the red-label Pre-Warrior product art */
  --volt:          #ff1b3c;      /* primary crimson — CTAs, active states */
  --volt-dark:     #a30d20;      /* deep blood red for gradients */
  --volt-glow:     rgba(255,27,60,.42);
  --ember:         #ff5a1f;      /* lava-orange secondary glow */
  --ember-soft:    #ff8a4d;
  --magenta:       #ff2d6b;      /* sale-badge red, distinct hue from primary crimson for pop */
  --magenta-soft:  #ff7fa8;
  --magenta-glow:  rgba(255,45,107,.35);
  --gold:          #ffc22e;
  --gold-soft:     #ffe08a;
  --green:         #2fe07d;

  /* legacy aliases so existing components still resolve */
  --red:           var(--volt);
  --red-dark:      var(--volt-dark);
  --red-glow:      var(--volt-glow);

  --text:          #f7f4f2;
  --text-muted:    #a7a0a2;
  --text-faint:    #6c6567;
  --on-volt:       #ffffff;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.5);
  --shadow-md: 0 10px 30px rgba(0,0,0,.6);
  --shadow-red: 0 10px 30px rgba(255,27,60,.38);

  --ease: cubic-bezier(.16,.84,.44,1);
  --header-h: 76px;
  --footer-mobile-h: 66px;
  --announce-h: 38px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* The `hidden` attribute only sets display:none in the BROWSER'S stylesheet,
   which means any author rule that sets display — display:grid on a modal,
   display:flex on a card — silently beats it and the element stays in the
   layout. On an invisible full-screen overlay that is catastrophic: nothing
   is visible, but every click on the page lands on it instead of the button
   underneath. This has now bitten three separate components in this theme,
   so it is settled once here for the whole site rather than patched again
   per component. Anything carrying `hidden` is hidden, full stop. */
[hidden]{ display:none !important; }
/* No native scroll-behavior:smooth here on purpose — Lenis (animations.js) owns
   smooth scrolling end-to-end. Running native smooth-scroll and Lenis's RAF-driven
   scroll physics at the same time is what caused jumping/locking; if the Lenis CDN
   fails to load, plain instant scroll is the correct safe fallback, not a competing
   smoothing engine. */
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; width:100%; }
body{
  margin:0;
  max-width:100vw;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,select{ font-family:inherit; }
h1,h2,h3,h4{ margin:0; font-family:'Oswald',Inter,sans-serif; letter-spacing:.01em; }

.container{ width:100%; max-width:1280px; margin:0 auto; padding:0 20px; }

/* ---------- Skeleton while an image loads ----------
   This was written but never ran. The second selector was
   `img[src]:not([src=""])`, which matches every image that has a src — that
   is, every image on the page, from the first byte of HTML. The shimmer was
   switched off before it could ever be seen. Only `.loaded`, added by JS when
   the image actually finishes decoding, should end it.

   Scoped to the places a skeleton belongs: product shots, galleries, video
   posters. Not logos, icons or payment badges — a shimmering 20px icon looks
   like a fault, and a dark gradient behind a transparent PNG looks worse.

   `alternate` rather than `infinite` with a fixed count is deliberate: if the
   JS never runs, the shimmer stops on its own after about ten seconds instead
   of pulsing forever on a page that is plainly finished. */
.p3d__media img,
.main-media img,
.thumb-rail img,
.cat-tile img,
.gv-stage img,
.stk-card__media img,
.pdp-gallery img,
.nutra-order-review-thumb,
.cart-item__media img{
  background:linear-gradient(100deg,#18181f 30%,#212129 50%,#18181f 70%);
  background-size:300% 100%;
  animation:skeletonShimmer 1.6s ease-in-out 6;
}
img.loaded{ animation:none !important; background:none !important; }
@keyframes skeletonShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-100% 0; } }
.fade-in{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.fade-in.in-view{ opacity:1; transform:translateY(0); }

/* ---------- Buttons ----------
   Every variant below sets an EXPLICIT color (never relies on plain
   inheritance) so label text is always legible on first paint, in any
   section (light or dark chrome) — hover only adds motion/emphasis,
   it is never what makes the text visible. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--radius-pill); border:none;
  font-weight:700; font-size:14px; letter-spacing:.03em; text-transform:uppercase;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), filter .2s, border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:scale(.96); }
.btn-primary{
  background:linear-gradient(135deg,var(--volt),var(--volt-dark));
  color:#ffffff; box-shadow:var(--shadow-red);
}
.btn-primary:hover{ filter:brightness(1.12); box-shadow:0 14px 32px var(--volt-glow); transform:translateY(-2px); }
.btn-gold{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:#1a1204; box-shadow:0 10px 26px rgba(184,121,10,.25);
}
.btn-gold:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.btn-outline{
  background:transparent; color:var(--text); border:2px solid var(--text);
}
.btn-outline:hover{ background:var(--text); color:var(--bg); border-color:var(--text); transform:translateY(-2px); }
.btn-dark{ background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
.btn-dark:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:12px; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* ---------- Top offer marquee ---------- */
.offer-bar{
  background:linear-gradient(90deg,#3a0508,var(--volt),var(--ember),#3a0508);
  background-size:300% 100%; animation:offerShift 6s ease-in-out infinite;
  color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.04em;
  overflow:hidden; white-space:nowrap; position:relative; height:34px; display:flex; align-items:center;
}
.offer-bar__track{ display:flex; gap:60px; animation:marquee 18s linear infinite; padding-left:60px; }
.offer-bar:hover .offer-bar__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes offerShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:200;
  height:var(--header-h); display:flex; align-items:center;
  background:linear-gradient(180deg,#0e0d10 0%,#08080a 100%); backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--border-strong);
  box-shadow:0 1px 0 rgba(255,27,60,.22);
  transition:box-shadow .3s, background .3s;
}
.site-header.scrolled{ background:linear-gradient(180deg,#121014 0%,#08080a 100%); box-shadow:0 1px 0 rgba(255,27,60,.3), 0 8px 24px rgba(0,0,0,.5); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Oswald',sans-serif; font-size:19px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.logo img{ height:38px; width:auto; }
.logo strong{ color:var(--red); }
/* Custom shield+lightning mark — replaces the hotlinked external logo image
   (one less network request, renders instantly, no mismatch against the dark
   theme) with a two-tone wordmark echoing the product label's own styling. */
.logo-mark{ width:34px; height:34px; flex-shrink:0; filter:drop-shadow(0 2px 8px rgba(255,27,60,.45)); transition:transform .3s var(--ease); }
.logo:hover .logo-mark{ transform:scale(1.06) rotate(-3deg); }
.logo-text{ color:#fff; text-transform:uppercase; line-height:1.1; }
.logo-text b{ color:var(--volt); font-weight:800; }
.footer-logo{ display:flex; align-items:center; gap:10px; font-family:'Oswald',sans-serif; font-size:19px; font-weight:700; margin-bottom:14px; }
.footer-logo .logo-mark{ width:32px; height:32px; }
.main-nav{ display:flex; align-items:center; gap:30px; }
.main-nav a{
  font-size:13.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-muted); position:relative; padding:6px 0; transition:color .2s;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--red);
  transition:width .25s var(--ease);
}
.main-nav a:hover, .main-nav a.active{ color:var(--text); }
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  position:relative; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  transition:background .2s, border-color .2s, transform .2s;
}
.icon-btn:hover{ background:var(--surface-2); border-color:var(--border-strong); transform:translateY(-2px); }
.icon-btn svg{ width:19px; height:19px; }
.badge-count{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; z-index:5;
  border-radius:999px; background:linear-gradient(135deg,var(--magenta),var(--volt-dark)); color:#fff; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2.5px var(--bg), 0 2px 8px rgba(0,0,0,.4);
}
.burger{ display:none; }

/* ---------- Search overlay ---------- */
.search-overlay{
  position:fixed; inset:0; z-index:400; background:rgba(6,6,8,.9); backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center; padding-top:14vh;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.search-overlay.open{ opacity:1; pointer-events:auto; }
.search-box{ width:min(560px,90vw); }
.search-box input{
  width:100%; padding:16px 20px; border-radius:var(--radius-pill); border:1.5px solid var(--border-strong);
  background:var(--surface); color:var(--text); font-size:16px; outline:none;
}
.search-box input:focus{ border-color:var(--red); }
.search-close{ display:block; margin:18px auto 0; color:var(--text-muted); font-size:13px; }

/* ---------- Mobile drawer nav ---------- */
.mobile-nav{
  position:fixed; top:0; right:0; height:100%; width:82%; max-width:340px; z-index:500;
  background:var(--bg-soft); border-left:1px solid var(--border);
  transform:translateX(100%); transition:transform .35s var(--ease);
  padding:22px 22px 40px; overflow-y:auto;
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav a{ display:block; padding:14px 4px; border-bottom:1px solid var(--border); font-weight:600; text-transform:uppercase; font-size:14px; letter-spacing:.03em; }
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:450; opacity:0; pointer-events:none; transition:opacity .3s; }
.scrim.open{ opacity:1; pointer-events:auto; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; }
.hero-slide{
  position:relative; width:100%; height:88vh; min-height:560px; max-height:820px;
  background:linear-gradient(120deg,#1a1216,#0a0a0d 60%);
}
/* .hero-slides had no explicit height, so its flex children (each slide, with
   an absolutely-positioned inset:0 image) had nothing to stretch/inset
   against and the banner image collapsed instead of filling all the way down
   to the dots. Giving it height:100% (and each slide wrapper too) fixes it. */
.hero-slides{ display:flex; height:100%; transition:transform .7s var(--ease); }
.hero-slides > div{ height:100%; }
/* min-width:100% was previously set inline per-slide; moved to this class so
   a mobile media query can override it below (an inline style would win over
   any external stylesheet rule, same specificity gotcha fixed elsewhere in
   this file). */
.hero-slide-item{ min-width:100%; flex-shrink:0; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }
.hero-dots{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:5; }
.hero-dots button{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); border:none; transition:.25s; }
.hero-dots button.active{ width:22px; border-radius:5px; background:var(--red); }
/* Was dark/muted by default and only turned crimson on :hover — on touch
   devices there IS no hover, so the arrows looked permanently inert. The
   highlighted state is now the default; hover just lifts/brightens it. */
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:42px; height:42px; border-radius:50%; background:var(--volt); border:1px solid var(--volt);
  color:var(--on-volt); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(255,27,60,.4); transition:filter .2s, transform .2s;
}
.hero-arrow:hover{ filter:brightness(1.15); transform:translateY(calc(-50% - 2px)); }
.hero-arrow.prev{ left:16px; } .hero-arrow.next{ right:16px; }

/* ---------- Section headings ---------- */
.section{ padding:56px 0; }
.section-head{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin-bottom:36px; gap:12px;
}
.section-head .kicker{ color:var(--red); font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:2px; }
.section-head h2{ font-size:clamp(24px,4vw,34px); text-transform:uppercase; position:relative; padding-bottom:16px; }
.section-head h2::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:64px; height:3px; border-radius:999px;
  background:linear-gradient(90deg,var(--volt),var(--ember));
}
.section-head .view-all{
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);
  border:1.5px solid var(--border-strong); border-radius:var(--radius-pill); padding:8px 20px; transition:.2s;
}
.section-head .view-all:hover{ color:#fff; background:var(--volt); border-color:var(--volt); }

/* ---------- Category chips ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
/* Compound selectors (higher specificity than the plain .cat-grid / .product-grid
   responsive rules below) so these column-count variants — previously forced via
   an inline style that OVERRODE every mobile breakpoint and caused horizontal
   overflow — now properly collapse on small screens instead. */
.cat-grid.grid-6{ grid-template-columns:repeat(6,1fr); }
.product-grid.grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1080px){
  .cat-grid.grid-6{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:860px){
  .cat-grid.grid-6{ grid-template-columns:repeat(3,1fr); }
  .product-grid.grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .cat-grid.grid-6{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .product-grid.grid-3{ grid-template-columns:1fr; }
}
/* Full-bleed category tile — just the image (no card padding/background/border
   box around it), with the category name sitting directly on a bottom gradient
   scrim instead of a separate padded pill, so it reads as "only the image". */
.cat-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1/1;
  display:flex; align-items:flex-end; transition:transform .35s var(--ease);
}
.cat-card:hover{ transform:translateY(-6px); }
.cat-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(4,4,6,.75), rgba(4,4,6,0) 55%); z-index:1; pointer-events:none; }
.cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.cat-card:hover img{ transform:scale(1.06); }
.cat-card span{ position:relative; z-index:2; font-weight:800; text-transform:uppercase; font-size:14px; letter-spacing:.03em; color:#fff; padding:14px; }
.carousel .cat-card{ min-width:220px; max-width:220px; scroll-snap-align:start; flex-shrink:0; }

/* ---------- Shop By Category: circular treatment ----------
   Replaces the rectangular .cat-card on the homepage. A circle crops any
   uploaded category image to its centre, so portrait, square and landscape
   uploads all look intentional without anyone having to prepare artwork at a
   fixed ratio. */
/* Centre the row when the circles don't fill the width, with even gaps on
   both sides. `safe center` is what makes this usable: with plain `center`,
   an overflowing flex row centres its content and the first items become
   unreachable because you cannot scroll to negative scrollLeft. `safe` falls
   back to start alignment the moment the content overflows, so on a phone the
   strip still scrolls normally from the first circle. */
.cat-circles{
  align-items:flex-start;
  justify-content:center;
  justify-content:safe center;
  gap:26px;
  padding-inline:4px;
}
@media (max-width:640px){ .cat-circles{ gap:16px; } }
.cat-circle{
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  min-width:150px; max-width:150px; flex-shrink:0; scroll-snap-align:start;
  padding:4px 0 6px; color:var(--text);
}
.cat-circle__ring{
  position:relative; width:132px; height:132px; border-radius:50%; overflow:hidden;
  background:var(--surface-2); display:block; flex-shrink:0;
  border:2px solid var(--border-strong);
  transition:transform .35s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.cat-circle__ring img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s var(--ease);
}
/* Soft inner vignette so a bright pack shot still reads against the dark page. */
.cat-circle__ring::after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 35%, rgba(0,0,0,0) 45%, rgba(4,4,6,.45) 100%);
}
.cat-circle:hover .cat-circle__ring{
  transform:translateY(-4px); border-color:var(--red);
  box-shadow:0 14px 30px rgba(255,27,60,.28);
}
.cat-circle:hover .cat-circle__ring img{ transform:scale(1.08); }
.cat-circle__name{
  font-size:13.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  line-height:1.3; transition:color .25s var(--ease);
}
.cat-circle:hover .cat-circle__name{ color:var(--red); }
.cat-circle__count{ font-size:11.5px; font-weight:600; color:var(--text-faint); margin-top:-6px; }

@media (max-width:640px){
  .cat-circle{ min-width:118px; max-width:118px; gap:10px; }
  .cat-circle__ring{ width:104px; height:104px; }
  .cat-circle__name{ font-size:12px; }
  .cat-circle__count{ font-size:10.5px; }
}
@media (max-width:380px){
  .cat-circle{ min-width:104px; max-width:104px; }
  .cat-circle__ring{ width:92px; height:92px; }
}
@media (max-width:520px){ .carousel .cat-card{ min-width:190px; max-width:190px; } }
/* Instagram feed — plain full-bleed photos in a horizontal peek-carousel
   (no card padding/border/badge overlay, "only image" as requested), same
   scroll-snap behaviour as .carousel so it shows ~1.5 tiles like New
   Arrivals instead of a static multi-column grid. */
.insta-track{ gap:10px; }
.insta-item{
  position:relative; flex-shrink:0; width:220px; aspect-ratio:1/1;
  border-radius:var(--radius-md); overflow:hidden; scroll-snap-align:start;
  transition:transform .3s var(--ease);
}
.insta-item:hover{ transform:translateY(-4px); }
.insta-item img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px){ .insta-item{ width:170px; } }

/* ---------- Product cards / grid ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-card{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  overflow:hidden; transition:transform .35s var(--ease), border-color .3s, box-shadow .35s var(--ease);
  display:flex; flex-direction:column;
}
.product-card:hover{ transform:translateY(-8px); border-color:var(--border-strong); box-shadow:var(--shadow-md); }
.product-card__media{ position:relative; aspect-ratio:1/1; background:radial-gradient(circle at 50% 30%,#1f1f27,#121216); overflow:hidden; }
.product-card__media img{ width:100%; height:100%; object-fit:contain; padding:18px; transition:transform .5s var(--ease); }
.product-card:hover .product-card__media img{ transform:scale(1.08); }
.product-card__media img.img-alt{ position:absolute; inset:0; opacity:0; transition:opacity .4s; }
.product-card:hover .img-alt{ opacity:1; }
.badge{
  position:absolute; top:10px; left:10px; z-index:3; padding:5px 10px; border-radius:var(--radius-pill);
  font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
}
.badge-sale{ background:var(--magenta); color:#fff; }
.badge-new{ background:var(--gold); color:#1a1204; }
.badge-bestseller{ background:var(--surface-2); color:var(--gold); border:1px solid var(--gold); }
.badge-flagship{ background:linear-gradient(135deg,var(--volt),var(--ember)); color:#fff; }
.card-fabs{ position:absolute; top:10px; right:10px; z-index:3; display:flex; flex-direction:column; gap:8px; }
.wishlist-fab, .quickview-fab{
  width:34px; height:34px; border-radius:50%;
  background:rgba(10,10,13,.6); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:1; transform:none; transition:.25s; cursor:pointer;
}
/* Both FABs stay visible at rest (top-right of every card) instead of only
   fading in on hover — hover now just strengthens them. Touch devices never
   get a hover state at all, so hover-only controls were effectively invisible
   on mobile. */
.product-card:hover .wishlist-fab, .product-card:hover .quickview-fab{ background:rgba(10,10,13,.85); border-color:var(--red); }
.quickview-fab{ transition-delay:.04s; }
.wishlist-fab.active{ color:var(--red); border-color:var(--red); opacity:1; transform:none; }
.quickview-fab:hover{ background:var(--volt); border-color:var(--volt); color:var(--on-volt); }
.product-card__body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-card__cat{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); font-weight:700; }
.product-card__title{ font-size:14.5px; font-weight:600; color:var(--text); line-height:1.35; min-height:38px; }
.product-card:hover .product-card__title{ color:var(--red); }
.product-card__desc{
  margin:0; font-size:12px; line-height:1.5; color:var(--text-muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.stars{ display:flex; align-items:center; gap:4px; color:var(--gold); font-size:12px; }
.stars .count{ color:var(--text-faint); font-weight:600; }
.price-row{ display:flex; align-items:baseline; gap:8px; margin-top:auto; }
.price{ font-size:17px; font-weight:800; color:var(--text); }
.price-strike{ font-size:13px; color:var(--text-faint); text-decoration:line-through; }
.price-off{ font-size:11px; font-weight:800; color:var(--green); }
.quick-add{
  margin-top:6px; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px; border-radius:var(--radius-pill); border:none;
  background:linear-gradient(135deg,var(--volt),var(--volt-dark)); color:#ffffff; box-shadow:0 8px 20px rgba(255,27,60,.25);
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; transition:.25s;
}
.quick-add:hover{ filter:brightness(1.15); box-shadow:0 12px 28px rgba(255,27,60,.4); transform:translateY(-2px); }

/* ---------- Trust bar ---------- */
.trust-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.trust-item{
  display:flex; align-items:center; gap:12px; padding:18px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border);
}
.trust-item .ic{ width:42px; height:42px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--red); flex-shrink:0; }
.trust-item h4{ font-size:13.5px; text-transform:uppercase; margin-bottom:2px; }
.trust-item p{ margin:0; font-size:12px; color:var(--text-muted); }

/* ---------- Testimonials (shared bits reused by the Review Universe cards) ---------- */
.avatar{ width:38px; height:38px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--gold); flex-shrink:0; }

/* ================================================================
   REVIEW UNIVERSE — 3D orbiting review system (v10)
   Three independent rings of glass cards (video/photo/text) orbit a
   floating rating hub inside a perspective stage. Ring rotation and
   per-card depth (position/scale/opacity/blur) are computed every
   frame in js/review-universe.js; this styles the stage, the hub,
   the cards themselves and the fullscreen lightbox they open into.
   ================================================================ */
.ru-section{ overflow:hidden; }
.ru-stage{
  position:relative; width:100%; height:620px; margin:8px 0 26px;
  perspective:1900px; -webkit-perspective:1900px;
  touch-action:pan-y; cursor:grab; outline:none; user-select:none;
}
.ru-stage:active{ cursor:grabbing; }
.ru-stage:focus-visible{ box-shadow:inset 0 0 0 2px var(--volt); border-radius:var(--radius-lg); }
.ru-scene{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(10deg); }
.ru-orbit{ position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none; }
/* Particle trail must paint above every orbit card (cards peak around
   z-index ~800, a flying card is bumped to 3000) so the glow trail is
   actually visible instead of hidden behind the glass cards. */
.ru-particles{ position:absolute; inset:0; z-index:3500; pointer-events:none; }
.ru-hint{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%); z-index:6;
  font-size:11px; color:var(--text-faint); letter-spacing:.04em; text-transform:uppercase; font-weight:700;
  opacity:.75; pointer-events:none; background:rgba(10,10,13,.5); backdrop-filter:blur(6px);
  padding:6px 14px; border-radius:var(--radius-pill); border:1px solid var(--border); white-space:nowrap;
}

/* ---- Center hub: floating glass sphere with animated gradient ring ---- */
/* z-index:500 matches the neutral z=0 baseline cards are scored against
   (card zIndex = round(cardZ + 500) in JS) — so cards computed nearer the
   viewer than the hub (cardZ > 0) correctly render in front of it, and
   cards further away (cardZ < 0) correctly pass behind it, instead of the
   hub always winning regardless of depth. */
.ru-hub-pos{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:500; }
.ru-hub{ animation:ruFloat 6s ease-in-out infinite; }
.ru-hub__core{
  position:relative; width:184px; height:184px; border-radius:50%; text-align:center; padding:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:radial-gradient(circle at 35% 25%, rgba(255,255,255,.08), rgba(21,20,23,.55) 55%, rgba(7,7,10,.72));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 25px 60px rgba(0,0,0,.55), 0 0 70px rgba(255,27,60,.28);
  animation:ruPulse 4s ease-in-out infinite;
}
.ru-hub__core::before{
  content:''; position:absolute; inset:-3px; border-radius:50%; padding:3px;
  background:conic-gradient(from 0deg, var(--volt), var(--gold), var(--magenta), var(--ember), var(--volt));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; animation:ruBorderSpin 6s linear infinite;
}
.ru-hub__stars{ color:var(--gold); font-size:14px; letter-spacing:2px; text-shadow:0 0 12px rgba(255,194,46,.6); }
.ru-hub__rating{ font-family:'Oswald',sans-serif; font-size:34px; font-weight:700; color:#fff; line-height:1; }
.ru-hub__rating span{ font-size:15px; color:var(--text-faint); font-weight:500; }
.ru-hub__google{ display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.ru-hub__count{ font-size:11px; color:var(--text-muted); font-weight:600; }
.ru-hub__verified{ display:flex; align-items:center; gap:4px; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--green); background:rgba(51,209,122,.12); padding:3px 9px; border-radius:var(--radius-pill); margin-top:2px; }
@keyframes ruFloat{ 0%,100%{ transform:translateY(-6px); } 50%{ transform:translateY(6px); } }
@keyframes ruPulse{
  0%,100%{ box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 25px 60px rgba(0,0,0,.55), 0 0 55px rgba(255,27,60,.22); }
  50%{ box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 25px 60px rgba(0,0,0,.55), 0 0 90px rgba(255,27,60,.42); }
}
@keyframes ruBorderSpin{ to{ transform:rotate(360deg); } }

/* ---- Orbit cards: shared glass base + 3 type variants ---- */
.ru-card{
  position:absolute; top:50%; left:50%; will-change:transform, opacity; cursor:pointer;
  border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
  background:linear-gradient(155deg, rgba(28,26,30,.72), rgba(13,13,16,.68));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.ru-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.28), rgba(255,255,255,0) 35%, rgba(255,255,255,0) 65%, rgba(255,27,60,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.ru-card.is-front{ box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 0 1.5px var(--volt), 0 0 45px rgba(255,27,60,.3); }
.ru-card.is-flying{ box-shadow:0 40px 100px rgba(0,0,0,.7), 0 0 0 2px var(--volt), 0 0 90px rgba(255,27,60,.55); pointer-events:none; }
.ru-card:focus-visible{ outline:2px solid var(--volt); outline-offset:3px; }

.ru-card--video{ width:230px; height:300px; }
.ru-card--video .ru-card__media{ position:relative; width:100%; height:64%; flex-shrink:0; background:radial-gradient(circle at 50% 30%,#20202a,#121216); }
.ru-card--video .ru-card__media img{ width:100%; height:100%; object-fit:cover; opacity:.92; }
.ru-card--video .ru-card__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,7,10,.9),transparent 55%); }
.ru-card__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.ru-card__play span{
  width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,var(--volt),var(--volt-dark));
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.ru-card__duration{ position:absolute; bottom:10px; right:10px; background:rgba(10,10,13,.75); color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:var(--radius-pill); backdrop-filter:blur(4px); }
.ru-card__badge{
  position:absolute; top:10px; left:10px; background:rgba(10,10,13,.75); backdrop-filter:blur(6px); color:#fff;
  font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:5px 9px 5px 7px;
  border-radius:var(--radius-pill); display:flex; align-items:center; gap:4px;
}

.ru-card--photo{ width:190px; height:250px; }
.ru-card--photo .ru-card__media{ position:relative; width:100%; height:66%; flex-shrink:0; background:radial-gradient(circle at 50% 30%,#1f1f27,#121216); }
.ru-card--photo .ru-card__media img{ width:100%; height:100%; object-fit:cover; }
.ru-card--photo .ru-card__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,7,10,.85),transparent 50%); }

.ru-card--text{ width:168px; height:200px; padding:16px 15px; justify-content:center; background:linear-gradient(155deg, rgba(28,26,30,.85), rgba(13,13,16,.8)); }
.ru-card__quote-mark{ font-family:Georgia,serif; font-size:38px; line-height:.5; color:var(--volt); opacity:.55; display:block; margin-bottom:4px; }
.ru-card--text .ru-card__quote{ -webkit-line-clamp:4; font-size:12px; }

.ru-card__body{ padding:12px 13px; display:flex; flex-direction:column; gap:6px; flex:1; min-height:0; }
.ru-card__quote{ margin:0; font-size:12px; color:var(--text-muted); line-height:1.48; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ru-card__quote mark{ background:none; color:var(--gold); font-weight:700; }
.ru-card__foot{ display:flex; align-items:center; gap:7px; margin-top:auto; }
.ru-card__who{ min-width:0; flex:1; }
.ru-card__who b{ display:block; font-size:11.5px; font-weight:800; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ru-card__who small{ display:block; font-size:9.5px; color:var(--volt); font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.ru-card .stars{ font-size:10px; }

/* ---- Animated review timeline (below the orbit stage) ---- */
.ru-timeline{ display:flex; align-items:center; gap:0; overflow-x:auto; padding:4px 4px 10px; scrollbar-width:none; }
.ru-timeline::-webkit-scrollbar{ display:none; }
.ru-timeline__item{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; background:none; border:none; padding:4px 3px; color:var(--text-faint); }
.ru-timeline__dot{ width:9px; height:9px; border-radius:50%; background:var(--border-strong); transition:.3s; }
.ru-timeline__item.is-visited .ru-timeline__dot{ background:var(--gold-soft); }
.ru-timeline__item.is-current .ru-timeline__dot{ width:13px; height:13px; background:var(--volt); box-shadow:0 0 0 4px rgba(255,27,60,.22), 0 0 16px rgba(255,27,60,.6); animation:ruDotPulse 1.6s ease-in-out infinite; }
.ru-timeline__label{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; opacity:0; max-width:0; overflow:hidden; transition:.3s; }
.ru-timeline__item.is-current .ru-timeline__label{ opacity:1; max-width:120px; color:var(--text); }
.ru-timeline__track{ flex-shrink:0; width:22px; height:1px; background:var(--border); transition:background .3s; }
.ru-timeline__track.is-done{ background:linear-gradient(90deg,var(--gold-soft),var(--volt)); }
@keyframes ruDotPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.25); } }

/* ---- Fullscreen lightbox ---- */
.ru-lightbox{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .4s; padding:20px; }
.ru-lightbox.open{ opacity:1; pointer-events:auto; }
.ru-lightbox__scrim{ position:absolute; inset:0; background:rgba(4,4,6,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.ru-lightbox__stage{ position:relative; z-index:2; width:min(92vw,900px); display:flex; flex-direction:column; align-items:center; }
.ru-lightbox__close{
  position:absolute; top:-46px; right:0; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid var(--border-strong); color:#fff; font-size:16px;
  display:flex; align-items:center; justify-content:center; transition:.2s; z-index:3;
}
.ru-lightbox__close:hover{ background:var(--volt); border-color:var(--volt); }
.ru-lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%;
  background:rgba(10,10,13,.65); border:1px solid var(--border-strong); color:#fff; font-size:20px;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:.2s;
}
.ru-lightbox__nav:hover{ background:var(--volt); border-color:var(--volt); }
.ru-lightbox__nav.prev{ left:-56px; } .ru-lightbox__nav.next{ right:-56px; }
@media (max-width:960px){ .ru-lightbox__nav.prev{ left:6px; } .ru-lightbox__nav.next{ right:6px; } }

.ru-lb-card{
  width:100%; max-height:74vh; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(155deg, rgba(28,26,30,.92), rgba(13,13,16,.94));
  border:1px solid var(--border-strong); box-shadow:0 40px 100px rgba(0,0,0,.6);
  display:flex; flex-direction:column;
}
@media (min-width:720px){ .ru-lb-card{ flex-direction:row; max-height:560px; } }
.ru-lb-media{ position:relative; background:#0b0b0d; flex-shrink:0; overflow:hidden; min-height:220px; }
@media (min-width:720px){ .ru-lb-media{ width:52%; } }
.ru-lb-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ru-lb-card.mode-text .ru-lb-media{ display:none; }
.ru-lb-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.15); transition:opacity .3s; cursor:pointer; border:none; }
.ru-lb-play span{ width:68px; height:68px; border-radius:50%; background:linear-gradient(135deg,var(--volt),var(--volt-dark)); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 36px rgba(0,0,0,.55); }
.ru-lb-media.is-playing .ru-lb-play{ opacity:0; pointer-events:none; }
.ru-lb-progress{ position:absolute; left:12px; right:12px; bottom:14px; height:4px; border-radius:2px; background:rgba(255,255,255,.2); overflow:hidden; opacity:0; transition:.3s; }
.ru-lb-media.is-playing .ru-lb-progress{ opacity:1; }
.ru-lb-progress__bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--volt),var(--gold)); }
.ru-lb-controls{ position:absolute; left:12px; bottom:24px; display:flex; gap:8px; opacity:0; transition:.3s; }
.ru-lb-media.is-playing .ru-lb-controls{ opacity:1; }
.ru-lb-controls button{ width:30px; height:30px; border-radius:50%; background:rgba(10,10,13,.7); border:1px solid rgba(255,255,255,.2); color:#fff; display:flex; align-items:center; justify-content:center; }
.ru-lb-note{ position:absolute; top:12px; right:12px; background:rgba(10,10,13,.7); color:var(--text-faint); font-size:9.5px; padding:4px 9px; border-radius:var(--radius-pill); border:1px solid var(--border); max-width:60%; text-align:right; line-height:1.4; }
.ru-lb-zoomwrap{ width:100%; height:100%; overflow:hidden; cursor:zoom-in; touch-action:none; }
.ru-lb-zoomwrap.is-zoomed{ cursor:grab; }
.ru-lb-zoomwrap img{ transition:transform .35s var(--ease); transform-origin:center; will-change:transform; }

.ru-lb-body{ padding:26px 26px 18px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; flex:1; }
.ru-lb-head{ display:flex; align-items:center; gap:12px; }
.ru-lb-head .avatar{ width:46px; height:46px; font-size:16px; }
.ru-lb-head h4{ font-size:16px; margin:0 0 2px; }
.ru-lb-head .meta{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-faint); flex-wrap:wrap; }
.ru-lb-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.ru-lb-badge{ display:flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:4px 9px; border-radius:var(--radius-pill); }
.ru-lb-badge.verified{ background:rgba(51,209,122,.12); color:var(--green); }
.ru-lb-badge.google{ background:rgba(66,133,244,.14); color:#8ab4ff; }
.ru-lb-product{ font-size:12px; color:var(--text-muted); }
.ru-lb-product b{ color:var(--text); }
.ru-lb-quote-mark{ font-family:Georgia,serif; font-size:52px; line-height:.4; color:var(--volt); opacity:.5; }
.ru-lb-text{ font-size:17px; line-height:1.7; color:var(--text); max-width:52ch; }
.ru-lb-text mark{ background:none; color:var(--gold); font-weight:700; }
.ru-lb-card.mode-text .ru-lb-body{ padding:40px clamp(24px,6vw,64px); align-items:center; text-align:center; }
.ru-lb-card.mode-text .ru-lb-text{ font-size:clamp(19px,2.6vw,26px); font-weight:500; }
.ru-lb-timeline{ margin-top:auto; padding-top:14px; }

/* ---- Responsive: shrink stage + cards, keep perfect circles ---- */
@media (max-width:960px){
  .ru-stage{ height:520px; }
  .ru-card--video{ width:190px; height:250px; }
  .ru-card--photo{ width:160px; height:210px; }
  .ru-card--text{ width:150px; height:180px; }
}
@media (max-width:640px){
  .ru-stage{ height:440px; }
  .ru-hub__core{ width:150px; height:150px; }
  .ru-hub__rating{ font-size:27px; }
  .ru-hub__count, .ru-hub__google{ font-size:9.5px; }
  .ru-card--video{ width:160px; height:212px; }
  .ru-card--photo{ width:138px; height:180px; }
  .ru-card--text{ width:128px; height:158px; padding:12px; }
  .ru-card__quote{ font-size:10.5px; }
  .ru-hint{ font-size:9.5px; padding:5px 11px; }
  .ru-lightbox{ padding:12px; }
  .ru-lb-body{ padding:20px 18px 16px; }
}
@media (max-width:400px){
  .ru-stage{ height:400px; }
  .ru-card--video{ width:140px; height:186px; }
  .ru-card--photo{ width:122px; height:160px; }
  .ru-card--text{ width:112px; height:142px; }
}

/* ---- Reduced motion: keep the interaction, drop the decorative spin/pulse/float ---- */
@media (prefers-reduced-motion:reduce){
  .ru-hub, .ru-hub__core, .ru-hub__core::before{ animation:none !important; }
  .ru-timeline__item.is-current .ru-timeline__dot{ animation:none; }
  .ru-card{ transition:opacity .25s ease !important; }
}

/* ---------- Newsletter ---------- */
.newsletter{
  border-radius:var(--radius-lg); background:linear-gradient(120deg,var(--surface),var(--surface-2));
  border:1px solid var(--border); padding:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.newsletter::before{
  content:''; position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle,var(--red-glow),transparent 70%); top:-140px; right:-100px;
}
.newsletter-form{ display:flex; gap:10px; position:relative; z-index:2; }
.newsletter-form input{
  padding:14px 18px; border-radius:var(--radius-pill); border:1.5px solid var(--border-strong);
  background:var(--bg-soft); color:var(--text); min-width:260px; outline:none;
}
.newsletter-form input:focus{ border-color:var(--red); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--bg-soft); border-top:1px solid var(--border); padding:56px 0 0; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:36px; }
.footer-grid h4{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; color:var(--text); }
.footer-grid a{ display:block; color:var(--text-muted); font-size:13.5px; margin-bottom:10px; transition:color .2s; }
.footer-grid a:hover{ color:var(--red); }
.footer-social{ display:flex; gap:12px; margin-top:18px; }

/* Squircle tiles rather than flat brand dots.
   Four fully-saturated circles on a near-black footer read as stickers stuck
   on the page. These sit back at rest — brand colour dimmed, thin light rim,
   soft inner highlight — and come fully alive on hover: full saturation, a
   coloured glow in the platform's own colour, a lift, and a diagonal sheen
   that sweeps across the tile. Recognisable at rest, rewarding to touch.

   The glyph is centred with absolute + translate(-50%,-50%) rather than flex,
   which is immune to the baseline and line-height quirks that can nudge a
   flex-centred icon half a pixel off true. */
.social-btn{
  position:relative; width:44px; height:44px; border-radius:14px;
  flex-shrink:0; color:#fff; padding:0; border:0; overflow:hidden;
  background:var(--sc-bg, #222);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 6px 16px rgba(0,0,0,.4);
  filter:saturate(.72) brightness(.86);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.social-btn svg{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:19px; height:19px; display:block; z-index:2;
}
/* Sheen: a bright diagonal band parked off the left edge until hover. */
.social-btn__sheen{
  position:absolute; inset:-40% -60%; z-index:1; pointer-events:none;
  background:linear-gradient(72deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .55s var(--ease);
}
.social-btn:hover .social-btn__sheen{ transform:translateX(120%); }
.social-btn:hover{
  transform:translateY(-4px);
  filter:saturate(1.12) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 12px 26px rgba(0,0,0,.5),
    0 0 0 1px var(--sc-ring, transparent),
    0 8px 30px var(--sc-glow, transparent);
}
.social-btn:active{ transform:translateY(-1px) scale(.96); }
.social-btn:focus-visible{ outline:2px solid var(--volt); outline-offset:3px; }

/* Name on hover — four unlabelled icons ask the visitor to decode logos. */
.social-btn__tip{
  position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px);
  padding:5px 10px; border-radius:var(--radius-pill); white-space:nowrap;
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:rgba(12,12,15,.94); color:#fff; border:1px solid var(--border-strong);
  opacity:0; pointer-events:none; z-index:5;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.social-btn:hover .social-btn__tip,
.social-btn:focus-visible .social-btn__tip{ opacity:1; transform:translateX(-50%) translateY(0); }

.social-ig{
  --sc-bg:radial-gradient(circle at 28% 112%, #ffdb73 0%, #fd5949 28%, #d6249f 56%, #285AEB 92%);
  --sc-glow:rgba(214,36,159,.5); --sc-ring:rgba(253,89,73,.55);
}
.social-fb{ --sc-bg:linear-gradient(160deg,#3b8bff,#1877F2 55%,#0b5ed7); --sc-glow:rgba(24,119,242,.5);  --sc-ring:rgba(24,119,242,.6); }
.social-yt{ --sc-bg:linear-gradient(160deg,#ff4646,#FF0000 55%,#c00);      --sc-glow:rgba(255,0,0,.45);    --sc-ring:rgba(255,0,0,.6); }
.social-wa{ --sc-bg:linear-gradient(160deg,#4ce383,#25D366 55%,#12a350);   --sc-glow:rgba(37,211,102,.5);  --sc-ring:rgba(37,211,102,.6); }

@media (prefers-reduced-motion:reduce){
  .social-btn, .social-btn__sheen, .social-btn__tip{ transition:none; }
  .social-btn:hover{ transform:none; }
  .social-btn:hover .social-btn__sheen{ transform:translateX(-120%); }
}

.footer-bottom{ border-top:1px solid var(--border); padding:20px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-bottom p{ margin:0; font-size:12px; color:var(--text-faint); }
.pay-icons{ display:flex; gap:8px; opacity:.8; }
.pay-icons span{ padding:4px 8px; border:1px solid var(--border); border-radius:6px; font-size:10px; color:var(--text-faint); }
.legal-note{ font-size:11px; color:var(--text-faint); padding:16px 0 24px; border-top:1px solid var(--border); }

/* ---------- Sticky Mobile Footer Nav ---------- */
.mobile-tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:300; display:none;
  background:linear-gradient(180deg,#131015,#0a090c 60%); backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid var(--border-strong); padding:8px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,27,60,.35);
}
.mobile-tabbar__inner{ display:flex; justify-content:space-around; align-items:center; }
.mobile-tabbar a{
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 12px; border-radius:14px;
  color:var(--text-faint); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  position:relative; transition:color .25s, transform .15s, background .25s;
}
.mobile-tabbar a svg{ width:21px; height:21px; transition:transform .25s var(--ease); }
.mobile-tabbar a.active{ color:#fff; background:rgba(255,27,60,.14); }
.mobile-tabbar a.active svg{ filter:drop-shadow(0 0 8px var(--red-glow)); transform:translateY(-1px) scale(1.08); }
.mobile-tabbar a.active::before{
  content:''; position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--volt); box-shadow:0 0 8px var(--red-glow);
}
.mobile-tabbar a:active{ transform:scale(.9); }
.mobile-tabbar .tab-badge{
  position:absolute; top:0; right:4px; min-width:15px; height:15px; padding:0 3px; border-radius:999px;
  background:linear-gradient(135deg,var(--magenta),var(--volt-dark)); color:#fff; font-size:9px;
  display:flex; align-items:center; justify-content:center; font-weight:800; box-shadow:0 0 0 2px #0a090c;
}
.mobile-tabbar .fab-cart{
  width:54px; height:54px; border-radius:50%; margin-top:-28px; position:relative;
  background:linear-gradient(135deg,var(--volt),var(--volt-dark)); color:var(--on-volt);
  box-shadow:0 10px 26px rgba(255,27,60,.5); display:flex; align-items:center; justify-content:center;
  border:3px solid var(--bg);
}
.mobile-tabbar .fab-cart::before{
  content:''; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid var(--volt);
  opacity:.6; animation:fabPulse 2.2s ease-out infinite;
}
@keyframes fabPulse{ 0%{ transform:scale(.85); opacity:.7; } 100%{ transform:scale(1.35); opacity:0; } }
.mobile-tabbar .fab-cart svg{ width:22px; height:22px; position:relative; z-index:2; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:90px; transform:translate(-50%,20px); z-index:600;
  background:var(--surface-2); border:1px solid var(--border-strong); color:var(--text);
  padding:12px 20px; border-radius:var(--radius-pill); font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-md);
  opacity:0; pointer-events:none; transition:.35s var(--ease);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:12.5px; color:var(--text-faint); padding:16px 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--red); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color:var(--text-muted); }

/* ---------- Shop layout ---------- */
.shop-layout{ display:grid; grid-template-columns:260px 1fr; gap:30px; align-items:start; }
.filters{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; position:sticky; top:calc(var(--header-h) + 16px); }
.filters h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; color:var(--text-muted); display:flex; justify-content:space-between; align-items:center; }
.filter-group{ padding:16px 0; border-bottom:1px solid var(--border); }
.filter-group:last-child{ border-bottom:none; }
.chk{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-muted); padding:6px 0; cursor:pointer; }
.chk input{ appearance:none; width:17px; height:17px; border-radius:5px; border:1.5px solid var(--border-strong); background:var(--bg-soft); position:relative; flex-shrink:0; }
.chk input:checked{ background:var(--volt); border-color:var(--volt); }
.chk input:checked::after{ content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--on-volt); font-weight:800; }
.chk:hover{ color:var(--text); }
.chk .n{ margin-left:auto; color:var(--text-faint); font-size:11.5px; }
.range-row{ display:flex; justify-content:space-between; font-size:12px; color:var(--text-faint); margin-top:8px; }
input[type=range]{ width:100%; accent-color:var(--red); }
.star-filter{ display:flex; gap:4px; }

.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.toolbar .count{ font-size:13px; color:var(--text-muted); }
.toolbar-right{ display:flex; align-items:center; gap:10px; }
select.sortbox{
  padding:11px 16px; border-radius:var(--radius-pill); border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text); font-size:12.5px; font-weight:700; text-transform:uppercase; outline:none;
}
.view-toggle{ display:flex; border:1px solid var(--border-strong); border-radius:var(--radius-pill); overflow:hidden; }
.view-toggle button{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--surface); border:none; color:var(--text-faint); }
.view-toggle button.active{ background:var(--volt); color:var(--on-volt); }
.active-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.chip{ display:flex; align-items:center; gap:6px; padding:6px 12px; background:var(--surface-2); border-radius:var(--radius-pill); font-size:12px; border:1px solid var(--border); }
.chip button{ background:none; border:none; color:var(--text-faint); font-size:14px; line-height:1; }
.pagination{ display:flex; justify-content:center; gap:8px; margin-top:36px; }
.pagination a{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--border); font-size:13px; font-weight:700; }
.pagination a.active{ background:var(--volt); border-color:var(--volt); color:var(--on-volt); }
.filter-toggle-mobile{ display:none; }

/* ---------- Product Detail Page ---------- */
.pdp{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:flex-start; }

/* Gallery: full-width main image (no padding, rounded corners) with a
   horizontal thumbnail slider + arrow-icon nav underneath. Replaces the
   old vertical thumb-rail + padded contain-image layout. */
.pdp-gallery{ display:flex; flex-direction:column; gap:14px; position:sticky; top:calc(var(--header-h) + 16px); }
.main-media{
  position:relative; width:100%; aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#1f1f27,#121216); border:1px solid var(--border); cursor:zoom-in;
}
.main-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .28s var(--ease); }
.main-media img.is-fading{ opacity:0; }
.gallery-badges{ position:absolute; top:16px; left:16px; display:flex; flex-direction:column; gap:8px; z-index:3; }
.zoom-hint{
  position:absolute; bottom:14px; left:14px; z-index:3; display:flex; align-items:center; gap:6px;
  background:rgba(7,7,10,.62); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14); color:#fff;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:8px 13px; border-radius:var(--radius-pill);
  pointer-events:none; transition:opacity .25s;
}
.zoom-hint svg{ width:13px; height:13px; flex-shrink:0; }

.thumb-slider{ display:flex; align-items:center; gap:8px; }
.thumb-track-wrap{ flex:1; min-width:0; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-x:contain; touch-action:pan-x; }
.thumb-track-wrap::-webkit-scrollbar{ display:none; }
/* width:max-content is the whole reason the thumbnail strip scrolls.
   Without it the track is a block-level flex container that inherits the
   wrap's width (100%); its flex-shrink:0 thumbs then paint OUTSIDE it, so the
   wrap's scrollWidth equals its clientWidth and there is literally nothing to
   scroll — the arrows fired but the strip never moved once a product had more
   thumbnails than fit on screen. */
.thumb-track{ display:flex; gap:10px; width:max-content; }
/* Belt and braces against sideways page drift on the PDP: the gallery column
   clips its own overflow rather than letting a wide thumb strip push the
   document width out (which is what shifted the whole page left on phones). */
.pdp-gallery{ max-width:100%; min-width:0; overflow-x:clip; }
.thumb{
  width:72px; height:72px; flex-shrink:0; border-radius:10px; border:1.5px solid var(--border); overflow:hidden; background:var(--surface);
  padding:6px; transition:border-color .2s, transform .2s; scroll-snap-align:start; cursor:pointer;
}
.thumb:hover{ border-color:var(--text-muted); transform:translateY(-2px); }
.thumb img{ width:100%; height:100%; object-fit:contain; }
.thumb.active{ border-color:var(--red); box-shadow:0 0 0 1px var(--red); }
.thumb-arrow{
  width:36px; height:36px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--border-strong); background:var(--surface-2);
  color:var(--text); display:flex; align-items:center; justify-content:center; transition:.2s var(--ease); cursor:pointer;
}
.thumb-arrow svg{ width:16px; height:16px; }
.thumb-arrow:hover{ background:var(--volt); border-color:var(--volt); color:#fff; transform:scale(1.08); }
.thumb-arrow:disabled{ opacity:.3; pointer-events:none; }

/* Zoom modal — click main image or the zoom button to inspect closely.
   Wheel/drag to pan+zoom on desktop, pinch/double-tap + drag on touch. */
.pdp-zoom-modal{
  position:fixed; inset:0; z-index:2000; background:rgba(4,4,6,.94); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  touch-action:none; overscroll-behavior:contain;
}
.pdp-zoom-modal.open{ opacity:1; pointer-events:auto; }
.pdp-zoom-modal__stage{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pdp-zoom-modal__stage img{ max-width:90vw; max-height:88vh; object-fit:contain; will-change:transform; cursor:grab; user-select:none; -webkit-user-drag:none; }
.pdp-zoom-modal__stage img:active{ cursor:grabbing; }
.pdp-zoom-modal__close{
  position:absolute; top:18px; right:18px; z-index:3; width:42px; height:42px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border-strong); color:var(--text); display:flex; align-items:center; justify-content:center;
  font-size:18px; transition:.2s;
}
.pdp-zoom-modal__close:hover{ background:var(--volt); border-color:var(--volt); color:#fff; }
.pdp-zoom-modal__hint{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:3; color:var(--text-muted);
  font-size:12px; background:rgba(7,7,10,.6); padding:8px 16px; border-radius:var(--radius-pill); border:1px solid var(--border);
  white-space:nowrap;
}
.pdp-zoom-modal__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border-strong); color:var(--text); display:flex; align-items:center; justify-content:center; transition:.2s;
}
.pdp-zoom-modal__nav:hover{ background:var(--volt); border-color:var(--volt); color:#fff; }
.pdp-zoom-modal__nav--prev{ left:18px; } .pdp-zoom-modal__nav--next{ right:18px; }
@media (max-width:640px){ .pdp-zoom-modal__nav{ display:none; } }

.pdp-info{ display:flex; flex-direction:column; gap:16px; }
.pdp-cat{ font-size:12px; color:var(--red); font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.pdp-title{ font-size:clamp(22px,2.8vw,30px); text-transform:uppercase; line-height:1.2; overflow-wrap:break-word; word-break:break-word; max-width:100%; }
.pdp-title__brand{
  display:block; font-size:clamp(12px,1.3vw,14px); letter-spacing:.14em; color:var(--red); font-weight:800;
  margin-bottom:4px; text-shadow:0 0 18px var(--volt-glow);
}
.pdp-title__name{ display:inline-block; max-width:100%; overflow-wrap:break-word; word-break:break-word; }
.pdp-meta{ display:flex; align-items:center; gap:16px; font-size:13px; color:var(--text-muted); flex-wrap:wrap; }
.pdp-meta a{ color:var(--text-muted); border-bottom:1px dotted var(--text-faint); }
.pdp-price-block{ display:flex; align-items:baseline; gap:12px; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pdp-price{ font-size:30px; font-weight:800; }
.pdp-strike{ font-size:16px; color:var(--text-faint); text-decoration:line-through; }
.pdp-save{ font-size:12.5px; font-weight:800; color:var(--green); background:rgba(51,209,122,.12); padding:4px 10px; border-radius:var(--radius-pill); }
.pdp-tax{ font-size:11.5px; color:var(--text-faint); margin-top:-6px; }

.option-group{ display:flex; flex-direction:column; gap:11px; }
.option-group__label{ font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); display:flex; gap:8px; }
.option-group__label b{ color:var(--text); font-weight:800; }
.option-pills{ display:flex; gap:11px; flex-wrap:wrap; }
.option-pill{
  padding:12px 20px; border-radius:var(--radius-pill); border:1.5px solid var(--border-strong); background:var(--surface-2);
  color:var(--text); font-size:13.5px; font-weight:700; transition:.2s var(--ease); position:relative; opacity:1; line-height:1.2;
}
.option-pill:hover{ border-color:var(--text-muted); background:var(--surface); transform:translateY(-1px); }
/* Flavour pills carry a colour dot before the label (see
   nutra_get_flavour_swatch() in inc/template-tags.php). inline-flex keeps the
   dot and the text on one baseline no matter how long the flavour name is. */
.option-pill--swatch{ display:inline-flex; align-items:center; gap:8px; }
.option-pill__dot{
  width:14px; height:14px; border-radius:50%; flex-shrink:0; display:inline-block;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.22), 0 2px 6px rgba(0,0,0,.45);
}
.option-pill.active .option-pill__dot{ box-shadow:0 0 0 1.5px rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.45); }
.option-pill.active{
  border-color:var(--volt); background:linear-gradient(135deg,var(--volt),var(--volt-dark)); color:#fff; font-weight:800;
  box-shadow:0 8px 20px rgba(255,27,60,.4);
}
/* Out-of-stock size/flavour: soft blur + desaturate + a clean diagonal strike
   across the pill (premium "unavailable swatch" pattern), instead of the old
   plain opacity+line-through-text treatment. */
.option-pill.oos{
  opacity:.5; filter:blur(.3px) grayscale(.5); text-decoration:none; pointer-events:none;
  color:var(--text-faint); overflow:hidden;
}
.option-pill.oos::after{
  content:''; position:absolute; left:-4%; right:-4%; top:50%; height:1.5px;
  background:var(--text-faint); transform:translateY(-50%) rotate(-9deg);
}

.qty-cart-row{ display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
.qty-stepper{ display:flex; align-items:center; border:1.5px solid var(--border-strong); border-radius:var(--radius-pill); overflow:hidden; background:var(--surface); }
.qty-stepper button{ width:46px; height:56px; background:transparent; border:none; color:var(--text); font-size:19px; font-weight:700; transition:background .2s, color .2s; }
.qty-stepper button:hover{ background:var(--surface-2); color:var(--red); }
.qty-stepper input{ width:44px; text-align:center; background:var(--bg-soft); border:none; color:var(--text); font-weight:800; height:56px; font-size:14.5px; }
/* flex:1 alone let the two buttons shrink until their labels wrapped or got
   clipped once the option pills above pushed the column narrower (more sizes /
   more flavours = narrower usable width). A min-width + flex-basis makes them
   drop onto their own row instead of degrading, so Add to Cart / Buy Now stay
   full-size and readable no matter how many variants a product has. */
.qty-cart-row .btn{
  flex:1 1 170px; min-width:150px; height:56px; font-size:14.5px; letter-spacing:.04em;
  white-space:nowrap;
}
.qty-stepper{ flex:0 0 auto; }
.qty-cart-row #addCartBtn{
  background:var(--surface-2); color:var(--text); border:1.5px solid var(--border-strong); box-shadow:none;
}
.qty-cart-row #addCartBtn:hover{ border-color:var(--red); color:var(--red); background:var(--surface); transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.qty-cart-row #buyNowBtn{
  background:linear-gradient(135deg,var(--volt),var(--volt-dark)); color:#fff; box-shadow:0 12px 28px var(--volt-glow);
  position:relative; overflow:hidden;
}
.qty-cart-row #buyNowBtn::after{
  content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.qty-cart-row #buyNowBtn:hover::after{ transform:translateX(120%); }
.qty-cart-row #buyNowBtn:hover{ filter:brightness(1.1); box-shadow:0 16px 34px var(--volt-glow); transform:translateY(-2px); }
@media (max-width:520px){
  .qty-cart-row{ flex-wrap:wrap; }
  .qty-stepper{ flex:1 1 100%; justify-content:center; }
  .qty-cart-row #addCartBtn, .qty-cart-row #buyNowBtn{ flex:1 1 calc(50% - 6px); min-width:140px; }
}

.pdp-trust-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pdp-trust-row .trust-mini{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:14px 8px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); font-size:11px; color:var(--text-muted); font-weight:700; }
.pdp-trust-row .trust-mini svg{ color:var(--red); width:22px; height:22px; }

.pincode-check{ display:flex; gap:8px; }
.pincode-check input{ flex:1; padding:12px 16px; border-radius:var(--radius-pill); border:1.5px solid var(--border-strong); background:var(--surface); color:var(--text); outline:none; }
.pincode-check input:focus{ border-color:var(--red); }
.pincode-result{ font-size:12.5px; color:var(--green); margin-top:4px; display:none; }
.pincode-result.show{ display:block; }

/* Sticky Add To Cart bar (desktop + mobile, appears on scroll) */
.sticky-atc{
  position:fixed; left:0; right:0; bottom:0; z-index:280; background:rgba(14,14,18,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--border); transform:translateY(110%); transition:transform .35s var(--ease);
  padding:12px 0;
}
.sticky-atc.show{ transform:translateY(0); }
.sticky-atc__inner{ display:flex; align-items:center; gap:16px; }
.sticky-atc img{ width:46px; height:46px; object-fit:contain; background:var(--surface); border-radius:8px; padding:4px; }
.sticky-atc .info{ flex:1; min-width:0; }
.sticky-atc .info h5{ font-size:13px; margin:0 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-atc .info .p{ font-size:13px; font-weight:800; color:var(--gold); }
.sticky-atc .btn{ flex-shrink:0; }

/* Tabs */
.tabs-nav{
  display:flex; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:6px; overflow-x:auto; scrollbar-width:none; width:fit-content; max-width:100%;
}
.tabs-nav::-webkit-scrollbar{ display:none; }
.tabs-nav button{
  padding:11px 20px; background:none; border:none; border-radius:var(--radius-pill); color:var(--text-muted); font-weight:700; text-transform:uppercase;
  font-size:12px; letter-spacing:.03em; white-space:nowrap; position:relative; transition:.25s var(--ease);
}
.tabs-nav button:hover{ color:var(--text); }
.tabs-nav button.active{
  color:#fff; background:linear-gradient(135deg,var(--volt),var(--volt-dark)); box-shadow:0 6px 16px rgba(255,27,60,.35);
}
.tab-panel{
  display:none; padding:30px 28px; color:var(--text-muted); font-size:14px; line-height:1.75;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); margin-top:16px;
}
/* Any table injected into a tab (nutrition facts, manufacturer info) scrolls
   internally instead of ever being able to push the page wider than the
   viewport on narrow phones. */
.tab-panel table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-sm); }
.tab-panel.active{ display:block; animation:fadeUp .35s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.tab-panel h5{ color:var(--text); font-size:15px; text-transform:uppercase; margin:18px 0 10px; letter-spacing:.03em; }
.tab-panel h5:first-child{ margin-top:0; }
.tab-panel ul{ padding-left:0; }
.tab-panel ul li{ position:relative; padding-left:26px; margin-bottom:10px; }
.tab-panel ul li::before{
  content:'✓'; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%; background:rgba(255,27,60,.15);
  color:var(--red); font-weight:800; font-size:11px; display:flex; align-items:center; justify-content:center;
}
.info-table{ width:100%; border-collapse:collapse; font-size:13px; margin-top:10px; border-radius:var(--radius-sm); overflow:hidden; }
.info-table td{ padding:12px 14px; border:1px solid var(--border); color:var(--text-muted); }
.info-table td:first-child{ color:var(--text); font-weight:700; width:180px; background:var(--surface-2); }

.nutrition-table{ width:100%; border-collapse:collapse; font-size:13.5px; border-radius:var(--radius-sm); overflow:hidden; }
.nutrition-table th{ text-align:left; padding:13px 14px; background:var(--surface-2); color:var(--text); text-transform:uppercase; font-size:11.5px; letter-spacing:.04em; }
.nutrition-table td{ padding:13px 14px; border-bottom:1px solid var(--border); color:var(--text-muted); }
.nutrition-table tr:nth-child(even) td{ background:rgba(255,255,255,.015); }
.nutrition-table tr:last-child td{ border-bottom:none; }
@media (max-width:640px){
  .tab-panel{ padding:22px 18px; }
}

/* FAQ accordion */
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{ width:100%; text-align:left; background:none; border:none; color:var(--text); font-weight:700; font-size:14px; padding:16px 4px; display:flex; justify-content:space-between; align-items:center; }
.faq-q .plus{ transition:transform .3s; color:var(--red); font-size:18px; }
.faq-item.open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); color:var(--text-muted); font-size:13.5px; line-height:1.7; }
.faq-item.open .faq-a{ padding-bottom:16px; }

/* Reviews */
.review-summary{ display:flex; gap:32px; align-items:center; padding:24px; background:var(--surface); border-radius:var(--radius-md); border:1px solid var(--border); flex-wrap:wrap; }
.review-score{ text-align:center; }
.review-score .big{ font-size:44px; font-weight:800; }
.review-bars{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:6px; }
.review-bars .bar-row{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); }
.review-bars .bar{ flex:1; height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
.review-bars .bar i{ display:block; height:100%; background:var(--gold); }
.review-list{ display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.review-item{ padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.review-item__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.review-item .name{ font-weight:700; font-size:13.5px; }
.review-item .date{ font-size:11.5px; color:var(--text-faint); }
.review-item p{ margin:8px 0 0; font-size:13.5px; color:var(--text-muted); }
.verified{ font-size:10.5px; color:var(--green); font-weight:800; text-transform:uppercase; background:rgba(51,209,122,.12); padding:2px 8px; border-radius:var(--radius-pill); margin-left:8px; }

/* Related products carousel */
.carousel{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none; }
.carousel::-webkit-scrollbar{ display:none; }

/* ---------- Universal carousel navigation ----------
   Buttons are injected into every .carousel by js/carousel-nav.js. The wrap
   only gets .has-nav when there is actually something to scroll, so the
   buttons never appear on a carousel that already fits. */
.carousel-wrap{ position:relative; }
.carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:42px; height:42px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  background:rgba(10,10,13,.82); border:1.5px solid var(--border-strong);
  color:#fff; cursor:pointer; backdrop-filter:blur(6px);
  transition:background .22s var(--ease), border-color .22s var(--ease), opacity .22s, transform .22s var(--ease);
}
.carousel-wrap.has-nav .carousel-nav{ display:flex; }
.carousel-nav svg{ width:19px; height:19px; }
.carousel-nav--prev{ left:-6px; }
.carousel-nav--next{ right:-6px; }
.carousel-nav:hover{ background:var(--red); border-color:var(--red); transform:translateY(-50%) scale(1.06); }
.carousel-nav:disabled{ opacity:.28; cursor:default; }
.carousel-nav:disabled:hover{ background:rgba(10,10,13,.82); border-color:var(--border-strong); transform:translateY(-50%); }
/* The buttons sit over the slider's edges; nudging the carousel's own padding
   keeps the first and last item from sitting underneath them on wide screens. */
.carousel-wrap.has-nav > .carousel{ padding-left:2px; padding-right:2px; }

@media (max-width:640px){
  /* Kept visible on touch — a slider with no visible control gives no hint
     that there is more content sideways. Smaller and pulled inside the
     container so they don't overhang the screen edge. */
  .carousel-nav{ width:34px; height:34px; }
  .carousel-nav svg{ width:16px; height:16px; }
  .carousel-nav--prev{ left:2px; }
  .carousel-nav--next{ right:2px; }
}
.carousel .product-card{ min-width:230px; max-width:230px; scroll-snap-align:start; }

/* Certifications strip */
.cert-strip{ display:flex; gap:40px; align-items:center; justify-content:space-around; flex-wrap:wrap; opacity:.85; }
.cert-strip .cert{ display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px; color:var(--text-faint); text-align:center; width:110px; }
.cert-strip .cert .ic{ width:48px; height:48px; border-radius:50%; border:1.5px solid var(--border-strong); display:flex; align-items:center; justify-content:center; color:var(--gold); }

/* Deals countdown */
.countdown{ display:flex; gap:8px; }
.countdown .box{ background:var(--surface-2); border-radius:8px; padding:6px 10px; font-weight:800; font-size:14px; min-width:36px; text-align:center; }
.countdown .lbl{ font-size:9px; color:var(--text-faint); text-align:center; margin-top:2px; text-transform:uppercase; }

/* ---------- True lazy-load with blur-up placeholder ---------- */
.lazy-img{
  filter:blur(14px); transform:scale(1.04); opacity:.7;
  transition:filter .6s var(--ease), opacity .6s var(--ease), transform .6s var(--ease);
}
.lazy-img.loaded{ filter:blur(0); transform:scale(1); opacity:1; }
.lazy-wrap{ display:block; position:relative; width:100%; height:100%; overflow:hidden; }
.lazy-wrap.abs-fill{ position:absolute; inset:0; } /* stacked/overlay images (e.g. hover-swap alt photo) */
.lazy-wrap::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,27,60,.06) 50%,transparent 70%);
  background-size:250% 100%; animation:shimmer 1.8s linear infinite;
  opacity:1; transition:opacity .4s;
}
.lazy-wrap.is-loaded::before{ opacity:0; }
@keyframes shimmer{ from{ background-position:150% 0; } to{ background-position:-50% 0; } }

/* ---------- Mega Menu ---------- */
.main-nav{ position:relative; }
.has-mega{ position:relative; }
.mega-panel{
  position:fixed; left:0; right:0; top:var(--header-h); z-index:190;
  background:rgba(10,12,10,.98); backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--border-strong); box-shadow:0 24px 50px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-8px); pointer-events:none; transition:.25s var(--ease);
}
.has-mega:hover .mega-panel, .mega-panel:hover{ opacity:1; transform:translateY(0); pointer-events:auto; }
.mega-inner{ display:grid; grid-template-columns:repeat(4,1fr) 1.2fr; gap:0; max-width:1280px; margin:0 auto; padding:32px 20px; }
.mega-col h5{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--volt); margin-bottom:14px; font-weight:800; }
.mega-col a{ display:block; font-size:13.5px; color:var(--text-muted); padding:7px 0; transition:.2s; }
.mega-col a:hover{ color:var(--text); padding-left:4px; }
.mega-promo{ border-radius:var(--radius-md); overflow:hidden; position:relative; min-height:180px; background:linear-gradient(145deg,var(--surface-2),var(--surface)); display:flex; flex-direction:column; justify-content:flex-end; padding:18px; border:1px solid var(--border); }
.mega-promo span{ font-size:11px; color:var(--volt); font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.mega-promo h4{ font-size:16px; margin:4px 0 10px; }

/* ---------- Shop by Goal / Level ---------- */
.goal-tabs{ display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
.goal-tabs button{
  padding:10px 20px; border-radius:var(--radius-pill); border:1.5px solid var(--border-strong); background:var(--surface);
  color:var(--text-muted); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.02em; transition:.2s;
}
.goal-tabs button.active{ background:var(--volt); border-color:var(--volt); color:var(--on-volt); }
.level-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.level-card{
  position:relative; border-radius:var(--radius-lg); padding:28px 24px; overflow:hidden; min-height:190px;
  display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--border);
  background:linear-gradient(150deg,var(--surface),var(--surface-2)); transition:transform .35s var(--ease), border-color .3s;
}
.level-card:hover{ transform:translateY(-6px); border-color:var(--volt); }
.level-card::before{
  content:''; position:absolute; top:-40px; right:-40px; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle,var(--volt-glow),transparent 70%); opacity:.5;
}
.level-card .lvl-tag{ font-size:11px; font-weight:800; text-transform:uppercase; color:var(--volt); letter-spacing:.08em; margin-bottom:8px; }
.level-card h3{ font-size:20px; text-transform:uppercase; margin-bottom:6px; }
.level-card p{ margin:0; font-size:12.5px; color:var(--text-muted); }

/* ---------- Combo / Stack deals ---------- */
.combo-card{
  min-width:290px; max-width:290px; scroll-snap-align:start; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:16px; display:flex; flex-direction:column; gap:10px; position:relative;
}
.combo-card .combo-imgs{ display:flex; align-items:center; justify-content:center; gap:8px; height:132px; }
.combo-card .combo-imgs img{ width:92px; height:92px; object-fit:contain; background:var(--bg-soft); border-radius:10px; padding:8px; }
.combo-card .plus-ic{ color:var(--volt); font-size:20px; font-weight:800; }
.combo-card h4{ font-size:13.5px; line-height:1.35; min-height:36px; }
.combo-save{ display:inline-flex; align-self:flex-start; background:rgba(255,27,60,.12); color:var(--volt); font-size:11px; font-weight:800; padding:4px 10px; border-radius:var(--radius-pill); }
.combo-price-row{ display:flex; align-items:baseline; gap:8px; }
.combo-price-row .now{ font-size:17px; font-weight:800; }
.combo-price-row .was{ font-size:12px; color:var(--text-faint); text-decoration:line-through; }

/* ---------- Authenticity checker widget ---------- */
.authenticity-widget{
  display:flex; align-items:center; gap:28px; padding:32px; border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--surface),var(--surface-2)); border:1px solid var(--border); flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.authenticity-widget::before{ content:''; position:absolute; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,var(--magenta-glow),transparent 70%); bottom:-140px; left:-80px; }
.authenticity-widget .badge-ic{ width:64px; height:64px; border-radius:50%; background:rgba(255,27,60,.1); border:1.5px solid var(--volt); display:flex; align-items:center; justify-content:center; color:var(--volt); flex-shrink:0; position:relative; z-index:2; }
.authenticity-form{ display:flex; gap:10px; flex:1; min-width:260px; position:relative; z-index:2; flex-wrap:wrap; }
.authenticity-form input{ flex:1; min-width:180px; padding:13px 18px; border-radius:var(--radius-pill); border:1.5px solid var(--border-strong); background:var(--bg-soft); color:var(--text); outline:none; }
.authenticity-form input:focus{ border-color:var(--volt); }

/* ---------- App download banner ---------- */
.app-banner{
  display:flex; align-items:center; justify-content:space-between; gap:24px; padding:36px 40px; border-radius:var(--radius-lg);
  background:linear-gradient(120deg,#0e1a10,#0a0d09 70%); border:1px solid var(--border-strong); flex-wrap:wrap; position:relative; overflow:hidden;
}
.app-banner::after{ content:''; position:absolute; top:-100px; right:-60px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,var(--volt-glow),transparent 70%); }
.app-badges{ display:flex; gap:10px; position:relative; z-index:2; }
.app-badges a{ padding:10px 18px; border-radius:10px; border:1.5px solid var(--border-strong); font-size:12px; font-weight:700; display:flex; align-items:center; gap:8px; background:var(--surface); }
.app-badges a:hover{ border-color:var(--volt); }

/* ---------- Press / video strip ---------- */
.press-strip{ display:flex; align-items:center; justify-content:space-around; flex-wrap:wrap; gap:30px; opacity:.6; filter:grayscale(1); }
.press-strip span{ font-family:'Oswald',sans-serif; font-weight:700; font-size:15px; letter-spacing:.04em; color:var(--text-muted); }
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.video-card{ position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:9/12; background:var(--surface); border:1px solid var(--border); }
.video-card .play-ic{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2;
}
.video-card .play-ic span{ width:52px; height:52px; border-radius:50%; background:rgba(255,27,60,.92); color:var(--on-volt); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.4); }

/* ---------- Motion layer: text reveal / ripple / page transition ---------- */
[data-text-reveal]{ overflow:visible; }
.tr-word{ display:inline-block; overflow:hidden; vertical-align:top; }
.tr-inner{ display:inline-block; will-change:transform; }
.magnetic{ will-change:transform; }
.ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.5);
  width:10px; height:10px; transform:translate(-50%,-50%) scale(0);
  pointer-events:none; animation:rippleAnim .6s ease-out forwards;
}
@keyframes rippleAnim{ to{ transform:translate(-50%,-50%) scale(22); opacity:0; } }
.btn, .quick-add{ position:relative; overflow:hidden; }
/* .icon-btn is intentionally excluded from overflow:hidden — the cart/wishlist
   count badge is positioned to poke slightly outside the circle (top:-4px;
   right:-4px) and was getting clipped/cut off by the ripple's overflow rule.
   The badge itself has its own ring (box-shadow) so ripple still looks clean. */
.icon-btn{ position:relative; }
.icon-btn .ripple{ border-radius:50%; }
.page-veil{
  position:fixed; inset:0; z-index:9999; background:var(--bg); pointer-events:none;
}

/* (old ring-avatar "story ring" carousel, then the v8 .coverflow carousel,
   both removed — the homepage reviews section is now the 3-ring Review
   Universe defined earlier in this file, see "REVIEW UNIVERSE" heading) */

.video-modal{
  position:fixed; inset:0; z-index:700; background:rgba(4,4,6,.92); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:.3s;
}
.video-modal.open{ opacity:1; pointer-events:auto; }
.video-modal__box{ width:min(380px,88vw); aspect-ratio:9/16; border-radius:var(--radius-lg); overflow:hidden; position:relative; background:var(--surface); border:1px solid var(--border-strong); }
.video-modal__box video, .video-modal__box img{ width:100%; height:100%; object-fit:cover; }
.video-modal__close{ position:absolute; top:-46px; right:0; width:36px; height:36px; border-radius:50%; background:var(--surface-2); color:#fff; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-strong); }
.video-modal__info{ position:absolute; left:0; right:0; bottom:0; padding:16px; background:linear-gradient(0deg,rgba(0,0,0,.75),transparent); }
.video-modal__info h4{ font-size:14px; margin-bottom:2px; }
.video-modal__info p{ margin:0; font-size:11.5px; color:var(--text-muted); }

/* ---------- Flash sale countdown ---------- */
.flash-sale{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:22px 28px; border-radius:var(--radius-lg); background:linear-gradient(120deg,#2a0508,#150406 70%);
  border:1px solid var(--border-strong); position:relative; overflow:hidden;
}
.flash-sale::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%,rgba(255,90,31,.25),transparent 60%); }
.flash-sale__text{ position:relative; z-index:2; }
.flash-sale__text span{ color:var(--ember); font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.flash-sale__text h3{ font-size:20px; text-transform:uppercase; margin:4px 0 0; }
.countdown-lg{ display:flex; gap:10px; position:relative; z-index:2; }
.countdown-lg .box{ background:var(--surface-2); border:1px solid var(--border-strong); border-radius:10px; padding:10px 14px; text-align:center; min-width:54px; }
.countdown-lg .box b{ display:block; font-size:22px; font-weight:800; font-family:'Oswald',sans-serif; }
.countdown-lg .box small{ font-size:9px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }

/* ---------- Social proof popup ---------- */
.social-proof{
  position:fixed; left:18px; bottom:90px; z-index:260; max-width:280px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:12px 14px; display:flex; gap:10px; align-items:center; box-shadow:var(--shadow-md);
  transform:translateX(-120%); transition:transform .5s var(--ease); opacity:0;
}
.social-proof.show{ transform:translateX(0); opacity:1; }
.social-proof img{ width:38px; height:38px; border-radius:8px; object-fit:contain; background:var(--bg-soft); padding:3px; flex-shrink:0; }
.social-proof .txt{ font-size:11.5px; line-height:1.4; }
.social-proof .txt b{ color:var(--text); }
.social-proof .txt .t{ color:var(--text-faint); font-size:10px; }
.social-proof .close-sp{ margin-left:auto; color:var(--text-faint); font-size:14px; align-self:flex-start; }

/* ---------- Floating utility buttons (WhatsApp / Scroll-to-top) ---------- */
.fab-stack{ position:fixed; right:18px; bottom:90px; z-index:260; display:flex; flex-direction:column; gap:12px; }
.fab{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); border:none; color:#fff; transition:transform .25s var(--ease);
}
.fab:hover{ transform:translateY(-3px) scale(1.05); }
.fab-whatsapp{ background:#25d366; }
.fab-top{ background:#141416; border:1px solid rgba(255,255,255,.14); opacity:0; pointer-events:none; transform:translateY(10px); }
.fab-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* ---------- Quick View modal ---------- */
.qv-modal{
  position:fixed; inset:0; z-index:650; background:rgba(4,4,6,.85); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:.3s;
}
.qv-modal.open{ opacity:1; pointer-events:auto; }
.qv-box{
  width:min(760px,94vw); max-height:90vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); display:grid; grid-template-columns:1fr 1fr; gap:0; position:relative;
}
.qv-close{ position:absolute; top:14px; right:14px; z-index:3; width:34px; height:34px; border-radius:50%; background:#141416; color:#fff; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.14); }
.qv-media{ background:radial-gradient(circle at 50% 30%,#1f1f27,#121216); display:flex; align-items:center; justify-content:center; padding:30px; }
.qv-media img{ max-height:340px; object-fit:contain; }
.qv-info{ padding:30px; display:flex; flex-direction:column; gap:12px; }

/* ---------- Q&A ---------- */
.qa-item{ border-bottom:1px solid var(--border); padding:14px 0; }
.qa-item .q{ display:flex; gap:10px; font-weight:700; font-size:13.5px; }
.qa-item .q .tag{ flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--surface-2); color:var(--volt); font-size:11px; display:flex; align-items:center; justify-content:center; font-weight:800; }
.qa-item .a{ margin-left:32px; margin-top:8px; font-size:13px; color:var(--text-muted); display:flex; gap:10px; }
.qa-item .a .tag{ background:rgba(255,27,60,.12); color:var(--volt); }
.qa-meta{ font-size:11px; color:var(--text-faint); margin-left:32px; margin-top:6px; }

/* ---------- Comparison table ---------- */
.compare-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.compare-table th, .compare-table td{ padding:14px; text-align:center; border-bottom:1px solid var(--border); }
.compare-table th{ text-transform:uppercase; font-size:11px; letter-spacing:.04em; color:var(--text-muted); }
.compare-table td:first-child, .compare-table th:first-child{ text-align:left; color:var(--text); font-weight:600; }
.compare-table .col-us{ background:rgba(255,27,60,.06); }
.compare-table th.col-us{ color:var(--volt); font-weight:800; border-top:2px solid var(--volt); }
.compare-table .yes{ color:var(--green); font-weight:800; }
.compare-table .no{ color:var(--text-faint); }

/* ---------- Recently viewed ---------- */
.recently-viewed-track{ display:flex; gap:16px; overflow-x:auto; scrollbar-width:none; padding-bottom:6px; }
.recently-viewed-track::-webkit-scrollbar{ display:none; }
.recently-viewed-track .product-card{ min-width:180px; max-width:180px; }

/* ---------- EMI / COD inline badges ---------- */
.pay-options{ display:flex; gap:10px; flex-wrap:wrap; }
.pay-options .opt{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); padding:6px 12px; border-radius:var(--radius-pill); }
.pay-options .opt svg{ width:14px; height:14px; color:var(--green); }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .product-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .pdp{ gap:32px; }
  .mega-inner{ grid-template-columns:repeat(3,1fr); }
  .mega-inner .mega-promo{ display:none; }
  .level-grid{ grid-template-columns:repeat(2,1fr); }
  .video-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .shop-layout{ grid-template-columns:1fr; }
  .filters{ position:fixed; left:0; top:0; bottom:0; width:82%; max-width:320px; z-index:500; border-radius:0;
    transform:translateX(-100%); transition:transform .35s var(--ease); overflow-y:auto; }
  .filters.open{ transform:translateX(0); }
  .filter-toggle-mobile{ display:inline-flex; }
}
@media (max-width:860px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .pdp{ grid-template-columns:1fr; }
  .pdp-gallery{ position:static; }
  .thumb{ width:60px; height:60px; }
  .thumb-arrow{ width:32px; height:32px; }
  .thumb-arrow svg{ width:14px; height:14px; }
  body{ padding-bottom:var(--footer-mobile-h); }
  .mobile-tabbar{ display:block; }
  .sticky-atc{ bottom:var(--footer-mobile-h); }
  .newsletter{ padding:28px; }
  .newsletter-form{ width:100%; }
  .newsletter-form input{ min-width:0; flex:1; }
  .trust-bar{ grid-template-columns:repeat(2,1fr); }
  .review-summary{ flex-direction:column; align-items:flex-start; }
  .level-grid{ grid-template-columns:1fr; }
  .video-grid{ grid-template-columns:repeat(2,1fr); }
  .app-banner, .authenticity-widget{ padding:24px; flex-direction:column; align-items:flex-start; }
  .authenticity-form{ width:100%; }
  .qv-box{ grid-template-columns:1fr; }
  .qv-media{ padding:20px; }
  .fab-stack{ bottom:calc(var(--footer-mobile-h) + 16px); right:14px; }
  .social-proof{ bottom:calc(var(--footer-mobile-h) + 16px); left:14px; max-width:calc(100vw - 90px); }
  /* PDP-only: the sticky Add-to-Cart+Buy-Now bar stacks above the tabbar, so push
     the floating WhatsApp/scroll-top/social-proof widgets up further to clear it. */
  body.has-sticky-atc .fab-stack{ bottom:calc(var(--footer-mobile-h) + 88px); }
  body.has-sticky-atc .social-proof{ bottom:calc(var(--footer-mobile-h) + 88px); }
  .flash-sale{ flex-direction:column; align-items:flex-start; }
  .compare-table{ font-size:11.5px; }
  .compare-table th, .compare-table td{ padding:10px 6px; }
  /* Wishlist/Quick View are hover-revealed on desktop, but touch devices have no
     reliable :hover — always show them here so they stay reachable on mobile,
     with a slightly larger, thumb-friendly tap target. */
  .wishlist-fab, .quickview-fab{ opacity:1; transform:none; width:32px; height:32px; }
  .hero-slide{ height:78vh; min-height:460px; max-height:640px; }
  /* "1.5 images" peek carousel on mobile: each slide is a rounded card at
     ~86% viewport width with a gap, so the next slide's edge always peeks
     in on the right (previous slide peeks on the left once you've scrolled
     past slide 1). The JS hero-slider now measures the real slide width in
     pixels instead of assuming 100%, so this works with any width here. */
  .hero-slides{ gap:14px; padding-left:14px; }
  .hero-slide-item{ min-width:86%; border-radius:18px; overflow:hidden; }
  .hero-arrow{ width:36px; height:36px; }
  /* Was flex-wrap:wrap, which broke the 5 cert badges onto 2 uneven rows on
     mobile widths. Swapped to a single horizontally-scrollable row (same
     pattern already used for .goal-tabs) so it's always one clean row. */
  .cert-strip{ gap:20px; flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .cert-strip::-webkit-scrollbar{ display:none; }
  .cert-strip .cert{ width:88px; flex-shrink:0; }
  .app-badges{ width:100%; }
  .app-badges a{ flex:1; justify-content:center; }
}
@media (max-width:520px){
  /* "Why Choose Us" (icon + title + description) was cramped at 2-up on
     small phones — full-width single-column rows read much better. The
     stat counters ("Trusted By Thousands") are short number+label pairs
     and still look fine as a compact 2x2 grid, so they opt back in via
     the .stats-grid modifier class on that section's wrapper. */
  .trust-bar{ grid-template-columns:1fr; gap:10px; }
  .trust-bar.stats-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .trust-item{ padding:14px; }
  .trust-item .ic{ width:38px; height:38px; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  /* Tighten the product card itself at 2-up mobile width (~165px per card on
     a 375px phone) — same card is reused by Featured/Best Sellers/Shop By
     Goal, so this polish applies everywhere at once: smaller body padding,
     shorter title clamp, and a slightly smaller Add to Cart button so it
     doesn't feel cramped or wrap awkwardly. */
  .product-card__body{ padding:11px; gap:6px; }
  .product-card__title{ font-size:13px; min-height:34px; }
  .product-card__desc{ display:none; }
  .price{ font-size:15px; }
  .quick-add{ padding:9px; font-size:10.5px; gap:6px; }
  .container{ padding:0 14px; }
  .section{ padding:38px 0; }
  .video-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .goal-tabs{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; }
  .goal-tabs::-webkit-scrollbar{ display:none; }
  .fab{ width:46px; height:46px; }
  .countdown-lg .box{ min-width:44px; padding:8px 10px; }
  .countdown-lg .box b{ font-size:17px; }
  .sticky-atc__inner .info h5{ display:none; }
  .sticky-atc__inner img{ width:38px; height:38px; }
  .sticky-atc__inner .btn{ padding:9px 14px; font-size:11px; }
  /* Footer: single column on phones instead of a cramped 2-up grid — logo,
     links and social icons all get full width and breathing room. */
  .footer-grid{ grid-template-columns:1fr; gap:28px; text-align:center; }
  .footer-logo, .footer-social{ justify-content:center; }
  .footer-grid > div > p{ margin-left:auto; margin-right:auto; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .pay-icons{ justify-content:center; }
  .cert-strip{ gap:14px; }
  .cert-strip .cert{ width:72px; font-size:9.5px; flex-shrink:0; }
  .cert-strip .cert .ic{ width:40px; height:40px; }
  .social-btn{ width:42px; height:42px; border-radius:13px; }
  .social-btn svg{ width:18px; height:18px; }
}

/* =========================================================
   CART & WISHLIST PAGES
   Shares every existing token/component (container, section-head,
   btn-*, qty-stepper, product-grid/product-card, breadcrumb) so these
   two pages feel like native parts of the same design system rather
   than a bolted-on afterthought.
   ========================================================= */

.page-title-bar{ padding:8px 0 32px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.page-title-bar .kicker{ color:var(--red); font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; display:block; }
.page-title-bar h1{ font-size:clamp(28px,4.6vw,42px); text-transform:uppercase; line-height:1.1; position:relative; padding-bottom:14px; }
.page-title-bar h1::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:64px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--volt),var(--ember));
}
.page-title-bar .count-pill{ display:block; margin-top:10px; font-size:13.5px; font-weight:700; color:var(--text-muted); text-transform:none; letter-spacing:0; }
.breadcrumb{ justify-content:center; }

/* ---------- Cart layout ---------- */
.cart-layout{ display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start; }
.cart-items{ display:flex; flex-direction:column; gap:14px; }

.cart-item{
  display:grid; grid-template-columns:88px 1fr auto auto; gap:16px; align-items:center;
  padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  transition:opacity .32s var(--ease), transform .32s var(--ease), max-height .38s var(--ease), padding .38s var(--ease), margin .38s var(--ease);
  max-height:200px; overflow:hidden;
}
.cart-item.is-removing{ opacity:0; transform:translateX(24px) scale(.97); max-height:0; padding-top:0; padding-bottom:0; margin:0; border-width:0; }
.cart-item__media{ width:88px; height:88px; border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-soft); flex-shrink:0; }
.cart-item__media img{ width:100%; height:100%; object-fit:cover; }
.cart-item__info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cart-item__cat{ font-size:11px; color:var(--red); font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.cart-item__name{ font-size:15px; font-weight:700; text-transform:uppercase; overflow-wrap:break-word; }
.cart-item__name a{ color:var(--text); }
.cart-item__name a:hover{ color:var(--red); }
.cart-item__variant{ font-size:12.5px; color:var(--text-muted); }
.cart-item__price-row{ display:flex; align-items:baseline; gap:8px; margin-top:2px; }
.cart-item__price{ font-size:15px; font-weight:800; }
.cart-item__strike{ font-size:12px; color:var(--text-faint); text-decoration:line-through; }
.cart-item .qty-stepper{ transform:scale(.86); transform-origin:center; }
.cart-item__line-total{ font-size:16px; font-weight:800; min-width:82px; text-align:right; }
.cart-item__remove{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface-2);
  color:var(--text-muted); display:flex; align-items:center; justify-content:center; transition:.2s; flex-shrink:0;
}
.cart-item__remove:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-1px) rotate(-4deg); }

.cart-summary{
  position:sticky; top:calc(var(--header-h) + 16px); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px; display:flex; flex-direction:column; gap:16px;
}
.cart-summary h3{ font-size:16px; text-transform:uppercase; }
.cart-summary__row{ display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--text-muted); }
.cart-summary__row b{ color:var(--text); font-weight:700; }
.cart-summary__row.discount b{ color:var(--green); }
.cart-summary__divider{ height:1px; background:var(--border); margin:2px 0; }

/* The summary's vertical rhythm is set per element, not by one flat gap.
   With a single 16px gap everywhere, "Subtotal / Shipping / Total / coupon /
   Checkout" all carried the same weight — nothing read as the end of the
   list — and the small "Inclusive of all taxes" line, being baseline-aligned
   with a 20px total, hung into the space below and made the gap under it look
   bigger on the left than on the right. Now: the money lines sit close, the
   total gets room, and the coupon and the checkout button are visibly their
   own step. */
.cart-summary__total{
  display:flex; justify-content:space-between; align-items:flex-start;
  font-size:20px; font-weight:800; line-height:1.15;
  margin-bottom:2px;
}
.cart-summary__total small{
  font-size:11.5px; color:var(--text-faint); font-weight:600;
  text-transform:uppercase; display:block; margin-top:5px; letter-spacing:.04em;
}
.coupon-row{
  display:flex; gap:8px;
  margin-top:6px; padding-top:18px; border-top:1px solid var(--border);
}
.coupon-row input{
  flex:1; padding:12px 16px; border-radius:var(--radius-pill); border:1.5px solid var(--border-strong);
  background:var(--bg-soft); color:var(--text); font-size:13.5px; outline:none; min-width:0;
}
.coupon-row input:focus{ border-color:var(--red); }
.cart-summary .btn-block{ width:100%; justify-content:center; padding:16px 20px; font-size:14.5px; }
.cart-summary #checkoutBtn{ margin-top:2px; }
.cart-summary__trust{ display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--text-muted); padding-top:4px; }
.cart-summary__trust span{ display:flex; align-items:center; gap:8px; }
.cart-summary__trust svg{ color:var(--green); width:15px; height:15px; flex-shrink:0; }

/* Header account icon — desktop only; the mobile bottom tab bar already has
   an Account entry, and the header row is tight on small screens. */
@media (max-width:900px){ .icon-btn--account{ display:none; } }

/* Small "₹1,999 × 3" line under the PDP price, shown only when more than one
   unit is selected so the big number is never ambiguous about what it means. */
.pdp-qty-note{
  display:block; margin-top:2px; font-size:12.5px; font-weight:600; color:var(--text-faint);
}

/* ---------- Write a review ----------
   Sized mobile-first: 48px star hit targets, 16px inputs (below that iOS
   zooms the viewport on focus), and everything stacked in one column until
   there is genuinely room for two. */
.review-form{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px; margin:0 0 26px; display:flex; flex-direction:column; gap:18px;
}
.review-form__rating{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.review-form__rating-label{
  font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);
}
.star-input{ display:flex; gap:2px; }
.star-input__btn{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; cursor:pointer; color:var(--border-strong);
  transition:color .15s var(--ease), transform .15s var(--ease);
}
.star-input__btn svg{ width:30px; height:30px; }
.star-input__btn.is-on{ color:var(--gold); }
.star-input__btn:active{ transform:scale(.9); }
.star-input__hint{ font-size:13px; font-weight:700; color:var(--text-muted); }

.review-form .form-group label{
  font-size:11.5px; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em;
}
.review-form .form-group input,
.review-form .form-group textarea{
  width:100%; padding:13px 16px; border-radius:var(--radius-md);
  border:1.5px solid var(--border-strong); background:var(--bg-soft); color:var(--text);
  font-size:16px; font-family:inherit; outline:none; transition:border-color .2s, box-shadow .2s;
}
.review-form .form-group input:focus,
.review-form .form-group textarea:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(255,27,60,.14); }
.review-form .form-group textarea{ resize:vertical; min-height:104px; }

.review-form__drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:22px 16px; text-align:center; cursor:pointer;
  border:1.5px dashed var(--border-strong); border-radius:var(--radius-md);
  background:rgba(255,255,255,.02); transition:border-color .2s, background .2s;
}
.review-form__drop:hover{ border-color:var(--red); background:rgba(255,27,60,.04); }
.review-form__drop svg{ width:26px; height:26px; color:var(--text-muted); }
.review-form__drop-title{ font-size:13.5px; font-weight:700; }
.review-form__drop-note{ font-size:11.5px; color:var(--text-faint); }
.review-form__previews{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.review-form__preview{
  position:relative; width:78px; height:78px; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--border);
}
.review-form__preview img,
.review-form__preview video{ width:100%; height:100%; object-fit:cover; display:block; }
.review-form__preview-remove{
  position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%;
  background:rgba(4,4,6,.85); color:#fff; border:1px solid var(--border-strong);
  font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.review-form__recommend{
  display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text); cursor:pointer;
}
.review-form__recommend input{ width:18px; height:18px; accent-color:var(--red); flex-shrink:0; }
.review-form__actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.review-form__msg{ font-size:13px; color:var(--text-muted); }
.review-form__msg.is-error{ color:#ff8080; }

.review-item__title{ font-weight:800; font-size:14.5px; margin:6px 0 4px; }
.review-item__media{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.review-item__media .review-media{
  width:96px; height:96px; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--border); display:block; flex-shrink:0;
}
.review-item__media img,
.review-item__media video{ width:100%; height:100%; object-fit:cover; display:block; }
.review-item__reco{
  display:flex; align-items:center; gap:7px; margin:10px 0 0;
  font-size:12.5px; font-weight:700; color:var(--green);
}
.review-item__reco svg{ width:14px; height:14px; flex-shrink:0; }

@media (max-width:640px){
  .review-form{ padding:16px; gap:15px; border-radius:var(--radius-md); }
  .review-form__rating{ gap:8px; }
  .star-input__btn{ width:40px; height:40px; }
  .star-input__btn svg{ width:27px; height:27px; }
  .review-form__actions .btn{ flex:1 1 100%; justify-content:center; }
  .review-form__msg{ flex:1 1 100%; }
  .review-item__media .review-media{ width:84px; height:84px; }
}

/* ---------- Community Q&A: ask-a-question form ---------- */
.qa-form{
  position:relative; margin:0 0 22px; padding:22px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
}
.qa-form .form-group input,
.qa-form .form-group textarea{
  padding:13px 16px; border-radius:var(--radius-md); border:1.5px solid var(--border-strong);
  background:var(--bg-soft); color:var(--text); font-size:14px; font-family:inherit;
  outline:none; width:100%; transition:border-color .2s, box-shadow .2s;
}
.qa-form .form-group input:focus,
.qa-form .form-group textarea:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(255,27,60,.14); }
.qa-form .form-group textarea{ resize:vertical; min-height:90px; }
@media (max-width:640px){ .qa-form{ padding:16px; } }

/* ---------- WooCommerce default notices, globally reskinned ----------
   Any WooCommerce screen we haven't given a bespoke template to (My Account
   sub-pages, order-received, an empty shop archive, a failed login, …) still
   prints WC's own .woocommerce-info / .woocommerce-message / .woocommerce-error
   boxes plus a bare "Return to shop" button. Those are styled by
   woocommerce.css for a LIGHT theme — pale grey blocks with a coloured left
   bar — which is exactly the "default WooCommerce look" that was breaking
   through on the dark site. Restyling them here means every such page follows
   our design without needing a template override for each one. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
.wc-empty-cart-message .cart-empty{
  list-style:none; margin:0 0 18px; padding:15px 18px;
  background:rgba(255,255,255,.03); border:1.5px solid var(--border);
  border-radius:var(--radius-md); color:var(--text-muted); font-size:13.5px; line-height:1.6;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before{ display:none; }
.woocommerce-message{ border-color:rgba(47,224,125,.35); color:var(--green); }
.woocommerce-error{ border-color:rgba(255,60,60,.35); color:#ff8080; }
.woocommerce-info a,
.woocommerce-message a{ color:var(--red); font-weight:700; }
/* WooCommerce's plain "Return to shop" / "Continue shopping" buttons. */
.woocommerce .return-to-shop .button,
.woocommerce a.button.wc-backward,
.woocommerce-message .button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:var(--radius-pill); border:none;
  background:linear-gradient(135deg,var(--volt),var(--volt-dark)); color:#fff;
  font-weight:700; font-size:13.5px; letter-spacing:.03em; text-transform:uppercase;
  box-shadow:var(--shadow-red);
}
.woocommerce .return-to-shop{ margin-top:14px; }

/* ---------- Shared empty state (cart + wishlist) ---------- */
.empty-state{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  padding:70px 20px; background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--radius-lg);
}
.empty-state .ic{ width:74px; height:74px; border-radius:50%; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.empty-state .ic svg{ width:32px; height:32px; }
.empty-state h3{ font-size:19px; text-transform:uppercase; margin:0; }
.empty-state p{ color:var(--text-muted); font-size:14px; max-width:340px; margin:0; }

/* ---------- Wishlist grid tweaks ---------- */
.wishlist-grid .product-card.is-removing{ opacity:0; transform:scale(.9); pointer-events:none; }

@media (max-width:900px){
  .cart-layout{ grid-template-columns:1fr; }
  .cart-summary{ position:static; }
}
@media (max-width:640px){
  .cart-item{ grid-template-columns:64px 1fr; grid-template-rows:auto auto; row-gap:10px; }
  .cart-item__media{ width:64px; height:64px; grid-row:1 / 3; }
  .cart-item .qty-stepper{ transform:scale(.8); }
  .cart-item__line-total{ text-align:left; grid-column:2; }
  .cart-item__remove{ position:absolute; margin-left:auto; }
  .cart-item{ position:relative; padding-right:44px; }
}

/* =========================================================
   CART / WISHLIST / CHECKOUT — engagement polish
   Micro-interactions layered on top of the base components above:
   image hover-zoom, a breathing glow on the summary card to draw the
   eye toward checkout, a flash pulse when totals recalculate, a
   floating empty-state icon, and the full checkout page (form,
   payment-method picker, mini order review, animated success screen).
   ========================================================= */

.cart-item__media{ overflow:hidden; }
.cart-item__media img{ transition:transform .45s var(--ease); }
.cart-item:hover .cart-item__media img{ transform:scale(1.08); }

.qty-stepper button{ transition:background .2s, color .2s, transform .15s; }
.qty-stepper button:active{ transform:scale(.86); }
.cart-item__remove{ transition:background .2s, border-color .2s, color .2s, transform .2s; }
.cart-item__remove:active{ transform:scale(.85) rotate(-4deg); }

@keyframes summaryBreathe{ 0%,100%{ box-shadow:0 0 0 rgba(255,27,60,0); } 50%{ box-shadow:0 0 34px rgba(255,27,60,.16); } }
.cart-summary{ animation:summaryBreathe 3.6s ease-in-out infinite; }

.flash-update{ animation:flashUpdate .5s ease; }
@keyframes flashUpdate{ 0%{ color:var(--red); transform:scale(1.14); } 100%{ color:inherit; transform:scale(1); } }

@keyframes emptyFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.empty-state .ic{ animation:emptyFloat 3s ease-in-out infinite; }

.wishlist-grid .product-card{ transition:opacity .34s var(--ease), transform .34s var(--ease), box-shadow .3s; }
.wishlist-grid .product-card:hover{ box-shadow:0 16px 34px rgba(0,0,0,.35); }

/* ---------- Checkout: step indicator ---------- */
.checkout-steps{ display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 30px; }
.checkout-steps .step{ display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; }
.checkout-steps .step .dot{
  width:28px; height:28px; border-radius:50%; background:var(--surface-2); border:1.5px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--text-muted); transition:.3s; flex-shrink:0;
}
.checkout-steps .step.active{ color:var(--red); }
.checkout-steps .step.active .dot{ background:linear-gradient(135deg,var(--volt),var(--volt-dark)); border-color:var(--red); color:#fff; box-shadow:0 0 0 5px rgba(255,27,60,.16); }
.checkout-steps .step.done{ color:var(--green); }
.checkout-steps .step.done .dot{ background:var(--green); border-color:var(--green); color:#fff; }
.checkout-steps .sep{ width:44px; height:2px; background:var(--border-strong); transition:background .3s; }
.checkout-steps .sep.done{ background:var(--green); }

/* ---------- Checkout: form cards ---------- */
.checkout-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; margin-bottom:20px; }
.checkout-card h3{ font-size:15.5px; text-transform:uppercase; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.checkout-card h3 .step-num{
  width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--volt),var(--volt-dark));
  color:#fff; font-size:12.5px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.form-group.full{ grid-column:1 / -1; }
.form-group label{ font-size:11.5px; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.form-group input, .form-group select{
  padding:13px 16px; border-radius:var(--radius-md); border:1.5px solid var(--border-strong);
  background:var(--bg-soft); color:var(--text); font-size:14px; outline:none; font-family:inherit; transition:border-color .2s, box-shadow .2s; width:100%;
}
.form-group input:focus, .form-group select:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(255,27,60,.14); }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

.coupon-row input.invalid, input.invalid{ border-color:#ff5c5c !important; animation:shakeX .4s; }
.form-group input.invalid{ border-color:#ff5c5c !important; }
@keyframes shakeX{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }

/* ---------- Checkout: payment method picker ---------- */
.payment-methods{ display:flex; flex-direction:column; gap:10px; }
.payment-method{
  display:flex; align-items:center; gap:13px; padding:15px 16px; border:1.5px solid var(--border-strong); border-radius:var(--radius-md);
  background:var(--bg-soft); cursor:pointer; transition:border-color .2s, background .2s, transform .2s;
}
.payment-method:hover{ border-color:var(--border-strong); transform:translateY(-1px); }
.payment-method.active{ border-color:var(--red); background:rgba(255,27,60,.08); }
.payment-method .ic{ width:38px; height:38px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--text-muted); flex-shrink:0; transition:.2s; }
.payment-method.active .ic{ background:var(--red); color:#fff; }
.payment-method .label{ flex:1; min-width:0; }
.payment-method .label b{ display:block; font-size:14px; font-weight:700; }
.payment-method .label small{ font-size:11.5px; color:var(--text-faint); }
.payment-method .radio-dot{ width:19px; height:19px; border-radius:50%; border:2px solid var(--border-strong); position:relative; flex-shrink:0; transition:border-color .2s; }
.payment-method.active .radio-dot{ border-color:var(--red); }
.payment-method.active .radio-dot::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--red); }

/* ---------- Checkout: mini order review inside summary ---------- */
.checkout-mini-list{ display:flex; flex-direction:column; gap:12px; max-height:260px; overflow-y:auto; padding-right:4px; }
.checkout-mini-list::-webkit-scrollbar{ width:5px; }
.checkout-mini-list::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:3px; }
.checkout-mini-item{ display:flex; gap:10px; align-items:center; font-size:13px; }
.checkout-mini-item img{ width:46px; height:46px; border-radius:var(--radius-sm); object-fit:cover; background:var(--surface-2); flex-shrink:0; }
.checkout-mini-item .name{ flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.checkout-mini-item .qty{ color:var(--text-faint); font-size:11px; display:block; }
.checkout-mini-item .price{ font-weight:800; white-space:nowrap; }

/* ---------- Checkout: animated success screen ---------- */
.order-success{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:70px 20px 90px; }
.order-success__check{ width:100px; height:100px; }
.order-success__circle{ stroke:var(--green); stroke-width:3; fill:none; stroke-dasharray:290; stroke-dashoffset:290; animation:drawCircle .7s ease forwards; }
.order-success__tick{ stroke:var(--green); stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:50; stroke-dashoffset:50; animation:drawTick .45s ease forwards .6s; }
@keyframes drawCircle{ to{ stroke-dashoffset:0; } }
@keyframes drawTick{ to{ stroke-dashoffset:0; } }
.order-success h2{ font-size:26px; text-transform:uppercase; margin-top:4px; }
.order-success p{ color:var(--text-muted); max-width:420px; font-size:14.5px; }
.order-success .order-id{ font-weight:800; color:var(--text); background:var(--surface); padding:9px 20px; border-radius:var(--radius-pill); border:1px solid var(--border-strong); font-size:14px; letter-spacing:.03em; }
.order-success .actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; }

@media (prefers-reduced-motion:reduce){
  .cart-summary{ animation:none; }
  .empty-state .ic{ animation:none; }
  .cart-item__media img{ transition:none; }
  .flash-update{ animation:none; }
}

/* ==========================================================================
   HERO BANNERS (Banners post type — see inc/banners.php)
   --------------------------------------------------------------------------
   Composed from the product image + that product's accent colour rather than
   a flat pre-rendered JPG. Two reasons, both mobile-first:
   - a single wide banner image either crops the subject out of frame on a
     375px screen, or ships desktop-sized bytes to a phone
   - text baked into an image can't reflow, and never looks crisp
   The colour comes in per-slide as --bn-primary/--bn-dark/--bn-glow.
   ========================================================================== */
.nutra-banner{ position:relative; overflow:hidden; background:var(--bg); }
.nutra-banner__media{ position:absolute; inset:0; }
.nutra-banner__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 22%;
}
.nutra-banner__img--mobile{ display:none; }

/* Colour wash: brand-tinted on the text side, clearing toward the product so
   the packaging stays readable. */
.nutra-banner__wash{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,7,10,.94) 0%, rgba(7,7,10,.80) 38%, rgba(7,7,10,.30) 68%, rgba(7,7,10,.12) 100%),
    radial-gradient(120% 90% at 8% 50%, var(--bn-glow, rgba(255,27,60,.35)) 0%, transparent 62%);
}

.nutra-banner__inner{
  position:relative; height:100%; display:flex; flex-direction:column;
  justify-content:center; gap:16px; max-width:640px;
}
.nutra-banner__kicker{
  color:var(--bn-primary, var(--red)); font-weight:800; letter-spacing:.14em;
  font-size:12px; text-transform:uppercase;
}
.nutra-banner__title{
  color:#fff; font-family:'Oswald',sans-serif; text-transform:uppercase;
  font-size:clamp(28px,5.4vw,56px); line-height:1.05; margin:0;
}
.nutra-banner__sub{
  color:rgba(255,255,255,.78); font-size:clamp(13.5px,1.6vw,16px);
  line-height:1.6; margin:0; max-width:46ch;
}
.nutra-banner__btn{
  background:linear-gradient(135deg, var(--bn-primary, var(--volt)), var(--bn-dark, var(--volt-dark)));
  box-shadow:0 12px 30px var(--bn-glow, rgba(255,27,60,.35));
}

/* Phones: the image moves behind a stronger wash and the subject is pulled
   toward the top, so the copy sits over the darkest area instead of over the
   product. A dedicated mobile image, if one was uploaded, replaces it. */
@media (max-width:760px){
  .nutra-banner__img--desktop{ object-position:center 18%; }
  .nutra-banner__img--mobile{ display:block; }
  .nutra-banner:has(.nutra-banner__img--mobile) .nutra-banner__img--desktop{ display:none; }
  .nutra-banner__wash{
    background:
      linear-gradient(180deg, rgba(7,7,10,.55) 0%, rgba(7,7,10,.80) 45%, rgba(7,7,10,.96) 100%),
      radial-gradient(120% 70% at 50% 100%, var(--bn-glow, rgba(255,27,60,.35)) 0%, transparent 70%);
  }
  .nutra-banner__inner{
    justify-content:flex-end; padding-bottom:34px; gap:12px; max-width:100%;
  }
  .nutra-banner__sub{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}

/* ==========================================================================
   V2 — 3D HERO / GYM VIDEO / CATEGORY TILES / 3D PRODUCT CARD
   These replace the flat banner, the old category cards and the old product
   card. The product card class (.p3d) is used by EVERY grid on the site —
   Best Sellers, Shop By Goal, Shop archive, related, cross-sell — so the card
   looks identical everywhere by construction rather than by repetition.
   ========================================================================== */

/* ---------- 3D HERO ---------- */
.hero3d{ position:relative; overflow:hidden; background:var(--bg); }
.hero3d-track{ position:relative; }
.hero3d-slide{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity .9s var(--ease); display:grid; place-items:center;
}
.hero3d-slide.on{ position:relative; opacity:1; pointer-events:auto; }
.hero3d-plate{ position:absolute; inset:0; }
.hero3d-plate img{ width:100%; height:100%; object-fit:cover; object-position:center 24%; opacity:.34; }
.hero3d-wash{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg,var(--bg) 6%,rgba(7,7,10,.76) 44%,rgba(7,7,10,.30) 100%),
    linear-gradient(0deg,var(--bg),transparent 44%),
    radial-gradient(110% 80% at 6% 50%, var(--bn-glow,rgba(255,27,60,.32)) 0%, transparent 60%);
}
/* One screenful, exactly.
   --hero-offset is written by the hero's own script from its measured
   distance to the top of the document, so it accounts for the announcement
   bar, the header, the admin bar — whatever happens to be above it — rather
   than a hard-coded guess that goes wrong the moment one of them changes
   height. min-height (not height) so the section can still grow if a very
   short window would otherwise clip the copy.
   svh rather than vh: on mobile, vh is the height WITHOUT the browser's
   collapsing address bar, so a vh-sized hero is always a bit too tall on
   first paint. */
.hero3d-inner{
  position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:40px;
  align-items:center; padding:26px 0 52px;
  min-height:calc(100svh - var(--hero-offset, 114px));
}
.hero3d-copy{ position:relative; z-index:2; }
/* The hero's type and buttons are brand furniture, not product styling —
   they read identically on every slide. Only the glow behind the pack shot
   still picks up the product's own colour, which is the part that should
   change. Letting the headline and CTA follow the product accent as well
   made every slide look like a different site. */
.hero3d-kicker{
  display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800;
  letter-spacing:.19em; text-transform:uppercase; color:var(--red);
  padding:11px 22px; border:1px solid rgba(255,27,60,.32); border-radius:var(--radius-pill);
  background:rgba(255,27,60,.07); backdrop-filter:blur(6px);
}
/* Three stacked display lines: outlined / solid / outlined.
   The outline is what lets the headline run this large without burying the
   pack shot behind it — two of the three lines read as structure, and the eye
   lands on the solid middle line. */
.hero3d-title{
  font-family:'Oswald',sans-serif; text-transform:uppercase; color:#fff;
  font-size:clamp(38px,7.4vw,98px); line-height:.93; margin:16px 0 18px;
  letter-spacing:-.005em;
}
.hero3d-title span{ display:block; }
.hero3d-title__solid{
  /* Solid white into soft pink across the line — the same ramp on every
     slide, so "THE BEAST" and "EVERY REP" read as one brand voice. */
  background:linear-gradient(97deg,#ffffff 0%,#ffffff 34%,#ffc2d1 62%,#ff9db4 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero3d-title__ghost{
  color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.30);
  /* Safari applies -webkit-text-fill-color from the rule above on some
     builds; restate it so the outline never fills in solid. */
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-text-stroke: 1px #fff)){
  /* No stroke support — fall back to a dimmed solid rather than invisible
     text, which is the one failure mode that must never happen to an <h1>. */
  .hero3d-title__ghost{ color:rgba(255,255,255,.38); }
}
.hero3d-sub{ color:rgba(255,255,255,.76); font-size:clamp(14px,1.6vw,16px); max-width:46ch; margin:0 0 22px; }
.hero3d-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero3d-cta .btn{
  padding:13px 28px; font-size:13px; letter-spacing:.08em; font-weight:800;
}
.hero3d-cta .btn-primary{
  background:linear-gradient(135deg,#ff1b3c,#e10f2c);
  box-shadow:0 14px 34px rgba(255,27,60,.38);
}
.hero3d-cta .btn-outline{
  background:rgba(10,10,13,.5); border:1.5px solid rgba(255,27,60,.55); color:#fff;
  backdrop-filter:blur(8px);
}
.hero3d-cta .btn-outline:hover{ background:rgba(255,27,60,.14); border-color:var(--red); }

.hero3d-stage{
  position:relative; display:grid; place-items:center; transform-style:preserve-3d;
  height:min(54vh,450px); will-change:transform;
  /* Lifted off the grid's vertical centre. margin, deliberately, NOT
     transform: the pointer-parallax loop writes transform on this element
     every frame and would wipe out any offset put there. */
  margin-top:-38px;
}
.hero3d-halo{
  position:absolute; width:72%; aspect-ratio:1; border-radius:50%; filter:blur(48px);
  transform:translateZ(-160px);
  background:radial-gradient(circle,var(--bn-glow,rgba(255,27,60,.5)),transparent 62%);
}
.hero3d-ring{ position:absolute; border:1.5px solid var(--border-strong); border-radius:50%; }
.hero3d-ring--a{ width:74%; aspect-ratio:1; transform:rotateX(75deg) translateZ(-60px); }
.hero3d-ring--b{ width:94%; aspect-ratio:1; transform:rotateX(75deg) translateZ(-112px); opacity:.42; }
.hero3d-jar{
  position:relative; width:min(80%,420px); border-radius:22px; transform:translateZ(70px);
  border:1.5px solid rgba(255,27,60,.45);
  box-shadow:0 40px 68px rgba(0,0,0,.78), 0 0 60px var(--bn-glow,rgba(255,27,60,.3));
}
.hero3d-spec{
  position:absolute; padding:8px 14px; border-radius:var(--radius-pill); white-space:nowrap;
  font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff;
  background:rgba(14,14,18,.9); border:1px solid rgba(255,27,60,.3);
  backdrop-filter:blur(8px); box-shadow:0 10px 24px rgba(0,0,0,.5);
}
.hero3d-spec i{ font-style:normal; color:var(--red); }
.hero3d-spec--1{ top:12%; left:-4%; transform:translateZ(130px); }
.hero3d-spec--2{ top:46%; right:-5%; transform:translateZ(160px); }
.hero3d-spec--3{ bottom:12%; left:2%; transform:translateZ(108px); }

.hero3d-arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:5; width:44px; height:44px; border-radius:50%;
  background:rgba(10,10,13,.7); border:1.5px solid var(--border-strong); color:#fff;
  font-size:24px; line-height:1; display:grid; place-items:center; backdrop-filter:blur(8px);
  transition:.25s var(--ease);
}
.hero3d-arrow:hover{ background:var(--red); border-color:var(--red); }
.hero3d-arrow--prev{ left:14px; } .hero3d-arrow--next{ right:14px; }
.hero3d-dots{ position:absolute; left:0; right:0; bottom:20px; z-index:5; display:flex; justify-content:center; gap:7px; }
.hero3d-dots button{
  width:22px; height:4px; border-radius:4px; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.22); transition:.3s var(--ease);
}
.hero3d-dots button.on{ background:var(--red); width:34px; }

@media (max-width:900px){
  .hero3d-inner{ grid-template-columns:1fr; text-align:center; gap:16px; padding:26px 0 58px; min-height:0; }
  .hero3d-sub{ margin-inline:auto; }
  .hero3d-cta{ justify-content:center; }
  .hero3d-stage{ height:min(42vh,320px); order:-1; margin-top:0; }
  .hero3d-spec{ font-size:10px; padding:6px 11px; }
  .hero3d-spec--1{ left:-2%; } .hero3d-spec--2{ right:-2%; }
  .hero3d-arrow{ width:36px; height:36px; font-size:20px; }
  .hero3d-plate img{ opacity:.24; }
  .hero3d-wash{ background:
      linear-gradient(180deg,rgba(7,7,10,.42) 0%,rgba(7,7,10,.86) 55%,var(--bg) 100%),
      radial-gradient(120% 60% at 50% 100%, var(--bn-glow,rgba(255,27,60,.32)) 0%, transparent 70%); }
}

/* ---------- GYM VIDEO — product story slider ----------
   Portrait cards, not one 16:9 player. These are phone-shot product films and
   most of the audience is on a phone; a 16:9 box letterboxes a vertical clip
   into two black bars and a stamp-sized picture. 9:16 cards also let more than
   one film sit side by side, which is what makes the slider readable at a
   glance instead of a single video with arrows around it. */
.gv-sub{ color:var(--text-muted); font-size:14.5px; margin:10px 0 0; max-width:56ch; }

.gv-wrap{ position:relative; margin-top:26px; }

.gv-rail{
  display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth;
  padding:6px 2px 10px; scrollbar-width:none;
  scroll-snap-type:x mandatory;
}
.gv-rail::-webkit-scrollbar{ display:none; }

.gv-card{
  flex:0 0 clamp(240px, 25vw, 320px); scroll-snap-align:center;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
  opacity:.5; transform:scale(.93); cursor:pointer;
}
.gv-card.is-active{ opacity:1; transform:none; }
/* One card only (no per-product films yet) — let it be the wide brand film
   it was designed as rather than cropping it into a portrait card. */
.gv-wrap:not(.gv-wrap--multi) .gv-card{ flex:1 1 100%; opacity:1; transform:none; }
.gv-wrap:not(.gv-wrap--multi) .gv-stage{ aspect-ratio:16/9; }

.gv-stage{
  position:relative; aspect-ratio:9/16; overflow:hidden; background:#000;
  border-radius:var(--radius-lg); border:1px solid var(--border-strong);
  box-shadow:0 30px 64px rgba(0,0,0,.55);
}
.gv-card.is-active .gv-stage{ border-color:rgba(255,27,60,.45); box-shadow:0 36px 76px rgba(0,0,0,.65), 0 0 44px rgba(255,27,60,.18); }

.gv-video, .gv-poster{ width:100%; height:100%; object-fit:cover; display:block; }
.gv-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(7,7,10,.88),transparent 46%);
}

.gv-play{
  position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%;
  display:grid; place-items:center; color:#fff; cursor:pointer; border:0;
  background:linear-gradient(135deg,var(--volt),var(--volt-dark));
  box-shadow:0 18px 44px rgba(255,27,60,.5);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.gv-card:hover .gv-play{ transform:scale(1.08); }
.gv-play::before{
  content:''; position:absolute; inset:-13px; border-radius:50%;
  border:2px solid rgba(255,27,60,.5); animation:gvPulse 2.4s ease-out infinite;
}
@keyframes gvPulse{ to{ transform:scale(1.5); opacity:0; } }
.gv-play svg{ width:26px; height:26px; margin-left:3px; }
/* Once a film is running the button gets out of the way, but stays clickable
   so the same tap pauses it. Hiding it outright leaves no way to stop. */
.gv-card.is-playing .gv-play{ opacity:0; }
.gv-card.is-playing:hover .gv-play{ opacity:.85; }

.gv-sound{
  position:absolute; top:12px; right:12px; z-index:3;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:rgba(8,8,11,.62); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:.2s var(--ease);
}
.gv-sound:hover{ background:var(--volt); border-color:var(--volt); }
.gv-sound svg{ width:18px; height:18px; }
.gv-sound__on{ display:none; }
.gv-card.is-loud .gv-sound__off{ display:none; }
.gv-card.is-loud .gv-sound__on{ display:block; }

.gv-meta{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 18px;
  display:flex; flex-direction:column; gap:5px;
}
.gv-meta b{
  font-family:'Oswald',sans-serif; text-transform:uppercase; color:#fff;
  font-size:clamp(14px,1.5vw,18px); line-height:1.2; letter-spacing:.02em;
}
.gv-meta a{ font-size:12px; font-weight:800; color:var(--volt); letter-spacing:.04em; }
.gv-meta a:hover{ color:#fff; }

.gv-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:5; background:#000; }
.gv-card.is-playing .gv-frame ~ .gv-scrim,
.gv-card.is-playing .gv-frame ~ .gv-meta{ display:none; }

/* ---- arrows ---- */
.gv-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:rgba(12,12,16,.8); border:1px solid var(--border-strong);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:.22s var(--ease);
}
.gv-nav:hover{ background:var(--volt); border-color:var(--volt); }
.gv-nav svg{ width:20px; height:20px; }
.gv-nav--prev{ left:-8px; }
.gv-nav--next{ right:-8px; }

/* ---- product tabs under the rail ---- */
.gv-dots{ display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-top:18px; }
.gv-dot{
  padding:8px 16px; border-radius:var(--radius-pill); cursor:pointer;
  font-size:12.5px; font-weight:700; color:var(--text-muted);
  background:var(--surface); border:1px solid var(--border-strong);
  transition:.2s var(--ease);
}
.gv-dot:hover{ color:var(--text); border-color:rgba(255,27,60,.45); }
.gv-dot.is-on{ background:var(--volt); border-color:var(--volt); color:#fff; }

@media (max-width:640px){
  .gv-rail{ gap:12px; }
  .gv-card{ flex:0 0 68vw; }
  .gv-stage{ border-radius:var(--radius-md); }
  .gv-play{ width:58px; height:58px; } .gv-play svg{ width:20px; height:20px; }
  .gv-nav{ display:none; }   /* swipe is the gesture here; arrows only steal room */
  .gv-dots{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }
  .gv-dots::-webkit-scrollbar{ display:none; }
  .gv-dot{ white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce){
  .gv-rail{ scroll-behavior:auto; }
  .gv-card, .gv-play{ transition:none; }
  .gv-play::before{ animation:none; }
}

/* ---------- CATEGORY TILES ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; perspective:1200px; }
.cat-tile{
  position:relative; aspect-ratio:1/1.08; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); display:block; transform-style:preserve-3d;
  transition:transform .5s var(--ease), border-color .35s, box-shadow .45s var(--ease);
}
.cat-tile:hover{
  transform:translateY(-8px) rotateX(6deg) rotateY(-4deg);
  border-color:var(--border-strong); box-shadow:0 30px 60px rgba(0,0,0,.6);
}
.cat-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.cat-tile:hover img{ transform:scale(1.08); }
.cat-tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(4,4,6,.94) 0%,rgba(4,4,6,.28) 46%,transparent 70%);
}
.cat-tile__body{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 16px;
  display:flex; flex-direction:column; gap:4px; text-align:center; transform:translateZ(38px);
}
.cat-tile__name{ font-family:'Oswald',sans-serif; font-size:17px; letter-spacing:.03em; text-transform:uppercase; color:#fff; }
.cat-tile__count{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.62); font-weight:600; }

/* More than four categories → scrollable row instead of a cramped grid. */
.cat-grid--scroll{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; scrollbar-width:none;
}
.cat-grid--scroll::-webkit-scrollbar{ display:none; }
.cat-grid--scroll .cat-tile{ flex:0 0 240px; scroll-snap-align:start; }

@media (max-width:860px){
  /* 2x2 on phones: four categories all visible at once beats hiding two
     behind a swipe. */
  .cat-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .cat-tile{ aspect-ratio:1/1; }
  .cat-tile__name{ font-size:14px; }
  .cat-tile__count{ font-size:10px; }
  .cat-tile:hover{ transform:none; }
  .cat-grid--scroll .cat-tile{ flex:0 0 62%; }
}

/* ==========================================================================
   3D PRODUCT CARD (.p3d) — one definition, used by every product grid
   ========================================================================== */
.product-grid,
.carousel{ perspective:1400px; }

.p3d{
  position:relative; display:flex; flex-direction:column; border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--surface),var(--surface-2));
  border:1px solid var(--border); overflow:hidden;
  transform-style:preserve-3d; will-change:transform;
  transition:border-color .35s var(--ease), box-shadow .4s var(--ease);
}
.p3d:hover{ border-color:var(--border-strong); box-shadow:0 30px 62px rgba(0,0,0,.62); }
.p3d__glow{
  position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,27,60,.16),transparent 46%);
}
.p3d:hover .p3d__glow{ opacity:1; }

.p3d .badge{ position:absolute; top:12px; left:12px; z-index:4; transform:translateZ(50px); }
.p3d__fabs{ position:absolute; top:12px; right:12px; z-index:4; display:flex; flex-direction:column; gap:7px; transform:translateZ(50px); }

.p3d__media{ position:relative; display:block; aspect-ratio:1; overflow:hidden; }
.p3d__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .45s var(--ease), transform .7s var(--ease); }
.p3d__img--b{ opacity:0; }
.p3d:hover .p3d__img--a{ opacity:0; }
.p3d:hover .p3d__img--b{ opacity:1; transform:scale(1.06); }

.p3d__body{ position:relative; z-index:2; padding:16px 16px 18px; display:flex; flex-direction:column; gap:6px; flex:1; transform:translateZ(26px); }
.p3d__cat{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); font-weight:700; }
.p3d__title{ font-size:14.5px; font-weight:700; color:var(--text); line-height:1.32; margin:0; text-transform:uppercase; font-family:'Oswald',sans-serif; letter-spacing:.02em; }
.p3d:hover .p3d__title{ color:var(--red); }
.p3d__desc{
  margin:0; font-size:12px; line-height:1.5; color:var(--text-muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.p3d .stars{ margin-top:2px; }
.p3d__price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:6px; }
.p3d__price b{ font-family:'Oswald',sans-serif; font-size:19px; color:var(--text); }
.p3d__price s{ font-size:12.5px; color:var(--text-faint); }
.p3d__price em{ font-style:normal; font-size:11px; font-weight:800; color:var(--green); }
.p3d .quick-add{ margin-top:12px; }

@media (max-width:640px){
  .p3d__body{ padding:12px 12px 14px; gap:5px; }
  .p3d__title{ font-size:13px; }
  .p3d__desc{ font-size:11.5px; -webkit-line-clamp:2; }
  .p3d__price b{ font-size:16.5px; }
  .p3d:hover{ box-shadow:none; }
}

/* ---------- PDP: breathing room around the quantity / buy row ----------
   The row sat directly under the flavour pills with no separation, so the
   buttons read as part of the option group rather than as the primary action.
   A rule and a generous top margin make the buy step its own block.

   But that separation is only earned when there ARE options above it. On a
   simple product — no size, no flavour — the buy row follows the short
   description directly, and 38px + 30px of padding on top of the paragraph's
   own bottom margin left a canyon of empty space in the middle of the page.
   The large gap is now scoped to the case it was written for, and the plain
   case gets a normal one. */
.pdp-info .qty-cart-row{
  margin-top:20px; padding-top:20px; border-top:1px solid var(--border);
}
.pdp-info .option-group + .qty-cart-row{
  margin-top:34px; padding-top:28px;
}
/* The short description's own margins compound with everything below it.
   Its job is one line of context, not a paragraph of air. */
.pdp-info > p{ margin:14px 0 0; }
.pdp-info form.cart{ margin-top:18px; }
/* Space BETWEEN option groups — Size, then Flavour, then the buy row.
   This used to target `.opt-label`, a class that does not exist in
   template-parts/product/info.php (the markup uses .option-group__label), so
   the rule matched nothing and the groups ran together. */
.pdp-info .option-group + .option-group{ margin-top:20px; }
.pdp-info .option-pills{ margin-bottom:2px; }
/* The active pill carries a coloured glow that spills a few pixels past its
   box, so without this it visually touches the rule below it. */
.pdp-info .option-group:last-of-type{ margin-bottom:6px; }
@media (max-width:640px){
  .pdp-info .qty-cart-row{ margin-top:16px; padding-top:16px; gap:10px; }
  .pdp-info .option-group + .qty-cart-row{ margin-top:26px; padding-top:22px; }
  .pdp-info .option-group + .option-group{ margin-top:16px; }
  .pdp-info form.cart{ margin-top:14px; }
}

/* ==========================================================================
   .p3d SIZING INSIDE CAROUSELS AND GRIDS
   --------------------------------------------------------------------------
   The old card had `.carousel .product-card{ min-width:230px; max-width:230px }`.
   The new .p3d card had no equivalent rule, so inside a flex .carousel it had
   no basis to hold and all eight products squeezed into one row — tall, thin
   slivers with wrapped titles. That is the bug in the screenshots.

   Sizing is expressed as a fraction of the visible width rather than a fixed
   pixel value, so the row always lands on a whole number of cards at every
   breakpoint instead of leaving an arbitrary sliver at the edge.
   The gap is 18px (.carousel) — the calc() subtracts it per visible card.
   ========================================================================== */
.carousel{ gap:18px; }

.carousel .p3d{
  flex:0 0 calc((100% - 3 * 18px) / 4);   /* 4 across on desktop */
  max-width:calc((100% - 3 * 18px) / 4);
  scroll-snap-align:start;
}

@media (max-width:1180px){
  .carousel .p3d{
    flex:0 0 calc((100% - 2 * 18px) / 3);  /* 3 across */
    max-width:calc((100% - 2 * 18px) / 3);
  }
}
@media (max-width:860px){
  .carousel .p3d{
    flex:0 0 calc((100% - 18px) / 2);      /* 2 across on tablet */
    max-width:calc((100% - 18px) / 2);
  }
}
@media (max-width:640px){
  .carousel{ gap:12px; }
  .carousel .p3d{
    /* 1.5 cards: the half-visible next card is the affordance that tells a
       thumb there is more to swipe. A full-width card gives no such hint. */
    flex:0 0 66%;
    max-width:66%;
  }
}

/* Shop archive / search / wishlist use a grid, not a carousel. */
.product-grid .p3d{ max-width:none; }

/* Carousel arrows sit slightly inside on these rows so they never overhang
   the container edge next to a card. */
.carousel-wrap.has-nav .carousel-nav--prev{ left:-4px; }
.carousel-wrap.has-nav .carousel-nav--next{ right:-4px; }
@media (max-width:640px){
  .carousel-wrap.has-nav .carousel-nav--prev{ left:4px; }
  .carousel-wrap.has-nav .carousel-nav--next{ right:4px; }
}

/* Card internals scale down with the card so nothing wraps awkwardly at the
   narrower breakpoints. */
@media (max-width:860px){
  .p3d__title{ font-size:13.5px; }
  .p3d__price b{ font-size:17px; }
}

/* Hero headline: long product taglines must never spill out of the column. */
.hero3d-title span{ overflow-wrap:break-word; }
@media (max-width:900px){
  .hero3d-title{ font-size:clamp(34px,10vw,58px); }
  /* Pills tuck in closer on a phone so they stay over the pack shot instead
     of hanging off the edge of the screen. */
  .hero3d-spec--1{ top:8%; left:0; }
  .hero3d-spec--2{ top:44%; right:0; }
  .hero3d-spec--3{ bottom:8%; left:4%; }
}
@media (max-width:420px){
  .hero3d-spec{ font-size:9.5px; padding:5px 9px; }
}

/* Gradient text fails safe. -webkit-text-fill-color:transparent applies even
   where background-clip:text does not, which would render the headline
   invisible rather than merely unstyled — the one outcome an <h1> must never
   have. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .hero3d-title__solid{ -webkit-text-fill-color:#fff; color:#fff; background:none; }
}
@media (max-width:900px){
  /* A 2px stroke that reads as a fine outline at 100px is a heavy slab at
     40px, so it scales with the type. */
  .hero3d-title__ghost{ -webkit-text-stroke-width:1.4px; }
  .hero3d-cta .btn{ padding:12px 22px; font-size:12.5px; }
}

/* ==========================================================================
   SHOP FILTERS
   ========================================================================== */
.filters__head{
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
  padding-bottom:16px; border-bottom:1px solid var(--border);
}
.filters__head h4{ margin:0; flex:1; font-size:15px; text-transform:uppercase; letter-spacing:.1em; }
.filters__clear{
  background:none; border:0; padding:0; cursor:pointer;
  font-size:11.5px; font-weight:700; color:var(--red);
}
.filters__clear:hover{ text-decoration:underline; }
.filters__close{ display:none; background:none; border:0; color:var(--text); font-size:26px; line-height:1; cursor:pointer; padding:0 4px; }

.filter-group{ padding:18px 0; border-bottom:1px solid var(--border); }
.filter-group:last-child{ border-bottom:0; }
.filter-group > h4{
  margin:0 0 12px; font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-faint); font-weight:700;
}

/* ---- Checkbox / radio rows ----
   The native control is hidden but still focusable and still the thing that
   is clicked (it sits inside the <label>), so keyboard and screen-reader
   behaviour is the browser's, not a reimplementation. */
.chk{
  display:flex; align-items:center; gap:11px; cursor:pointer;
  padding:8px 0; font-size:13.5px; color:var(--text-muted);
  transition:color .18s var(--ease);
}
.chk:hover{ color:var(--text); }
.chk input{ position:absolute; opacity:0; width:0; height:0; }
.chk__box{
  position:relative; flex-shrink:0; width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--border-strong); background:rgba(255,255,255,.03);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.chk--radio .chk__box{ border-radius:50%; }
.chk__box::after{
  content:''; position:absolute; inset:0;
  background:no-repeat center/11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  opacity:0; transform:scale(.6); transition:opacity .16s, transform .16s var(--ease);
}
.chk--radio .chk__box::after{
  background:#fff; border-radius:50%; inset:4px;
}
.chk input:checked + .chk__box{ background:var(--red); border-color:var(--red); }
.chk input:checked + .chk__box::after{ opacity:1; transform:scale(1); }
.chk input:focus-visible + .chk__box{ outline:2px solid var(--volt); outline-offset:2px; }
.chk__label{ flex:1; }
.chk .n{ font-size:11.5px; color:var(--text-faint); font-variant-numeric:tabular-nums; }

/* ---- Dual price slider ----
   Two range inputs stacked on one track. Each input is transparent and
   pointer-transparent EXCEPT its thumb, so a click always lands on whichever
   handle is under the cursor rather than on whichever input happens to be on
   top of the stack. */
.range-dual{ position:relative; height:34px; margin:6px 0 2px; }
.range-dual__track,
.range-dual__fill{
  position:absolute; top:50%; height:5px; border-radius:5px; transform:translateY(-50%);
  pointer-events:none;
}
.range-dual__track{ left:0; right:0; background:var(--border-strong); }
.range-dual__fill{
  left:var(--from,0%); right:calc(100% - var(--to,100%));
  background:linear-gradient(90deg,var(--volt),var(--volt-dark));
}
.range-dual input[type=range]{
  position:absolute; top:0; left:0; width:100%; height:34px; margin:0;
  -webkit-appearance:none; appearance:none; background:none;
  pointer-events:none; /* re-enabled on the thumb only */
}
.range-dual input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; pointer-events:auto;
  width:20px; height:20px; border-radius:50%; cursor:grab;
  background:#fff; border:3px solid var(--volt);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:transform .15s var(--ease);
}
.range-dual input[type=range]::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.15); }
.range-dual input[type=range]::-moz-range-thumb{
  pointer-events:auto; width:20px; height:20px; border-radius:50%; cursor:grab;
  background:#fff; border:3px solid var(--volt); box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.range-dual input[type=range]::-moz-range-track{ background:none; border:0; }
.range-dual input[type=range]:focus-visible::-webkit-slider-thumb{ outline:2px solid #fff; outline-offset:2px; }
.range-row{
  display:flex; justify-content:space-between; font-size:12.5px;
  color:var(--text); font-weight:700; font-variant-numeric:tabular-nums;
}

/* ---- Active filter chips ---- */
.active-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; }
.active-chips:empty{ margin:0; }
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 8px 6px 13px;
  border-radius:var(--radius-pill); font-size:12px; font-weight:600;
  background:var(--surface); border:1px solid var(--border-strong); color:var(--text);
}
.chip button{
  background:rgba(255,255,255,.08); border:0; color:var(--text-muted); cursor:pointer;
  width:18px; height:18px; border-radius:50%; line-height:1; font-size:13px;
  display:grid; place-items:center; transition:.18s var(--ease);
}
.chip button:hover{ background:var(--red); color:#fff; }

.filter-count{
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--red); color:#fff; font-size:11px; font-weight:800;
}

/* ---- Grid states ---- */
#shopGrid{ transition:opacity .2s var(--ease); }
#shopGrid.is-loading{ opacity:.45; pointer-events:none; }

.shop-empty{
  grid-column:1/-1; text-align:center; padding:56px 20px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.shop-empty svg{ width:46px; height:46px; color:var(--text-faint); }
.shop-empty h3{ margin:0; font-size:17px; text-transform:uppercase; }
.shop-empty p{ margin:0; color:var(--text-muted); font-size:14px; max-width:38ch; }

/* An error has to be visible. A filter that silently does nothing is
   indistinguishable from a broken one, which is exactly how this page used
   to fail. */
.shop-error{
  margin:20px 0 0; padding:14px 18px; border-radius:var(--radius-md);
  background:rgba(255,27,60,.09); border:1px solid rgba(255,27,60,.4);
  color:var(--text); font-size:13.5px; text-align:center;
}
.shop-error__retry{
  background:none; border:0; color:var(--red); font-weight:800; cursor:pointer;
  text-decoration:underline; padding:0 2px;
}

.shop-more{ display:flex; justify-content:center; margin-top:36px; }
.shop-more__spin{
  display:none; width:15px; height:15px; margin-left:9px; border-radius:50%;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  animation:nutraSpin .7s linear infinite;
}
#loadMoreBtn.is-loading .shop-more__spin{ display:inline-block; }
@keyframes nutraSpin{ to{ transform:rotate(360deg); } }

@media (max-width:900px){
  .filters__close{ display:block; }
  .filters{ padding-bottom:40px; }
}
@media (prefers-reduced-motion:reduce){
  .shop-more__spin{ animation:none; }
  #shopGrid{ transition:none; }
}

/* ==========================================================================
   STACK & SAVE — reward banner on cart, checkout, thank-you and view-order
   --------------------------------------------------------------------------
   Lives in the main stylesheet, not stack-builder.css: those pages never load
   the builder's CSS, and a reward the customer cannot see on the checkout is
   a reward they do not believe in.
   ========================================================================== */
/* No bare element selectors inside this block. The previous version used
   `.nutra-bundle-notice__head span{ display:block }`, which also matched the
   spans WooCommerce builds wc_price() from — so "₹1,758.45" rendered as three
   stacked lines. Every rule below targets a class this theme owns. */
.nutra-bundle-notice{
  position:relative; overflow:hidden;
  margin:0 0 26px; padding:22px 26px; border-radius:var(--radius-lg);
  background:linear-gradient(125deg, rgba(255,27,60,.1), rgba(18,18,22,.94));
  border:1px solid rgba(255,27,60,.32);
}
.nutra-bundle-notice.is-won{
  background:linear-gradient(125deg, rgba(74,222,128,.11), rgba(16,20,18,.95) 58%);
  border-color:rgba(74,222,128,.44);
  box-shadow:0 18px 44px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.nutra-bundle-notice__glow{
  position:absolute; left:-40px; top:-90px; width:340px; aspect-ratio:1;
  border-radius:50%; pointer-events:none; filter:blur(60px);
  background:radial-gradient(circle, rgba(74,222,128,.3), transparent 70%);
}
.nutra-bundle-notice:not(.is-won) .nutra-bundle-notice__glow{
  background:radial-gradient(circle, rgba(255,27,60,.28), transparent 70%);
}

.nutra-bundle-notice__top{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.nutra-bundle-notice__ic{
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; font-size:23px; line-height:1;
  background:rgba(74,222,128,.13); border:1px solid rgba(74,222,128,.34);
}
.nutra-bundle-notice__title{ flex:1 1 240px; min-width:0; }
.nutra-bundle-notice__title b{
  display:block; font-size:16px; line-height:1.35; color:#fff; margin:0 0 4px;
}
.nutra-bundle-notice__title p{ margin:0; font-size:13px; color:var(--text-muted); line-height:1.5; }

.nutra-bundle-notice__stats{ display:flex; gap:9px; flex-shrink:0; flex-wrap:wrap; }
.nb-stat{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:82px; padding:9px 15px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.nb-stat b{
  font-family:'Oswald',sans-serif; font-size:19px; line-height:1.1; color:#fff;
  white-space:nowrap;   /* the amount stays on one line, whatever it contains */
}
.nb-stat small{
  font-size:9.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-faint); white-space:nowrap;
}
.nb-stat--save{ background:rgba(74,222,128,.11); border-color:rgba(74,222,128,.38); }
.nb-stat--save b{ color:#4ade80; }

.nutra-bundle-notice__gifts{
  position:relative; z-index:1;
  list-style:none; margin:18px 0 0; padding:16px 0 0;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column; gap:11px;
}
.nb-gift{
  display:flex; align-items:center; gap:16px;
  padding:12px 16px; border-radius:var(--radius-md);
  background:rgba(74,222,128,.07); border:1px solid rgba(74,222,128,.3);
}
/* A big, uncropped shot. The gift is the emotional payoff of the whole
   mechanic — at 42px and cropped square, a tall shaker bottle showed as a
   fragment of a label and read as a placeholder. `contain` keeps the whole
   product visible whatever shape it is. */
.nb-gift__thumb{
  flex-shrink:0; width:78px; height:78px; border-radius:12px;
  display:grid; place-items:center; overflow:hidden;
  background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.09);
  color:#4ade80;
}
.nb-gift__thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.nb-gift__thumb svg{ width:34px; height:34px; }
.nb-gift__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.nb-gift__tag{
  font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#4ade80;
}
.nb-gift__txt b{ font-size:15px; color:#fff; line-height:1.3; }
.nb-gift__txt small{ font-size:12px; color:var(--text-muted); line-height:1.45; }
.nb-gift__free{
  flex-shrink:0; font-style:normal; font-size:11px; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; color:#0b1710;
  padding:7px 14px; border-radius:var(--radius-pill);
  background:#4ade80; border:1px solid #4ade80;
}

.nutra-bundle-notice__next{
  position:relative; z-index:1;
  margin:16px 0 0; padding-top:14px; border-top:1px solid rgba(255,255,255,.1);
  font-size:13px; color:var(--text-muted);
}
.nutra-bundle-notice__next a{ color:var(--red); font-weight:800; margin-left:8px; }
.nutra-gift-qty{ font-weight:800; color:#4ade80; }

@media (max-width:820px){
  .nutra-bundle-notice__stats{ width:100%; }
  .nb-stat{ flex:1; min-width:0; }
}
@media (max-width:620px){
  .nutra-bundle-notice{ padding:17px 16px; }
  .nutra-bundle-notice__top{ gap:12px; }
  .nutra-bundle-notice__ic{ width:38px; height:38px; font-size:19px; }
  .nutra-bundle-notice__title b{ font-size:14.5px; }
  .nb-stat{ padding:8px 10px; min-width:0; }
  .nb-stat b{ font-size:16px; }
  .nb-gift{ gap:12px; padding:10px 12px; }
  .nb-gift__thumb{ width:62px; height:62px; }
  .nb-gift__txt b{ font-size:13.5px; }
  .nb-gift__free{ padding:6px 11px; font-size:10px; }
}

/* ==========================================================================
   STACK & SAVE — homepage banner
   --------------------------------------------------------------------------
   In style.css, not stack-builder.css. The builder's stylesheet only loads on
   the builder page, so the banner on the homepage was rendering with no styles
   at all — a stack of raw text and one enormous unsized image.
   ========================================================================== */
.stk-banner{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  padding:44px 48px; display:grid; grid-template-columns:1.2fr .8fr;
  gap:32px; align-items:center;
  background:
    linear-gradient(112deg, rgba(255,27,60,.22) 0%, rgba(255,120,40,.08) 40%, rgba(15,15,19,.97) 74%),
    repeating-linear-gradient(58deg, rgba(255,255,255,.014) 0 14px, transparent 14px 28px);
  border:1px solid rgba(255,27,60,.35);
}
.stk-banner__glow{
  position:absolute; right:8%; top:-50%; width:44%; aspect-ratio:1; pointer-events:none;
  border-radius:50%; filter:blur(56px);
  background:radial-gradient(circle, rgba(255,27,60,.4), transparent 68%);
}
.stk-banner__copy{ position:relative; z-index:2; }
.stk-banner__copy h2{
  font-family:'Oswald',sans-serif; text-transform:uppercase; color:#fff;
  font-size:clamp(24px,3.6vw,42px); line-height:1.03; margin:11px 0 12px;
}
.stk-banner__copy h2 em{
  font-style:normal;
  background:linear-gradient(96deg,#fff 10%,#ffb0c0 58%,var(--volt) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .stk-banner__copy h2 em{ -webkit-text-fill-color:var(--volt); color:var(--volt); background:none; }
}
.stk-banner__copy p{ margin:0 0 20px; color:var(--text-muted); font-size:14.5px; max-width:50ch; line-height:1.65; }

.stk-banner__pills{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.stk-banner__pill{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:7px 14px; border-radius:var(--radius-pill); font-size:11.5px; font-weight:700;
  background:rgba(255,255,255,.05); border:1px solid var(--border-strong); color:var(--text-muted);
}
.stk-banner__pill b{ font-size:14px; color:var(--volt); font-family:'Oswald',sans-serif; }
.stk-banner__pill--gift{ border-color:rgba(74,222,128,.42); color:#8ef0b4; }
.stk-banner__btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 30px; }
.stk-banner__btn svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.stk-banner__btn:hover svg{ transform:translateX(4px); }

.stk-banner__art{ position:relative; z-index:2; display:grid; place-items:center; }
.stk-banner__halo{
  position:absolute; width:78%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  filter:blur(34px);
  background:radial-gradient(circle, rgba(255,27,60,.42), transparent 66%);
}
.stk-banner__shot{
  position:relative; width:min(230px,100%); aspect-ratio:1;
  object-fit:cover; border-radius:18px; display:block;
  border:1.5px solid rgba(255,255,255,.14);
  box-shadow:0 28px 58px rgba(0,0,0,.66), 0 0 46px rgba(255,27,60,.24);
  transition:transform .4s var(--ease);
}
.stk-banner:hover .stk-banner__shot{ transform:translateY(-6px) scale(1.02); }
.stk-banner__badge{
  position:absolute; right:4%; top:2%; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:70px; height:70px; border-radius:50%;
  background:linear-gradient(135deg,var(--volt),var(--volt-dark)); color:#fff;
  box-shadow:0 14px 34px rgba(255,27,60,.5);
  transform:rotate(-10deg);
}
.stk-banner__badge b{ font-family:'Oswald',sans-serif; font-size:21px; line-height:1; }
.stk-banner__badge small{ font-size:9px; font-weight:800; letter-spacing:.14em; }

@media (max-width:900px){
  .stk-banner{ grid-template-columns:1fr; gap:24px; padding:30px 24px; text-align:center; }
  .stk-banner__art{ order:-1; }
  .stk-banner__shot{ width:min(190px,64%); }
  .stk-banner__copy p{ margin-inline:auto; }
  .stk-banner__pills{ justify-content:center; }
  .stk-banner__btn{ width:100%; justify-content:center; }
  .stk-banner__badge{ width:58px; height:58px; right:16%; top:-4%; }
  .stk-banner__badge b{ font-size:18px; }
}
@media (prefers-reduced-motion:reduce){
  .stk-banner__shot, .stk-banner__btn svg{ transition:none; }
}

/* ---- Free gift rows in the cart / checkout / order tables ---- */
.nutra-gift-row td{ background:rgba(74,222,128,.05); }
.nutra-gift-row .product-name{ display:flex; align-items:center; gap:12px; }
.nutra-gift-row__img{
  flex-shrink:0; width:56px; height:56px; border-radius:10px; overflow:hidden;
  display:grid; place-items:center;
  background:rgba(0,0,0,.32); border:1px solid rgba(74,222,128,.32); color:#4ade80;
}
/* contain, not cover.
   The shaker is a tall bottle on a square canvas; cropping it to a 44px square
   left only the middle of the label — which is what "NUTRA" on its own in the
   checkout row was. */
.nutra-gift-row__img img{ width:100%; height:100%; object-fit:contain; }
.nutra-gift-row__img svg{ width:24px; height:24px; }
.nutra-gift-row__txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.nutra-gift-row__txt b{ font-size:14px; color:#fff; }
.nutra-gift-row__txt small{ font-size:11px; color:#4ade80; font-weight:700; }
/* Solid, not a tint. This pill is also used for the FREE label on the real
   gift line, where it replaces a price — a faint outline there reads as
   disabled text rather than as the good news it is. */
.nutra-gift-row__free{
  display:inline-block; white-space:nowrap;
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#0b1710; padding:5px 12px; border-radius:var(--radius-pill);
  background:#4ade80; border:1px solid #4ade80;
}
.nutra-gift-chip{
  display:inline-block; margin:0 6px 4px 0; padding:4px 10px; border-radius:var(--radius-pill);
  font-size:11.5px; font-weight:700; color:#8ef0b4;
  background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.38);
}
.nutra-bundle-notice__thumb{
  flex-shrink:0; width:42px; height:42px; border-radius:9px; overflow:hidden;
  display:grid; place-items:center;
  background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.32); color:#4ade80;
}
.nutra-bundle-notice__thumb img{ width:100%; height:100%; object-fit:contain; }
.nutra-bundle-notice__thumb svg{ width:19px; height:19px; }
.nutra-order-gifts{
  margin-top:18px; padding:16px 20px; border-radius:var(--radius-md);
  background:rgba(74,222,128,.07); border:1px solid rgba(74,222,128,.32);
}
.nutra-order-gifts b{ display:block; font-size:13px; color:#8ef0b4; margin-bottom:9px; }
.nutra-order-gifts ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.nutra-order-gifts li{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text); }
.nutra-order-gifts em{
  font-style:normal; margin-left:auto; font-size:11px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#4ade80;
}

/* ==========================================================================
   COMING SOON
   --------------------------------------------------------------------------
   A product, or a single flavour of one, that is not on sale yet. The rule
   throughout: show what it is and when it lands, show nothing that looks
   like an offer. No price, no cart, no discount badge — those are promises,
   and a promise made months before launch is one you have to keep at a price
   you set before you knew your costs.
   ========================================================================== */

.badge-soon{
  background:linear-gradient(135deg,#3f8cff,#1e5fd6);
  color:#fff; box-shadow:0 8px 20px rgba(63,140,255,.4);
}

/* ---- product card ---- */
.p3d__soon{
  display:flex; align-items:center; gap:7px; margin-top:auto;
  font-size:12.5px; font-weight:700; color:#7fb0ff;
}
.p3d__soon span{
  padding:5px 11px; border-radius:var(--radius-pill);
  background:rgba(63,140,255,.12); border:1px solid rgba(63,140,255,.36);
}
.quick-add--soon{
  background:rgba(63,140,255,.12) !important;
  border-color:rgba(63,140,255,.42) !important;
  color:#9cc4ff !important;
}
.quick-add--soon:hover{
  background:#3f8cff !important; border-color:#3f8cff !important; color:#fff !important;
}

/* The flavour and size pills are NOT hidden by either state. They live inside
   the <form>, so hiding the form took them with it — and landing on an
   unavailable flavour then left no way to choose a different one. */

/* One bar, two states.
   Compact by design: the first version was a full-height card with a heading,
   a paragraph and an open email field, which on a phone pushed the flavour
   buttons and the price off screen — so a product with one unavailable
   flavour looked like a product you could not buy at all. It is one line now,
   and the form opens only when someone asks for it.

   Coming soon is blue, out of stock is amber. Different news deserves
   different words and different colour, but the same shape — a customer
   should not have to re-learn the layout to read the second message. */
.pdp-state{ display:none; }
.pdp-state.is-on{ display:block; margin:14px 0 4px; }

.pdp-state__bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:var(--radius-md);
  border:1px solid; transition:background .25s var(--ease), border-color .25s var(--ease);
}
.pdp-state.is-soon .pdp-state__bar{ background:rgba(63,140,255,.1);  border-color:rgba(63,140,255,.34); }
.pdp-state.is-oos  .pdp-state__bar{ background:rgba(245,158,11,.1);  border-color:rgba(245,158,11,.38); }

.pdp-state__badge{
  flex-shrink:0; padding:5px 11px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:#fff;
}
.pdp-state.is-soon .pdp-state__badge{ background:linear-gradient(135deg,#3f8cff,#1e5fd6); }
.pdp-state.is-oos  .pdp-state__badge{ background:linear-gradient(135deg,#f59e0b,#c2740a); color:#1b1205; }

.pdp-state__when{ flex:1; min-width:0; font-size:13.5px; font-weight:700; }
.pdp-state.is-soon .pdp-state__when{ color:#cfe0ff; }
.pdp-state.is-oos  .pdp-state__when{ color:#ffe0ad; }

.pdp-state__cta{
  flex-shrink:0; cursor:pointer; padding:8px 16px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; border:1px solid transparent; transition:.2s var(--ease);
}
.pdp-state.is-soon .pdp-state__cta{ background:#3f8cff; border-color:#3f8cff; }
.pdp-state.is-soon .pdp-state__cta:hover{ background:#1e5fd6; border-color:#1e5fd6; }
.pdp-state.is-oos  .pdp-state__cta{ background:#f59e0b; border-color:#f59e0b; color:#1b1205; }
.pdp-state.is-oos  .pdp-state__cta:hover{ background:#d98806; border-color:#d98806; }

.pdp-state__note{ margin:8px 2px 0; font-size:12.5px; color:var(--text-muted); line-height:1.55; }

.pdp-state__form{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pdp-state__form input[type="email"]{
  flex:1 1 200px; min-width:0; padding:12px 16px;
  border-radius:var(--radius-pill); border:1.5px solid var(--border-strong);
  background:var(--bg-soft); color:var(--text); font-size:14px; outline:none;
}
.pdp-state.is-soon .pdp-state__form input[type="email"]:focus{ border-color:#3f8cff; }
.pdp-state.is-oos  .pdp-state__form input[type="email"]:focus{ border-color:#f59e0b; }
.pdp-state__form .btn{ flex:0 0 auto; padding:12px 22px; }
.pdp-state__msg{ margin:8px 2px 0; font-size:12.5px; }
.pdp-state__msg.is-ok{ color:#4ade80; }
.pdp-state__msg.is-bad{ color:#ff8fa1; }

/* What each state removes.
   Coming soon takes the price away too — quoting a figure months before
   launch is a promise you have to keep at a price you set before you knew
   your costs. Out of stock KEEPS the price: the product is real, priced and
   coming back, and hiding the number only makes people wonder whether it is
   about to go up. */
.pdp-info.is-coming-soon .qty-cart-row,
.pdp-info.is-coming-soon .pdp-price-block,
.pdp-info.is-coming-soon .pdp-tax,
.pdp-info.is-coming-soon .pdp-qty-note,
.pdp-info.is-coming-soon .pay-options,
.pdp-info.is-oos .qty-cart-row,
.pdp-info.is-oos .pay-options{ display:none !important; }

/* ---- Option pill states ----
   Four states, four unmistakable signals. Colour alone is not enough — about
   1 in 12 men has some form of colour blindness, and this store's audience is
   almost entirely men — so each state also carries a distinct SHAPE in the
   corner: a tick, a cross, a dot, a dashed edge. */
.option-pill{ position:relative; }

/* Selected — green tick, top right. */
.option-pill.active::after{
  content:''; position:absolute; top:-6px; right:-6px;
  width:20px; height:20px; border-radius:50%;
  background:#22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  box-shadow:0 0 0 2px var(--bg), 0 3px 8px rgba(0,0,0,.5);
}

/* Out of stock — still clickable, so someone can select it and read why. */
.option-pill.oos{
  opacity:.62; filter:grayscale(.55); pointer-events:auto;
  color:var(--text-faint); border-style:solid; border-color:var(--border-strong);
  background:var(--surface);
}
.option-pill.oos::before{
  content:''; position:absolute; left:-6px; top:-6px;
  width:18px; height:18px; border-radius:50%;
  background:#6b7280 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/10px 10px no-repeat;
  box-shadow:0 0 0 2px var(--bg);
  margin:0;
}
.option-pill.oos.active{ opacity:.85; }

/* Never made in this size — the only genuinely dead one. */
.option-pill--na{
  opacity:.28; cursor:not-allowed; pointer-events:none;
  filter:grayscale(.8); border-style:dashed;
}



/* A flavour that exists only as coming-soon. Marked before the click, not
   after — a pill that behaves differently from its neighbours with no warning
   reads as a broken page. */
.option-pill--soon{
  border-color:rgba(63,140,255,.5); color:#9cc4ff;
  background:rgba(63,140,255,.09);
}
/* Corner marker, not an inline dot. Flavour pills already carry an inline
   colour swatch, so a second inline dot beside it read as two swatches. Every
   state now speaks from the same place — the corner. */
.option-pill--soon::before{
  content:''; position:absolute; left:-6px; top:-6px;
  width:18px; height:18px; border-radius:50%; background:#3f8cff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  background-position:center; background-size:11px 11px; background-repeat:no-repeat;
  box-shadow:0 0 0 2px var(--bg);
  margin:0;
}
.option-pill--soon.active{
  border-color:#3f8cff; color:#fff;
  background:linear-gradient(135deg,#3f8cff,#1e5fd6);
  box-shadow:0 8px 20px rgba(63,140,255,.4);
}
.option-pill--soon.active::before{ box-shadow:0 0 0 2px var(--bg); }


/* The old out-of-stock diagonal strike is replaced by the corner cross above:
   a line through a pill that also carries a colour dot read as a swatch with
   a scratch on it rather than as a state. */
.option-pill.oos::after{ content:none; }
.option-pill.oos.active::after{
  content:''; background-color:#6b7280;
}

@media (max-width:640px){
  .pdp-state__bar{ padding:11px 12px; gap:9px; }
  .pdp-state__when{ flex:1 1 100%; order:3; font-size:12.5px; }
  .pdp-state__cta{ margin-left:auto; }
  .pdp-state__form .btn{ flex:1 1 100%; }
  .option-pill.active::after{ width:18px; height:18px; background-size:11px 11px; top:-5px; right:-5px; }
  .option-pill.oos::before{ width:16px; height:16px; background-size:9px 9px; }
}

/* The mark is now a PNG of the real shield, not an inline SVG. The drop-shadow
   is dropped with it: the artwork already carries its own weight, and a glow
   under a detailed illustration reads as a printing error rather than depth. */
.logo-mark{ object-fit:contain; filter:none; }
.logo-img{ height:38px; width:auto; display:block; }
@media (max-width:640px){ .logo-img{ height:32px; } }

/* Which flavour the message is about. Sits between the badge and the status
   line and is the loudest thing in the bar after the badge itself. */
.pdp-state__name{
  flex-shrink:0; font-family:'Oswald',sans-serif; text-transform:uppercase;
  font-size:15px; letter-spacing:.02em; color:#fff; line-height:1.2;
}
.pdp-state__name::after{
  content:''; display:inline-block; width:4px; height:4px; border-radius:50%;
  background:currentColor; opacity:.5; margin:0 2px 3px 9px;
}
@media (max-width:640px){
  .pdp-state__name{ font-size:14px; }
  .pdp-state__name::after{ display:none; }
}


/* The search icon is hidden on phones. There is a search entry in the bottom
   tab bar already, and up here it was one of five targets crowded into the
   right edge — the row it sits in is the one people miss the cart in. */
@media (max-width:640px){
  .header-actions [data-open-search]{ display:none; }
}

/* FBT combo card — the lines that tie it to Stack & Save. */
.combo-note{ margin:6px 0 0; font-size:12px; font-weight:700; color:var(--gold); }
.combo-gift{ margin:6px 0 0; font-size:12.5px; font-weight:700; color:#4ade80; }
.combo-next{ margin:8px 0 0; font-size:12px; color:var(--text-muted); line-height:1.5; }
.combo-next a{ color:var(--red); font-weight:800; margin-left:6px; white-space:nowrap; }

/* The live Stack & Save line in the sticky bar. Second line, quieter than the
   price — it is context for the decision, not the decision itself. */
.sticky-atc .info .stack{
  display:block; margin-top:3px; font-size:11.5px; font-weight:700;
  color:#4ade80; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:640px){
  /* The product name is already hidden here; the stack line earns that space
     because it is the thing that changes. */
  .sticky-atc__inner .info .stack{ font-size:11px; margin-top:0; }
}


/* The real brand shield. Slightly larger than the drawn one it replaced —
   this artwork is line-based, and at 34px its strokes closed up into a blob.
   No drop-shadow either: a glow under a detailed illustration reads as a
   printing fault rather than depth. */
.logo-mark{ object-fit:contain; filter:none; width:38px; height:38px; }
.footer-logo .logo-mark{ width:34px; height:34px; }
.logo-img{ height:40px; width:auto; display:block; }
@media (max-width:640px){
  .logo-mark{ width:32px; height:32px; }
  .logo-img{ height:32px; }
}

/* ---- Frequently Bought Together: one card per pairing ----
   A horizontal rail rather than a grid. These are alternatives to each other,
   not a list to read top to bottom, and a rail says "pick one of these" in a
   way a stack of full-width boxes does not. */
.fbt-rail{ display:flex; gap:18px; overflow-x:auto; padding:6px 2px 12px; scrollbar-width:none; scroll-snap-type:x mandatory; }
.fbt-rail::-webkit-scrollbar{ display:none; }
.fbt-rail .combo-card{ flex:0 0 clamp(260px, 30vw, 320px); scroll-snap-align:start; }

.combo-flav{
  display:inline-block; margin-left:5px; padding:2px 8px; border-radius:var(--radius-pill);
  font-family:Inter,sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:#ffb3c0;
  background:rgba(255,27,60,.14); border:1px solid rgba(255,27,60,.34);
  vertical-align:middle;
}
.combo-plus{ margin:0 5px; color:var(--text-faint); }
.combo-mine{ transition:opacity .2s var(--ease); }

.combo-add.is-added{
  background:#22c55e !important; border-color:#22c55e !important; color:#04140a !important;
}

@media (max-width:640px){
  .fbt-rail{ gap:12px; }
  .fbt-rail .combo-card{ flex:0 0 78vw; }
}

/* A chosen bundle card, and the bar echoing it. */
.combo-card{ cursor:pointer; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); }
.combo-card.is-picked{
  border-color:var(--volt);
  box-shadow:0 0 0 1px var(--volt), 0 18px 44px rgba(255,27,60,.28);
}
.sticky-atc.is-bundle{ border-top-color:rgba(255,27,60,.5); }
.sticky-atc.is-bundle .info h5{ white-space:normal; overflow:visible; font-size:12px; line-height:1.3; }

/* ------------------------------------------------------------------
   Full-bleed campaign slide.

   Used when a Banner has artwork but no typed heading: the creative
   already carries the words, so the hero shows the picture and nothing
   else.

   WHY THE min-height IS HERE AND NOT OPTIONAL
   Every other slide gets its height from .hero3d-inner. This slide has
   no .hero3d-inner — its artwork is absolutely positioned — so without
   a height of its own the slide measured zero, the track measured zero,
   and the entire hero section vanished from the page the moment a
   campaign banner was published. It has to restate the same one-screen
   rule the composed slides use.
   ------------------------------------------------------------------ */
.hero3d-slide--art{
  min-height:calc(100svh - var(--hero-offset, 114px));
}
.hero3d-slide--art .hero3d-art{
  position:absolute; inset:0; display:block; overflow:hidden;
}
.hero3d-slide--art .hero3d-art picture{ display:block; width:100%; height:100%; }
.hero3d-slide--art .hero3d-art img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center 38%;
}
@media (max-width:820px){
  .hero3d-slide--art .hero3d-art img{ object-position:center 30%; }
}

/* ------------------------------------------------------------------
   Choosing a bundle.

   The selection existed before this; the affordance did not. A card whose
   only obvious control is "Add Stack to Cart" teaches people that the
   button is the interaction, so the click-anywhere-to-select gesture went
   undiscovered and the bottom bar looked like it was ignoring them.
   ------------------------------------------------------------------ */
.combo-pick{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  margin:12px 0 10px; padding:9px 12px; border-radius:10px;
  border:1px solid var(--border); background:rgba(255,255,255,.03);
  font-size:12.5px; font-weight:700; color:var(--text-muted);
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.combo-pick__input{ position:absolute; opacity:0; width:0; height:0; }
.combo-pick__dot{
  width:17px; height:17px; flex-shrink:0; border-radius:50%;
  border:2px solid var(--border-strong); position:relative;
  transition:border-color .2s var(--ease);
}
.combo-pick__dot::after{
  content:''; position:absolute; inset:3px; border-radius:50%;
  background:var(--volt); transform:scale(0); transition:transform .18s var(--ease);
}
.combo-pick__input:checked + .combo-pick__dot{ border-color:var(--volt); }
.combo-pick__input:checked + .combo-pick__dot::after{ transform:scale(1); }
.combo-card.is-picked .combo-pick{
  border-color:var(--volt); color:var(--text); background:rgba(255,27,60,.10);
}
.combo-pick__input:focus-visible + .combo-pick__dot{ outline:2px solid var(--volt); outline-offset:3px; }

/* ------------------------------------------------------------------
   The brand lockup, used at every size.

   818×364, so height drives the box and the width follows — setting a
   width would squash it on any header that is not exactly that ratio.
   ------------------------------------------------------------------ */
.logo-lockup{
  height:38px; width:auto; display:block; object-fit:contain;
  transition:transform .3s var(--ease);
}
.logo:hover .logo-lockup{ transform:scale(1.04); }
.footer-logo .logo-lockup{ height:44px; }
@media (max-width:900px){ .logo-lockup{ height:32px; } }
@media (max-width:400px){ .logo-lockup{ height:28px; } }

/* ------------------------------------------------------------------
   Hero dots — lower, and clear of the artwork.

   On a full-bleed campaign slide the dots were landing on top of the
   trust badges at the bottom of the creative. Dropping them and giving
   them a backing plate keeps them readable over any artwork.
   ------------------------------------------------------------------ */
.hero3d-dots{ bottom:14px; }
.hero3d-slide--art ~ .hero3d-dots,
.hero3d .hero3d-dots{
  padding:7px 12px; border-radius:999px;
  background:rgba(7,7,10,.55); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
@media (max-width:820px){ .hero3d-dots{ bottom:10px; } }

/* ------------------------------------------------------------------
   Campaign artwork on a phone: show ALL of it.

   object-fit:cover fills the slot by cropping, and on a tall phone the
   slot is far narrower than the artwork, so the sides — where the
   coupon and the offer live — were the first thing cut off. On small
   screens the artwork sets its own height instead, so the whole
   creative is on screen at once with nothing to scroll for.
   ------------------------------------------------------------------ */
@media (max-width:820px){
  .hero3d-slide--art{ min-height:0; }
  .hero3d-slide--art .hero3d-art{ position:relative; }
  .hero3d-slide--art .hero3d-art img{
    height:auto; max-height:calc(100svh - var(--hero-offset, 104px));
    object-fit:contain; margin-inline:auto;
  }
}

/* The main image is now a swipe surface. */
.main-media{ cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.main-media.is-swiping{ cursor:grabbing; }
.main-media img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }

/* ==================================================================
   CHOOSE YOUR FREE GIFT
   ------------------------------------------------------------------
   A reward you have to pick is a decision, so it gets the weight of
   one: its own panel, real photographs, and a size control that sits
   inside the option it belongs to rather than beside it.
   ================================================================== */
.gift-pick{
  margin:22px 0 0; padding:20px 20px 18px; border-radius:16px;
  border:1px solid var(--border); background:var(--surface);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* Still owed a decision — say so with colour, not just words. */
.gift-pick.is-outstanding{
  border-color:rgba(255,153,51,.55);
  box-shadow:0 0 0 1px rgba(255,153,51,.18), 0 14px 40px rgba(255,153,51,.10);
}
.gift-pick.is-busy{ opacity:.6; pointer-events:none; }

.gift-pick__head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.gift-pick__ic{ font-size:22px; line-height:1.2; }
.gift-pick__title{ margin:0; font-size:16px; letter-spacing:.01em; }
.gift-pick__sub{ margin:3px 0 0; font-size:12.5px; color:var(--text-muted); }
.gift-pick.is-outstanding .gift-pick__sub{ color:#ffb45c; font-weight:700; }

.gift-pick__group{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:12px; }
.gift-pick__group + .gift-pick__group{ margin-top:12px; }

.gift-opt{
  position:relative; display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  padding:13px 14px; border-radius:13px;
  border:1px solid var(--border); background:rgba(255,255,255,.02);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.gift-opt:hover{ border-color:var(--border-strong); }
.gift-opt.is-picked{ border-color:var(--volt); background:rgba(255,27,60,.08); }
.gift-opt__input{ position:absolute; opacity:0; width:0; height:0; }

.gift-opt__dot{
  width:17px; height:17px; margin-top:2px; flex-shrink:0; border-radius:50%;
  border:2px solid var(--border-strong); position:relative;
}
.gift-opt__dot::after{
  content:''; position:absolute; inset:3px; border-radius:50%;
  background:var(--volt); transform:scale(0); transition:transform .18s var(--ease);
}
.gift-opt.is-picked .gift-opt__dot{ border-color:var(--volt); }
.gift-opt.is-picked .gift-opt__dot::after{ transform:scale(1); }
.gift-opt__input:focus-visible + .gift-opt__dot{ outline:2px solid var(--volt); outline-offset:3px; }

.gift-opt__img{
  width:60px; height:60px; flex-shrink:0; object-fit:contain;
  border-radius:9px; background:#fff; padding:3px;
}
.gift-opt__body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.gift-opt__title{ font-size:13.5px; font-weight:800; color:var(--text); }
.gift-opt__desc{ font-size:11.5px; color:var(--text-muted); line-height:1.5; }

.gift-opt__sizes{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:7px; }
.gift-opt__sizelab{
  font-size:10.5px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-muted); margin-right:2px;
}
.gift-size{
  min-width:34px; padding:5px 9px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border-strong); background:transparent;
  color:var(--text); font-size:11.5px; font-weight:800; font-family:inherit;
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.gift-size:hover{ border-color:var(--volt); }
.gift-size.is-on{ background:var(--volt); border-color:var(--volt); color:#fff; }
.gift-opt__warn{
  width:100%; margin-top:4px; font-size:11px; font-weight:700; color:#ffb45c;
}

@media (max-width:640px){
  .gift-pick{ padding:16px 14px; }
  .gift-pick__group{ grid-template-columns:1fr; }
  .gift-opt__img{ width:52px; height:52px; }
}
.stk-gift__or{
  align-self:center; font-size:10.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted); padding:0 2px;
}

/* A gift that still needs an answer, said inside the rewards panel. */
.nutra-bundle-notice__needsize{
  margin:14px 0 0; padding:11px 14px; border-radius:11px;
  border:1px solid rgba(255,153,51,.5); background:rgba(255,153,51,.10);
  color:#ffb45c; font-size:12.5px; font-weight:700; line-height:1.5;
}