/* ============================================================
   VIV RX — Design System v3 (motion edition)
   ============================================================ */
:root {
  /* Official brand palette (see BRAND.md).
     --coral-deep is a darkened cut of Bright Orange 200 used for small text
     and hover states so orange type keeps WCAG AA contrast on Light Tan. */
  --coral:#FE621D;           /* Bright Orange 200 */
  --coral-deep:#B84510;      /* derived dark orange (AA for small text) */
  --coral-bright:#F7805A;    /* Light Orange 200 */
  --coral-soft:#F0E7D6;      /* Tan */
  --coral-tint:#FFF6E5;      /* Light Tan */
  --ink:#131314; --ink-2:#131314;            /* Black */
  --charcoal:#525252; --muted:#525252;       /* Gray */
  --cream:#FFF6E5;           /* Light Tan — page background */
  --paper:#FEFDFC;           /* White */
  --line:#E3E3E3; --line-2:#E3E3E3;          /* Light Gray */
  --radius:24px; --radius-sm:16px; --radius-xs:12px;
  /* Layered, neutral elevation — reads like real light, not a colored glow */
  --shadow-xs:0 1px 2px rgba(19,19,20,.05);
  --shadow-sm:0 2px 4px rgba(19,19,20,.04), 0 8px 20px -10px rgba(19,19,20,.12);
  --shadow:0 4px 10px -4px rgba(19,19,20,.07), 0 22px 44px -20px rgba(19,19,20,.16);
  --shadow-lg:0 8px 18px -8px rgba(19,19,20,.08), 0 44px 80px -34px rgba(19,19,20,.22);
  --shadow-coral:0 2px 6px rgba(254,98,29,.20), 0 14px 28px -12px rgba(254,98,29,.40);
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Poppins",system-ui,sans-serif;
  --font-logo:"Alice",Georgia,serif;
}
* { box-sizing:border-box; margin:0; padding:0; }

/* ---------- Accessibility utilities ---------- */
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:12px; top:-60px; z-index:1000; background:var(--ink); color:#fff; padding:12px 18px; border-radius:10px; font-weight:600; font-size:15px; transition:top .2s var(--ease); }
.skip-link:focus { top:12px; }

html { scroll-behavior:smooth; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }
body { font-family:var(--font-body); color:var(--ink); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-feature-settings:"kern","liga","calt"; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
/* No grey tap/click flash on any interactive element; keyboard focus rings stay */
a, button, summary, [role="button"] { -webkit-tap-highlight-color:transparent; }
/* The logo never shows a drag ghost or selection box */
.brand__img, .loader__logo { -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }
::selection { background:var(--coral); color:#fff; }
:focus-visible { outline:2px solid var(--coral-deep); outline-offset:3px; border-radius:6px; }
:focus:not(:focus-visible) { outline:none; }
/* Tabular figures keep prices & stats optically aligned */
.pc__price, .pdp__price .price, .buybar__info span, .float-card__v, .stat__num, .co-line span, .rev-score__n, .pdp-nav__buy strong { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* ---------- Wordmark ---------- */
.wordmark { font-family:var(--font-logo); font-weight:400; font-size:30px; letter-spacing:-.01em; line-height:1; display:inline-flex; align-items:flex-end; color:var(--coral); }
.wordmark--sm { font-size:24px; } .wordmark--xl { font-size:64px; }
.wordmark__viv { position:relative; }
.wordmark__viv .dot { position:relative; }
.wordmark__viv .dot::after { content:""; position:absolute; bottom:.64em; left:50%; transform:translateX(-50%); width:.15em; height:.15em; background:currentColor; border-radius:50%; }
.wordmark__rx { font-size:.42em; margin-left:.08em; margin-bottom:.12em; color:var(--coral-deep); }

/* ---------- Brand logo (image) ---------- */
.brand { display:inline-flex; align-items:center; }
.brand__img { display:block; width:auto; }
.brand__img--nav { height:42px; }
.brand__img--compare { height:22px; margin:0 auto; }
.brand__img--modal { height:26px; }
.brand__img--footer { height:46px; margin-bottom:18px; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-weight:600; font-size:15px; padding:12px 22px; border-radius:100px; cursor:pointer; border:1.5px solid transparent; position:relative; transition:transform .22s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s; white-space:nowrap; will-change:transform; -webkit-tap-highlight-color:transparent; letter-spacing:-.005em; }
.btn:focus-visible { outline:2px solid var(--coral-deep); outline-offset:3px; }
.btn:active { transform:translateY(0) scale(.98); }
.btn--solid { background:var(--coral); color:#fff; box-shadow:var(--shadow-coral); }
.btn--solid:hover { background:var(--coral-deep); transform:translateY(-1px); box-shadow:0 3px 8px rgba(254,98,29,.26),0 18px 32px -14px rgba(254,98,29,.5); }
.btn--ghost { background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover { border-color:var(--coral); color:var(--coral-deep); background:var(--coral-tint); }
.btn--outline { background:transparent; color:var(--coral-deep); border-color:var(--coral); }
.btn--outline:hover { background:var(--coral); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-coral); }
.btn--light { background:#fff; color:var(--coral-deep); box-shadow:var(--shadow-sm); }
.btn--light:hover { transform:translateY(-1px); box-shadow:0 18px 40px -16px rgba(0,0,0,.32); }
.btn--text { background:none; color:var(--ink); padding:12px 6px; }
.btn--text:hover { color:var(--coral-deep); gap:.85em; }
.btn--lg { padding:16px 30px; font-size:16px; }

/* ============================================================
   PRELOADER
   ============================================================ */
.loader { position:fixed; inset:0; z-index:1000; background:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; overflow:hidden; }
.loader__aurora { position:absolute; inset:0; pointer-events:none; }
.loader__orb { position:absolute; border-radius:50%; opacity:.55; }
.loader__orb--1 { width:440px; height:440px; background:radial-gradient(circle,#FFB59B 0%,rgba(255,181,155,.4) 36%,transparent 66%); top:-110px; right:-70px; animation:drift 16s ease-in-out infinite; }
.loader__orb--2 { width:400px; height:400px; background:radial-gradient(circle,#FFD9C7 0%,rgba(255,217,199,.4) 36%,transparent 66%); bottom:-130px; left:-90px; animation:drift 20s ease-in-out infinite reverse; }
.loader__center { position:relative; display:flex; flex-direction:column; align-items:center; gap:24px; opacity:0; transform:translateY(6px); }
.loader.is-in .loader__center { opacity:1; transform:none; transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); }
/* ---- Minimal, professional loader: logo + refined progress bar ---- */
.loader__logo { width:78px; height:auto; opacity:0; transform:translateY(6px); }
.loader.is-in .loader__logo { opacity:1; transform:none; transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); }
.loader__bar { width:188px; height:2px; border-radius:2px; background:rgba(19,19,20,.1); overflow:hidden; opacity:0; }
.loader.is-in .loader__bar { opacity:1; transition:opacity .6s var(--ease-out) .15s; }
.loader__bar span { display:block; height:100%; width:0; border-radius:2px; background:linear-gradient(90deg,var(--coral),var(--coral-deep)); transition:width .2s var(--ease-out); }

/* Status — small refined label */
.loader__status { opacity:0; }
.loader.is-in .loader__status { opacity:1; transition:opacity .6s var(--ease-out) .25s; }
.loader__meta { display:flex; align-items:center; gap:9px; font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.loader__word { position:relative; }
.loader__word::after { content:""; position:absolute; right:-5px; top:50%; width:3px; height:3px; border-radius:50%; background:var(--line-2); transform:translateY(-50%); }
.loader__pct { color:var(--coral-deep); font-weight:600; font-variant-numeric:tabular-nums; padding-left:3px; }

/* Reveal */
.loader.is-out { opacity:0; transform:scale(1.05); filter:blur(6px); transition:opacity .7s var(--ease-out),transform .8s var(--ease-out),filter .7s var(--ease-out); }
body.is-loading { overflow:hidden; }

/* Scroll progress */
.progress { position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--coral),var(--coral-deep)); z-index:200; }

/* ---------- Top bar ---------- */
.topbar { background:var(--ink); color:#fff; overflow:hidden; font-size:13px; }
.topbar__track { display:flex; width:max-content; padding:9px 0; will-change:transform; }
.topbar__track span { white-space:nowrap; opacity:.85; letter-spacing:.02em; padding-right:48px; }

/* ---------- Nav ---------- */
.nav { position:fixed; top:33px; left:0; right:0; z-index:100; background:rgba(255,246,229,0); transition:transform .45s var(--ease),background .3s,box-shadow .3s,border-color .3s; border-bottom:1px solid transparent; }
.nav.is-scrolled { top:0; background:rgba(255,246,229,.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow-sm); border-bottom-color:var(--line); }
.nav.is-hidden { transform:translateY(-160%); }
.nav__inner { max-width:var(--maxw); margin:0 auto; padding:15px 24px; display:flex; align-items:center; gap:24px; }
.nav__links { display:flex; gap:30px; margin:0 auto; }
.nav__links a { font-size:15px; font-weight:500; color:var(--charcoal); position:relative; padding:4px 0; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--coral); transition:width .3s var(--ease); }
.nav__links a:hover { color:var(--ink); }
.nav__links a:hover::after { width:100%; }
.nav__actions { display:flex; gap:10px; align-items:center; }
.nav__burger { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav__burger span { width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
/* Full-screen mobile menu */
.drawer { position:fixed; inset:0; z-index:98; display:flex; flex-direction:column; justify-content:center; padding:96px 30px calc(34px + env(safe-area-inset-bottom)); background:rgba(255,246,229,.86); -webkit-backdrop-filter:blur(26px) saturate(1.5); backdrop-filter:blur(26px) saturate(1.5); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .4s var(--ease), visibility 0s linear .4s; overflow:hidden; }
.drawer.is-open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .4s var(--ease); }
.drawer__orb { position:absolute; top:-18vw; right:-30vw; width:80vw; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(247,128,90,.3),transparent 65%); filter:blur(28px); pointer-events:none; }
.drawer__links { display:flex; flex-direction:column; position:relative; }
.drawer__links a { display:flex; align-items:baseline; gap:16px; padding:15px 2px; font-family:var(--font-display); font-weight:600; font-size:clamp(27px,7.4vw,38px); line-height:1.1; letter-spacing:-.02em; color:var(--ink); border-bottom:1px solid var(--line-2); opacity:0; transform:translateY(28px); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); -webkit-tap-highlight-color:transparent; }
.drawer__links a em { font-style:normal; font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--coral-deep); }
.drawer__links a:active { color:var(--coral-deep); }
.drawer.is-open .drawer__links a { opacity:1; transform:none; }
.drawer.is-open .drawer__links a:nth-child(1) { transition-delay:.05s; }
.drawer.is-open .drawer__links a:nth-child(2) { transition-delay:.11s; }
.drawer.is-open .drawer__links a:nth-child(3) { transition-delay:.17s; }
.drawer.is-open .drawer__links a:nth-child(4) { transition-delay:.23s; }
.drawer.is-open .drawer__links a:nth-child(5) { transition-delay:.29s; }
.drawer__cta { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:30px; position:relative; opacity:0; transform:translateY(22px); transition:opacity .55s var(--ease-out) .36s, transform .55s var(--ease-out) .36s; }
.drawer.is-open .drawer__cta { opacity:1; transform:none; }
.drawer__cta .btn { padding:15px 18px; font-size:15.5px; }
.drawer__foot { margin-top:20px; text-align:center; font-size:12.5px; color:var(--muted); position:relative; opacity:0; transition:opacity .6s var(--ease) .46s; }
.drawer.is-open .drawer__foot { opacity:1; }
@media (min-width:1001px) { .drawer { display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { position:relative; overflow:hidden; padding-top:60px; }
.hero__inner { max-width:var(--maxw); margin:0 auto; padding:clamp(44px,7vw,104px) 24px clamp(56px,7vw,96px); display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; position:relative; z-index:2; }
.hero__aurora { position:absolute; inset:0; z-index:0; pointer-events:none; }
.orb { position:absolute; border-radius:50%; opacity:.38; }
.orb--1 { width:540px; height:540px; background:radial-gradient(circle,#FFB59B 0%,rgba(255,181,155,.4) 36%,transparent 66%); top:-150px; right:-80px; animation:drift 18s ease-in-out infinite; }
.orb--2 { width:480px; height:480px; background:radial-gradient(circle,#FFD9C7 0%,rgba(255,217,199,.4) 36%,transparent 66%); bottom:-180px; left:-110px; animation:drift 22s ease-in-out infinite reverse; }
.orb--3 { width:380px; height:380px; background:radial-gradient(circle,#FFE7D2 0%,rgba(255,231,210,.4) 36%,transparent 66%); top:28%; left:44%; animation:drift 26s ease-in-out infinite; }
@keyframes drift { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(28px,-22px) scale(1.07); } }
.grain { position:absolute; inset:0; background-image:radial-gradient(rgba(19,19,20,.05) 1px,transparent 1px); background-size:6px 6px; opacity:.22; }

.pill { display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:7px 16px; font-size:13px; font-weight:600; color:var(--charcoal); box-shadow:var(--shadow-xs); }
.pill__dot { width:8px; height:8px; border-radius:50%; background:#34c759; box-shadow:0 0 0 4px rgba(52,199,89,.18); }
.hero__title { font-family:var(--font-display); font-weight:500; font-size:clamp(42px,6.2vw,84px); line-height:1.0; letter-spacing:-.025em; margin:22px 0 20px; }
.hero__title em { font-style:italic; color:var(--coral); }
.line { display:block; overflow:hidden; padding-bottom:.04em; }
.line > span { display:block; transform:translateY(110%); transition:transform 1s var(--ease-out); }

/* Hero intro — CSS-driven (added .is-in after preloader) */
.hero__copy [data-anim="fade"] { opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-out),transform .8s var(--ease-out); }
.hero__visual .float-card, .hero__vial { opacity:0; transition:opacity .9s var(--ease-out); }
.hero.is-in .line > span { transform:none; }
.hero.is-in .line:last-child > span { transition-delay:.12s; }
.hero.is-in .pill { transition-delay:.45s; }
.hero.is-in .hero__sub { transition-delay:.58s; }
.hero.is-in .hero__cta { transition-delay:.7s; }
.hero.is-in .hero__proof { transition-delay:.82s; }
.hero.is-in .hero__copy [data-anim="fade"] { opacity:1; transform:none; }
.hero.is-in .hero__vial { opacity:1; transition-delay:.3s; }
.hero.is-in .float-card--price { opacity:1; transition-delay:.6s; }
.hero.is-in .float-card--ship { opacity:1; transition-delay:.74s; }
.hero.is-in .float-card--rating { opacity:1; transition-delay:.88s; }
.hero__sub { font-size:clamp(16px,1.4vw,19px); color:var(--charcoal); max-width:530px; }
.hero__cta { display:flex; align-items:center; gap:14px; margin:30px 0 30px; flex-wrap:wrap; }
.hero__proof { display:flex; align-items:center; gap:16px; }
.hero__avatars { display:flex; }
.hero__avatars span { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--coral-deep); background:var(--coral-soft); border:2px solid var(--cream); margin-left:-10px; }
.hero__avatars span:first-child { margin-left:0; }
.hero__proof p { font-size:14px; color:var(--muted); margin-top:2px; }
.hero__proof strong { color:var(--ink); }
.stars { color:var(--coral); letter-spacing:1px; }

.hero__visual { position:relative; display:flex; justify-content:center; align-items:center; min-height:480px; }
.hero__ring { position:absolute; width:420px; height:420px; border:1px solid var(--line-2); border-radius:50%; }
.hero__ring::after { content:""; position:absolute; inset:44px; border:1px solid var(--line); border-radius:50%; }
.hero__glow { position:absolute; width:380px; height:380px; background:radial-gradient(circle,rgba(247,128,90,.24),transparent 62%); border-radius:50%; }
.hero__vial { width:clamp(160px,17vw,222px); filter:drop-shadow(0 28px 42px rgba(19,19,20,.18)); position:relative; z-index:2; }
.float-card { position:absolute; z-index:3; background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:13px 17px; font-size:14px; }
.float-card--price { top:8%; left:-3%; display:flex; flex-direction:column; }
.float-card--price .float-card__k { color:var(--muted); font-size:12px; }
.float-card--price .float-card__v { font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--ink); }
.float-card--price .float-card__v em { font-style:normal; font-size:14px; color:var(--muted); }
.float-card--ship { bottom:18%; right:-5%; display:flex; align-items:center; gap:8px; font-weight:500; }
.float-card--ship .check { display:inline-grid; place-items:center; width:22px; height:22px; background:var(--coral); color:#fff; border-radius:50%; font-size:12px; }
.float-card--rating { bottom:-2%; left:6%; display:flex; flex-direction:column; gap:2px; }
.float-card--rating span:last-child { font-size:12px; color:var(--muted); }
.scroll-hint { text-align:center; color:var(--muted); font-size:12px; letter-spacing:.18em; text-transform:uppercase; padding-bottom:26px; position:relative; z-index:2; }
.scroll-hint span { display:block; width:1px; height:34px; margin:0 auto 10px; background:linear-gradient(var(--coral),transparent); animation:scrolly 2s ease-in-out infinite; }
@keyframes scrolly { 0%,100% { transform:scaleY(.4); transform-origin:top; opacity:.4; } 50% { transform:scaleY(1); opacity:1; } }

/* ---------- Press ---------- */
.press { padding:42px 0 14px; border-top:1px solid var(--line); }
.press__label { text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); max-width:72ch; margin:0 auto 22px; padding:0 24px; line-height:1.9; }
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee__track { display:flex; align-items:center; gap:64px; width:max-content; }
.marquee__track img { height:26px; width:auto; opacity:.4; filter:grayscale(1) contrast(.9); transition:opacity .35s var(--ease),filter .35s var(--ease); }
.marquee__track img:hover { opacity:.85; filter:grayscale(.25) contrast(1); }

/* ============================================================
   SECTION SHELL
   ============================================================ */
section { position:relative; }
.section-head { max-width:720px; margin:0 auto clamp(36px,5vw,56px); text-align:center; }
.eyebrow { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-deep); margin-bottom:14px; }
.section-head h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(31px,4.6vw,52px); line-height:1.06; letter-spacing:-.02em; }
.section-head p { margin-top:16px; color:var(--charcoal); font-size:17px; }

/* ---------- Promise ---------- */
.promise { max-width:var(--maxw); margin:0 auto; padding:clamp(56px,7vw,92px) 24px; }
.promise__grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.promise__item { padding:38px 34px; border-right:1px solid var(--line); transition:background .3s; }
.promise__item:last-child { border-right:0; }
.promise__item:hover { background:var(--coral-tint); }
.promise__no { font-family:var(--font-display); font-size:15px; color:var(--coral-deep); font-weight:600; }
.promise__item h2 { font-family:var(--font-display); font-weight:600; font-size:23px; margin:14px 0 8px; }
.promise__item p { color:var(--charcoal); font-size:15.5px; }

/* ============================================================
   STICKY SHOWCASE
   ============================================================ */
.sc { max-width:var(--maxw); margin:0 auto; padding:clamp(40px,5vw,72px) 24px clamp(56px,7vw,110px); }
.sc__grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.sc__media { position:sticky; top:96px; height:min(78vh,620px); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sc__stage { position:relative; width:100%; flex:1; display:grid; place-items:center; }
.sc__stage::before { content:""; position:absolute; width:62%; aspect-ratio:1; background:radial-gradient(circle,rgba(247,128,90,.22),transparent 65%); border-radius:50%; }
.sc__img { position:absolute; height:clamp(300px,46vh,460px); width:auto; object-fit:contain; filter:drop-shadow(0 30px 42px rgba(19,19,20,.18)); opacity:0; transform:scale(.9) translateY(20px); transition:opacity .6s var(--ease),transform .8s var(--ease); }
.sc__img.is-active { opacity:1; transform:none; }
.sc__dots { display:flex; gap:10px; margin-top:18px; }
.sc__dots button { width:9px; height:9px; border-radius:50%; border:0; background:var(--line-2); cursor:pointer; padding:0; transition:.3s var(--ease); }
.sc__dots button.is-active { background:var(--coral); width:30px; border-radius:6px; }

.sc__panels { display:flex; flex-direction:column; }
.sc__panel { min-height:78vh; display:flex; flex-direction:column; justify-content:center; padding:40px 0; opacity:.32; transition:opacity .5s var(--ease); }
.sc__panel.is-active { opacity:1; }
.sc__cat { font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--coral-deep); }
.sc__index { font-family:var(--font-display); font-size:13px; color:var(--muted); margin-top:6px; }
.sc__panel h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4vw,46px); line-height:1.04; margin:10px 0 14px; letter-spacing:-.02em; }
.sc__panel > p { color:var(--charcoal); font-size:17px; max-width:460px; }
.sc__feats { list-style:none; margin:22px 0 0; display:grid; gap:10px; }
.sc__feats li { position:relative; padding-left:30px; font-size:15.5px; color:var(--charcoal); }
.sc__feats li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--coral-deep); font-weight:700; background:var(--coral-soft); width:20px; height:20px; display:grid; place-items:center; border-radius:50%; font-size:11px; }
.sc__foot { margin-top:30px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.price { font-family:var(--font-display); font-size:34px; font-weight:600; color:var(--ink); }
.price em { font-style:normal; font-size:14px; color:var(--muted); font-family:var(--font-body); }

/* ============================================================
   WHY / COMPARE
   ============================================================ */
.why { max-width:980px; margin:0 auto; padding:clamp(56px,7vw,96px) 24px; }
.compare { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.compare__head, .compare__row { display:grid; grid-template-columns:1.2fr 1fr 1fr; }
.compare__head { background:var(--ink); }
.compare__col { padding:22px; text-align:center; color:rgba(255,255,255,.7); font-weight:600; font-size:15px; }
.compare__col--viv { color:#fff; background:linear-gradient(180deg,rgba(247,128,90,.25),transparent); }
.compare__col--viv .wordmark { color:#fff; }
.compare__col--viv .wordmark__viv .dot::after, .compare__col--viv .wordmark__rx { background:#fff; color:#fff; }
.compare__row { border-top:1px solid var(--line); align-items:center; }
.compare__row:nth-child(odd) { background:var(--cream); }
.compare__row > span { padding:18px 22px; font-size:15px; }
.compare__row > span:first-child { font-weight:600; color:var(--ink); }
.compare__row .yes { color:var(--ink); display:flex; align-items:center; justify-content:center; gap:8px; font-weight:500; }
.compare__row .yes::before { content:"✓"; flex:none; color:#fff; background:var(--coral); width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; }
.compare__row .no { color:var(--muted); display:flex; align-items:center; justify-content:center; gap:8px; }
.compare__row .no::before { content:"✕"; flex:none; color:var(--muted); background:var(--line); width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; }

/* ============================================================
   HOW IT WORKS (timeline)
   ============================================================ */
.how { max-width:var(--maxw); margin:0 auto; padding:clamp(56px,7vw,96px) 24px; }
.timeline { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.timeline__line { position:absolute; top:42px; left:16%; right:16%; height:2px; background:var(--line-2); z-index:0; border-radius:2px; overflow:hidden; }
.timeline__line i { display:block; height:100%; width:0; background:var(--coral); }
/* Non-actionable numbered step boxes — not selectable / highlightable */
.promise__item, .tstep, .howcard, .scard { -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.tstep { position:relative; z-index:1; text-align:center; padding:14px; }
.tstep__num { width:72px; height:72px; margin:0 auto 20px; display:grid; place-items:center; font-family:var(--font-display); font-size:24px; font-weight:600; color:#fff; background:var(--coral); border-radius:50%; box-shadow:var(--shadow-coral); }
.tstep__c h3 { font-family:var(--font-display); font-weight:600; font-size:22px; margin-bottom:8px; }
.tstep__c p { color:var(--charcoal); font-size:15.5px; max-width:300px; margin:0 auto; }
.how__cta { text-align:center; margin-top:48px; }

/* ---------- Stats ---------- */
.stats { background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.stats::before { content:""; position:absolute; width:600px; height:600px; background:radial-gradient(circle,rgba(247,128,90,.18),transparent 65%); top:-300px; right:-100px; }
.stats__inner { max-width:var(--maxw); margin:0 auto; padding:clamp(44px,6vw,76px) 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; position:relative; }
.stat__num { display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(40px,5vw,62px); color:var(--coral); line-height:1; }
.stat__label { display:block; margin-top:10px; font-size:14px; color:rgba(255,255,255,.7); }

/* ---------- Providers ---------- */
.providers { max-width:var(--maxw); margin:0 auto; padding:clamp(56px,7vw,96px) 24px; }
.providers__grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.providers__copy h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(28px,3.6vw,42px); line-height:1.1; letter-spacing:-.02em; }
.providers__copy > p { color:var(--charcoal); font-size:17px; margin:16px 0 24px; }
.providers__points { list-style:none; display:grid; gap:12px; }
.providers__points li { display:flex; align-items:center; gap:12px; font-weight:500; }
.providers__points li span { width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--coral); color:#fff; font-size:12px; }
.providers__cards { display:grid; gap:14px; }
.pcard-doc { display:flex; align-items:center; gap:16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 22px; box-shadow:var(--shadow-xs); transition:transform .3s var(--ease),box-shadow .3s var(--ease); }
.pcard-doc:hover { transform:translateX(6px); box-shadow:var(--shadow-sm); }
.pcard-doc strong { display:block; font-size:16px; }
.pcard-doc em { font-style:normal; font-size:13.5px; color:var(--muted); }
.avatar { width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:700; font-size:14px; color:var(--coral-deep); background:var(--coral-soft); }
.avatar--lg { width:54px; height:54px; font-size:17px; }

/* ---------- Reviews dual marquee ---------- */
.reviews { padding:clamp(56px,7vw,96px) 0; overflow:hidden; }
.reviews .section-head { padding:0 24px; }
.reviews__rating { display:inline-flex; align-items:center; gap:12px; margin-top:18px; font-size:14px; color:var(--charcoal); }
.reviews__rating .stars { font-size:18px; letter-spacing:2px; }
.reviews .rev-rail-wrap { padding:0 24px; }

/* ---------- FAQ ---------- */
.faq { max-width:820px; margin:0 auto; padding:clamp(56px,7vw,96px) 24px; }
.faq__list { display:grid; gap:12px; }
.qa { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px 22px; transition:box-shadow .3s,border-color .3s; }
.qa[open] { box-shadow:var(--shadow-sm); border-color:var(--coral-soft); }
.qa summary { list-style:none; cursor:pointer; padding:18px 0; font-weight:600; font-size:17px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after { content:"+"; font-size:26px; font-weight:400; color:var(--coral-deep); transition:transform .3s var(--ease); line-height:1; }
.qa[open] summary::after { transform:rotate(45deg); }
.qa__body { overflow:hidden; height:auto; transition:height .32s var(--ease); }
.qa__body p { padding:0 0 20px; color:var(--charcoal); font-size:15.5px; }

/* ---------- CTA ---------- */
.cta { padding:clamp(40px,6vw,80px) 24px; max-width:var(--maxw); margin:0 auto; }
.cta__card { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--coral),var(--coral-deep)); color:#fff; border-radius:32px; text-align:center; padding:clamp(48px,7vw,92px) 24px; box-shadow:var(--shadow-lg); }
.cta__aurora { position:absolute; inset:0; opacity:.5; background:radial-gradient(400px 240px at 20% 10%,rgba(255,255,255,.4),transparent 60%),radial-gradient(400px 240px at 85% 90%,rgba(255,255,255,.25),transparent 60%); }
.cta__card > * { position:relative; z-index:1; }
.cta__card h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4.4vw,54px); line-height:1.06; letter-spacing:-.02em; }
.cta__card p { margin:16px auto 30px; max-width:520px; font-size:18px; opacity:.95; }
.cta__fine { display:block; margin-top:18px; font-size:13px; opacity:.85; }

/* ---------- Footer ---------- */
.footer { background:var(--ink); color:rgba(255,255,255,.72); overflow:hidden; }
.footer__inner { max-width:var(--maxw); margin:0 auto; padding:20px 24px 40px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; gap:36px; }
.footer__brand p { margin:0 0 18px; font-size:14.5px; max-width:260px; }
.footer__socials { display:flex; gap:10px; }
.footer__socials a { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); color:#fff; transition:.25s var(--ease); }
.footer__socials a:hover { background:var(--coral); border-color:var(--coral); transform:translateY(-2px); }
.footer__col h2 { color:#fff; font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:16px; font-weight:600; }
.footer__col a { display:block; padding:6px 0; font-size:14.5px; transition:color .2s; }
.footer__col a:hover { color:var(--coral); }
.footer__col--contact p { font-size:14.5px; line-height:1.7; }
.footer__legal { border-top:1px solid rgba(255,255,255,.12); max-width:var(--maxw); margin:0 auto; padding:26px 24px 48px; }
.footer__legal p { font-size:12.5px; color:rgba(255,255,255,.5); line-height:1.7; }
.footer__legal p + p { margin-top:10px; }
.footer__legallinks { display:flex; flex-wrap:wrap; gap:8px 26px; margin-bottom:18px; }
.footer__legallinks a { font-size:13px; font-weight:500; color:rgba(255,255,255,.72); transition:color .2s; }
.footer__legallinks a:hover { color:var(--coral-bright); }
.footer__copy { margin-top:14px; }

/* ---------- Legal / policy pages ---------- */
.legal-doc { padding:130px 20px 90px; background:var(--cream); min-height:60vh; }
.legal-doc__inner { max-width:760px; margin:0 auto; }
.draft-banner { background:var(--coral-soft); border:1px solid var(--coral); color:var(--coral-deep); border-radius:14px; padding:14px 18px; font-size:14.5px; font-weight:600; line-height:1.55; margin-bottom:34px; }
.legal-doc h1 { font-family:var(--font-display); font-size:clamp(32px,5vw,46px); line-height:1.12; margin-bottom:10px; }
.legal-doc__updated { color:var(--muted); font-size:14px; margin-bottom:36px; }
.legal-doc h2 { font-family:var(--font-display); font-size:22px; margin:36px 0 12px; }
.legal-doc p, .legal-doc li { color:var(--charcoal); font-size:16px; line-height:1.75; }
.legal-doc ul { margin:10px 0 14px 22px; }
.legal-doc li { margin-bottom:6px; }
.legal-doc a { color:var(--coral-deep); text-decoration:underline; }
.legal-doc__placeholder { background:var(--paper); border:1px dashed var(--line-2); border-radius:12px; padding:14px 16px; color:var(--muted); font-size:14.5px; margin:12px 0; }
.legal-doc__back { display:inline-block; margin-top:40px; color:var(--coral-deep); font-weight:600; text-decoration:none; }

/* ---------- Sticky mobile CTA ---------- */
.mobilebar { position:fixed; bottom:0; left:0; right:0; z-index:90; display:none; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border-top:1px solid var(--line); transform:translateY(120%); transition:transform .4s var(--ease); }
.mobilebar.is-shown { transform:none; }
.mobilebar span { font-size:14px; color:var(--charcoal); }
.mobilebar strong { color:var(--ink); }

/* ============================================================
   GET STARTED MODAL
   ============================================================ */
.gs { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; visibility:hidden; opacity:0; transition:opacity .35s var(--ease),visibility .35s; }
.gs.is-open { visibility:visible; opacity:1; }
.gs__overlay { position:absolute; inset:0; background:rgba(19,19,20,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.gs__panel { position:relative; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; background:var(--paper); border-radius:26px; box-shadow:0 50px 120px -30px rgba(19,19,20,.5); padding:34px clamp(22px,4vw,44px) clamp(28px,4vw,40px); transform:translateY(24px) scale(.98); transition:transform .4s var(--ease-out); -webkit-overflow-scrolling:touch; }
.gs.is-open .gs__panel { transform:none; }
.gs__close { position:absolute; top:16px; right:18px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--cream); color:var(--charcoal); font-size:15px; cursor:pointer; transition:.2s var(--ease); display:grid; place-items:center; }
.gs__close:hover { background:var(--coral); color:#fff; border-color:var(--coral); transform:rotate(90deg); }
.gs__brand { margin-bottom:18px; }
.gs__bar { height:5px; background:var(--line); border-radius:5px; overflow:hidden; margin-bottom:26px; }
.gs__bar i { display:block; height:100%; width:33%; background:linear-gradient(90deg,var(--coral),var(--coral-deep)); border-radius:5px; transition:width .45s var(--ease); }
.gs__step { display:none; }
.gs__step.is-active { display:block; }
.gs__eyebrow { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--coral-deep); }
.gs__step h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(24px,3.4vw,30px); line-height:1.12; margin:8px 0 6px; letter-spacing:-.01em; }
.gs__lead { color:var(--charcoal); font-size:15px; margin-bottom:22px; }
.gs__opts { display:grid; gap:12px; }
.gs__opts--grid { grid-template-columns:1fr 1fr; }
.gs__opt { display:flex; align-items:center; gap:14px; text-align:left; width:100%; padding:16px 18px; border:1.5px solid var(--line); background:var(--paper); border-radius:var(--radius-sm); cursor:pointer; font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--ink); transition:.2s var(--ease); }
.gs__opt:hover { border-color:var(--coral); background:var(--coral-tint); transform:translateY(-2px); }
.gs__opt.is-active { border-color:var(--coral); background:var(--coral-tint); box-shadow:0 0 0 3px rgba(247,128,90,.18); }
.gs__opt em { display:block; font-style:normal; font-size:12.5px; font-weight:500; color:var(--muted); margin-top:3px; }
.gs__opt-ico { font-size:24px; flex:none; }
.gs__opt-ico + span em { margin-top:2px; }
.gs__label { display:block; margin-bottom:16px; font-size:13px; font-weight:600; color:var(--charcoal); }
.gs__label input { display:block; width:100%; margin-top:7px; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--radius-xs); font-family:var(--font-body); font-size:16px; color:var(--ink); background:var(--cream); transition:.2s var(--ease); }
.gs__label input:focus { outline:none; border-color:var(--coral); background:#fff; box-shadow:0 0 0 3px rgba(247,128,90,.16); }
.gs__err { display:none; color:#d2453a; font-size:12.5px; font-weight:600; margin-top:6px; }
.gs__label.has-error input { border-color:#d2453a; }
.gs__label.has-error .gs__err { display:block; }
.gs__nav { display:flex; justify-content:space-between; gap:12px; margin-top:24px; }
.gs__nav .btn { flex:0 0 auto; }
.gs__nav .btn[type="submit"] { margin-left:auto; }
.gs__fine { font-size:11.5px; color:var(--muted); line-height:1.6; margin-top:16px; }
.gs__done { text-align:center; padding-top:10px; }
.gs__check { width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--coral); color:#fff; display:grid; place-items:center; font-size:30px; box-shadow:var(--shadow-coral); }
.gs__summary { display:inline-flex; flex-direction:column; gap:6px; text-align:left; background:var(--coral-tint); border:1px solid var(--coral-soft); border-radius:var(--radius-sm); padding:16px 20px; margin:20px auto 24px; font-size:14px; }
.gs__summary span { color:var(--charcoal); }
.gs__summary strong { color:var(--ink); }
body.gs-open { overflow:hidden; }
@media (max-width:480px) { .gs__opts--grid { grid-template-columns:1fr; } .gs__panel { border-radius:22px; } }

/* ============================================================
   ANIM PRIMITIVES (GSAP targets fall back to visible)
   ============================================================ */
[data-anim="up"] { opacity:0; transform:translateY(42px); transition:opacity .8s var(--ease-out),transform .8s var(--ease-out); will-change:transform,opacity; }
[data-anim="up"].in { opacity:1; transform:none; }
[data-row] { opacity:0; transform:translateX(-18px); transition:opacity .6s var(--ease-out),transform .6s var(--ease-out); }
[data-row].in { opacity:1; transform:none; }
[data-step] { opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); }
[data-step].in { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  .orb,.hero__ring::after,.topbar__track,.scroll-hint span { animation:none !important; }
  html { scroll-behavior:auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px) {
  .nav__links, .nav__actions { display:none; }
  .nav__burger { display:flex; margin-left:auto; }
  .providers__grid { grid-template-columns:1fr; gap:32px; }
  .sc__grid { gap:32px; }
}
@media (max-width:880px) {
  .hero { padding-top:50px; }
  .hero__inner { grid-template-columns:1fr; }
  .hero__visual { order:-1; min-height:380px; }
  .promise__grid { grid-template-columns:1fr; }
  .promise__item { border-right:0; border-bottom:1px solid var(--line); }
  .promise__item:last-child { border-bottom:0; }
  .timeline { grid-template-columns:1fr; gap:0; }
  .timeline__line { display:none; }
  .tstep { display:grid; grid-template-columns:auto 1fr; gap:18px; text-align:left; padding:18px 0; align-items:start; }
  .tstep__num { margin:0; width:56px; height:56px; font-size:20px; }
  .tstep__c p { margin:0; }
  .stats__inner { grid-template-columns:repeat(2,1fr); gap:36px 24px; }
  .footer__inner { grid-template-columns:1fr 1fr; }
  .mobilebar { display:flex; }
  /* Showcase → single column, media stays sticky at top, image swaps on scroll */
  .sc__grid { grid-template-columns:1fr; gap:0; }
  .sc__media { position:sticky; top:60px; height:42vh; order:-1; z-index:1; background:linear-gradient(180deg,var(--cream),rgba(255,246,229,0)); }
  .sc__img { height:min(34vh,300px); }
  .sc__panel { min-height:62vh; padding:24px 0; }
}
@media (max-width:560px) {
  .footer__inner { grid-template-columns:1fr; }
  .hero__proof { flex-wrap:wrap; }
  .float-card--price { left:0; } .float-card--ship { right:0; }
  .compare__row > span, .compare__col { padding:13px 8px; font-size:12.5px; }
  .compare__row .yes, .compare__row .no { gap:5px; }
  .section-head h2 { font-size:29px; }
}

/* ============================================================
   SHOP — collections, products, PDP, cart, checkout
   ============================================================ */
.nav.nav--solid { position:sticky; top:0; background:rgba(255,246,229,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow-sm); border-bottom:1px solid var(--line); }
.nav--solid .nav__links a { color:var(--charcoal); }

.shop-hero { background:radial-gradient(900px 420px at 72% -25%, var(--coral-tint), transparent 60%), var(--cream); padding:clamp(40px,6vw,84px) 24px clamp(30px,4vw,48px); text-align:center; }
.shop-hero__inner { max-width:760px; margin:0 auto; }
.shop-hero h1 { font-family:var(--font-display); font-weight:500; font-size:clamp(34px,5vw,62px); letter-spacing:-.02em; line-height:1.04; margin:12px 0 14px; }
.shop-hero p { color:var(--charcoal); font-size:18px; max-width:620px; margin:0 auto; }

.shop-wrap { max-width:var(--maxw); margin:0 auto; padding:clamp(34px,5vw,60px) 24px clamp(56px,7vw,96px); }

/* Collection tiles */
.coll-tiles { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.coll-tile { display:grid; grid-template-columns:.9fr 1.1fr; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-xs); transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .35s var(--ease); }
.coll-tile:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--coral); }
.coll-tile__media { background:linear-gradient(160deg,var(--coral-tint),#fff); display:grid; place-items:center; padding:24px; transition:background .4s var(--ease); }
.coll-tile:hover .coll-tile__media { background:linear-gradient(160deg,var(--coral-soft),#fff); }
.coll-tile__media img { height:150px; width:auto; filter:drop-shadow(0 16px 22px rgba(19,19,20,.13)); transition:transform .45s var(--ease); }
.coll-tile:hover .coll-tile__media img { transform:scale(1.06) translateY(-4px); }
.coll-tile__body { padding:28px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.coll-tile__body > span:not(.coll-tile__cta) { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--coral-deep); font-weight:600; }
.coll-tile__body h2 { font-family:var(--font-display); font-weight:600; font-size:26px; margin:8px 0; }
.coll-tile__body p { color:var(--charcoal); font-size:14.5px; }
/* CTA reads as a real, tappable button (selector kept specific so it beats the eyebrow span rule) */
.coll-tile__body .coll-tile__cta { display:inline-flex; align-items:center; gap:.5em; margin-top:20px; padding:12px 24px; border-radius:100px; background:var(--coral); color:#fff; font-weight:700; font-size:14.5px; letter-spacing:.01em; text-transform:none; box-shadow:var(--shadow-coral); transition:background .25s var(--ease),box-shadow .3s var(--ease),transform .25s var(--ease); }
.coll-tile__body .coll-tile__cta svg, .coll-tile__body .coll-tile__cta span { transition:transform .25s var(--ease); }
.coll-tile:hover .coll-tile__cta { background:var(--coral-deep); color:#fff; box-shadow:0 3px 8px rgba(254,98,29,.26),0 18px 32px -14px rgba(254,98,29,.5); }

.shop-allhead { margin:clamp(40px,5vw,64px) 0 24px; }
.shop-allhead h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.01em; }

/* Product grid + card */
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pc { display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-xs); transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s; }
.pc:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--coral-soft); }
.pc__media { position:relative; aspect-ratio:4/3; background:linear-gradient(160deg,var(--coral-tint),#fff); display:grid; place-items:center; padding:20px; overflow:hidden; }
.pc__media::before { content:""; position:absolute; width:66%; aspect-ratio:1; background:radial-gradient(circle,rgba(247,128,90,.2),transparent 65%); border-radius:50%; }
.pc__media img { position:absolute; inset:0; margin:auto; z-index:1; height:82%; width:84%; object-fit:contain; filter:drop-shadow(0 14px 20px rgba(19,19,20,.13)); transition:transform .5s var(--ease); }
.pc:hover .pc__media img { transform:translateY(-5px) scale(1.04); }
.pc__badge { position:absolute; top:12px; left:12px; z-index:2; background:var(--coral); color:#fff; font-size:11px; font-weight:600; padding:5px 11px; border-radius:100px; }
.pc__body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.pc__cat { font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--coral-deep); }
.pc__body h3 { font-family:var(--font-display); font-weight:600; font-size:20px; margin:6px 0 4px; }
.pc__body > p { color:var(--muted); font-size:14px; }
.pc__foot { margin-top:auto; padding-top:16px; display:flex; align-items:center; justify-content:space-between; }
.pc__price { font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--ink); }
.pc__price em { font-style:normal; font-size:12px; color:var(--muted); font-family:var(--font-body); }
.pc__view { font-weight:600; font-size:14px; color:var(--coral-deep); }

/* Featured treatments — horizontal scroll rail (mirrors the reviews rail) */
.feat-rail-wrap { position:relative; }
.feat-rail { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; padding:8px 2px 20px; scrollbar-width:none; -ms-overflow-style:none; scroll-padding-left:2px; }
.feat-rail::-webkit-scrollbar { display:none; }
.feat-rail > .pc { scroll-snap-align:start; flex:0 0 min(300px,80vw); }
.feat-rail-wrap .rev-arrow { top:44%; }
@media (max-width:700px) { .feat-rail-wrap .rev-arrow { display:none; } }

/* Breadcrumb */
.crumb { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); margin-bottom:24px; flex-wrap:wrap; }
.crumb a:hover { color:var(--coral-deep); }
.crumb em { color:var(--ink); font-style:normal; font-weight:600; }
.crumb span { color:var(--line-2); }

/* Collection head */
.coll-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
.coll-head h1 { font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4vw,46px); letter-spacing:-.02em; margin:8px 0; }
.coll-head p { color:var(--charcoal); max-width:540px; }
.coll-sort label { font-size:13px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:8px; }
.coll-sort select { font-family:var(--font-body); font-size:14px; padding:9px 14px; border:1.5px solid var(--line-2); border-radius:100px; background:var(--paper); color:var(--ink); cursor:pointer; }

/* PDP */
.pdp { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-bottom:clamp(40px,6vw,72px); }
.pdp__media { position:sticky; top:90px; background:linear-gradient(160deg,var(--coral-tint),#fff); border:1px solid var(--line); border-radius:var(--radius); display:grid; place-items:center; padding:40px; aspect-ratio:1/1; overflow:hidden; }
.pdp__media::before { content:""; position:absolute; width:70%; aspect-ratio:1; background:radial-gradient(circle,rgba(247,128,90,.22),transparent 65%); border-radius:50%; }
.pdp__media img { position:absolute; inset:0; margin:auto; z-index:1; height:80%; width:84%; object-fit:contain; filter:drop-shadow(0 22px 32px rgba(19,19,20,.16)); }
.pdp__badge { position:absolute; top:16px; left:16px; background:var(--coral); color:#fff; font-size:12px; font-weight:600; padding:6px 13px; border-radius:100px; z-index:2; }
.pdp__cat { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--coral-deep); }
.pdp__info h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.6vw,42px); line-height:1.05; letter-spacing:-.02em; margin:8px 0 12px; }
.pdp__price { display:flex; align-items:baseline; gap:6px; margin-bottom:14px; }
.pdp__price .price { font-size:32px; }
.pdp__price em { font-style:normal; color:var(--muted); font-size:14px; }
.pdp__short { color:var(--charcoal); font-size:16px; margin-bottom:24px; }
.pdp__lbl { display:block; font-size:13px; font-weight:600; color:var(--charcoal); margin-bottom:10px; }
.pdp__plans { margin-bottom:22px; display:grid; gap:10px; grid-template-columns:1fr 1fr; }
.pdp__plans .pdp__lbl { grid-column:1/-1; margin-bottom:0; }
.planopt { text-align:left; padding:13px 16px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); cursor:pointer; transition:.2s var(--ease); }
.planopt:hover { border-color:var(--coral); }
.planopt.is-active { border-color:var(--coral); background:var(--coral-tint); box-shadow:0 0 0 3px rgba(247,128,90,.16); }
.planopt strong { display:block; font-size:14px; }
.planopt em { font-style:normal; font-size:13px; color:var(--muted); }
.pdp__buy { display:flex; gap:12px; align-items:stretch; }
.pdp__buy .btn--lg { flex:1; }
.qty { display:inline-flex; align-items:center; border:1.5px solid var(--line-2); border-radius:100px; overflow:hidden; }
.qty button { width:42px; min-height:48px; background:none; border:0; font-size:18px; cursor:pointer; color:var(--ink); }
.qty button:hover { background:var(--coral-tint); color:var(--coral-deep); }
.qty span { min-width:30px; text-align:center; font-weight:600; }
.qty--sm button { min-height:32px; width:30px; font-size:15px; }
.pdp__trust { list-style:none; display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; font-size:13.5px; color:var(--charcoal); }
.pdp__detail { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-top:clamp(30px,4vw,48px); border-top:1px solid var(--line); }
.pdp__col h2 { font-family:var(--font-display); font-weight:600; font-size:24px; margin-bottom:12px; }
.pdp__col h3 { font-family:var(--font-display); font-weight:600; font-size:18px; margin:20px 0 10px; }
.pdp__col p { color:var(--charcoal); margin-bottom:12px; }
.pdp__benefits { list-style:none; display:grid; gap:10px; }
.pdp__benefits li { position:relative; padding-left:28px; color:var(--charcoal); }
.pdp__benefits li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--coral-deep); background:var(--coral-soft); width:19px; height:19px; display:grid; place-items:center; border-radius:50%; font-size:11px; font-weight:700; }
.pdp__meta { display:flex; gap:24px; flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.pdp__meta span { display:flex; flex-direction:column; font-size:14px; color:var(--charcoal); }
.pdp__meta strong { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:4px; }
.pdp__steps { list-style:none; counter-reset:s; display:grid; gap:14px; }
.pdp__steps li { position:relative; padding-left:46px; color:var(--charcoal); }
.pdp__steps li strong { display:block; color:var(--ink); }
.pdp__steps li::before { counter-increment:s; content:counter(s,decimal-leading-zero); position:absolute; left:0; top:0; font-family:var(--font-display); font-weight:600; color:var(--coral-deep); background:var(--coral-soft); width:32px; height:32px; display:grid; place-items:center; border-radius:50%; font-size:13px; }
.pdp__faq .qa { margin-bottom:10px; }
.related { margin-top:clamp(48px,6vw,80px); }
.related h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(24px,3vw,34px); margin-bottom:24px; }
.notfound { text-align:center; padding:80px 0; }
.notfound h1 { font-family:var(--font-display); font-size:40px; margin-bottom:10px; }
.notfound p { color:var(--muted); margin-bottom:20px; }

/* Cart button */
.cart-btn { position:relative; display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); background:var(--paper); color:var(--ink); cursor:pointer; transition:.2s var(--ease); }
.cart-btn:hover { border-color:var(--coral); color:var(--coral-deep); }
.cart-btn__count { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--coral); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; }
.cart-btn__count.is-empty { display:none; }
.cart-btn--mobile { display:none; margin-left:auto; }

/* Cart drawer */
.cart-overlay { position:fixed; inset:0; background:rgba(19,19,20,.5); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:.35s var(--ease); z-index:300; }
.cart-overlay.is-open { opacity:1; visibility:visible; }
.cart-drawer { position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--paper); z-index:310; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .4s var(--ease-out); box-shadow:-20px 0 60px -20px rgba(19,19,20,.4); }
.cart-drawer.is-open { transform:none; }
.cart-drawer__head { display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); }
.cart-drawer__head h2 { font-family:var(--font-display); font-weight:600; font-size:22px; }
.cart-drawer__head button { width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--cream); cursor:pointer; font-size:14px; }
.cart-drawer__body { flex:1; overflow-y:auto; padding:8px 24px; }
.cart-drawer__foot { padding:20px 24px calc(20px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.cart-empty { text-align:center; padding:60px 0; color:var(--muted); }
.cart-empty .btn { margin-top:16px; }
.citem { display:grid; grid-template-columns:64px 1fr auto; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.citem img { width:64px; height:74px; object-fit:contain; background:var(--coral-tint); border-radius:12px; padding:6px; }
.citem__info strong { display:block; font-size:14.5px; }
.citem__info em { font-style:normal; font-size:12.5px; color:var(--muted); }
.citem__qty button { background:none; border:0; color:var(--muted); font-size:12px; text-decoration:underline; cursor:pointer; padding:0; margin-top:8px; }
.citem__qty button:hover { color:var(--coral-deep); }
.citem__right { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:8px; }
.citem__price { font-weight:600; font-size:14.5px; }
.cart-sub { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.cart-sub strong { font-family:var(--font-display); font-size:24px; }
.cart-sub strong em { font-style:normal; font-size:13px; color:var(--muted); }
.cart-note { font-size:12px; color:var(--muted); margin-bottom:14px; }
.cart-drawer__foot .btn { width:100%; }
body.noscroll { overflow:hidden; }

/* Checkout summary (reuses .gs modal) */
.co-summary { background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:20px; }
.co-line { display:flex; justify-content:space-between; font-size:14px; color:var(--charcoal); padding:5px 0; }
.co-line em { font-style:normal; color:var(--muted); }
.co-line--total { border-top:1px solid var(--line); margin-top:6px; padding-top:10px; font-weight:700; color:var(--ink); }

@media (max-width:1000px) {
  .nav--solid .nav__links, .nav--solid .nav__actions { display:none; }
  .cart-btn--mobile { display:inline-grid; }
}
@media (max-width:900px) {
  .coll-tiles { grid-template-columns:1fr; }
  .coll-tile { grid-template-columns:.8fr 1.2fr; }
  .pgrid { grid-template-columns:1fr 1fr; }
  .pdp { grid-template-columns:1fr; gap:28px; }
  .pdp__media { position:relative; top:0; aspect-ratio:4/3; }
  .pdp__detail { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:560px) {
  .pgrid { grid-template-columns:1fr; }
  .pdp__plans { grid-template-columns:1fr; }
  .coll-tile { grid-template-columns:1fr; }
  .coll-tile__media { padding:30px; }
}

/* ============================================================
   SHOP v2 — flagship components
   ============================================================ */
/* Shop hero */
.shop-hero2 { position:relative; overflow:hidden; background:var(--cream); }
.shop-hero2__bg { position:absolute; inset:0; pointer-events:none; }
.shop-hero2__bg .orb { position:absolute; border-radius:50%; }
.shop-hero2__bg .orb--1 { width:520px; height:520px; background:radial-gradient(circle,#FFB59B 0%,rgba(255,181,155,.4) 36%,transparent 66%); top:-180px; right:-90px; opacity:.5; }
.shop-hero2__bg .orb--2 { width:440px; height:440px; background:radial-gradient(circle,#FFE0CF 0%,rgba(255,224,207,.4) 36%,transparent 66%); bottom:-200px; left:-100px; opacity:.55; }
.shop-hero2__inner { position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:clamp(40px,6vw,84px) 24px; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.shop-hero2__copy h1 { font-family:var(--font-display); font-weight:500; font-size:clamp(38px,5.4vw,68px); line-height:1.02; letter-spacing:-.025em; margin:14px 0 16px; }
.shop-hero2__copy h1 em { font-style:italic; color:var(--coral); }
.shop-hero2__copy p { color:var(--charcoal); font-size:18px; max-width:520px; }
.shop-hero2__cta { display:flex; gap:12px; margin:28px 0 22px; flex-wrap:wrap; }
.shop-hero2__proof { font-size:14px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.shop-hero2__proof strong { color:var(--ink); }
.shop-hero2__art { position:relative; min-height:380px; display:grid; place-items:center; }
.shop-hero2__art .ring { position:absolute; width:360px; height:360px; border:1px solid var(--line-2); border-radius:50%; }
.shop-hero2__art .ring::after { content:""; position:absolute; inset:36px; border:1px dashed var(--line-2); border-radius:50%; }
.art-vial { position:absolute; filter:drop-shadow(0 22px 34px rgba(19,19,20,.17)); animation:floaty 6s ease-in-out infinite; }
.art-vial--1 { height:300px; z-index:2; }
.art-vial--2 { height:150px; right:6%; bottom:6%; opacity:.92; z-index:1; animation-delay:1.2s; }
@keyframes floaty { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-9px) rotate(.4deg); } }
.art-card { position:absolute; z-index:3; background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:14px; padding:12px 16px; box-shadow:var(--shadow); font-size:13px; }
.art-card--a { top:6%; left:-2%; display:flex; flex-direction:column; }
.art-card--a strong { font-family:var(--font-display); font-size:24px; }
.art-card--a em { font-style:normal; color:var(--muted); font-size:12px; }
.art-card--b { bottom:10%; left:0; display:flex; align-items:center; gap:8px; font-weight:500; }
.dotok { width:8px; height:8px; border-radius:50%; background:#34c759; box-shadow:0 0 0 4px rgba(52,199,89,.18); }

/* Value strip */
.valuestrip { max-width:var(--maxw); margin:0 auto; padding:8px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.vstrip { display:flex; align-items:center; gap:12px; padding:18px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-xs); }
.vstrip__ico { width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:11px; background:var(--coral-soft); font-size:18px; }
.vstrip strong { display:block; font-size:14.5px; }
.vstrip em { font-style:normal; font-size:12.5px; color:var(--muted); }

.shop-allhead { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:clamp(40px,5vw,64px) 0 24px; }
.shop-allhead h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.01em; }
.shop-allhead span { color:var(--muted); font-size:14px; }

/* Product card rating */
.pc__rating { display:flex; align-items:center; gap:8px; margin:4px 0 2px; font-size:12.5px; color:var(--muted); }
.pc__stars { color:var(--coral); letter-spacing:1px; }

/* Science band */
.science { background:var(--ink); color:#fff; margin-top:clamp(50px,7vw,90px); position:relative; overflow:hidden; }
.science::before { content:""; position:absolute; width:560px; height:560px; background:radial-gradient(circle,rgba(247,128,90,.18),transparent 65%); top:-260px; left:-120px; }
.science__inner { position:relative; max-width:var(--maxw); margin:0 auto; padding:clamp(48px,6vw,84px) 24px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.science__copy h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(28px,3.6vw,42px); letter-spacing:-.02em; margin:12px 0 14px; }
.science__copy p { color:rgba(255,255,255,.78); font-size:16.5px; }
.science__list { list-style:none; margin-top:18px; display:grid; gap:10px; }
.science__list li { position:relative; padding-left:28px; color:rgba(255,255,255,.9); }
.science__list li::before { content:"✓"; position:absolute; left:0; color:var(--coral); font-weight:700; }
.science__cards { display:grid; gap:14px; }
.scard { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-sm); padding:22px 24px; }
.scard h3 { font-family:var(--font-display); color:var(--coral); font-size:15px; margin-bottom:6px; }
.scard p { color:rgba(255,255,255,.75); font-size:14.5px; }

/* Collection banner + toolbar */
.coll-banner { background:radial-gradient(800px 360px at 80% -30%, var(--coral-tint), transparent 60%), var(--cream); border-bottom:1px solid var(--line); }
.coll-banner__inner { max-width:var(--maxw); margin:0 auto; padding:clamp(32px,4vw,56px) 24px; }
.coll-banner h1 { font-family:var(--font-display); font-weight:500; font-size:clamp(32px,4.4vw,52px); letter-spacing:-.02em; margin:8px 0 10px; }
.coll-banner p { color:var(--charcoal); max-width:560px; }
.coll-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.coll-chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip2 { font-family:var(--font-body); font-weight:600; font-size:13.5px; padding:8px 16px; border-radius:100px; border:1.5px solid var(--line-2); background:var(--paper); color:var(--charcoal); cursor:pointer; transition:.2s var(--ease); }
.chip2:hover { border-color:var(--coral); color:var(--coral-deep); }
.chip2.is-active { background:var(--ink); color:#fff; border-color:var(--ink); }

/* PDP v2 */
.pdp-wrap { padding-bottom:clamp(30px,4vw,48px); }
.pdp__media-col { position:sticky; top:84px; display:flex; flex-direction:column; gap:14px; }
.pdp__media { position:relative; background:linear-gradient(160deg,var(--coral-tint),#fff); border:1px solid var(--line); border-radius:var(--radius); display:grid; place-items:center; padding:40px; aspect-ratio:1/1; overflow:hidden; }
.pdp__media::before { content:""; position:absolute; width:70%; aspect-ratio:1; background:radial-gradient(circle,rgba(247,128,90,.22),transparent 65%); border-radius:50%; }
.pdp__media img { position:absolute; inset:0; margin:auto; z-index:1; height:80%; width:84%; object-fit:contain; filter:drop-shadow(0 22px 32px rgba(19,19,20,.16)); transition:transform .6s var(--ease); }
.pdp__media:hover img { transform:scale(1.05); }
.pdp__chips { display:flex; gap:10px; flex-wrap:wrap; }
.pdp__chips span { font-size:12.5px; font-weight:600; color:var(--charcoal); background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:8px 14px; }
.pdp__raterow { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.pdp__raterow .pc__stars { font-size:16px; }
.pdp__ratelink { font-size:13.5px; color:var(--muted); text-decoration:underline; }
.pdp__ratelink:hover { color:var(--coral-deep); }
.planopt { position:relative; }
.planopt__tag { position:absolute; top:-9px; right:12px; background:var(--coral); color:#fff; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:100px; letter-spacing:.02em; }
.pdp__buy .btn--lg { flex:1; }
.pdp__aslow { font-size:13.5px; color:var(--muted); margin-top:12px; }
.pdp__aslow strong { color:var(--ink); }
.pdp__included { list-style:none; display:grid; gap:9px; margin:22px 0; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pdp__included li { position:relative; padding-left:28px; font-size:14.5px; color:var(--charcoal); }
.pdp__included li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--coral-deep); background:var(--coral-soft); width:19px; height:19px; display:grid; place-items:center; border-radius:50%; font-size:11px; font-weight:700; }

/* What's included — expandable accordion rows in the buy box */
.pdp__incs { margin:22px 0; padding:16px 0 4px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pdp__incs .pdp__lbl { margin-bottom:2px; }
.qa.inc { background:transparent; border:0; border-radius:0; padding:0 2px; border-bottom:1px solid var(--line); }
.qa.inc:last-of-type { border-bottom:0; }
.qa.inc[open] { box-shadow:none; border-color:var(--line); }
.qa.inc summary { padding:12px 0 12px 30px; font-size:14.5px; position:relative; font-weight:500; }
.qa.inc summary::before { content:"✓"; position:absolute; left:0; top:13px; color:var(--coral-deep); background:var(--coral-soft); width:19px; height:19px; display:grid; place-items:center; border-radius:50%; font-size:11px; font-weight:700; }
.qa.inc summary::after { font-size:20px; }
.qa.inc .qa__body p { padding:0 0 14px 30px; font-size:13.5px; }
.pdp__guarantee { display:flex; gap:12px; align-items:flex-start; background:var(--coral-tint); border:1px solid var(--coral-soft); border-radius:var(--radius-sm); padding:16px 18px; }
.pdp__guarantee span { font-size:20px; }
.pdp__guarantee strong { display:block; font-size:14.5px; }
.pdp__guarantee div { font-size:13.5px; color:var(--charcoal); }

/* First-time-customer promo with scratch-to-reveal code */
.pdp__promo { display:flex; gap:12px; align-items:flex-start; background:var(--coral-tint); border:1.5px dashed var(--coral); border-radius:var(--radius-sm); padding:16px 18px; }
.pdp__promo > span { font-size:20px; }
.pdp__promo strong { display:block; font-size:14.5px; }
.pdp__promo div { font-size:13.5px; color:var(--charcoal); }
.scratch { position:relative; display:block; width:160px; height:44px; margin-top:10px; border-radius:10px; overflow:hidden; }
.scratch__code { position:absolute; inset:0; display:grid; place-items:center; background:#fff; border:1px dashed var(--line-2); border-radius:10px; font-weight:700; font-size:16px; letter-spacing:.14em; color:var(--coral-deep); }
.scratch__foil { position:absolute; inset:0; width:100%; height:100%; cursor:pointer; touch-action:none; transition:opacity .5s var(--ease); }
.scratch.is-revealed .scratch__foil { opacity:0; pointer-events:none; }
.scratch:focus-visible { outline:2px solid var(--coral-deep); outline-offset:3px; }

/* Sticky sub-nav */
.pdp-nav { position:sticky; top:62px; z-index:50; background:rgba(255,246,229,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pdp-nav__inner { max-width:var(--maxw); margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:28px; height:56px; }
.pdp-nav a { font-size:14px; font-weight:600; color:var(--muted); position:relative; height:100%; display:flex; align-items:center; }
.pdp-nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--coral); transform:scaleX(0); transition:transform .25s var(--ease); }
.pdp-nav a.is-active { color:var(--ink); } .pdp-nav a.is-active::after { transform:scaleX(1); }
.pdp-nav__buy { margin-left:auto; display:flex; align-items:center; gap:14px; opacity:0; transform:translateX(12px); pointer-events:none; transition:.3s var(--ease); }
.pdp-nav__buy strong { font-family:var(--font-display); font-size:18px; }
.pdp-nav.is-stuck .pdp-nav__buy { opacity:1; transform:none; pointer-events:auto; }

/* Persistent buy bar — always one easy tap to start, at any scroll position */
.buybar { position:fixed; left:0; right:0; bottom:0; z-index:80; background:rgba(255,255,255,.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--line); box-shadow:0 -12px 40px -22px rgba(19,19,20,.45); transform:translateY(115%); transition:transform .45s var(--ease-out); }
.buybar.is-shown { transform:none; }
.buybar__inner { max-width:var(--maxw); margin:0 auto; padding:12px 24px calc(12px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:16px; }
.buybar__inner img { width:48px; height:56px; object-fit:contain; background:var(--coral-tint); border-radius:12px; padding:5px; flex:none; }
.buybar__info { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.buybar__info strong { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.buybar__info span { font-size:14px; font-weight:600; color:var(--coral-deep); }
.buybar .btn { margin-left:auto; min-width:210px; }
body.pdp-active .footer { padding-bottom:96px; }
@media (max-width:600px) {
  .buybar__inner { padding:10px 16px calc(10px + env(safe-area-inset-bottom)); gap:12px; }
  .buybar__inner img { display:none; }
  .buybar .btn { min-width:0; flex:1; }
  .buybar__info strong { font-size:14px; }
}

/* PDP sections */
.pdp-sections { padding-top:clamp(40px,5vw,64px); }
.pdp-sec { padding:clamp(34px,4vw,52px) 0; border-bottom:1px solid var(--line); }
.pdp-sec:last-of-type { border-bottom:0; }
.pdp-sec > h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.01em; margin-bottom:24px; }
.pdp-sec__grid { display:grid; grid-template-columns:1.3fr 1fr; gap:40px; }
.pdp-sec__grid p { color:var(--charcoal); margin-bottom:14px; }
.howcards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.howcard { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:24px; box-shadow:var(--shadow-xs); }
.howcard span { font-family:var(--font-display); font-weight:600; color:var(--coral-deep); font-size:15px; }
.howcard strong { display:block; font-family:var(--font-display); font-size:18px; margin:8px 0 6px; }
.howcard p { color:var(--charcoal); font-size:14.5px; }
.timeline2 { margin-top:34px; }
.timeline2 h3 { font-family:var(--font-display); font-weight:600; font-size:19px; margin-bottom:18px; }
.timeline2__track { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; }
.timeline2__track::before { content:""; position:absolute; top:5px; left:6%; right:6%; height:2px; background:repeating-linear-gradient(90deg,var(--coral-soft) 0 10px,transparent 10px 18px); }
.tl2 { position:relative; padding-top:22px; }
.tl2__dot { position:absolute; top:0; left:0; width:12px; height:12px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px var(--coral-soft); }
.tl2 strong { display:block; font-size:13px; color:var(--coral-deep); margin-bottom:4px; }
.tl2 p { font-size:14px; color:var(--charcoal); }
.ingrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.ingcard { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:22px; box-shadow:var(--shadow-xs); }
.ingcard__mol { width:42px; height:42px; border-radius:12px; margin-bottom:14px; background:radial-gradient(circle at 30% 30%, var(--coral) 0 22%, transparent 23%), radial-gradient(circle at 72% 42%, var(--coral-deep) 0 16%, transparent 17%), radial-gradient(circle at 50% 78%, var(--coral) 0 14%, transparent 15%), var(--coral-soft); }
.ingcard strong { display:block; font-family:var(--font-display); font-size:17px; margin-bottom:6px; }
.ingcard p { color:var(--charcoal); font-size:14px; }

/* Reviews */
.rev-summary { display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px 32px; margin-bottom:24px; }
.rev-score { text-align:center; }
.rev-score__n { display:block; font-family:var(--font-display); font-weight:600; font-size:54px; line-height:1; }
.rev-score .pc__stars { font-size:18px; }
.rev-score__c { display:block; font-size:13px; color:var(--muted); margin-top:6px; }
.rev-dist { display:grid; gap:7px; }
.rev-bar { display:grid; grid-template-columns:32px 1fr 40px; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); }
.rev-bar i { height:7px; background:var(--line); border-radius:5px; overflow:hidden; }
.rev-bar i b { display:block; height:100%; background:var(--coral); border-radius:5px; }
/* Reviews — horizontal scroll rail with CTA card at the end */
.rev-rail-wrap { position:relative; }
.rev-rail { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; padding:6px 2px 18px; scrollbar-width:none; -ms-overflow-style:none; scroll-padding-left:2px; }
.rev-rail::-webkit-scrollbar { display:none; }
.rev-rail > * { scroll-snap-align:start; flex:0 0 min(340px,82vw); }
.rev { display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-xs); transition:transform .3s var(--ease),box-shadow .3s var(--ease); }
.rev:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.rev__top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.rev__top strong { display:block; font-size:14.5px; }
.rev__top .pc__stars { font-size:14px; }
.rev__verif { font-size:11px; color:#34a853; font-weight:600; }
.rev h3 { font-family:var(--font-display); font-size:17px; margin-bottom:6px; }
.rev p { color:var(--charcoal); font-size:14.5px; }
.rev time { display:block; margin-top:auto; padding-top:10px; font-size:12px; color:var(--muted); }
/* Landing review card content */
.rev__stars { font-size:14px; color:var(--coral); letter-spacing:1px; margin-bottom:12px; }
.rev__quote { color:var(--charcoal); font-size:15px; line-height:1.55; }
.rev__by { display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:18px; }
.rev__by strong { display:block; font-size:14px; }
.rev__by em { font-style:normal; font-size:12.5px; color:var(--muted); }
/* CTA card at end of the rail */
.rev-cta { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px; padding:30px; border-radius:var(--radius); background:linear-gradient(155deg,var(--coral),var(--coral-deep)); color:#fff; box-shadow:0 6px 14px -6px rgba(254,98,29,.3),0 32px 60px -30px rgba(254,98,29,.42); }
.rev-cta__stars { color:#fff; font-size:18px; letter-spacing:1px; }
.rev-cta strong { font-family:var(--font-display); font-weight:600; font-size:23px; line-height:1.12; }
.rev-cta p { font-size:14.5px; color:rgba(255,255,255,.92); }
.rev-cta .btn { margin-top:6px; background:#fff; color:var(--coral-deep); box-shadow:var(--shadow-sm); }
.rev-cta .btn:hover { background:#fff; color:var(--ink); transform:translateY(-2px); }
/* Rail arrows */
.rev-arrow { position:absolute; top:42%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:rgba(255,255,255,.95); backdrop-filter:blur(6px); color:var(--ink); cursor:pointer; box-shadow:var(--shadow-sm); display:grid; place-items:center; font-size:18px; transition:transform .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease); }
.rev-arrow:hover { border-color:var(--coral); color:var(--coral-deep); transform:translateY(-50%) scale(1.08); }
.rev-arrow--prev { left:-12px; }
.rev-arrow--next { right:-12px; }

/* Toast */
.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,140%); z-index:400; display:flex; align-items:center; gap:12px; background:var(--ink); color:#fff; padding:13px 16px 13px 14px; border-radius:100px; box-shadow:0 20px 50px -16px rgba(19,19,20,.5); transition:transform .4s var(--ease-out); max-width:92vw; }
.toast.show { transform:translate(-50%,0); }
.toast__ico { width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--coral); font-size:12px; }
.toast__msg { font-size:14px; font-weight:500; }
.toast__act { background:rgba(255,255,255,.14); border:0; color:#fff; font-weight:600; font-size:13px; padding:7px 14px; border-radius:100px; cursor:pointer; }
.toast__act:hover { background:var(--coral); }

/* Cart bump + progress + upsell */
.cart-btn.bump { animation:cartBump .5s var(--ease); }
@keyframes cartBump { 0%,100% { transform:none; } 30% { transform:scale(1.18) rotate(-6deg); } 60% { transform:scale(.96); } }
.cart-prog { background:var(--coral-tint); border:1px solid var(--coral-soft); border-radius:var(--radius-sm); padding:14px 16px; margin:8px 0 16px; }
.cart-prog p { font-size:13px; color:var(--charcoal); margin-bottom:9px; }
.cart-prog i { display:block; height:7px; background:#fff; border-radius:5px; overflow:hidden; }
.cart-prog i b { display:block; height:100%; background:linear-gradient(90deg,var(--coral),var(--coral-deep)); border-radius:5px; transition:width .4s var(--ease); }
.cart-empty__ico { font-size:40px; margin-bottom:10px; }
.cart-upsell { margin-top:18px; padding-top:18px; border-top:1px dashed var(--line-2); }
.cart-upsell h4 { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:12px; }
.upitem { display:flex; align-items:center; gap:12px; padding:8px 0; }
.upitem img { width:42px; height:48px; object-fit:contain; background:var(--coral-tint); border-radius:10px; padding:5px; }
.upitem strong { display:block; font-size:13.5px; }
.upitem em { font-style:normal; font-size:12.5px; color:var(--muted); }
.upitem button { margin-left:auto; background:var(--ink); color:#fff; border:0; border-radius:100px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; transition:.2s var(--ease); }
.upitem button:hover { background:var(--coral); }

@media (max-width:900px) {
  .shop-hero2__inner { grid-template-columns:1fr; }
  .shop-hero2__art { order:-1; min-height:300px; }
  .valuestrip { grid-template-columns:1fr 1fr; }
  .science__inner { grid-template-columns:1fr; gap:30px; }
  .pdp__media-col { position:relative; top:0; }
  .pdp-sec__grid { grid-template-columns:1fr; gap:24px; }
  .howcards { grid-template-columns:1fr; }
  .timeline2__track { grid-template-columns:1fr 1fr; gap:24px; }
  .timeline2__track::before { display:none; }
  .rev-summary { grid-template-columns:1fr; gap:22px; text-align:center; }
  .rev-arrow { display:none; }
  .rev-rail > * { flex:0 0 86vw; }
  .pdp-nav__inner { gap:18px; overflow-x:auto; }
}
@media (max-width:560px) {
  .valuestrip { grid-template-columns:1fr; }
  .timeline2__track { grid-template-columns:1fr; }
  .pdp-nav__buy { display:none; }
}

/* ============================================================
   COLLECTION GALLERY — editorial offset layout
   ============================================================ */
.coll-wrap { padding-top:18px; }
.gallery { display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(28px,4.5vw,64px); row-gap:clamp(36px,5vw,72px); align-items:start; padding-bottom:clamp(48px,7vw,110px); }
.gallery > .gcard:nth-child(even) { margin-top:clamp(48px,9vw,120px); }
.gcard { display:flex; flex-direction:column; position:relative; }

.gcard__media { position:relative; aspect-ratio:4/4.4; border-radius:calc(var(--radius) + 6px); overflow:hidden; display:grid; place-items:center; transition:box-shadow .5s var(--ease); }
.gcard:nth-child(4n+1) .gcard__media { background:linear-gradient(168deg,#F0E7D6 0%,#FFFBF2 70%); }
.gcard:nth-child(4n+2) .gcard__media { background:linear-gradient(168deg,#FDE4D6 0%,#FFF6EE 70%); }
.gcard:nth-child(4n+3) .gcard__media { background:linear-gradient(168deg,#FFEEDC 0%,#FEFDFC 70%); }
.gcard:nth-child(4n) .gcard__media { background:linear-gradient(168deg,#F5EDDE 0%,#FFFBF4 70%); }
.gcard__media::before { content:""; position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(247,128,90,.22),transparent 65%); transition:transform .6s var(--ease); }
.gcard__media::after { content:""; position:absolute; inset:0; border-radius:inherit; border:1.5px solid transparent; transition:border-color .4s var(--ease); pointer-events:none; }
.gcard:hover .gcard__media { box-shadow:var(--shadow-lg); }
.gcard:hover .gcard__media::before { transform:scale(1.15); }
.gcard:hover .gcard__media::after { border-color:var(--coral); }

.gcard__no { position:absolute; top:2px; left:18px; font-family:var(--font-display); font-weight:600; font-size:clamp(84px,10vw,132px); line-height:1.1; color:rgba(194,73,30,.09); user-select:none; }
.gcard__badge { position:absolute; top:16px; right:16px; z-index:2; background:var(--coral); color:#fff; font-size:11.5px; font-weight:600; padding:6px 13px; border-radius:100px; box-shadow:var(--shadow-coral); }
.gcard__media img { position:absolute; inset:0; margin:auto; z-index:1; height:76%; width:78%; object-fit:contain; filter:drop-shadow(0 26px 34px rgba(19,19,20,.18)); transition:transform .6s var(--ease); }
.gcard:hover .gcard__media img { transform:translateY(-10px) scale(1.05) rotate(-2deg); }

.gcard__body { padding:22px 6px 0; display:flex; flex-direction:column; }
.gcard__cat { font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--coral-deep); }
.gcard__body h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(24px,2.6vw,31px); letter-spacing:-.01em; margin:8px 0 8px; transition:color .25s var(--ease); }
.gcard:hover .gcard__body h3 { color:var(--coral-deep); }
.gcard__body > p { color:var(--muted); font-size:14.5px; line-height:1.6; max-width:44ch; }
.gcard__foot { margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:14px; }
.gcard__price { font-family:var(--font-display); font-weight:600; font-size:23px; font-variant-numeric:tabular-nums; }
.gcard__price em { font-style:normal; font-size:12.5px; color:var(--muted); font-family:var(--font-body); }
.gcard__cta { font-weight:600; font-size:14px; color:var(--coral-deep); display:inline-flex; align-items:center; gap:6px; }
.gcard__cta i { font-style:normal; transition:transform .25s var(--ease); }
.gcard:hover .gcard__cta i { transform:translateX(5px); }

@media (max-width:700px) {
  .gallery { grid-template-columns:1fr; row-gap:44px; }
  .gallery > .gcard:nth-child(even) { margin-top:0; }
  .gcard__media { aspect-ratio:4/3.6; }
  .gcard__media img { height:80%; width:82%; }
}

/* ============================================================
   BMI CALCULATOR — screening guideline helper
   ============================================================ */
.bmi { background:radial-gradient(900px 480px at 82% -10%,var(--coral-soft),transparent 62%),linear-gradient(180deg,var(--cream),var(--coral-tint)); border-top:1px solid var(--line); }
.bmi__inner { max-width:var(--maxw); margin:0 auto; padding:clamp(56px,7vw,104px) 24px; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.bmi__copy h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4vw,46px); line-height:1.06; letter-spacing:-.02em; }
.bmi__copy > p { color:var(--charcoal); font-size:16.5px; margin-top:16px; max-width:46ch; }
.bmi__points { list-style:none; margin-top:22px; display:grid; gap:11px; }
.bmi__points li { position:relative; padding-left:30px; font-size:15px; color:var(--charcoal); font-weight:500; }
.bmi__points li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--coral-deep); background:#fff; border:1px solid var(--coral-soft); width:20px; height:20px; display:grid; place-items:center; border-radius:50%; font-size:11px; font-weight:700; }

.bmi__card { background:var(--paper); border:1.5px solid var(--line); border-radius:calc(var(--radius) + 6px); padding:clamp(24px,3vw,38px); box-shadow:var(--shadow-lg); transition:border-color .4s var(--ease); }
.bmi__card.is-eligible { border-color:var(--coral); }
.bmi__row { margin-bottom:20px; }
.bmi__row label { display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; font-weight:600; color:var(--charcoal); margin-bottom:10px; }
.bmi__row output { font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.bmi__row input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; background:linear-gradient(90deg,var(--coral-soft),var(--line-2)); outline:none; cursor:pointer; }
.bmi__row input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--coral); border:3.5px solid #fff; box-shadow:var(--shadow-coral); transition:transform .15s var(--ease); }
.bmi__row input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.12); }
.bmi__row input[type="range"]::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:var(--coral); border:3.5px solid #fff; box-shadow:var(--shadow-coral); cursor:pointer; }
.bmi__row input[type="range"]:focus-visible { outline:2px solid var(--coral-deep); outline-offset:4px; }

.bmi__readout { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; margin:26px 0 14px; padding-top:22px; border-top:1px solid var(--line); }
.bmi__score { text-align:center; }
.bmi__score span { display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(44px,5vw,58px); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.bmi__score em { font-style:normal; display:block; margin-top:6px; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.bmi__catlabel { display:inline-block; font-size:13px; font-weight:700; color:var(--coral-deep); margin-bottom:10px; }
.bmi__scale { position:relative; height:10px; border-radius:8px; background:linear-gradient(90deg,#8FB8E8 0 12.9%,#43A96E 12.9% 37%,#F2B84B 37% 55.6%,var(--coral) 55.6% 100%); }
.bmi__scale i { position:absolute; top:50%; left:0; width:20px; height:20px; border-radius:50%; background:#fff; border:4px solid var(--ink); transform:translate(-50%,-50%); transition:left .25s var(--ease); box-shadow:var(--shadow-sm); }
.bmi__ticks { position:relative; height:18px; margin-top:6px; font-size:11px; color:var(--muted); }
.bmi__ticks span { position:absolute; transform:translateX(-50%); }
.bmi__ticks span:nth-child(1) { left:12.9%; } .bmi__ticks span:nth-child(2) { left:37%; } .bmi__ticks span:nth-child(3) { left:55.6%; } .bmi__ticks span:nth-child(4) { left:92.6%; }
.bmi__msg { font-size:14.5px; color:var(--charcoal); line-height:1.6; min-height:3.2em; margin-bottom:14px; }
.bmi__card.is-eligible .bmi__msg { color:var(--ink); font-weight:500; }
.bmi__cta { width:100%; }
.bmi__fine { margin-top:14px; font-size:12px; color:var(--muted); line-height:1.6; }

@media (max-width:900px) {
  .bmi__inner { grid-template-columns:1fr; }
  .bmi__readout { grid-template-columns:1fr; gap:16px; text-align:left; }
  .bmi__score { display:flex; align-items:baseline; gap:12px; text-align:left; }
}

/* ============================================================
   MOBILE REVAMP — app-quality small-screen experience
   ============================================================ */
@media (max-width:880px) {
  /* Hero — copy-first, full-width CTAs, compact layered visual */
  .hero { padding-top:44px; }
  .hero__inner { padding-top:30px; padding-bottom:26px; gap:8px; }
  .hero__visual { order:1; min-height:330px; margin-top:4px; }
  .hero__title { font-size:clamp(43px,11.4vw,64px); margin:18px 0 16px; }
  .hero__sub { font-size:16px; }
  .hero__cta { flex-direction:column; align-items:stretch; gap:10px; }
  .hero__cta .btn--lg { width:100%; padding:16px 22px; font-size:16px; }
  .hero__cta .btn--text { justify-content:center; padding:10px; }
  .hero__proof { margin-top:18px; }
  .hero__ring { width:290px; height:290px; }
  .hero__glow { width:260px; height:260px; }
  .hero__vial { width:150px; }
  .float-card { padding:10px 14px; font-size:12.5px; border-radius:14px; }
  .float-card--price { top:4%; left:2%; }
  .float-card--price .float-card__v { font-size:22px; }
  .float-card--ship { bottom:8%; right:2%; }
  .float-card--rating { display:none; }
  .scroll-hint { display:none; }

  /* Sticky bottom bar — glassier, tighter */
  .mobilebar { padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,246,229,.8); -webkit-backdrop-filter:blur(24px) saturate(1.6); backdrop-filter:blur(24px) saturate(1.6); box-shadow:0 -12px 36px -18px rgba(19,19,20,.4); }
  .mobilebar span { font-size:13px; line-height:1.35; }
  .mobilebar .btn { padding:13px 22px; flex:none; }
}

@media (max-width:700px) {
  /* Compare table → stacked feature cards */
  .compare__head { grid-template-columns:1fr 1fr; }
  .compare__head > div:first-child { display:none; }
  .compare__col { text-align:left; padding:14px 18px; font-size:13px; }
  .compare__col--viv .brand__img--compare { margin:0; }
  .compare__row { grid-template-columns:1fr 1fr; row-gap:8px; padding:15px 18px; }
  .compare__row > span { padding:0; font-size:13.5px; }
  .compare__row > span:first-child { grid-column:1/-1; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
  .compare__row .yes, .compare__row .no { justify-content:flex-start; text-align:left; gap:8px; }

  /* Horizontal rails — bigger peek, consistent card width */
  .feat-rail > .pc { flex:0 0 74vw; }
  .rev-rail > * { flex:0 0 80vw; }

  /* Shop toolbar stacks */
  .coll-toolbar { flex-direction:column; align-items:stretch; }
  .coll-sort { display:flex; justify-content:flex-end; }
  .shop-hero2__cta .btn { width:100%; }
  .shop-hero2__cta { flex-direction:column; align-items:stretch; gap:10px; }
}

@media (max-width:560px) {
  /* Rhythm & type scale */
  .section-head h2 { font-size:30px; }
  .section-head { margin-bottom:30px; }
  .section-head p { font-size:15.5px; }
  .eyebrow { font-size:12px; }
  .promise__item { padding:26px 22px; }
  .promise__item h2 { font-size:21px; }
  .coll-tile__media { padding:22px; }
  .coll-tile__media img { height:118px; }
  .coll-tile__body { padding:22px; }
  .tstep__num { width:50px; height:50px; font-size:18px; }
  .stats__inner { gap:30px 18px; }
  .stat__num { font-size:42px; }
  .pcard-doc { padding:14px 16px; }
  .avatar--lg { width:46px; height:46px; font-size:15px; }
  .qa { padding:2px 18px; }
  .qa summary { font-size:15.5px; padding:16px 0; }
  .cta__card { border-radius:24px; padding:46px 22px; }
  .cta__card h2 { font-size:31px; }
  .footer__inner { gap:26px; padding-bottom:26px; }
  .footer__legallinks { gap:8px 18px; }
  .footer__legal { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }

  /* Press strip */
  .press { padding:34px 0 8px; }
  .marquee__track { gap:44px; }
  .marquee__track img { height:21px; }

  /* Shop: banner, gallery, BMI, PDP */
  .coll-banner h1 { font-size:36px; }
  .gcard__body h3 { font-size:24px; }
  .gcard__no { font-size:88px; }
  .bmi__inner { padding:54px 20px 64px; }
  .bmi__copy h2 { font-size:30px; }
  .bmi__card { padding:22px 18px; }
  .pdp__media { padding:26px; }
  .pdp__info h1 { font-size:29px; }
  .pdp__price .price { font-size:30px; }
  .pdp__buy .btn--lg { width:100%; padding:16px 22px; font-size:16px; }
  .pdp__chips { flex-wrap:wrap; }
  .pdp-sec h2 { font-size:26px; }
  .buybar__inner { padding:10px 16px calc(10px + env(safe-area-inset-bottom)); gap:12px; }
  .buybar { background:rgba(255,246,229,.82); -webkit-backdrop-filter:blur(24px) saturate(1.6); backdrop-filter:blur(24px) saturate(1.6); }
}

/* Touch feedback — cards respond like native buttons */
@media (hover:none) {
  .gcard:active .gcard__media { box-shadow:var(--shadow-sm); }
  .gcard:active .gcard__media img { transform:scale(.97); }
  .pc:active, .coll-tile:active { transform:scale(.985); }
  .rev:active { transform:scale(.985); }
  .qa summary, .drawer__links a, .nav__burger { -webkit-tap-highlight-color:transparent; }
}

/* ============================================================
   DISPLAY TYPE TUNING — optical corrections for Poppins headlines
   (the serif metrics — ultra-tight leading/tracking + italic
   accents — don't translate to a geometric sans)
   ============================================================ */
/* Hero: firmer weight, breathing room between lines, relaxed tracking */
.hero__title { font-weight:600; font-size:clamp(40px,5.7vw,76px); line-height:1.09; letter-spacing:-.015em; }
/* Accent words: color + weight carry the emphasis — no faux-slant italic */
.hero__title em, .shop-hero2__copy h1 em { font-style:normal; color:var(--coral); }
.shop-hero2__copy h1 { font-weight:600; font-size:clamp(36px,5vw,62px); line-height:1.1; letter-spacing:-.015em; }

/* Section headings: consistent 600 weight, open leading */
.section-head h2 { font-weight:600; font-size:clamp(29px,4.2vw,46px); line-height:1.14; letter-spacing:-.015em; }
.providers__copy h2, .bmi__copy h2 { font-weight:600; line-height:1.16; letter-spacing:-.015em; }
.cta__card h2 { font-weight:600; font-size:clamp(28px,4vw,48px); line-height:1.14; letter-spacing:-.015em; }
.coll-banner h1 { font-weight:600; font-size:clamp(31px,4.2vw,48px); line-height:1.12; letter-spacing:-.015em; }
.shop-hero h1 { font-weight:600; line-height:1.12; letter-spacing:-.015em; }
.coll-head h1 { font-weight:600; line-height:1.12; letter-spacing:-.015em; }
.shop-allhead h2 { font-weight:600; letter-spacing:-.01em; }
.pdp__info h1 { line-height:1.12; letter-spacing:-.015em; }
.pdp-sec h2 { letter-spacing:-.01em; }

/* Mobile: keep the corrected leading at the larger mobile scale */
@media (max-width:880px) {
  .hero__title { font-size:clamp(38px,10vw,58px); line-height:1.1; }
}

/* ============================================================
   PRODUCT PAGE — real e-commerce presentation
   (clean studio panel + thumbnail views; the arty tinted panels
   stay on collection/gallery cards only)
   ============================================================ */
.pdp__media { background:var(--paper); }
.pdp__media::before { display:none; }
#pdpImg { transition:opacity .18s var(--ease); }
.pdp__thumbs { display:flex; gap:10px; margin-top:14px; }
.pdp__thumb { position:relative; width:74px; height:74px; flex:none; border:1.5px solid var(--line); border-radius:14px; background:var(--paper); cursor:pointer; overflow:hidden; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); -webkit-tap-highlight-color:transparent; }
.pdp__thumb img { position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); object-fit:contain; }
.pdp__thumb:hover { border-color:var(--coral-bright); }
.pdp__thumb.is-active { border-color:var(--coral); box-shadow:0 0 0 3px rgba(254,98,29,.12); }
.pdp__thumb:focus-visible { outline:2px solid var(--coral-deep); outline-offset:2px; }

/* ============================================================
   BMI CALCULATOR v2 — field inputs + Calculate (Good Life pattern)
   ============================================================ */
.bmi__fields { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:10px; margin-bottom:12px; }
.bmi__field label { display:block; font-size:12px; font-weight:600; color:var(--charcoal); margin-bottom:6px; }
.bmi__field input { width:100%; padding:13px 14px; border:1.5px solid var(--line-2); border-radius:12px; font-family:var(--font-body); font-size:16px; font-weight:600; color:var(--ink); background:var(--paper); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); -moz-appearance:textfield; }
.bmi__field input::-webkit-outer-spin-button, .bmi__field input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.bmi__field input:focus { outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(254,98,29,.14); }
.bmi__field input::placeholder { color:#B9B9B9; font-weight:500; }
.bmi__calc { width:100%; margin-bottom:20px; }
.bmi__seglabels { position:relative; height:16px; margin-top:6px; font-size:10.5px; font-weight:600; letter-spacing:.02em; color:var(--muted); }
.bmi__seglabels span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.bmi__seglabels span:nth-child(1) { left:6.5%; }
.bmi__seglabels span:nth-child(2) { left:25%; }
.bmi__seglabels span:nth-child(3) { left:46.3%; }
.bmi__seglabels span:nth-child(4) { left:77.8%; }
.bmi__scale i[hidden] { display:none; }
.bmi__card .bmi__cta { width:100%; }
@media (max-width:420px) {
  .bmi__fields { grid-template-columns:1fr 1fr; }
  .bmi__field:nth-child(3) { grid-column:1/-1; }
  .bmi__seglabels { font-size:9px; }
}

/* ---------- Motion pause control (WCAG 2.2.2) ---------- */
.motion-toggle { position:fixed; left:18px; bottom:18px; z-index:220; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1.5px solid var(--line); background:var(--paper); color:var(--charcoal); font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer; box-shadow:var(--shadow-sm); transition:border-color .2s var(--ease), color .2s var(--ease); }
.motion-toggle:hover { border-color:var(--coral); color:var(--ink); }
.motion-toggle span { font-size:11px; }
html.motion-paused * { animation-play-state:paused !important; }
@media (max-width:880px) { .motion-toggle { left:12px; bottom:76px; padding:9px 13px; font-size:12px; } }

/* ---------- BMI guidelines table + disclaimer ---------- */
.bmi__guide { margin-top:24px; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.bmi__guide h3 { font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:13px 16px 11px; border-bottom:1px solid var(--line); }
.bmi__guiderow { display:flex; align-items:center; gap:10px; padding:11px 16px; font-size:14px; border-bottom:1px solid var(--line); transition:background .25s var(--ease), box-shadow .25s var(--ease); }
.bmi__dot { width:10px; height:10px; border-radius:50%; flex:none; }
.bmi__dot--under { background:#8FB8E8; }
.bmi__dot--normal { background:#43A96E; }
.bmi__dot--over { background:#F2B84B; }
.bmi__dot--obese { background:var(--coral); }
.bmi__guidecat { font-weight:600; color:var(--ink); }
.bmi__guiderange { margin-left:auto; color:var(--charcoal); font-variant-numeric:tabular-nums; }
.bmi__guiderow.is-active { background:var(--coral-tint); box-shadow:inset 3px 0 0 var(--coral); }
.bmi__guiderow.is-active .bmi__guidecat { color:var(--coral-deep); }
.bmi__guidenote { padding:12px 16px 14px; font-size:12.5px; color:var(--muted); line-height:1.6; }
.bmi__range { font-size:13.5px; font-weight:500; color:var(--coral-deep); margin:-6px 0 14px; }
.bmi__range[hidden] { display:none; }
.bmi__disclaimer { margin-top:14px; padding:13px 15px; background:var(--coral-tint); border:1px solid var(--line); border-radius:12px; font-size:12px; color:var(--muted); line-height:1.65; }
.bmi__disclaimer strong { color:var(--charcoal); font-weight:600; }

/* ============================================================
   HERO DISPLAY FACE — DM Serif Display.
   A bold didone serif against Poppins body text.
   (Ships 400 + italic only — heavier weights would be synthesized.)
   ============================================================ */
.hero__title { font-family:"DM Serif Display",Georgia,serif; font-weight:400; font-size:clamp(32px,4.3vw,62px); line-height:1.12; letter-spacing:-.008em; }
.hero__title em { font-size:1.78em; line-height:1.08; }
.hero__title em { font-style:italic; font-weight:400; color:var(--coral); }
/* the headline ends with the brand's dot — the same mark as the logo's dotted i */
.hero__dot { display:inline-block; width:.115em; height:.115em; margin-left:.075em; border-radius:50%; background:var(--coral); }

@media (max-width:880px) {
  .hero__title { font-size:clamp(26px,7vw,38px); line-height:1.1; }
}