/* ═══════════════════════════════════════════════════════════════════════════
   VERAPEP DESIGN SYSTEM  ·  v2, rebuilt from Carina's reference set
   ═══════════════════════════════════════════════════════════════════════════

   THE RULE THAT GOVERNS EVERYTHING BELOW:

   A pixel census across all 30 mockups found the median page is UNDER 1%
   chromatic. FAQ 0.04%. Footer 0.08%. Product info cards 0.22%. Shop index
   0.39%. The design is a NEUTRAL system with colour rationed to roughly one
   element per section.

   So: neutrals do the work. Gradient is a guest, not the wallpaper.

   GRADIENT IS PERMITTED IN EXACTLY FOUR PLACES:
     1. the single primary CTA on a screen
     2. one run of words inside a hero headline
     3. the small uppercase eyebrow above a section heading
     4. a 2-3px hairline on top of an info card

   Everything else is #0C0C0C on white, or white with a hairline border.
   If you are reaching for the gradient a fifth time, use black instead.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── NEUTRALS. 99% of the design. Values taken from the mockup pixels. ──*/
  --c-white:#FFFFFF;
  --c-page:#FFFFFF;
  --c-panel:#F4F4F4;       /* hero card, newsletter band, recessed panels   */
  --c-panel-2:#F8F8F8;     /* softer recess                                */
  --c-well:#E9E9E9;        /* product image wells                          */
  --c-card:#FFFFFF;
  --c-line:#E4E4E4;        /* hairline border                              */
  --c-line-2:#D6D6D6;      /* input borders                                */

  --c-ink:#0C0C0C;         /* headlines and UI. NOT navy. 17.9:1 on white.  */
  --c-ink-2:#4A4A4A;       /* body copy.                    8.9:1 on white  */
  --c-ink-3:#666666;       /* captions, meta.               4.6:1 on white  */
  --c-ink-4:#8E8E8E;       /* placeholders, disabled. LARGE TEXT / UI ONLY. */
  --c-on-dark:#FFFFFF;

  /* ── THE ONE ACCENT. Hue clusters at 195-220deg across every mockup. ────*/
  --c-accent:#4E2BA4;
  --c-accent-soft:rgba(78,43,164,.10);
  --c-focus:rgba(78,43,164,.32);

  /* ── SOLID BUTTON. The workhorse. Used far more than the gradient. ──────*/
  --c-solid:#151515;
  --c-solid-hover:#000000;
  --c-solid-ink:#FFFFFF;

  /* ── STATUS ────────────────────────────────────────────────────────────*/
  --c-ok:#0F7537;
  --c-warn:#8A6100;
  --c-bad:#C0392B;

  /* ── THE GRADIENT. Rationed. See the four-place rule above. ─────────────*/
  --grad:linear-gradient(90deg,#6241C2 0%,#2E4FA8 45%,#0C8CCE 100%);
  --grad-wave:linear-gradient(90deg,#6241C2 0%,#2E4FA8 22.5%,#0C8CCE 50%,#2E4FA8 77.5%,#6241C2 100%);
  --grad-hover:linear-gradient(90deg,#6C4AD2 0%,#3459B8 45%,#1198DD 100%);
  --grad-soft:linear-gradient(135deg,#E9F3FB 0%,#F0EDFA 100%);

  /* ── RADII ─────────────────────────────────────────────────────────────*/
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  /* ── SHADOWS. Barely there. ────────────────────────────────────────────*/
  --sh-xs:0 1px 2px rgba(0,0,0,.04);
  --sh-sm:0 1px 3px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.03);
  --sh-md:0 4px 14px rgba(0,0,0,.06);
  --sh-lg:0 14px 44px rgba(0,0,0,.10);

  /* ── TYPE ──────────────────────────────────────────────────────────────*/
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --fs-hero:clamp(2.3rem,4.6vw,3.5rem);
  --fs-h1:clamp(2rem,3.6vw,2.75rem);
  --fs-h2:clamp(1.55rem,2.6vw,2.1rem);
  --fs-h3:1.3rem;
  --fs-h4:1.02rem;
  --fs-body:1rem;
  --fs-sm:.875rem;
  --fs-xs:.78rem;
  --fs-eyebrow:.7rem;

  /* ── SPACE ─────────────────────────────────────────────────────────────*/
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px; --s10:120px;

  /* ── MOTION ────────────────────────────────────────────────────────────*/
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.4,.64,1);
  --t-fast:140ms; --t:230ms; --t-slow:420ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE. Declared once, at the token level. Nothing below this line and
   nothing on any page carries its own html.vp-dark override.
   Sampled from 01-home-a-hero-DARK-MODE-OF-TRUTH.
   ═══════════════════════════════════════════════════════════════════════ */
html.vp-dark{
  --c-page:#151515;
  --c-panel:#1A191B;
  --c-panel-2:#171717;
  --c-well:#17171B;
  --c-card:#1A191B;
  --c-line:rgba(255,255,255,.09);
  --c-line-2:rgba(255,255,255,.16);

  --c-ink:#FFFFFF;
  --c-ink-2:#E2E2E2;
  --c-ink-3:#A8A8A8;
  --c-ink-4:#7A7A7A;

  --c-accent:#4E2BA4;
  --c-accent-soft:rgba(79,176,238,.14);
  --c-focus:rgba(79,176,238,.38);

  --c-solid:#FFFFFF;
  --c-solid-hover:#F0F0F0;
  --c-solid-ink:#151515;

  --c-ok:#4ADE80; --c-warn:#E0B252; --c-bad:#F87171;

  --sh-xs:0 1px 2px rgba(0,0,0,.5);
  --sh-sm:0 1px 3px rgba(0,0,0,.55);
  --sh-md:0 4px 14px rgba(0,0,0,.5);
  --sh-lg:0 14px 44px rgba(0,0,0,.62);

  --grad:linear-gradient(90deg,#7B57DC 0%,#3D63C6 45%,#0E8AC8 100%);
  --grad-wave:linear-gradient(90deg,#7B57DC 0%,#3D63C6 22.5%,#0E8AC8 50%,#3D63C6 77.5%,#7B57DC 100%);
  --grad-hover:linear-gradient(90deg,#8763E8 0%,#4A70D6 45%,#1B9CDD 100%);
  --grad-soft:linear-gradient(135deg,#16202B 0%,#1B1830 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--c-page);color:var(--c-ink);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;transition:color var(--t) var(--ease);}
::selection{background:var(--c-accent-soft);color:var(--c-ink);}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--c-focus);border-radius:var(--r-xs);}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

.wrap{width:min(1280px,92vw);margin-inline:auto;}
.sec{padding-block:var(--s9);}
.sec-sm{padding-block:var(--s7);}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPE
   ═══════════════════════════════════════════════════════════════════════ */
h1,h2,h3,h4{margin:0;color:var(--c-ink);letter-spacing:-.02em;line-height:1.14;}
.t-hero{font-size:var(--fs-hero);font-weight:800;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.08;}
.t-h1{font-size:var(--fs-h1);font-weight:700;}
.t-h2{font-size:var(--fs-h2);font-weight:700;}
.t-h3{font-size:var(--fs-h3);font-weight:700;}
.t-h4{font-size:var(--fs-h4);font-weight:700;}
.t-body{font-size:var(--fs-body);color:var(--c-ink-2);line-height:1.65;margin:0;}
.t-sm{font-size:var(--fs-sm);color:var(--c-ink-2);margin:0;}
.t-meta{font-size:var(--fs-xs);color:var(--c-ink-3);margin:0;}

/* PERMITTED GRADIENT USE 3 of 4 — the section eyebrow. */
.eyebrow{
  display:block;font-size:var(--fs-eyebrow);font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;margin:0 0 var(--s3);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* PERMITTED GRADIENT USE 2 of 4 — one run of words in a hero headline. */
.g-run{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;letter-spacing:.05em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   Three tiers. Gradient is the rarest. Solid black is the workhorse.
   ═══════════════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:14px 26px;border:none;border-radius:var(--r-sm);
  font-family:var(--font);font-size:.92rem;font-weight:700;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:transform var(--t-fast) var(--spring),
             box-shadow var(--t) var(--ease),
             background-color var(--t) var(--ease),
             border-color var(--t) var(--ease),
             color var(--t) var(--ease),filter var(--t) var(--ease);
}
.btn:active{transform:scale(.975);}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}

/* PERMITTED GRADIENT USE 1 of 4 — ONE primary CTA per screen. */
.btn-primary{border:2px solid transparent;background:var(--grad-wave);background-size:200% 100%;
  background-position:calc(var(--vp-pan,0) * 1%) 50%;color:#fff;box-shadow:0 4px 16px rgba(46,79,168,.26);}
.btn-primary:hover{background:#0C0C0C;color:#fff;transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(46,79,168,.32);}

/* The workhorse. Use this for everything that is not THE primary action. */
.btn-solid{background:var(--c-solid);color:var(--c-solid-ink);}
.btn-solid:hover{background:var(--c-solid-hover);transform:translateY(-1px);
  box-shadow:var(--sh-md);}

.btn-ghost{background:var(--c-card);color:var(--c-ink);
  border:1px solid var(--c-line-2);}
.btn-ghost:hover{border-color:var(--c-ink);transform:translateY(-1px);}

/* Neutral chip button used inside bento cards. */
.btn-chip{background:var(--c-panel);color:var(--c-ink);border:none;
  border-radius:var(--r-pill);padding:10px 18px;font-size:var(--fs-sm);
  font-weight:600;display:inline-flex;align-items:center;gap:var(--s2);
  cursor:pointer;transition:background var(--t) var(--ease),
             transform var(--t-fast) var(--spring);}
.btn-chip:hover{background:var(--c-well);transform:translateY(-1px);}
.btn-chip:active{transform:scale(.96);}

.btn-lg{padding:16px 34px;font-size:.97rem;}
.btn-sm{padding:10px 18px;font-size:.82rem;}
.btn-pill{border-radius:var(--r-pill);}
.btn-block{width:100%;}

/* Text link with arrow, as in VIEW MORE. */
.link-arrow{display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-ink);}
.link-arrow svg{transition:transform var(--t) var(--ease-out);}
.link-arrow:hover svg{transform:translate(3px,-3px);}

/* ═══════════════════════════════════════════════════════════════════════════
   SURFACES
   ═══════════════════════════════════════════════════════════════════════ */
.card{background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-lg);padding:var(--s5);
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease),background-color var(--t) var(--ease);}
.card-lift:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);
  border-color:transparent;}
.panel{background:var(--c-panel);border-radius:var(--r-xl);padding:var(--s6);}

/* PERMITTED GRADIENT USE 4 of 4 — hairline on top of an info card. */
.card-topline{position:relative;overflow:hidden;}
.card-topline::before{content:"";position:absolute;top:0;left:0;right:0;
  height:3px;background:var(--grad-wave);background-size:200% 100%;background-position:calc(var(--vp-pan,0) * 1%) 50%;}

.hr{height:1px;background:var(--c-line);border:none;margin:var(--s5) 0;}

/* ═══════════════════════════════════════════════════════════════════════════
   CHIPS · BADGES · ICON TILES
   ═══════════════════════════════════════════════════════════════════════ */
.chip{display:inline-flex;align-items:center;justify-content:center;
  padding:9px 18px;border-radius:var(--r-sm);border:1px solid var(--c-line-2);
  background:var(--c-card);color:var(--c-ink);font-size:var(--fs-sm);
  font-weight:600;cursor:pointer;user-select:none;
  transition:transform var(--t-fast) var(--spring),
             background var(--t) var(--ease),border-color var(--t) var(--ease),
             color var(--t) var(--ease);}
.chip:hover{border-color:var(--c-ink-3);}
.chip:active{transform:scale(.96);}
.chip.on{background:var(--c-solid);border-color:var(--c-solid);color:var(--c-solid-ink);}
.chip-pill{border-radius:var(--r-pill);}

.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.05em;background:var(--c-panel);color:var(--c-ink-2);}

.tile{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;border-radius:var(--r-md);
  background:var(--c-panel);color:var(--c-ink-2);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             transform var(--t) var(--spring);}
.tile.on{background:var(--grad);color:#fff;}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════════ */
.field{width:100%;padding:13px 16px;border:1px solid var(--c-line-2);
  border-radius:var(--r-sm);background:var(--c-card);color:var(--c-ink);
  font-family:var(--font);font-size:var(--fs-body);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);}
.field::placeholder{color:var(--c-ink-4);}
.field:focus{outline:none;border-color:var(--c-accent);
  box-shadow:0 0 0 3px var(--c-focus);}
.label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--c-ink);
  margin-bottom:6px;}

.search{display:flex;align-items:center;gap:10px;padding:12px 20px;
  border:1px solid var(--c-line-2);border-radius:var(--r-pill);
  background:var(--c-card);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);}
.search:focus-within{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-focus);}
.search input{border:none;background:transparent;outline:none;flex:1;
  color:var(--c-ink);font-family:var(--font);font-size:var(--fs-body);}
.search input::placeholder{color:var(--c-ink-4);}
.search svg{color:var(--c-ink-3);flex:0 0 auto;}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT CARD
   ═══════════════════════════════════════════════════════════════════════ */
.pcard{display:flex;flex-direction:column;background:var(--c-card);
  border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease);}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:transparent;}
.pcard-media{position:relative;aspect-ratio:1/1;background:var(--c-well);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pcard-media img{width:78%;height:78%;object-fit:contain;
  transition:transform var(--t-slow) var(--ease-out);}
.pcard:hover .pcard-media img{transform:scale(1.05);}
.fav{position:absolute;top:12px;right:12px;width:32px;height:32px;
  border:none;background:transparent;color:var(--c-ink-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-pill);
  transition:transform var(--t-fast) var(--spring),color var(--t) var(--ease);}
.fav:hover{transform:scale(1.14);color:var(--c-ink);}
.fav:active{transform:scale(.9);}
.fav.on{color:var(--c-bad);}
.pcard-body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);}
.pcard-name{font-size:var(--fs-sm);font-weight:800;letter-spacing:.02em;
  color:var(--c-ink);margin:0;text-transform:uppercase;}
.pcard-price{font-size:var(--fs-xs);color:var(--c-ink-3);margin:0;
  text-transform:uppercase;letter-spacing:.04em;}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════════════════════════════ */
.acc-item{border-bottom:1px solid var(--c-line);}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding:22px 4px;background:none;border:none;cursor:pointer;
  font-family:var(--font);font-size:1.02rem;font-weight:500;color:var(--c-ink);
  text-align:left;transition:color var(--t) var(--ease);}
.acc-btn:hover{color:var(--c-accent);}
.acc-ico{flex:0 0 auto;width:18px;height:18px;position:relative;
  transition:transform var(--t-slow) var(--ease-out);}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;
  background:currentColor;border-radius:2px;transition:opacity var(--t) var(--ease);}
.acc-ico::before{top:8px;left:0;width:18px;height:2px;}
.acc-ico::after{left:8px;top:0;width:2px;height:18px;}
.acc-btn[aria-expanded="true"] .acc-ico{transform:rotate(135deg);}
.acc-btn[aria-expanded="true"] .acc-ico::after{opacity:0;}
.acc-panel{overflow:hidden;max-height:0;opacity:0;
  transition:max-height var(--t-slow) var(--ease-out),opacity var(--t) var(--ease);}
.acc-panel.open{opacity:1;}
.acc-body{padding:0 4px 24px;color:var(--c-ink-2);font-size:var(--fs-sm);}

/* ═══════════════════════════════════════════════════════════════════════════
   TRUST BAR · STATS
   ═══════════════════════════════════════════════════════════════════════ */

.stats{display:flex;}
.stat{flex:1;padding:0 var(--s4);border-left:1px solid var(--c-line);}
.stat:first-child{border-left:none;padding-left:0;}
.stat b{display:block;font-size:1.7rem;font-weight:800;color:var(--c-accent);
  line-height:1.05;letter-spacing:-.02em;}
.stat span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-ink-3);margin-top:5px;}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER  ·  black in both themes, exactly as designed
   ═══════════════════════════════════════════════════════════════════════ */
.foot{background:var(--c-foot,#0C0C0C);color:#FFFFFF;padding:var(--s8) 0 var(--s5);}
.foot a{color:#CFCFCF;}
.foot a:hover{color:#FFFFFF;}
.foot-h{font-size:var(--fs-xs);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#FFFFFF;margin:0 0 var(--s3);}
.foot-fine{font-size:.68rem;line-height:1.7;color:#8A8A8A;text-align:center;margin:0 0 10px;}
.soc{width:40px;height:40px;border-radius:var(--r-sm);display:inline-flex;
  align-items:center;justify-content:center;background:#1F1F1F;color:#FFFFFF;
  transition:background var(--t) var(--ease),transform var(--t-fast) var(--spring);}
.soc:hover{background:#333333;transform:translateY(-2px);}
.soc:active{transform:scale(.92);}

/* ═══════════════════════════════════════════════════════════════════════════
   GRID HELPERS · ENTRANCE
   ═══════════════════════════════════════════════════════════════════════ */
.grid{display:grid;gap:var(--s5);}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}

@keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.rise{animation:rise var(--t-slow) var(--ease-out) both;}
.d1{animation-delay:70ms;} .d2{animation-delay:140ms;}
.d3{animation-delay:210ms;} .d4{animation-delay:280ms;}

/* ═══════════════════════════════════════════════════════════════════════════
   RESEARCHER GATE  ·  canonical, lives in main.js as vp-agegate.
   There is exactly ONE gate on this site. Never add a second.
   ═══════════════════════════════════════════════════════════════════════ */
.vp-agegate-card{border:1px solid var(--c-line);}
.vp-agegate-eyebrow{font-size:var(--fs-eyebrow)!important;font-weight:800!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent!important;}
.vp-agegate-title{color:var(--c-ink)!important;letter-spacing:-.02em;}
.vp-agegate-lede,.vp-agegate-check span{color:var(--c-ink-2)!important;}
.vp-agegate-fine{color:var(--c-ink-3)!important;}
.vp-agegate-check{background:var(--c-card)!important;border:1px solid var(--c-line)!important;
  border-radius:var(--r-md)!important;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease);}
.vp-agegate-check:hover{border-color:var(--c-ink-3)!important;background:var(--c-panel)!important;}
.vp-agegate-btn{border-radius:var(--r-sm)!important;font-weight:700!important;
  transition:transform var(--t-fast) var(--spring),box-shadow var(--t) var(--ease),
             filter var(--t) var(--ease)!important;}
.vp-agegate-btn:active{transform:scale(.975);}
.vp-agegate-btn-primary:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.07);}
.vp-agegate-btn-decline{background:var(--c-card)!important;color:var(--c-ink)!important;
  border:1px solid var(--c-line-2)!important;}
.vp-agegate-btn-decline:hover{border-color:var(--c-ink)!important;transform:translateY(-1px);}
.vp-agegate-remember span{color:var(--c-ink-2)!important;}
.vp-agegate-theme-row{color:var(--c-ink-3)!important;}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY PAGE RETROFIT
   Pages not yet rebuilt onto the new markup still inherit the palette. These
   entries get deleted page by page as each one is rebuilt.
   ═══════════════════════════════════════════════════════════════════════ */
html.vp-dark body,html.vp-dark{background:var(--c-page);color:var(--c-ink);}
html.vp-dark .page-shell{background:var(--c-page)!important;}
html.vp-dark section[style]{background:transparent!important;}

/* Broken-image guard: never show raw alt text on a product tile. */
/* removed: this painted grey behind every transparent product PNG */

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNER PAGE
   Restyled in place. The dashboard, signature gate, earnings estimator and
   application flow are live JS, so the markup is preserved and only the
   presentation is mapped onto the design system.
   Built to 04-partner-a through 04-partner-f.
   ═══════════════════════════════════════════════════════════════════════ */
.pp-section{padding-block:var(--s9);}
.pp-section-tinted{background:var(--c-panel);border-radius:var(--r-xl);
  padding:var(--s7) var(--s6);}
.pp-eyebrow,.pp-eyebrow-grad{
  display:block;font-size:var(--fs-eyebrow)!important;font-weight:800!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;
  margin:0 0 var(--s3)!important;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent!important;}
.pp-h2{font-size:var(--fs-h1)!important;font-weight:700!important;
  letter-spacing:-.025em!important;color:var(--c-ink)!important;line-height:1.14!important;}
.pp-sub{color:var(--c-ink-2)!important;font-size:var(--fs-body)!important;line-height:1.65!important;}
.pp-strike-title{color:var(--c-ink)!important;}

/* Hero CTAs: gradient primary, hairline secondary. One gradient per screen. */
.pp-cta-primary{background:var(--grad)!important;color:#fff!important;border:none!important;
  border-radius:var(--r-sm)!important;padding:14px 26px!important;font-weight:700!important;
  box-shadow:0 4px 16px rgba(46,79,168,.26)!important;
  transition:transform var(--t-fast) var(--spring),filter var(--t) var(--ease),
             box-shadow var(--t) var(--ease)!important;}
.pp-cta-primary:hover{
  background:linear-gradient(#0C0C0C,#0C0C0C) padding-box,var(--grad-wave) border-box;
  background-size:auto,200% 100%;color:#fff;
  animation:vpRingIgnite .34s var(--ease-out),vpRingRun 1.9s linear .05s infinite;}
.pp-cta-primary:active{transform:scale(.975);}
.pp-cta-secondary{background:var(--c-card)!important;color:var(--c-ink)!important;
  border:1px solid var(--c-line-2)!important;border-radius:var(--r-sm)!important;
  padding:14px 26px!important;font-weight:700!important;
  transition:transform var(--t-fast) var(--spring),border-color var(--t) var(--ease)!important;}
.pp-cta-secondary:hover{border-color:var(--c-ink)!important;transform:translateY(-1px);}
.pp-cta-secondary:active{transform:scale(.975);}

/* Tier ladder stepper */
.pp-track{background:var(--c-line)!important;height:1px!important;}
.pp-tier{background:transparent!important;border:none!important;}
.pp-tier.is-active,.pp-tier[aria-selected="true"]{background:var(--c-card)!important;
  border:1px solid var(--c-accent)!important;border-radius:var(--r-md)!important;}
.pp-tier-dot{border:2px solid var(--c-line-2)!important;background:var(--c-card)!important;
  color:var(--c-ink-2)!important;font-weight:800!important;
  transition:transform var(--t) var(--spring),border-color var(--t) var(--ease)!important;}
.pp-tier:hover .pp-tier-dot{transform:translateY(-2px);}
.pp-tier-name{color:var(--c-ink)!important;font-weight:700!important;}
.pp-tier-thresh{color:var(--c-ink-3)!important;font-size:var(--fs-sm)!important;}
.pp-tier-detail{background:var(--c-card)!important;border:1px solid var(--c-line)!important;
  border-radius:var(--r-lg)!important;padding:var(--s5) var(--s6)!important;
  box-shadow:var(--sh-sm)!important;}
.pp-tier-detail-label{font-size:var(--fs-eyebrow)!important;font-weight:800!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--c-ink-3)!important;}
.pp-tier-rate-num{font-size:3rem!important;font-weight:800!important;letter-spacing:-.04em!important;line-height:1!important;margin:0!important;background:none!important;-webkit-text-fill-color:currentColor!important;}
.pp-tier-detail-perks li{color:var(--c-ink-2)!important;}

/* Three steps */
.pp-step{background:var(--c-card)!important;border:1px solid var(--c-line)!important;
  border-radius:var(--r-lg)!important;padding:var(--s6) var(--s5)!important;
  box-shadow:var(--sh-sm)!important;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease)!important;}
.pp-step:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)!important;}
.pp-step-num{font-size:1rem!important;font-weight:800!important;color:var(--c-accent)!important;
  letter-spacing:.06em!important;}
.pp-step-title{font-size:1.6rem!important;font-weight:700!important;color:var(--c-ink)!important;
  letter-spacing:-.02em!important;margin:var(--s5) 0 var(--s3)!important;}
.pp-step-body{color:var(--c-ink-2)!important;font-size:var(--fs-sm)!important;line-height:1.7!important;}

/* Audience cards */
.pp-audience-card{background:var(--c-card)!important;border:1px solid var(--c-line)!important;
  border-radius:var(--r-lg)!important;padding:var(--s5)!important;box-shadow:var(--sh-sm)!important;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease)!important;}
.pp-audience-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)!important;}
.pp-audience-icon{width:46px!important;height:46px!important;border-radius:var(--r-md)!important;
  background:var(--grad)!important;color:#fff!important;display:inline-flex!important;
  align-items:center!important;justify-content:center!important;}
.pp-audience-title{color:var(--c-ink)!important;font-weight:700!important;font-size:1.05rem!important;}
.pp-audience-body{color:var(--c-ink-2)!important;font-size:var(--fs-sm)!important;line-height:1.65!important;}

/* Proof badge row */
.pp-trust-grid{display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;gap:var(--s4)!important;}
.pp-trust-logo{background:var(--c-card)!important;border:1px solid var(--c-line)!important;
  border-radius:var(--r-md)!important;padding:26px 18px!important;text-align:center!important;
  color:var(--c-ink-2)!important;font-size:var(--fs-body)!important;box-shadow:var(--sh-sm)!important;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease)!important;}
.pp-trust-logo:hover{transform:translateY(-3px);box-shadow:var(--sh-md)!important;}

/* FAQ */
.pp-faq-item{border-bottom:1px solid var(--c-line)!important;background:transparent!important;}
.pp-faq-q{color:var(--c-ink)!important;font-weight:500!important;font-size:1.02rem!important;
  padding:22px 4px!important;transition:color var(--t) var(--ease)!important;}
.pp-faq-q:hover{color:var(--c-accent)!important;}
.pp-faq-a{color:var(--c-ink-2)!important;font-size:var(--fs-sm)!important;}
.pp-terms-scroll,.pp-terms-final{background:var(--c-panel)!important;
  border:1px solid var(--c-line)!important;border-radius:var(--r-md)!important;
  color:var(--c-ink-2)!important;}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL RETROFIT for pages not yet rebuilt onto new markup:
   account, login, signup, cart, checkout, order tracker, legal, policies,
   admin, 404. They inherit the palette, type, radii and motion.
   ═══════════════════════════════════════════════════════════════════════ */
.container,.page-wrap,.content-wrap{width:min(1280px,92vw);margin-inline:auto;}

h1:not([class]),h2:not([class]),h3:not([class]),h4:not([class]){
  color:var(--c-ink);letter-spacing:-.02em;}
p:not([class]),li:not([class]){color:var(--c-ink-2);}
small,.muted,.meta,.subtle{color:var(--c-ink-3);}

section,article,aside,main{background-color:transparent;}

.card,.panel,.box,.tile,.feature-card,.info-card,.stat-card,.order-card,
.account-card,.acct-card,.summary-card,.cart-item,.checkout-card,.tier-card,
.faq-item,.accordion-item,.policy-card{
  background:var(--c-card)!important;border:1px solid var(--c-line)!important;
  border-radius:var(--r-lg)!important;color:var(--c-ink);
  box-shadow:var(--sh-sm);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
             transform var(--t) var(--ease-out);}

table{border-color:var(--c-line);color:var(--c-ink);}
th{color:var(--c-ink);border-color:var(--c-line);}
td{color:var(--c-ink-2);border-color:var(--c-line);}
tr:hover td{background:var(--c-panel);}

.badge,.pill,.tag,.chip-static{background:var(--c-panel);color:var(--c-ink-2);
  border-radius:var(--r-pill);}

.tabs,.tab-bar{border-bottom:1px solid var(--c-line);}
.tab,.tab-btn{color:var(--c-ink-2);border:none;background:none;cursor:pointer;
  transition:color var(--t) var(--ease);}
.tab:hover,.tab-btn:hover{color:var(--c-ink);}
.tab.active,.tab-btn.active,.tab[aria-selected="true"]{color:var(--c-ink);font-weight:700;
  border-bottom:2px solid var(--c-ink);}

/* Legal and policy pages read as documents, so give them measure and rhythm. */
.legal-body,.policy-body,.terms-body{max-width:76ch;}
.legal-body h2,.policy-body h2{margin-top:var(--s7);}
.legal-body p,.policy-body p{color:var(--c-ink-2);line-height:1.75;}

/* Nothing anywhere may keep a hard white or hard black surface in dark mode. */
html.vp-dark [style*="background:#fff"],
html.vp-dark [style*="background: #fff"],
html.vp-dark [style*="background:#FFFFFF"],
html.vp-dark [style*="background:white"]{background:var(--c-card)!important;}
html.vp-dark [style*="color:#0C0C0C"],
html.vp-dark [style*="color:#151515"]{color:var(--c-ink)!important;}

/* ═══════════════════════════════════════════════════════════════════════════
   SITE CHROME  ·  header, mobile nav, footer
   MUST live here, never in a page's inline <style>. These components are
   injected into every page by components.js, so their CSS has to be global.
   ═══════════════════════════════════════════════════════════════════════ */
.hdr{position:sticky;top:0;z-index:60;background:var(--c-page);
  border-bottom:1px solid var(--c-line);
  transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease);}
.hdr-logo{flex:0 0 auto;display:block;}
.hdr-logo img,.brand-logo{height:38px!important;width:auto!important;max-width:none;display:block;}
.hdr-nav{display:flex;align-items:center;gap:var(--s5);}
.hdr-nav a{font-size:.94rem;font-weight:500;color:var(--c-ink);position:relative;
  padding:4px 0;white-space:nowrap;}
.hdr-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--c-ink);transition:right var(--t) var(--ease-out);}
.hdr-nav a:hover::after,.hdr-nav a[aria-current]::after{right:0;}
.hdr-nav a[aria-current]{font-weight:700;}
.hdr-search{flex:1;max-width:420px;margin-left:auto;}
.hdr-act{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto;}
.icon-btn{width:40px;height:40px;border-radius:var(--r-pill);border:none;
  background:transparent;color:var(--c-ink);cursor:pointer;position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--t) var(--ease),transform var(--t-fast) var(--spring);}
.icon-btn:hover{background:var(--c-panel);}
.icon-btn:active{transform:scale(.92);}
.cart-n{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--c-accent);color:#fff;font-size:.62rem;
  font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;}

/* ── MOBILE DRAWER · slides in from the left; burger animates to an X ──── */
.mnav-scrim{position:fixed;inset:0;background:rgba(12,12,12,.42);z-index:1050;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s;}
.mnav-scrim.open{opacity:1;visibility:visible;transition:opacity .3s var(--ease);}
.mnav-drawer{position:fixed;top:0;bottom:0;left:0;width:min(82vw,320px);
  background:var(--c-page);z-index:1060;display:flex;flex-direction:column;
  padding:84px var(--s6) var(--s7);box-shadow:var(--sh-lg);
  transform:translateX(-103%);visibility:hidden;
  transition:transform .38s var(--ease-out),visibility 0s .38s;}
.mnav-drawer.open{transform:translateX(0);visibility:visible;
  transition:transform .38s var(--ease-out);}
.mnav-drawer a{padding:13px 14px;font-weight:600;font-size:1.05rem;color:var(--c-ink);
  border-radius:10px;text-decoration:none;margin:2px 0;
  transition:background .2s var(--ease),transform .15s var(--ease);}
.mnav-drawer a:hover{background:var(--c-panel);}
.mnav-drawer a:active{background:var(--c-panel);transform:scale(.985);}
.mnav-sep{height:1px;background:var(--c-line-2);margin:var(--s4) 0;border:0;flex:0 0 auto;}
.mnav-drawer a.mnav-sub{font-size:.9rem;font-weight:500;color:var(--c-ink-2);}
html.mnav-lock,html.mnav-lock body{overflow:hidden;}
html.mnav-lock .hdr{z-index:1071!important;}
.hdr-burger{position:relative;z-index:1070;}
.hdr-burger .hb{position:absolute;left:11px;width:18px;height:2px;border-radius:2px;
  background:currentColor;transition:transform .3s var(--ease),opacity .18s var(--ease);}
.hdr-burger .hb:nth-child(1){top:14px;}
.hdr-burger .hb:nth-child(2){top:19px;}
.hdr-burger .hb:nth-child(3){top:24px;}
.hdr-burger.x .hb:nth-child(1){transform:translateY(5px) rotate(45deg);}
.hdr-burger.x .hb:nth-child(2){opacity:0;}
.hdr-burger.x .hb:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
@media(min-width:1081px){.mnav-drawer,.mnav-scrim{display:none;}}
@media (prefers-reduced-motion:reduce){
  .mnav-drawer,.mnav-scrim,.hdr-burger .hb{transition:none;}}

.hdr-burger{display:none;}
@media(max-width:1080px){
  .hdr-nav,.hdr-search{display:none;}
  .hdr-burger{display:inline-flex;}
  .hdr-in{gap:var(--s4);justify-content:space-between;}
  .hdr-act{margin-left:auto;}
}

.foot{background:var(--c-foot,#0C0C0C);color:#FFFFFF;padding:var(--s8) 0 var(--s5);margin-top:var(--s9);}
.foot a{color:#CFCFCF;}
.foot a:hover{color:#FFFFFF;}
.foot-h{font-size:var(--fs-xs);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#FFFFFF;margin:0 0 var(--s3);}
.foot-fine{font-size:.68rem;line-height:1.7;color:#8A8A8A;text-align:center;margin:0 0 10px;}
.foot-top{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));
  gap:var(--s6);padding-bottom:var(--s6);}
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.foot-links a{font-size:.9rem;}
.foot-hr{height:1px;background:#242424;border:none;margin:0 0 var(--s5);}
.soc{width:40px;height:40px;border-radius:var(--r-sm);display:inline-flex;
  align-items:center;justify-content:center;background:#1F1F1F;color:#FFFFFF;
  transition:background var(--t) var(--ease),transform var(--t-fast) var(--spring);}
.soc:hover{background:#333333;transform:translateY(-2px);}
.soc:active{transform:scale(.92);}
@media(max-width:860px){.foot-top{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT CARD  ·  corrected
   The image well is WHITE, not grey. Grey was my error: in Carina's shop the
   vial sits on white and only the card edge is a hairline.
   Four across on desktop, never five.
   ═══════════════════════════════════════════════════════════════════════ */
.shop-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:var(--s5)!important;align-items:start;}

@media(max-width:860px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:520px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--s3)!important;}}

.pcard{position:relative;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;height:100%;}
.pcard-media{background:var(--c-card)!important;aspect-ratio:1/1;display:flex;
  align-items:center;justify-content:center;overflow:hidden;padding:var(--s3);}
.pcard-media img{width:100%!important;height:100%!important;object-fit:contain;}
.pcard-body{padding:var(--s4);display:flex;flex-direction:column;gap:7px;
  border-top:1px solid var(--c-line);flex:1;}
.pcard-name{font-size:.9rem;font-weight:800;letter-spacing:.01em;text-transform:uppercase;
  color:var(--c-ink);margin:0;}
.pcard-size{font-size:var(--fs-xs);color:var(--c-ink-3);margin:0;text-transform:none;}
.pcard-price{font-size:.98rem;font-weight:700;color:var(--c-ink);margin:2px 0 auto;
  text-transform:none;letter-spacing:0;}
.pcard-price del{color:var(--c-ink-4);font-weight:500;font-size:.85em;margin-right:7px;}
.pcard-price .sale{color:var(--c-bad);font-weight:800;}
.pcard-body .btn{margin-top:var(--s3);}

/* Badges: theme-matched, not the old red/blue. */
.pbadge{position:absolute;top:12px;left:12px;z-index:3;padding:6px 13px;
  border-radius:var(--r-pill);font-size:.6rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.16);}
.pbadge.best{background:var(--grad);}
.pbadge.blend{background:var(--c-solid);color:var(--c-solid-ink);}
.pbadge.sale{background:var(--c-bad);left:auto;right:12px;top:auto;bottom:12px;}
.pcard .fav{position:absolute;top:10px;right:10px;z-index:3;width:32px;height:32px;
  border:none;background:transparent;color:var(--c-ink-3);cursor:pointer;
  border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;
  transition:transform var(--t-fast) var(--spring),color var(--t) var(--ease);}
.pcard .fav:hover{transform:scale(1.14);color:var(--c-ink);}
.pcard .fav.on{color:var(--c-accent);}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:transparent;}
.pcard:hover .pcard-media img{transform:scale(1.05);}

/* Featured row on the homepage uses the same white well. */
.feat-media{background:var(--c-card)!important;border:1px solid var(--c-line);}
.feat-media img{width:88%!important;}

/* Trust bar icons were nearly invisible: give the tile a real fill. */
.trust .tile,.trust-icon{background:var(--c-panel)!important;color:var(--c-ink)!important;}
.trust-i svg,.trust .tile svg{stroke:var(--c-ink);opacity:.85;}

/* Active testing tab: the icon was white-on-white. Force contrast. */
.tile.on{background:var(--grad-wave)!important;background-size:200% 100%!important;
  background-position:calc(var(--vp-pan,0) * 1%) 50%!important;color:#fff!important;}
.tile.on svg{stroke:#fff!important;}
.tile svg{stroke:currentColor;}

/* Hero headline: keep it to the intended line breaks. */
.hero-main h1{max-width:14ch;}
.hero-side img{max-width:100%!important;width:100%!important;}

/* The product PNGs ship with a grey matte baked in. Scale past the frame so
   the matte is cropped rather than framing every card in grey. */
.pcard-media,.feat-media,.pdp-main,.coa-media{overflow:hidden;}
.pcard-media img{transition:transform var(--t-slow) var(--ease-out);}
.pcard:hover .pcard-media img{transform:scale(1.05);}

.feat-card:hover .feat-media img{transform:scale(1.05);}

.pdp-main:hover img{transform:scale(1.05);}


.coa-card:hover .coa-media img{transform:scale(1.05);}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO  ·  corrected against 01-home-a
   The headline is two lines, not five. Copy column needs the width.
   ═══════════════════════════════════════════════════════════════════════ */
.hero{grid-template-columns:minmax(0,3fr) minmax(0,1fr)!important;}
.hero-main{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important;
  gap:var(--s6)!important;}
.hero-main h1{max-width:none!important;font-size:clamp(1.9rem,3.1vw,2.9rem)!important;
  line-height:1.07!important;}
.hero-sub{max-width:32ch!important;}
.hero-vials img{max-width:none!important;width:100%!important;
  }

.hero-side{padding:var(--s4)!important;}
.hero-side img{width:100%!important;max-width:none!important;}
@media(max-width:1240px){.hero-main h1{font-size:clamp(1.7rem,3.4vw,2.3rem)!important;}}

/* Trust bar icons were washing out. Fill the tile and darken the stroke. */
.trust .tile svg{stroke:var(--c-ink)!important;opacity:1!important;stroke-width:1.8;}

/* Featured product cards: white well, matching the shop. */
.feat-media{background:var(--c-card)!important;}
.feat-media img{}

.pcard-media img{}
.pdp-main img,.pdp-thumb img,.coa-media img{}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE  ·  measured, not guessed
   Verified with a 390px viewport and a horizontal-overflow assertion.
   ═══════════════════════════════════════════════════════════════════════ */
html,body{overflow-x:hidden;max-width:100%;}
img,svg,video{max-width:100%;height:auto;}

@media(max-width:760px){
  .wrap{width:min(1280px,94vw);}
  .hero{grid-template-columns:1fr!important;margin-top:var(--s4);}
  .hero-main{grid-template-columns:1fr!important;padding:var(--s5) var(--s4)!important;
    gap:var(--s4)!important;}
  .hero-main h1{font-size:clamp(1.6rem,7.6vw,2.1rem)!important;}
  .hero-vials{order:2;margin-top:var(--s2);}
  .hero-vials img{width:58%!important;margin-inline:auto;}
  .hero-side{display:none!important;}
  .trust-wrap{width:94vw;margin-top:var(--s4);}
  .trust{flex-direction:column;gap:var(--s4);padding:var(--s4)!important;}
  .trust-i{flex:1 1 auto;}
  .sec{padding-block:var(--s7);}
  .sec-head{flex-direction:column;align-items:flex-start;gap:var(--s3);}
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--s3)!important;}
  .proof,.coa-split,.ct-top,.news{grid-template-columns:1fr!important;}
  .proof-media{min-height:220px;}
  .proof-cta{position:static;margin-top:var(--s4);}
  .stats{flex-direction:column;gap:var(--s4);}
  .stat{border-left:none;border-top:1px solid var(--c-line);padding:var(--s3) 0 0;}
  .stat:first-child{border-top:none;}
  .bento{grid-template-columns:1fr!important;}
  .bento-tall{grid-column:auto!important;grid-row:auto!important;min-height:200px;}
  .close-band{padding:var(--s7) 0;}
  .close-vial{display:none;}
  .news-form{flex-wrap:wrap;border-radius:var(--r-lg);padding:var(--s3);}
  .news-form input{flex:1 1 100%;padding:10px 8px;}
  .news-form .btn{flex:1 1 100%;}
  .pdp{grid-template-columns:1fr!important;gap:var(--s5)!important;}
  .pdp-gallery{grid-template-columns:1fr!important;}
  .pdp-thumbs{flex-direction:row!important;order:2;overflow-x:auto;padding-bottom:4px;}
  .pdp-bundles{grid-template-columns:1fr 1fr!important;}
  .pdp-info{grid-template-columns:1fr!important;}
  .pdp-related{grid-template-columns:1fr 1fr!important;}
  .pdp-actions,.pdp-sub-row{flex-direction:column;}
  .pdp-actions .btn,.pdp-sub-row .btn{width:100%;}
  .pdp-assure{gap:var(--s3);}
  .pdp-title{font-size:1.9rem!important;}
  .shop-tools{flex-direction:column;}
  .shop-sort{width:100%;}
  .mb-tiers{grid-template-columns:1fr!important;}
  .ct-tips{grid-template-columns:1fr!important;}
  .test-body{padding:var(--s4)!important;}
  .test{padding:var(--s5) var(--s4)!important;}
  .foot-top{grid-template-columns:1fr 1fr;}
}
@media(max-width:420px){
  .pcard-name{font-size:.78rem;}
  .pcard-price{font-size:.86rem;}
  .pbadge{font-size:.52rem;padding:5px 9px;top:8px;left:8px;}
  .pdp-related{grid-template-columns:1fr!important;}
  .foot-top{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SALE STATE  ·  restored
   Driven by product_settings.sale_pct in Supabase, same source as before.
   ═══════════════════════════════════════════════════════════════════════ */
.price-was{color:var(--c-ink-4);font-weight:500;text-decoration:line-through;
  margin-left:10px;font-size:.8em;}
.price-now{color:var(--c-bad);font-weight:800;}
.pdp-sale-tag{display:inline-flex;align-items:center;padding:7px 14px;
  border-radius:var(--r-sm);background:var(--c-bad);color:#fff;font-size:.72rem;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-left:14px;
  vertical-align:middle;}

/* Sale tag belongs on the image, top-right under the heart, not over the CTA. */
.pbadge.sale{top:46px!important;right:10px!important;left:auto!important;bottom:auto!important;
  background:var(--c-bad)!important;}
@media(max-width:420px){.pbadge.sale{top:40px!important;right:8px!important;}}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON INVERSION  ·  sitewide
   Rest state is filled. Hover and press invert to the opposite fill.
   The gradient CTA is exempt: it inverts to a gradient-outlined white button
   rather than losing its identity.
   ═══════════════════════════════════════════════════════════════════════ */
.btn-solid,.btn-chip,.pcard-body .btn,.pdp-related .btn,
.coa-body .btn,.btn.btn-solid{
  background:var(--c-solid);color:var(--c-solid-ink);
  border:1.5px solid var(--c-solid);
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease),transform var(--t-fast) var(--spring),
             box-shadow var(--t) var(--ease);}
.btn-solid:hover,.btn-chip:hover,.pcard-body .btn:hover,
.pdp-related .btn:hover,.coa-body .btn:hover{
  background:transparent;color:var(--c-ink);border-color:var(--c-ink);
  transform:translateY(-1px);box-shadow:var(--sh-md);}
.btn-solid:active,.btn-chip:active,.pcard-body .btn:active{
  background:var(--c-ink);color:var(--c-solid-ink);transform:scale(.975);}

/* Ghost inverts the other way: outline at rest, filled on hover. */
.btn-ghost,.pp-cta-secondary,.btn-secondary,.cta-secondary{
  background:transparent!important;color:var(--c-ink)!important;
  border:1.5px solid var(--c-line-2)!important;}
.btn-ghost:hover,.pp-cta-secondary:hover,.btn-secondary:hover,.cta-secondary:hover{
  background:var(--c-solid)!important;color:var(--c-solid-ink)!important;
  border-color:var(--c-solid)!important;transform:translateY(-1px);}

/* Gradient primary keeps its fill but inverts to a gradient outline. */
.btn-primary,.pp-cta-primary,.cta-primary{
  border:1.5px solid transparent;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             filter var(--t) var(--ease),transform var(--t-fast) var(--spring),
             box-shadow var(--t) var(--ease);}
.btn-primary:hover,.pp-cta-primary:hover,.cta-primary:hover{background:#0C0C0C!important;color:#fff!important;}
.btn-primary:active,.pp-cta-primary:active{transform:scale(.975);}

/* Chips invert too, so selection reads instantly. */
.chip{background:var(--c-card);color:var(--c-ink);border:1.5px solid var(--c-line-2);}
.chip:hover:not(.on){background:var(--c-solid);color:var(--c-solid-ink);
  border-color:var(--c-solid);}
.chip.on{background:var(--c-solid);border-color:var(--c-solid);color:var(--c-solid-ink);}
.chip.on:hover{background:transparent;color:var(--c-ink);border-color:var(--c-ink);}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY HEADER  ·  and a larger wordmark that does NOT grow the bar
   ═══════════════════════════════════════════════════════════════════════ */
.hdr{position:sticky!important;top:0!important;z-index:200!important;
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  background:color-mix(in srgb,var(--c-page) 88%,transparent);}
@supports not (backdrop-filter:blur(1px)){.hdr{background:var(--c-page);}}
/* Wordmark scales up and overflows the bar height without pushing it taller. */
.hdr-logo{display:flex;align-items:center;height:44px;overflow:visible;}
.hdr-logo img,.brand-logo{height:62px!important;width:auto!important;
  margin:-9px 0!important;transform-origin:left center;
  transition:transform var(--t) var(--spring);}
.hdr-logo:hover img{transform:scale(1.04);}
@media(max-width:1080px){.hdr-logo img,.brand-logo{height:52px!important;margin:-6px 0!important;}}
.hdr.is-stuck{box-shadow:0 1px 0 var(--c-line),0 6px 24px rgba(0,0,0,.06);}
html.vp-dark .hdr.is-stuck{box-shadow:0 1px 0 var(--c-line),0 6px 24px rgba(0,0,0,.5);}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY TOKEN ALIASES
   Roughly 1,100 references to the old --vp-* names survive in page-level CSS
   that has not been rebuilt yet (partner estimator, tier ladder, admin,
   account, cart). Undefined custom properties resolve to nothing, which is
   why those components rendered with dead black boxes and invisible sliders.
   Aliasing them here makes every legacy component inherit the new palette,
   in both themes, without touching a single page.
   Delete an alias only when its last consumer is rebuilt.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --vp-navy:var(--c-ink);
  --vp-ink:var(--c-ink);
  --vp-ink-2:var(--c-ink-2);
  --vp-ink-3:var(--c-ink-3);
  --vp-ink-4:var(--c-ink-4);
  --vp-card:var(--c-card);
  --vp-card-hover:var(--c-panel);
  --vp-bg:var(--c-page);
  --vp-surface:var(--c-panel);
  --vp-surface-2:var(--c-panel-2);
  --vp-well:var(--c-well);
  --vp-line:var(--c-line);
  --vp-line-strong:var(--c-line-2);
  --vp-accent:var(--c-accent);
  --vp-accent-soft:var(--c-accent-soft);
  --vp-focus:var(--c-focus);
  --vp-solid:var(--c-solid);
  --vp-solid-ink:var(--c-solid-ink);
  --vp-violet:#6241C2;
  --vp-indigo:#2E4FA8;
  --vp-teal:#0C8CCE;
  --vp-success:var(--c-ok);
  --vp-warn:var(--c-warn);
  --vp-danger:var(--c-bad);
  --vp-gradient:var(--grad);
  --vp-gradient-hover:var(--grad-hover);
  --vp-gradient-compressed:var(--grad);
  --vp-gradient-text:var(--grad);
  --vp-grad:var(--grad);
  --vp-grad-hover:var(--grad-hover);
  --vp-grad-text:var(--grad);
  --vp-grad-hairline:var(--grad);
  --vp-white:#FFFFFF;
  --vp-muted:var(--c-ink-3);
  --vp-t:var(--t);
  --vp-t-fast:var(--t-fast);
  --vp-t-slow:var(--t-slow);
  --vp-ease:var(--ease);
  --vp-ease-out:var(--ease-out);
  --vp-spring:var(--spring);
  --vp-r-xs:var(--r-xs); --vp-r-sm:var(--r-sm); --vp-r-md:var(--r-md);
  --vp-r-lg:var(--r-lg); --vp-r-xl:var(--r-xl); --vp-r-pill:var(--r-pill);
  --vp-sh-xs:var(--sh-xs); --vp-sh-sm:var(--sh-sm); --vp-sh-md:var(--sh-md);
  --vp-sh-lg:var(--sh-lg); --vp-sh-brand:var(--sh-md);
  --vp-s1:var(--s1); --vp-s2:var(--s2); --vp-s3:var(--s3); --vp-s4:var(--s4);
  --vp-s5:var(--s5); --vp-s6:var(--s6); --vp-s7:var(--s7); --vp-s8:var(--s8);
  --vp-s9:var(--s9); --vp-s10:var(--s10);
  --vp-font:var(--font);
  --vp-fs-body:var(--fs-body); --vp-fs-sm:var(--fs-sm); --vp-fs-xs:var(--fs-xs);
  --vp-fs-eyebrow:var(--fs-eyebrow);
  /* older still */
  --bg:var(--c-page); --ink:var(--c-ink); --muted:var(--c-ink-3);
  --line:var(--c-line); --card:var(--c-card); --panel:var(--c-panel);
  --accent:var(--c-accent); --radius:var(--r-md);
  --shadow:var(--sh-md); --shadow-lg:var(--sh-lg);
  --btn-primary-bg:var(--grad); --btn-primary-hover:var(--grad-hover);
  --btn-secondary-border:var(--c-line-2);
}

/* Partner tier ladder: the dot lost its fill and read as a black box. */
.pp-tier-dot{background:var(--c-panel)!important;color:var(--c-ink)!important;
  border:2px solid var(--c-line-2)!important;box-shadow:none!important;}
.pp-tier-dot.has-img{background:transparent!important;border:0!important;}
.pp-tier-active .pp-tier-dot{border-color:var(--c-accent)!important;
  box-shadow:0 0 0 5px var(--c-accent-soft)!important;}
.pp-tier-bronze{background:#B07B3A!important;color:#fff!important;border-color:#B07B3A!important;}
.pp-tier-silver{background:#9AA0A6!important;color:#fff!important;border-color:#9AA0A6!important;}
.pp-tier-gold{background:#C8902A!important;color:#fff!important;border-color:#C8902A!important;}
.pp-tier-platinum{background:#4FA9CF!important;color:#fff!important;border-color:#4FA9CF!important;}
.pp-tier-diamond{background:#5B5FC7!important;color:#fff!important;border-color:#5B5FC7!important;}

/* Estimator slider: the track was resolving to nothing, so it read as a dead
   black line. Rebuilt on tokens for both themes. */
.pp-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;
  border-radius:var(--r-pill);background:var(--c-line)!important;outline:none;}
.pp-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:24px;height:24px;border-radius:50%;cursor:pointer;
  background:var(--grad)!important;border:3px solid var(--c-card)!important;
  box-shadow:var(--sh-md)!important;
  transition:transform var(--t-fast) var(--spring);}
.pp-slider::-webkit-slider-thumb:active{transform:scale(1.15);}
.pp-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;cursor:pointer;
  background:var(--grad)!important;border:3px solid var(--c-card)!important;
  box-shadow:var(--sh-md)!important;}
.pp-slider-scale{color:var(--c-ink-3)!important;}

/* Payout schedule bubble followed a dead colour. */
.pp-payout-schedule{background:var(--c-panel)!important;
  border:1px solid var(--c-line)!important;border-radius:var(--r-md)!important;
  color:var(--c-ink)!important;}
.pp-payout-schedule .pp-ps-label{color:var(--c-ink-3)!important;}
.pp-payout-schedule .pp-ps-list{color:var(--c-ink-2)!important;}

/* Tested At Every Step: breathing room above the tab strip, per 01-home-d. */
.test-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:0 22px;
  max-width:880px;margin:0 auto var(--s6);}
.test h2{margin-bottom:0;}

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP  ·  sidebar categories + icon sort menu, per your reference
   ═══════════════════════════════════════════════════════════════════════ */
.shop-layout{display:grid;grid-template-columns:230px minmax(0,1fr);
  gap:var(--s6);align-items:start;}
@media(max-width:980px){.shop-layout{grid-template-columns:1fr;}}
.shop-side{position:sticky;top:96px;}
@media(max-width:980px){.shop-side{position:static;}}
.shop-side-h{display:flex;align-items:center;gap:11px;width:100%;
  padding:14px 18px;border:none;background:transparent;cursor:pointer;
  font-family:var(--font);font-size:.82rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--c-ink);
  transition:color var(--t) var(--ease);}
.shop-side-h svg{transition:transform var(--t) var(--ease-out);}
.shop-side-h[aria-expanded="false"] svg{transform:rotate(-90deg);}
.shop-cats{display:none;flex-direction:column;gap:2px;
  background:var(--c-panel);border-radius:var(--r-md);padding:10px;}
.shop-cats.open{display:flex;}
.shop-cat{text-align:left;padding:11px 15px;border:1.5px solid transparent;
  border-radius:var(--r-sm);background:transparent;color:var(--c-ink-2);
  font-family:var(--font);font-size:.92rem;font-weight:500;cursor:pointer;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease),transform var(--t-fast) var(--spring);}
.shop-cat:hover{color:var(--c-ink);background:var(--c-card);}
.shop-cat:active{transform:scale(.98);}
.shop-cat.on{color:var(--c-ink);font-weight:700;background:var(--c-card);
  border-color:var(--c-accent);}
.shop-cat-rule{height:1px;background:var(--c-line);margin:7px 6px;}

.shop-sortwrap{position:relative;}
.shop-sortbtn{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-width:190px;padding:13px 18px;border:1px solid var(--c-line-2);
  border-radius:var(--r-sm);background:var(--c-card);color:var(--c-ink);
  font-family:var(--font);font-size:var(--fs-body);font-weight:500;cursor:pointer;
  transition:border-color var(--t) var(--ease),transform var(--t-fast) var(--spring);}
.shop-sortbtn:hover{border-color:var(--c-ink);}
.shop-sortbtn:active{transform:scale(.98);}
.shop-sortbtn svg{transition:transform var(--t) var(--ease-out);}
.shop-sortbtn[aria-expanded="true"] svg{transform:rotate(180deg);}
.shop-sortmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:250px;z-index:50;
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:8px;display:none;flex-direction:column;gap:2px;}
.shop-sortmenu.open{display:flex;animation:rise var(--t) var(--ease-out) both;}
.shop-sortmenu button{display:flex;align-items:center;gap:14px;width:100%;
  padding:13px 15px;border:none;border-radius:var(--r-sm);background:transparent;
  color:var(--c-ink-2);font-family:var(--font);font-size:.94rem;font-weight:500;
  cursor:pointer;text-align:left;
  transition:background var(--t) var(--ease),color var(--t) var(--ease);}
.shop-sortmenu button svg{flex:0 0 17px;color:var(--c-ink-3);}
.shop-sortmenu button:hover{background:var(--c-panel);color:var(--c-ink);}
.shop-sortmenu button.on{background:var(--c-panel);color:var(--c-ink);font-weight:700;}
.shop-sortmenu button.on svg{color:var(--c-accent);}
.shop-tools{align-items:stretch;}
@media(max-width:760px){
  .shop-sortwrap,.shop-sortbtn{width:100%;}
  .shop-sortmenu{left:0;right:0;min-width:0;}
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL  ·  restored from v25
   Sections fade up as they enter the viewport. Same curve and duration as
   before so the site feels the way it used to.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
}
/* Chrome must never animate in. */
.hdr .reveal,.foot .reveal,.hdr,.foot{opacity:1!important;transform:none!important;}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON INVERSION  ·  CORRECTED
   Rest state matches the page. Light mode gives a LIGHT button; hover flips
   it dark with white text. Dark mode gives a DARK button; hover flips light.
   ═══════════════════════════════════════════════════════════════════════ */
.btn-solid,.btn-chip,.pcard-body .btn,.pdp-related .btn,.coa-body .btn,
.shop-grid .btn,.feat-card .btn{color:var(--c-ink)!important;border:2px solid var(--c-line-2)!important;
  background:var(--c-card)!important;
  transition:color var(--t) var(--ease),transform var(--t-fast) var(--spring),box-shadow var(--t) var(--ease);}
.btn-solid:hover,.btn-chip:hover,.pcard-body .btn:hover,.pdp-related .btn:hover,
.coa-body .btn:hover,.shop-grid .btn:hover,.feat-card .btn:hover{background:#0C0C0C!important;color:#fff!important;}
.btn-solid:active,.pcard-body .btn:active,.feat-card .btn:active{transform:scale(.975);}

.btn-ghost,.pp-cta-secondary,.btn-secondary,.cta-secondary{
  background:var(--c-card)!important;color:var(--c-ink)!important;
  border:1.5px solid var(--c-line-2)!important;}
.btn-ghost:hover,.pp-cta-secondary:hover,.btn-secondary:hover,.cta-secondary:hover{
  background:var(--c-ink)!important;color:var(--c-page)!important;
  border-color:var(--c-ink)!important;transform:translateY(-1px);}

/* Gradient CTA: solid fill at rest, on hover it goes dark with white text and
   keeps a gradient ring, matching the Add to Cart treatment. */
.btn-primary,.pp-cta-primary,.cta-primary{
  border:2px solid transparent!important;
  background-clip:padding-box!important;
  box-shadow:0 4px 16px rgba(46,79,168,.24)!important;}
.btn-primary:hover,.pp-cta-primary:hover,.cta-primary:hover{background:#0C0C0C!important;color:#fff!important;}

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP  ·  bigger cards, corrected controls
   ═══════════════════════════════════════════════════════════════════════ */
.shop-title{font-size:clamp(1.5rem,2.4vw,1.9rem)!important;font-weight:500;
  letter-spacing:-.03em;margin:0 0 6px;}
.shop-head{padding:var(--s5) 0 var(--s4)!important;}

.shop-grid{display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:var(--s5)!important;}

@media(max-width:560px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--s3)!important;}}
.pcard-body{gap:8px;padding:var(--s5)!important;}
.pcard-name{font-size:1.02rem!important;}
.pcard-size{font-size:.84rem!important;}
.pcard-price{font-size:1.12rem!important;font-weight:800!important;}
.pcard-price .price-now{color:var(--c-bad);}
.pcard-body .btn{padding:14px 20px!important;font-size:.95rem!important;}

/* Badges: neither is a gradient. Both read as solid brand chips. */
.pbadge.best{background:var(--c-accent)!important;color:#fff!important;}
.pbadge.blend{background:var(--c-solid)!important;color:var(--c-solid-ink)!important;}
html.vp-dark .pbadge.blend{background:#FFFFFF!important;color:#151515!important;}
.pbadge.sale{top:auto!important;bottom:12px!important;right:12px!important;left:auto!important;
  background:var(--c-bad)!important;color:#fff!important;}

/* Fine categories, always on, directly beneath search. */
.fine-cats{display:flex;flex-wrap:wrap;gap:10px;margin:var(--s4) 0 var(--s4);}
.fine-cat{font-size:.86rem;padding:9px 18px;}

/* Broad groups as an OVERLAY so the grid never shifts. */
.shop-groupwrap{position:relative;display:inline-block;}
.shop-groupbtn{display:inline-flex;align-items:center;gap:11px;padding:12px 20px;
  border:1px solid var(--c-line-2);border-radius:var(--r-sm);background:var(--c-card);
  color:var(--c-ink);font-family:var(--font);font-size:14.4px;font-weight:500;
  letter-spacing:0;text-transform:none;cursor:pointer;
  transition:border-color var(--t) var(--ease),transform var(--t-fast) var(--spring);}
.shop-groupbtn:hover{border-color:var(--c-ink);}
.shop-groupbtn svg{transition:transform var(--t) var(--ease-out);}
.shop-groupbtn[aria-expanded="true"] svg{transform:rotate(180deg);}
.shop-groupmenu{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;z-index:60;
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:8px;display:none;flex-direction:column;gap:2px;}
.shop-groupmenu.open{display:flex;animation:dropdown var(--t) var(--ease-out) both;}
.shop-grp{text-align:left;padding:12px 15px;border:none;border-radius:var(--r-sm);
  background:transparent;color:var(--c-ink-2);font-family:var(--font);font-size:.94rem;
  font-weight:500;cursor:pointer;
  transition:background var(--t) var(--ease),color var(--t) var(--ease);}
.shop-grp:hover{background:var(--c-panel);color:var(--c-ink);}
.shop-grp.on{background:var(--c-panel);color:var(--c-ink);font-weight:700;}

/* Menus must open DOWNWARD, not rise up. */
@keyframes dropdown{from{opacity:0;transform:translateY(-8px) scale(.985);}
                    to{opacity:1;transform:none;}}
.shop-sortmenu.open{animation:dropdown var(--t) var(--ease-out) both!important;}
.shop-count{margin:var(--s4) 0 var(--s4)!important;}

/* The icon chip is not a card. Legacy retrofit rules were catching .tile and
   turning it into a block, which pushed every icon into the corner. */
.tile,.trust .tile,.trust-i .tile{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:44px!important;height:44px!important;flex:0 0 44px!important;
  border-radius:var(--r-md)!important;padding:0!important;
  background:var(--c-panel)!important;border:1px solid var(--c-line)!important;
  box-shadow:none!important;}
.tile svg,.trust .tile svg{width:20px!important;height:20px!important;
  flex:0 0 20px!important;display:block!important;stroke:var(--c-ink)!important;}
.tile.on{border-color:transparent!important;}
.tile.on svg{stroke:#fff!important;}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO GEOMETRY  ·  per 01-home-a
   The trust bar aligns to the LEFT edge of the hero card, sits fully below
   it with no overlap, and stops short of the right column. The right column
   runs longer, ending at the trust bar's midpoint.
   ═══════════════════════════════════════════════════════════════════════ */
.hero{align-items:stretch!important;row-gap:0!important;}
.hero-main{align-self:start;}
@media(min-width:761px){
.hero-side{align-self:stretch;min-height:100%;
  display:flex!important;align-items:center;justify-content:center;}
}

/* Push the whole block down toward Featured Products. */
.wrap > .hero{margin-bottom:0!important;}
main > .wrap.sec:first-of-type{padding-top:var(--s6)!important;}


/* Trust bar now lives inside the hero container, so it inherits the gutter
   and simply needs to stop short of the right column. */

/* Shop Now: the halo was bleeding past the button edge. Tighten it. */
.btn-primary,.pp-cta-primary,.cta-primary{
  box-shadow:0 2px 10px rgba(46,79,168,.18)!important;}
.btn-primary:hover,.pp-cta-primary:hover,.cta-primary:hover{background:#0C0C0C!important;color:#fff!important;}

/* Right column runs longer, ending level with the trust bar's midpoint. */
@media(min-width:1101px){
  .hero{align-items:start!important;}
  .hero-side{height:calc(100% + var(--s4) + 30px);}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEMBERSHIP CAROUSEL  ·  four tiers, restored behaviour
   ═══════════════════════════════════════════════════════════════════════ */
.mb-carousel{position:relative;display:flex;align-items:center;gap:var(--s4);}
.mb-viewport{overflow:hidden;flex:1;padding:var(--s5) 4px;}
.mb-viewport:focus-visible{outline:none;box-shadow:0 0 0 3px var(--c-focus);border-radius:var(--r-lg);}
.mb-track{display:flex;gap:var(--s5);will-change:transform;}
.mb-track > .mb-tier{flex:0 0 calc((100% - (var(--s5) * 2)) / 3);}
@media(max-width:1120px){.mb-track > .mb-tier{flex:0 0 calc((100% - var(--s5)) / 2);}}
@media(max-width:720px){.mb-track > .mb-tier{flex:0 0 100%;}}
.mb-arrow{flex:0 0 46px;width:46px;height:46px;border-radius:var(--r-pill);
  border:1px solid var(--c-line-2);background:var(--c-card);color:var(--c-ink);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-sm);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease),transform var(--t-fast) var(--spring),
             opacity var(--t) var(--ease);}
.mb-arrow:hover:not(:disabled){background:var(--c-ink);color:var(--c-page);
  border-color:var(--c-ink);transform:translateY(-2px);}
.mb-arrow:active:not(:disabled){transform:scale(.92);}
.mb-arrow:disabled{opacity:.28;cursor:not-allowed;}
.mb-dots{display:flex;justify-content:center;gap:9px;margin-top:var(--s5);}
.mb-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:var(--c-line-2);
  transition:background var(--t) var(--ease),width var(--t) var(--ease-out);}
.mb-dot.on{background:var(--grad);width:26px;border-radius:var(--r-pill);}
.mb-tier{transition:transform var(--t) var(--ease-out);}
.mb-tier.feat .mb-inner{box-shadow:var(--sh-lg);}
@media(max-width:640px){.mb-arrow{flex:0 0 38px;width:38px;height:38px;}}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNER DASHBOARD  ·  corrections
   ═══════════════════════════════════════════════════════════════════════ */
/* The chart SVG uses preserveAspectRatio="none", which stretches anything
   drawn inside it. The end-of-line dot is therefore drawn in screen space. */
.vp-rev-chart{position:relative;}
.vp-rev-dot{position:absolute;width:0;height:0;transform:translate(-50%,-50%);
  pointer-events:none;}
.vp-rev-dot-core,.vp-rev-dot-ring{position:absolute;left:50%;top:50%;
  border-radius:50%;transform:translate(-50%,-50%);display:block;}
.vp-rev-dot-core{width:11px;height:11px;background:#0C8CCE;
  box-shadow:0 0 0 3px var(--c-card);}
.vp-rev-dot-ring{width:11px;height:11px;border:2px solid #0C8CCE;
  animation:vp-ping 2.2s cubic-bezier(0,0,.2,1) infinite;}
@keyframes vp-ping{
  0%{width:11px;height:11px;opacity:.85;}
  70%{width:34px;height:34px;opacity:0;}
  100%{width:34px;height:34px;opacity:0;}
}

/* Commission rate inside the outlined panel. */
.vp-rate-panel .vp-rate-figure{display:flex;align-items:baseline;gap:12px;
  margin:4px 0 8px;}
.vp-rate-num{font-size:2.7rem;font-weight:800;letter-spacing:-.04em;line-height:1;
  color:var(--c-ink);}
.vp-rate-word{font-size:.88rem;color:var(--c-ink-2);}
.vp-rate-disc{font-size:.85rem;font-weight:600;margin-top:9px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}

/* Payout schedule: this is the box that kept coming back wrong in dark mode.
   Token-driven now, so it cannot diverge again. */
.pp-payout-schedule,.pp-payout-schedule *{color:var(--c-ink);}
.pp-payout-schedule{background:var(--c-panel)!important;
  border:1px solid var(--c-line)!important;border-radius:var(--r-lg)!important;
  padding:var(--s5)!important;}
.pp-payout-schedule .pp-ps-label{color:var(--c-ink-3)!important;
  font-size:.68rem!important;font-weight:800!important;letter-spacing:.1em!important;
  text-transform:uppercase!important;}
.pp-payout-schedule .pp-ps-list,.pp-payout-schedule li,.pp-payout-schedule p{
  color:var(--c-ink-2)!important;}
.pp-payout-schedule strong,.pp-payout-schedule b{color:var(--c-ink)!important;}

/* Tier progress line was off-centre and clipped. */
.pp-tier-progress{margin-top:var(--s5)!important;padding-top:var(--s5)!important;
  border-top:1px solid var(--c-line)!important;text-align:center;}
.pp-tier-progress > *{max-width:100%;}
.pp-tier-progress p,.pp-tier-progress div{text-align:center;}
.pp-tier-progress .pp-track,.pp-tier-progress [class*="bar"]{
  margin-inline:auto;width:100%;max-width:520px;height:8px;
  border-radius:var(--r-pill);background:var(--c-line)!important;overflow:hidden;}
.pp-tier-progress .pp-track > *{background:var(--grad)!important;
  border-radius:var(--r-pill);height:100%;}

/* Partner code card, rethemed to match. */
.pp-code-card,.pp-dash-main > div:last-child{border-radius:var(--r-lg);}
.pp-code-card{background:var(--grad-wave)!important;background-size:200% 100%!important;
  background-position:calc(var(--vp-pan,0)*1%) 50%!important;color:#fff!important;
  border:none!important;box-shadow:var(--sh-md)!important;}
.pp-code-card input{background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.34)!important;
  color:#fff!important;border-radius:var(--r-sm)!important;}
.pp-code-card .pp-code-value{background:none!important;border:0!important;padding:0!important;border-radius:0!important;color:#fff!important;}
.pp-code-card input::placeholder{color:rgba(255,255,255,.7)!important;}
.pp-code-card button{background:rgba(255,255,255,.18)!important;
  border:1px solid rgba(255,255,255,.38)!important;color:#fff!important;
  border-radius:var(--r-sm)!important;
  transition:background var(--t) var(--ease),transform var(--t-fast) var(--spring)!important;}
.pp-code-card button:hover{background:#fff!important;color:#151515!important;
  border-color:#fff!important;transform:translateY(-1px);}

/* Estimator scale should read as the tier ladder, not a flat grey rail. */
.pp-slider{background:linear-gradient(90deg,
  #B07B3A 0%, #9AA0A6 22%, #C8902A 46%, #4FA9CF 72%, #5B5FC7 100%)!important;
  height:8px!important;border-radius:var(--r-pill)!important;opacity:.9;}
.pp-slider-scale{color:var(--c-ink-3)!important;font-weight:600;}

/* Featured card: sale badge sits top-left over the image, price turns red. */
.feat-media{position:relative;}
.pbadge.sale.feat-sale{top:12px!important;left:12px!important;
  right:auto!important;bottom:auto!important;}
.feat-price .price-now{color:var(--c-bad);font-weight:800;}
.feat-sizes{display:flex;gap:10px;flex-wrap:wrap;}

/* ═══════════════════════════════════════════════════════════════════════════
   SITE CHROME  ·  FINAL
   Loaded last, so nothing downstream can override these.
   ═══════════════════════════════════════════════════════════════════════ */

/* Sticky, translucent header. A wrapper with display:contents cannot
   constrain a sticky child, which is why the mount uses it. */
.hdr{position:sticky!important;top:0!important;z-index:900!important;
  background:color-mix(in srgb,var(--c-page) 82%,transparent)!important;
  backdrop-filter:saturate(180%) blur(16px)!important;
  -webkit-backdrop-filter:saturate(180%) blur(16px)!important;
  border-bottom:1px solid var(--c-line)!important;
  transition:background-color var(--t) var(--ease),box-shadow var(--t) var(--ease);}
@supports not (backdrop-filter:blur(1px)){.hdr{background:var(--c-page)!important;}}
body{overflow:visible;}
main{overflow:visible;}

/* Logo hover: lift and grow, never drift sideways. */
.hdr-logo img,.brand-logo{transform-origin:center center!important;
  transition:transform var(--t) var(--spring)!important;}
.hdr-logo:hover img,.hdr-logo:hover .brand-logo{
  transform:translateY(-2px) scale(1.05)!important;}

/* ── SIDE CART ─────────────────────────────────────────────────────────────
   It had no positioning at all, so it rendered inline above the footer.
   ─────────────────────────────────────────────────────────────────────── */
.cart-overlay{position:fixed!important;inset:0!important;z-index:1000!important;
  background:rgba(10,10,10,.55);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t) var(--ease),visibility var(--t) var(--ease);}
.cart-overlay.open,.cart-overlay.active,.cart-overlay.is-open{
  opacity:1;visibility:visible;pointer-events:auto;}
.cart-sidebar{position:fixed!important;top:0!important;right:0!important;
  bottom:0!important;left:auto!important;
  width:min(420px,92vw)!important;z-index:1001!important;
  display:flex!important;flex-direction:column!important;
  background:var(--c-page)!important;color:var(--c-ink)!important;
  border-left:1px solid var(--c-line)!important;
  box-shadow:-18px 0 48px rgba(0,0,0,.22)!important;
  transform:translateX(102%);
  transition:transform .42s cubic-bezier(.22,.9,.3,1);
  overflow:hidden;}
.cart-sidebar.open,.cart-sidebar.active,.cart-sidebar.is-open{transform:translateX(0);}
.cart-sidebar-header{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding:var(--s5);border-bottom:1px solid var(--c-line);
  background:var(--c-page);}
.cart-sidebar-header h3{font-size:1.12rem;font-weight:700;color:var(--c-ink);}
.cart-sidebar-close{width:38px;height:38px;border:none;border-radius:var(--r-pill);
  background:transparent;color:var(--c-ink);font-size:1.5rem;line-height:1;cursor:pointer;
  transition:background var(--t) var(--ease),transform var(--t-fast) var(--spring);}
.cart-sidebar-close:hover{background:var(--c-panel);}
.cart-sidebar-close:active{transform:scale(.9);}
.cart-sidebar-body,.cart-items,.cart-sidebar-items{flex:1;overflow-y:auto;padding:var(--s5);}
.cart-sidebar-footer,.cart-footer{border-top:1px solid var(--c-line);padding:var(--s5);
  background:var(--c-page);}
/* Every child follows the theme; the promo row was hardcoded white. */
.cart-sidebar *,.cart-sidebar p,.cart-sidebar span,.cart-sidebar div,
.cart-sidebar h1,.cart-sidebar h2,.cart-sidebar h3,.cart-sidebar h4,
.cart-sidebar label,.cart-sidebar strong,.cart-sidebar small{color:var(--c-ink);}
.cart-sidebar .muted,.cart-sidebar small{color:var(--c-ink-3)!important;}
.cart-promo,.cart-sidebar [class*="promo"]{
  background:var(--c-panel)!important;border:1px solid var(--c-line)!important;
  border-radius:var(--r-md)!important;color:var(--c-ink)!important;}
.cart-promo *,.cart-sidebar [class*="promo"] *{color:var(--c-ink)!important;}
.cart-sidebar input{background:var(--c-card)!important;color:var(--c-ink)!important;
  border:1px solid var(--c-line-2)!important;border-radius:var(--r-sm)!important;}
.cart-sidebar input::placeholder{color:var(--c-ink-4)!important;}
/* removed: blanket shipping panel rule was repainting the free-shipping fill bar */
.cart-sidebar-empty,.cart-empty{text-align:center;padding:var(--s8) var(--s5);}

/* ═══════════════════════════════════════════════════════════════════════════
   GRADIENT BLEED
   A gradient background under a rounded element leaks past the radius unless
   the paint is clipped to the border box. This is what made the Shop Now
   button and the Potency tile look like they had a coloured halo.
   ═══════════════════════════════════════════════════════════════════════ */
.tile.on{border:none!important;box-shadow:none!important;}
.tile.on svg{position:relative;z-index:1;}

/* ── STATS: the numbers carry the gradient, the labels stay neutral ─────── */
.stat b,.vp-stat-value{
  background:var(--grad-wave)!important;background-size:200% 100%!important;
  background-position:calc(var(--vp-pan,0) * 1%) 50%!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;}
.stat span{color:var(--c-ink-3)!important;}

/* ── CLOSING BAND: match the theme instead of a fixed pastel ───────────── */
.close-band{
  background:var(--c-panel)!important;
  border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);}
html.vp-dark .close-band{background:var(--c-panel)!important;}



/* ── FEATURED: gradient ring that TRAVELS on hover, like an RGB strip ──── */
.feat-card .btn,.btn-outline-grad{
  position:relative;background:var(--c-card)!important;color:var(--c-ink)!important;
  border:2px solid transparent!important;border-radius:var(--r-sm);
  background:var(--c-card)!important;
  background-origin:border-box!important;
  background-clip:padding-box,border-box!important;
  background-size:100% 100%, 300% 100%!important;
  background-position:0 0, 0% 50%!important;
  font-weight:700;
  transition:background-position 0s,color var(--t) var(--ease),
             transform var(--t-fast) var(--spring),box-shadow var(--t) var(--ease)!important;}
.feat-card .btn:hover,.btn-outline-grad:hover{background:#0C0C0C!important;color:#fff!important;}
.feat-card .btn:active,.btn-outline-grad:active{transform:scale(.975);}
@keyframes vp-ring{
  from{background-position:0 0, 0% 50%;}
  to  {background-position:0 0, 300% 50%;}
}
@media (prefers-reduced-motion:reduce){
  .feat-card .btn:hover,.btn-outline-grad:hover{animation:none;}
}

/* ── Featured Products pulled up toward the trust bar ──────────────────── */
main > .wrap.sec:first-of-type{padding-top:var(--s5)!important;}

/* ── Reveal: trigger sooner so content is already there when you arrive ── */
/* Member count carries the gradient. */
.news-count{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-weight:800;}

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP  ·  FINAL LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */
.shop-head{padding:var(--s5) 0 var(--s3)!important;}
.shop-head .t-body{margin:0 0 var(--s5)!important;}
.shop-tools{display:flex!important;align-items:center!important;gap:12px!important;
  flex-wrap:nowrap!important;}
.shop-tools .search{flex:1 1 auto!important;min-width:0;max-width:none;
  border-radius:var(--r-sm)!important;padding:12px 18px!important;}
.shop-sortwrap{flex:0 0 auto!important;order:2;}
.shop-groupwrap{flex:0 0 auto!important;order:3;}
.shop-sortbtn{min-width:0!important;width:auto!important;
  padding:11px 16px!important;font-size:.9rem!important;gap:14px!important;}
.shop-groupbtn{padding:11px 16px!important;}
.fine-cats{margin:var(--s4) 0 var(--s3)!important;}

/* Four across on desktop. */
.shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}



/* Menus must float ABOVE the cards. Cards created their own stacking context
   via transform on hover, which was burying the dropdowns. */
.shop-sortmenu,.shop-groupmenu{z-index:500!important;}

/* Sale badge belongs on the PHOTO, bottom-right of the image well. */
.pcard-media{position:relative;}
.pcard .pbadge.sale{position:absolute!important;bottom:10px!important;
  right:10px!important;top:auto!important;left:auto!important;}

/* Badges: two greys that sit between the themes, distinct from each other. */
.pbadge.best{background:#3F4552!important;color:#FFFFFF!important;
  border:1px solid rgba(255,255,255,.12)!important;}
.pbadge.blend{background:#8A90A0!important;color:#FFFFFF!important;
  border:1px solid rgba(255,255,255,.14)!important;}
html.vp-dark .pbadge.best{background:#5A6172!important;color:#FFFFFF!important;}
html.vp-dark .pbadge.blend{background:#A7AEBF!important;color:#141414!important;}

/* Favourited heart stays 2x. */
.pcard .fav svg,.feat-card .fav svg,.pdp-fav svg{
  transition:transform var(--t) var(--spring),color var(--t) var(--ease);}
.pcard .fav.on,.feat-card .fav.on,.pdp-fav.on{color:var(--c-bad)!important;}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNER DASHBOARD  ·  FINAL
   Loaded last, class-based, no inline colours left to fight it.
   ═══════════════════════════════════════════════════════════════════════ */
.pp-dash-main{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start;}
@media(max-width:900px){.pp-dash-main{grid-template-columns:1fr;}}

/* Partner code card, redesigned. */
.pp-code-card{background:var(--grad);color:#fff;border-radius:var(--r-lg);
  padding:var(--s5);display:flex;flex-direction:column;
  box-shadow:0 8px 28px rgba(46,79,168,.26);}
.pp-code-label{font-size:.68rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.86);}
.pp-code-row{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin:10px 0 18px;}
.pp-code-value{font-size:1.9rem;font-weight:800;letter-spacing:.06em;
  font-family:var(--font);color:#fff;line-height:1;}
.pp-code-btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);
  color:#fff;font-family:var(--font);font-weight:700;font-size:.8rem;
  padding:10px 16px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             transform var(--t-fast) var(--spring);}
.pp-code-btn:hover{background:#fff;color:#2E4FA8;border-color:#fff;transform:translateY(-1px);}
.pp-code-btn:active{transform:scale(.96);}
.pp-code-btn.solid{background:#fff;color:#2E4FA8;border-color:#fff;}
.pp-code-btn.solid:hover{background:rgba(255,255,255,.2);color:#fff;}
.pp-link-box{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-md);padding:14px;}
.pp-link-row{display:flex;gap:8px;align-items:center;margin-top:8px;}
/* This input was white-on-white and unreadable. Now explicit in both themes. */
.pp-link-input{flex:1;min-width:0;background:rgba(255,255,255,.96)!important;
  color:#151515!important;border:none!important;border-radius:var(--r-sm)!important;
  padding:10px 12px!important;font-size:.8rem!important;font-family:var(--font)!important;}
.pp-code-note{font-size:.78rem;color:rgba(255,255,255,.88);margin:14px 0 0;line-height:1.5;}

/* Payout schedule: class-driven, cannot revert. */
.pp-payout-schedule{background:var(--c-panel)!important;
  border:1px solid var(--c-line)!important;border-radius:var(--r-lg)!important;
  padding:20px 24px!important;color:var(--c-ink)!important;}
.pp-payout-schedule .pp-ps-label{color:var(--c-ink-3)!important;}
.pp-payout-schedule .pp-ps-list{display:grid;color:var(--c-ink-2)!important;}
.pp-payout-schedule .pp-ps-list div{color:var(--c-ink-2)!important;}
.pp-payout-schedule #pp-ps-toggle{color:var(--c-ink-3)!important;}
.pp-payout-schedule #pp-ps-toggle:hover{color:var(--c-ink)!important;}

/* Referral filter chips were white on white in light mode. */
.pp-ref-filter,.pp-ref-filters button,[class*="ref-filter"] button,
.pp-filter-btn{background:var(--c-card)!important;color:var(--c-ink)!important;
  border:1px solid var(--c-line-2)!important;border-radius:var(--r-pill)!important;
  padding:8px 16px!important;font-family:var(--font)!important;font-size:.82rem!important;
  font-weight:600!important;cursor:pointer;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease)!important;}
.pp-ref-filter:hover,.pp-ref-filters button:hover,.pp-filter-btn:hover{
  border-color:var(--c-ink)!important;}
.pp-ref-filter.on,.pp-ref-filter.active,.pp-ref-filters button.on,
.pp-ref-filters button.active,.pp-filter-btn.active,.pp-filter-btn.on,
.pp-ref-filter[aria-pressed="true"]{
  background:var(--c-ink)!important;color:var(--c-page)!important;
  border-color:var(--c-ink)!important;}
/* Nothing may push the document sideways. */
html,body{max-width:100vw;overflow-x:clip;}
.wrap,.shop-grid,.shop-tools,.fine-cats{max-width:100%;}
.pp-dash-main,.pp-code-card,.pp-link-row{min-width:0;max-width:100%;}
.pp-link-input{max-width:100%;}
@media(max-width:760px){
  .pp-code-row{flex-wrap:wrap;}
  .pp-code-value{font-size:1.5rem;}
  .pp-link-row{flex-wrap:wrap;}
  .pp-link-row .pp-code-btn{width:100%;}
  .pp-payout-schedule .pp-ps-list{grid-template-columns:1fr!important;}
  .shop-tools{flex-wrap:wrap!important;}
  .shop-tools .search{flex:1 1 100%!important;}
  .shop-sortwrap,.shop-groupwrap{flex:1 1 calc(50% - 6px)!important;}
  .shop-sortbtn,.shop-groupbtn{width:100%!important;justify-content:space-between;}
}

/* Tier progress: the label sits ABOVE the track, both centred, and the track
   is a real rail rather than a block the text can fall inside. */
.pp-tier-progress{display:block!important;text-align:center;
  margin-top:var(--s5)!important;padding-top:var(--s5)!important;
  border-top:1px solid var(--c-line)!important;}
#pp-progress-text,.pp-tier-progress > p{
  display:block;text-align:center;margin:0 0 12px!important;
  font-size:.88rem!important;color:var(--c-ink-2)!important;position:static!important;}
.pp-progress-bar{position:relative;display:block;height:10px;width:100%;
  max-width:520px;margin:0 auto!important;border-radius:var(--r-pill);
  background:var(--c-line)!important;overflow:hidden;}
.pp-progress-fill{position:absolute;left:0;top:0;height:100%;
  border-radius:var(--r-pill);
  transition:width .5s cubic-bezier(.22,.9,.3,1),background .4s ease;}
/* Trust bar items must not wrap onto two lines and stagger the row. */
.trust-i strong,.trust-i span{white-space:normal;}
.trust-i .tile svg{width:18px!important;height:18px!important;flex:0 0 18px!important;}
/* Four equal columns beats flex wrapping for a fixed four-item bar. */

/* ═══════════════════════════════════════════════════════════════════════════
   TRUST BAR  ·  single authoritative rule
   Previous passes left five competing .trust declarations stacked on top of
   each other, which is why it kept reflowing. This is the only one now.
   ═══════════════════════════════════════════════════════════════════════ */
.trust-i .tile svg{width:18px;height:18px;flex:0 0 18px;}


/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL  ·  restored to the exact v25 feel
   28px travel, 0.85s, same easing. Do not retune without asking.
   ═══════════════════════════════════════════════════════════════════════ */
.reveal{opacity:0;transform:translate3d(0,28px,0);
  transition:opacity .85s cubic-bezier(.22,.9,.3,1),
             transform .85s cubic-bezier(.22,.9,.3,1);
  transition-delay:var(--r-delay,0ms);will-change:opacity,transform;}
.reveal.in{opacity:1;transform:translate3d(0,0,0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
}
.hdr .reveal,.foot .reveal,.hdr,.foot{opacity:1!important;transform:none!important;}


/* ═══════════════════════════════════════════════════════════════════════════
   PROOF, NOT PROMISES  ·  the v25 wave, restored
   It is a 6px underline sitting BEHIND the phrase, not a separate bar below
   the heading. background-position animates 0% -> 100% -> 0% over 3s.
   ═══════════════════════════════════════════════════════════════════════ */
.close-h{max-width:640px;margin:0 auto var(--s6);line-height:1.4;}
.proof-phrase{position:relative;display:inline-block;white-space:nowrap;}
.proof-wave{position:absolute;bottom:0;left:0;width:100%;height:6px;
  border-radius:3px;pointer-events:none;
  background:linear-gradient(90deg,#6241C2,#2E4FA8,#0C8CCE,#2E4FA8,#6241C2);
  background-size:300% 100%;
  animation:trustWave 3s ease-in-out infinite;}
@keyframes trustWave{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@media (prefers-reduced-motion:reduce){.proof-wave{animation:none;}}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SPACING  ·  no overlap, no dead gap
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:1101px){
  /* The right column ends level with the trust bar, never behind it. */
  .hero{align-items:start!important;}
  /* right-column height is set in the authoritative hero block below */
}

/* Close the gap: Featured Products sits directly under the trust bar. */
main > .wrap.sec:first-of-type{padding-top:var(--s6)!important;}
.sec{padding-block:var(--s7);}
.sec-sm{padding-block:var(--s6);}

/* ═══════════════════════════════════════════════════════════════════════════
   TRUST BAR  ·  single authoritative rule (do not add a second)
   Aligned to the hero's left edge, four across, clear of the right column,
   and no dead space between it and Featured Products.
   ═══════════════════════════════════════════════════════════════════════ */
.trust-wrap{width:auto;margin:var(--s4) 0 0 0;max-width:calc(74% - var(--s5));}
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;gap:var(--s3);
  background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:14px 18px;box-shadow:var(--sh-sm);}
.trust-i{display:flex;align-items:center;gap:10px;min-width:0;}
.trust-i .tile{width:38px;height:38px;flex:0 0 38px;}
.trust-i .tile svg{width:18px;height:18px;flex:0 0 18px;}
.trust-i strong{display:block;font-size:.75rem;font-weight:800;line-height:1.25;color:var(--c-ink);}
.trust-i span{display:block;font-size:.69rem;line-height:1.3;color:var(--c-ink-3);}
@media(max-width:1100px){.trust-wrap{max-width:100%;}}
@media(max-width:900px){.trust{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s4);}}
@media(max-width:480px){.trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);}}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNER REVENUE DASHBOARD
   These classes are generated by renderDashboard() in partner.html. They had
   NO definitions in this build, which is why the dashboard rendered as bare
   text in light mode. Defined here once, token-driven, correct in both themes.
   ═══════════════════════════════════════════════════════════════════════ */
.vp-rev-card{background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-lg);padding:22px 22px 10px;box-shadow:var(--sh-sm);
  margin-bottom:14px;position:relative;overflow:hidden;}
.vp-rev-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-wave);background-size:200% 100%;background-position:calc(var(--vp-pan,0)*1%) 50%;}
.vp-rev-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5);}
.vp-rev-label{font-size:.68rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--c-ink-3);margin-bottom:6px;}
.vp-rev-value{font-size:clamp(2rem,4.4vw,2.9rem);font-weight:800;letter-spacing:-.03em;
  line-height:1;color:var(--c-ink);font-variant-numeric:tabular-nums;}
.vp-rev-delta{display:flex;align-items:baseline;gap:8px;margin-top:9px;font-size:.8rem;}
.vp-rev-delta .is-up{color:#22C55E;font-weight:800;}
.vp-rev-delta .is-down{color:var(--c-bad);font-weight:800;}
.vp-rev-delta-note{color:var(--c-ink-3);}
.vp-rev-range{appearance:none;-webkit-appearance:none;
  padding:9px 34px 9px 15px;border-radius:var(--r-pill);
  border:1px solid var(--c-line-2);background:var(--c-panel);color:var(--c-ink);
  font-family:var(--font);font-size:.78rem;font-weight:700;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.vp-rev-range:hover{border-color:var(--c-ink);}
.vp-rev-chart{position:relative;padding-left:46px;}
.vp-rev-chart svg{width:100%;height:210px;display:block;overflow:visible;}
.vp-rev-axis{position:absolute;left:0;top:0;bottom:0;width:44px;}
.vp-rev-line{stroke-dasharray:2600;stroke-dashoffset:2600;
  animation:vp-draw 1400ms cubic-bezier(.16,1,.3,1) forwards;}
@keyframes vp-draw{to{stroke-dashoffset:0;}}

.vp-money-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;margin-bottom:14px;}
.vp-money-card{background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:16px;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease);}
.vp-money-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);}
.vp-money-label{font-size:.64rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-ink-3);margin-bottom:7px;}
.vp-money-value{font-size:1.5rem;font-weight:800;color:var(--c-ink);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.vp-money-sub{font-size:.7rem;color:var(--c-ink-3);margin-top:8px;line-height:1.45;}

.vp-outline-panel{border:1.5px solid transparent;border-radius:var(--r-lg);
  background-image:linear-gradient(var(--c-card),var(--c-card)),var(--grad);
  background-origin:border-box;background-clip:padding-box,border-box;
  padding:18px 20px;}
.vp-outline-row{padding:6px 0;}
.vp-outline-label{font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:5px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
.vp-outline-value{font-size:1.05rem;font-weight:700;color:var(--c-ink);}
.vp-outline-sub{font-size:.72rem;color:var(--c-ink-3);margin-top:4px;}
.vp-outline-rule{height:1px;background:var(--grad);opacity:.45;margin:10px 0;border-radius:1px;}

@media(max-width:640px){
  .vp-money-grid{grid-template-columns:1fr 1fr;}
  .vp-rev-card{padding:18px 16px 8px;}
  .vp-rev-chart{padding-left:40px;}
  .vp-rev-chart svg{height:170px;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUDIT FIXES  ·  v41
   Loaded last. Each block states the bug it corrects so it is not undone.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. FAVOURITE HEART ───────────────────────────────────────────────────
   Was: empty at scale(1), filled jumped to scale(2). Now ONE size in both
   states, sitting between the two. Clicking changes fill and colour only. */
.pcard .fav,.feat-card .fav,.pdp-fav{width:40px;height:40px;}
.pcard .fav svg,.feat-card .fav svg,.pdp-fav svg{
  width:22px;height:22px;
  transform:scale(1.18);
  transition:color var(--t) var(--ease),transform var(--t-fast) var(--spring);}
.pcard .fav.on svg,.feat-card .fav.on svg,.pdp-fav.on svg{
  transform:scale(1.18);}                    /* identical, no size jump */
.pcard .fav:hover svg,.feat-card .fav:hover svg,.pdp-fav:hover svg{
  transform:scale(1.30);}
.pcard .fav:active svg,.feat-card .fav:active svg,.pdp-fav:active svg{
  transform:scale(1.05);}
.pcard .fav.on,.feat-card .fav.on,.pdp-fav.on{color:var(--c-bad)!important;}

/* ── 2. HERO GEOMETRY ─────────────────────────────────────────────────────
   The tall right column and the closed gap below the trust bar are
   INDEPENDENT. A later rule had set height:auto and undone the v38 look. */
@media(min-width:1101px){
  .hero{align-items:start!important;}
  /* Runs past the hero card down to the trust bar's midpoint, as in v38. */
  .hero-side{height:calc(100% + var(--s4) + 46px)!important;align-self:start!important;}
  /* Shop Now sits lower in the card again. */
  .hero-main .hero-sub{margin-bottom:var(--s7)!important;}
  .hero-main{padding-bottom:clamp(34px,4vw,58px)!important;}
}

/* ── 3. SCROLL-DRIVEN GRADIENT ────────────────────────────────────────────
   --vp-scroll is written by JS on every scroll frame. The wave travels with
   the reader instead of looping on a timer. */
.g-run,.eyebrow,.pp-h1 .accent,.sub-grad,.news-count,.stat b,.vp-outline-label,
.pp-eyebrow,.pp-eyebrow-grad,.vp-rate-disc,
.vp-agegate-eyebrow,.vp-stat-value{
  background:var(--grad-wave);
  background-size:200% 100%;
  background-position:calc(var(--vp-pan,0) * 1%) 50%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
@media (prefers-reduced-motion:reduce){
  .g-run,.eyebrow,.sub-grad{background-position:0 50%;}
}

/* ── 4. SHOP REVEAL ───────────────────────────────────────────────────────
   Threshold stays. The 60ms-per-card stagger was what read as lag, so it is
   removed on the shop grid ONLY. Every other section keeps its stagger. */
.shop-grid .pcard{--r-delay:0ms!important;
  transition-duration:.45s,.45s!important;}

/* ── 5. SHOP CARDS: taller, image zoomed ──────────────────────────────────*/
.pcard-media{aspect-ratio:4/5!important;padding:0!important;
  align-items:center;justify-content:center;overflow:hidden;}
.pcard-media img{width:100%!important;height:100%!important;
  object-fit:contain!important;transform:scale(1.30);
  transition:transform var(--t-slow) var(--ease-out);}
.pcard:hover .pcard-media img{transform:scale(1.37);}
.pcard{min-height:100%;}

/* ── 6. HEADER ────────────────────────────────────────────────────────────*/
.hdr-in{display:flex;align-items:center;gap:var(--s6);padding:10px 0;min-height:64px;}
.hdr-nav{margin-left:var(--s7);gap:var(--s5);}
@media(max-width:1200px){.hdr-nav{margin-left:var(--s5);}}

/* ── 8. DROPDOWN CLIPPING ─────────────────────────────────────────────────
   ROOT CAUSE: .shop-head is a .reveal element. The animation's transform +
   will-change make it a stacking context, trapping .shop-tools' z-index:500
   inside a parent whose own z-index is auto. .shop-grid at z-index:1 then
   painted over everything. Fix is to raise the CONTEXT, not the child, so no
   card and no menu moves.                                                  */
.shop-head{position:relative;z-index:600;}
.shop-head.in{will-change:auto;}          /* drop will-change once revealed */
.shop-grid{position:relative;z-index:1;}
.shop-tools{position:relative;z-index:5;}
.shop-sortmenu,.shop-groupmenu{z-index:50;}

/* ── 9. SHOP WEIGHTS ──────────────────────────────────────────────────────*/
.shop-title{font-weight:500!important;letter-spacing:-.02em;}
.fine-cat{font-weight:500!important;}
.fine-cat.on{font-weight:800!important;}
.shop-grp{font-weight:400!important;}
.shop-grp.on{font-weight:700!important;}

/* ── 7. 10x TESTING BADGE ─────────────────────────────────────────────────
   Rebuild of the old "7x Testing COMING SOON" pill in the new type and
   colours. The dot still pulses. COMING SOON is replaced by gradient
   "Verified" plus a gradient check, and 7x is now 10x, matching the ten
   assays listed in Tested At Every Step.
   ─────────────────────────────────────────────────────────────────────── */
.hero-chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:var(--s4);}
.vp-testbadge-row{margin:var(--s3) 0 var(--s4);}
.vp-testbadge{display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:var(--r-pill);
  background:var(--c-card);border:1px solid var(--c-line-2);
  box-shadow:var(--sh-xs);white-space:nowrap;}
.vp-testbadge b{font-size:.6rem;font-weight:800;color:var(--c-ink);
  letter-spacing:.01em;}
.vp-testdot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;display:block;
  background:var(--grad);position:relative;}
.vp-testdot::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--grad);animation:vp-dotpulse 2s cubic-bezier(0,0,.2,1) infinite;}
@keyframes vp-dotpulse{
  0%{transform:scale(1);opacity:.75;}
  70%{transform:scale(2.6);opacity:0;}
  100%{transform:scale(2.6);opacity:0;}
}
.vp-testverified{display:inline-flex;align-items:center;gap:4px;
  font-size:.6rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--grad);    -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
.vp-testverified svg{width:10px;height:10px;flex:0 0 10px;
  stroke:#2E4FA8;color:#2E4FA8;
  -webkit-text-fill-color:initial;}
@media (prefers-reduced-motion:reduce){.vp-testdot::after{animation:none;}}

/* Ten tabs need to scroll horizontally rather than wrap into a mess. */
/* Tested At Every Step: 5x2 grid, nothing crops. */
.test-tabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--s3)!important;overflow:visible;flex-wrap:wrap!important;}
.test-tab{flex:unset;width:100%;justify-content:center;padding:12px var(--s3)!important;}
@media(max-width:980px){.test-tabs{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:640px){.test-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)!important;}}

html.vp-dark .vp-testverified svg{stroke:#4FB0EE;color:#4FB0EE;}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE PASS (v43). Every rule below is phone-scoped: nothing here can
   affect desktop. One authoritative block; extend here, not elsewhere.
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  html{overflow-x:clip;}
  /* Decorative floating vials swallow whole phone screens. Off at phone size. */
  .proof-vial{display:none!important;}
  .proof-cta-section{padding:var(--s7) var(--s4)!important;min-height:0!important;}
  /* Contact page product photo: cap it */
  .ct-photo img{max-height:300px;width:auto!important;margin-inline:auto;display:block;}
  /* Closed cart drawer parks just offscreen; its shadow bled a sliver onto
     the right edge of every page. Shadow only while open. */
  .cart-sidebar{box-shadow:none!important;}
  .cart-sidebar.open{box-shadow:var(--sh-lg)!important;}
}
@media(max-width:480px){
  /* Trust bar: compact 2x2 */
  .trust{padding:var(--s4) var(--s3)!important;}
  .trust-i{gap:8px!important;align-items:flex-start!important;}
  .trust-i .tile{width:30px!important;height:30px!important;flex:0 0 30px!important;}
  .trust-i .tile svg{width:15px!important;height:15px!important;}
  .trust-i strong{font-size:.7rem!important;line-height:1.25;}
  .trust-i > span:not(.tile) > span{font-size:.6rem!important;line-height:1.3;}
  /* Partner tier ladder: five fit without truncation */
  .pp-ladder{--tier-dot:46px;--tier-pad:2px;}
  .pp-tier-dot{font-size:.78rem!important;}
  .pp-tier-name{font-size:.64rem!important;margin-top:4px!important;}
  .pp-tier-thresh{font-size:.53rem!important;}
}


/* Gradient-button hover: ring ignites from a point, then travels. */
@keyframes vpRingRun{from{background-position:0 0,0% 50%;}to{background-position:0 0,-200% 50%;}}
@keyframes vpRingIgnite{from{background-size:auto,34% 340%;}to{background-size:auto,200% 100%;}}
/* Opt-out keeps a static gradient (10x pill, Verified Quality, etc.) */
.vp-wave-off{background-image:var(--grad)!important;background-size:auto!important;background-position:0 0!important;animation:none!important;}
@media (prefers-reduced-motion:reduce){.btn-primary:hover,.btn-outline-grad:hover{animation:none;}}

/* Wave-carrying buttons: background is animated by the wave and the ring
   keyframes, never by transition, so the wave stays locked to the scroll. */
.btn-primary,.pp-cta-primary,.cta-primary,.btn-outline-grad,.feat-card .btn{
  transition:color var(--t) var(--ease),transform var(--t-fast) var(--spring),
             box-shadow var(--t) var(--ease),filter var(--t) var(--ease)!important;}

/* ── THE RING ─────────────────────────────────────────────────────────────
   One mechanism for every gradient outline: a masked ::before that rides
   the scroll wave at rest and ignites into a traveling loop on hover. */
.btn-primary,.btn-outline-grad,.feat-card .btn,.pp-cta-primary,.cta-primary{position:relative;z-index:0;}
.btn-primary::before,.btn-outline-grad::before,.feat-card .btn::before,.pp-cta-primary::before,.cta-primary::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;
  background:var(--grad-wave);background-size:200% 100%;
  background-position:calc(var(--vp-pan,0) * 1%) 50%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;z-index:1;}
.btn-primary::before,.pp-cta-primary::before,.cta-primary::before{opacity:0;}
.btn-primary:hover::before,.btn-outline-grad:hover::before,.feat-card .btn:hover::before,.pp-cta-primary:hover::before,.cta-primary:hover::before{
  opacity:1;animation:vpRingIgnite2 .34s var(--ease-out),vpRingRun2 1.9s linear .05s infinite;}
@keyframes vpRingRun2{from{background-position:0% 50%;}to{background-position:-200% 50%;}}
@keyframes vpRingIgnite2{from{background-size:34% 340%;}to{background-size:200% 100%;}}
@media (prefers-reduced-motion:reduce){
  .btn-primary:hover::before,.btn-outline-grad:hover::before,.feat-card .btn:hover::before{animation:none;}}

/* Partner CTA: same wave authority as btn-primary. */
.pp-cta-primary,.cta-primary{border:2px solid transparent!important;
  background:var(--grad-wave)!important;background-size:200% 100%!important;
  background-position:calc(var(--vp-pan,0) * 1%) 50%!important;color:#fff!important;}
.pp-cta-primary:hover,.cta-primary:hover{background:#0C0C0C!important;color:#fff!important;}

/* ══ CART SIDEBAR · AUTHORITATIVE INTERIOR (ported from v26, tokenized) ══
   Shell (slide/overlay/width) stays defined above; everything inside the
   panel is governed here. Edit THIS block, never append competitors. */

.cart-sidebar-header{padding: 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;}
.cart-sidebar-close{background: none;
  border: none;
  color: var(--vp-navy);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;}
.cart-sidebar-close:hover{color: var(--vp-teal-dark);}
.cart-sidebar-items{flex: 1;
  overflow-y: auto;
  padding: 20px;}
.cart-sidebar-item{display: flex;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
  animation: slideIn 0.3s ease;}
.cart-sidebar-item img{width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(14,44,76,0.04);}
.cart-sidebar-item-details{flex: 1;}
.cart-sidebar-item-title{margin: 0 0 2px;
  font-weight: 700;
  color: var(--vp-navy);}
.cart-sidebar-item-dose{font-size: 0.78rem;
  font-weight: 600;
  color: #666;
  margin: 0 0 2px;}
.cart-sidebar-preorder-tag{display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--vp-violet, #6241C2);
  background: rgba(85,57,140,0.08);
  border: 1px solid rgba(85,57,140,0.2);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: middle;}
.cart-sidebar-item-price{font-weight: 700;
  font-size: 1.2rem;
  color: var(--vp-navy);
  margin-bottom: 2px;
  text-align: left;
  display: flex;
  align-items: baseline;
  gap: 6px;}
.cart-sidebar-item-controls{display: flex;
  flex-direction: column;
  align-items: flex-start;}
.remove-item{background: none;
  border: none;
  color: #c33a2b;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  margin: -4px;
  opacity: 0.9;
  transition: opacity 0.12s ease;}
.remove-item:hover{opacity: 1;}
.cart-sidebar-footer{padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: transparent;}
.free-shipping-meter{margin:0 0 var(--s4);text-align:center;font-size:.86rem;color:var(--c-ink-3);
  padding:12px;background:var(--c-panel);border-radius:var(--r-sm);}
.free-shipping-progress{height:8px;background:var(--c-well);border-radius:4px;margin:10px 0 0;overflow:hidden;}
.free-shipping-bar{height:100%;width:0%;background:var(--grad);transition:width .35s var(--ease);border-radius:4px;}
.cart-sidebar-subtotal{display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 1.1em;
  color: var(--vp-navy);
  padding: 15px;
  background: var(--panel);
  border-radius: 8px;}
.cart-sidebar-buttons{display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;}
.cart-sidebar-button{padding: 14px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.95em;}
.cart-sidebar-button.view{background: transparent;
  color: var(--vp-navy);
  border: 1.5px solid var(--line);
  position: relative;
  z-index: 1;}
.cart-sidebar-button.checkout{background: linear-gradient(90deg, #6241C2 0%, #2E4FA8 35%, #0C8CCE 100%);
  color: var(--vp-white);
  box-shadow: 0 6px 16px rgba(85,57,140,0.2);
  position: relative;
  z-index: 1;}
.cart-sidebar-button.checkout:hover{background: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(85,57,140,0.3);
  color: #2E4FA8;}
.cs-protection-bubble{position:relative;}
.cs-protection-bubble .cs-prot-tip{position:absolute !important;
  bottom:calc(100% + 8px) !important;
  right:0 !important;
  width:230px !important;
  background:var(--c-ink) !important;
  color:var(--c-card) !important;
  font-size:.7rem !important;
  font-weight:500 !important;
  line-height:1.4 !important;
  padding:9px 11px !important;
  border-radius:9px !important;
  box-shadow:0 8px 22px rgba(11,43,78,.30) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(4px) !important;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .2s !important;
  z-index:50 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  display:block !important;}
.cs-protection-bubble .cs-prot-tip::after{content:'' !important;
  position:absolute !important;
  top:100% !important;
  right:14px !important;
  border:6px solid transparent !important;
  border-top-color:var(--c-ink) !important;
  display:block !important;
  width:0 !important;
  height:0 !important;}
.cs-protection-bubble .cs-prot-info:hover + .cs-prot-tip, .cs-protection-bubble .cs-prot-info:focus + .cs-prot-tip, .cs-protection-bubble .cs-prot-tip.show{opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
  transition:opacity .18s ease, transform .18s ease, visibility 0s !important;}
.cs-protection-bubble{position:relative;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  background:linear-gradient(90deg,rgba(16,185,129,.22),rgba(16,185,129,.14)) !important;
  border:1.5px solid rgba(16,185,129,.55) !important;
  border-radius:999px !important;
  padding:9px 12px !important;
  margin:10px 0 6px !important;
  font-size:.78rem !important;
  font-weight:700 !important;
  color:var(--c-ink) !important;
  box-shadow:0 2px 8px rgba(16,185,129,.10) !important;}
.cs-protection-bubble .cs-shield{flex:0 0 16px !important;
  width:16px !important;
  height:16px !important;
  color:#10b981 !important;
  display:block !important;}
.cs-protection-bubble .cs-prot-label{flex:1 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  display:inline-flex !important;
  align-items:center !important;}
.cs-protection-bubble .cs-prot-info{appearance:none !important;
  -webkit-appearance:none !important;
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  min-height:15px !important;
  max-width:15px !important;
  max-height:15px !important;
  border-radius:50% !important;
  background:#10b981 !important;
  color:var(--c-card) !important;
  border:none !important;
  font-size:.62rem !important;
  font-weight:800 !important;
  cursor:help !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:1 !important;
  flex:0 0 15px !important;
  font-family:inherit !important;
  box-sizing:border-box !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  transition:background .15s, transform .15s !important;
  box-shadow:none !important;}
.cs-protection-bubble .cs-prot-info:hover, .cs-protection-bubble .cs-prot-info:focus{background:#059669 !important;
  outline:none !important;
  transform:scale(1.12) !important;}
.cs-subtotal-wrap{display:inline-flex;align-items:baseline;gap:8px;}
.cs-subtotal-original{font-size:.85em;color:#94a3b8;text-decoration:line-through;font-weight:600;}
.cart-sidebar-button.disabled{opacity:.45 !important;cursor:not-allowed !important;pointer-events:none !important;filter:grayscale(.3);}
.cart-sidebar-items{display:flex;flex-direction:column;}
.cs-bacwater-nudge{position:relative;display:flex;align-items:center;gap:10px;flex:0 0 auto;background:linear-gradient(90deg,rgba(40,161,194,.12),rgba(85,57,140,.10));border:1.5px solid rgba(40,161,194,.40);border-radius:14px;padding:10px 12px;margin:8px 0 4px;animation:csItemIn .35s cubic-bezier(.2,.8,.2,1) both;overflow:hidden;}
.cs-bacwater-nudge .cs-bacwater-img{width:42px !important;height:42px !important;max-width:42px !important;max-height:42px !important;min-width:42px !important;min-height:42px !important;object-fit:contain !important;border-radius:8px !important;background:var(--c-card);flex:0 0 42px;display:block;padding:3px;border:none !important;}
.cs-bacwater-nudge .cs-bacwater-body{flex:1;min-width:0;}
.cs-bacwater-nudge .cs-bacwater-title{font-size:.82rem;font-weight:800;color:var(--c-ink);line-height:1.15;}
.cs-bacwater-nudge .cs-bacwater-sub{font-size:.72rem;color:var(--c-ink-2);line-height:1.3;margin-top:2px;}
.cs-bacwater-nudge .cs-bacwater-add{flex-shrink:0;padding:7px 12px;border-radius:8px;background:linear-gradient(90deg,#6241C2 0%%,#2E4FA8 50%%,#0C8CCE 100%%);color:var(--c-card);font-size:.74rem;font-weight:800;border:none;cursor:pointer;font-family:inherit;letter-spacing:.04em;box-shadow:0 3px 10px rgba(85,57,140,.22);transition:transform .15s ease,box-shadow .2s ease;}
.cs-bacwater-nudge .cs-bacwater-add:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(85,57,140,.35);}
.cs-bacwater-nudge .cs-bacwater-close{background:none;border:0;color:var(--c-ink-3);font-size:1.15rem;
  line-height:1;padding:2px 6px;cursor:pointer;border-radius:6px;transition:color var(--t-fast) var(--ease);}
.cs-bacwater-nudge .cs-bacwater-close:hover{color:var(--c-ink);background:rgba(11,43,78,.06);}

/* qty stepper (ported with the cart interior) */
.qty-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.qty-controls button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--vp-navy);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.qty-controls button:hover {
  background: linear-gradient(90deg, rgba(99,58,143,0.03), rgba(38,147,191,0.03));
}
.qty-controls span {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
}

/* ══ BUTTON SYSTEM ADDENDA (v49) ══════════════════════════════════════════
   1. Every basic (non-gradient) button carries a visible outline in both
      themes and lifts with a neutral shadow on hover.
   2. Every gradient button lifts with a two-tone GRADIENT glow on hover. */
.btn-primary:hover,.pp-cta-primary:hover,.cta-primary:hover,
.btn-outline-grad:hover,.feat-card .btn:hover{
  box-shadow:0 12px 32px rgba(98,65,194,.32), 0 6px 20px rgba(12,140,206,.26)!important;transform:translateY(-2px);}

.pp-audience-icon{background:var(--grad-wave)!important;background-size:200% 100%!important;
  background-position:calc(var(--vp-pan,0) * 1%) 50%!important;}

.cart-sidebar .cart-disc-price,.cart-disc-price{color:var(--c-ok)!important;font-weight:800;}
.cart-sidebar .cart-original-price,.cart-original-price{text-decoration:line-through;color:var(--c-ink-4)!important;font-weight:600;margin-left:8px;font-size:.9em;}
.vp-cart-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  font-size:.64rem;font-weight:800;letter-spacing:.05em;color:#fff;background:var(--c-bad);vertical-align:1px;}
.cs-protection-bubble .cs-prot-tip{background:var(--c-ink)!important;color:var(--c-page)!important;}

.cs-bacwater-nudge button:not(.cs-bacwater-close){
  border:2px solid transparent!important;background:var(--grad-wave)!important;background-size:200% 100%!important;
  background-position:calc(var(--vp-pan,0) * 1%) 50%!important;color:#fff!important;}
.cs-bacwater-nudge button:not(.cs-bacwater-close):hover{
  background:#0C0C0C!important;color:#fff!important;}

:root{--c-foot:#1E1E22;}          /* light mode: clearly lighter than dark */
html.vp-dark{--c-foot:#0C0C0C;}   /* dark mode: unchanged */

/* PDP action row: COA thin outline, subscribe thicker/darker, emblem spins once */
.pdp-coa-btn{border:1px solid var(--c-line-2)!important;}
#sub-save{border-width:2px!important;border-color:var(--c-ink-3)!important;}
.sub-emb{transition:transform .6s var(--ease-out);transform-origin:50% 50%;}
#sub-save:hover .sub-emb{transform:rotate(360deg);}

/* ══ FLOATING VIALS (v26 behavior, redesign look) ═══════════════════════ */
@keyframes vpVialFloat{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-14px) rotate(2deg);}}
@keyframes vpHeroFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.hero-vial-link{display:block;transition:transform .5s cubic-bezier(.23,1,.32,1),filter .5s cubic-bezier(.23,1,.32,1);}
.hero-vial-link img{animation:vpHeroFloat 5s ease-in-out infinite;will-change:transform;}
@media (min-width:1024px){
  .hero-vial-link:hover{transform:scale(1.05);}
}
.close-vial-link{position:absolute;display:block;z-index:3;
  transition:transform .5s cubic-bezier(.23,1,.32,1),filter .5s cubic-bezier(.23,1,.32,1);}
.close-vial-link .close-vial{position:static;animation:vpVialFloat 5s ease-in-out infinite;will-change:transform;
  filter:drop-shadow(0 6px 20px rgba(98,65,194,.20));}
.close-vial-link.r-link .close-vial{animation-duration:5.5s;animation-delay:1.2s;}
@media (min-width:1024px){
  .close-vial-link:hover{transform:scale(1.08);
    filter:drop-shadow(0 12px 36px rgba(98,65,194,.30)) drop-shadow(0 6px 20px rgba(12,140,206,.24));}
}
@media (prefers-reduced-motion:reduce){
  .hero-vial-link img,.close-vial-link .close-vial{animation:none;}}

/* Stock '?' explainer: ink bubble, page-colored text, inverts with theme. */
.vp-qm{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-left:8px;border-radius:999px;
  background:var(--c-ink);color:var(--c-page);font-size:.68rem;font-weight:800;
  cursor:help;user-select:none;vertical-align:1px;}
.vp-qm-tip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  width:262px;padding:10px 12px;border-radius:var(--r-sm);z-index:60;
  background:var(--c-ink);color:var(--c-page);font-size:.78rem;font-weight:500;line-height:1.55;
  text-align:left;white-space:pre-line;opacity:0;pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
  box-shadow:var(--sh-lg);}
.vp-qm:hover .vp-qm-tip,.vp-qm:focus .vp-qm-tip{opacity:1;transform:translateX(-50%) translateY(0);}
.pdp-avail i{background:var(--c-ok);}
.pdp-avail[data-s="preorder"] i,.pdp-avail[data-s="backordered"] i{background:var(--c-warn);}
.pdp-avail[data-s="out"] i{background:var(--c-bad);}

/* Closing-band vials: explicit placement; images stay transparent PNGs. */
.close-band{position:relative;overflow:visible;}
.close-vial-link.l-link{left:2.5%;top:6%;}
.close-vial-link.r-link{right:2.5%;bottom:4%;}
.close-vial-link .close-vial{position:static;inset:auto;display:block;
  width:auto;height:clamp(150px,16vw,240px);background:none;box-shadow:none;border:0;opacity:1;}
@media (max-width:900px){.close-vial-link{display:none;}}

/* Tested-At-Every-Step: equal cells so the hairlines align perfectly */
.test-tab{justify-content:flex-start;width:100%;padding:11px 4px;
  border-bottom:1px solid var(--c-line);border-radius:0;}
@media(max-width:720px){.test-tabs{grid-template-columns:repeat(2,1fr);gap:0 16px;}}

.coa-toolrow{display:flex;gap:12px;align-items:stretch;justify-content:center;
  flex-wrap:wrap;margin:0 0 var(--s6);}
.coa-toolrow .coa-search{flex:1 1 340px;max-width:520px;margin:0;}
.coa-toolrow .shop-sortwrap{position:relative;}
.coa-toolrow .shop-sortbtn{height:100%;}

/* AUTHORITATIVE shop-grid widths (v50): 4-across until 860, 2-across floor below. */
.shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
@media(max-width:860px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
#sub-save{padding:13px 25px!important;}


.cs-bacwater-nudge button:not(.cs-bacwater-close):hover{box-shadow:0 12px 32px rgba(78,43,164,.32),0 6px 20px rgba(12,140,206,.26)!important;transform:translateY(-2px);}
.cs-bacwater-close:hover{color:var(--c-bad);background:none;}
html.vp-dark .cart-disc-price{color:#7BD8A0!important;}
.shop-grid .btn:hover,.feat-card .btn:hover,.coa-body .btn:hover{box-shadow:var(--sh-lg)!important;transform:translateY(-3px);}
.pdp-avail[data-s="instock"] .vp-qm,.pdp-avail[data-s="preorder"] .vp-qm{display:none;}
@keyframes vpPing{0%{transform:scale(1);opacity:.5;}75%,100%{transform:scale(2.6);opacity:0;}}
.pdp-avail i{position:relative;}
.pdp-avail i::after{content:'';position:absolute;inset:0;border-radius:inherit;background:inherit;
  animation:vpPing 2s cubic-bezier(0,0,.2,1) infinite;}
@media (prefers-reduced-motion:reduce){.pdp-avail i::after{animation:none;}}

.feat-sizes{display:flex;gap:8px;flex-wrap:wrap;}
.feat-size{padding:6px 12px;border:1.5px solid var(--c-line-2);border-radius:999px;
  background:var(--c-card);color:var(--c-ink);font-family:var(--font);font-size:.78rem;font-weight:700;
  cursor:pointer;transition:all var(--t-fast) var(--ease);}
.feat-size:hover{border-color:var(--c-ink-3);}
.feat-size.on{background:var(--c-ink);color:var(--c-page);border-color:var(--c-ink);}

/* v54 */
.cart-sidebar .cs-bacwater-nudge .cs-bacwater-close{position:absolute;top:4px;right:6px;background:none!important;border:0!important;
  color:var(--c-ink-3)!important;font-size:1.15rem;line-height:1;padding:2px 6px;border-radius:6px;box-shadow:none!important;transform:none!important;}
.cart-sidebar .cs-bacwater-nudge .cs-bacwater-close::before{display:none!important;}
.cart-sidebar .cs-bacwater-nudge .cs-bacwater-close:hover{color:var(--c-bad)!important;background:none!important;}
.cart-sidebar-close{pointer-events:auto!important;position:relative;z-index:6;cursor:pointer;}
/* 4) PDP main image fills its box */

/* v54: subscribe matches View COAs footprint exactly */
#sub-save{height:45px!important;padding-top:0!important;padding-bottom:0!important;white-space:nowrap;}
.pdp-coa-btn{height:45px!important;padding-top:0!important;padding-bottom:0!important;}

/* v55 */
.pdp-thumb{overflow:hidden;}
.pdp-thumb img{object-fit:cover!important;transform:scale(1.45);}
.pdp-sub-row .pdp-coa-btn{margin-top:0!important;}
.link-arrow{transition:color var(--t-fast) var(--ease);}
.link-arrow:hover{color:var(--c-accent)!important;}
.close-band{text-align:center!important;padding:var(--s9) 0!important;}
.close-band .wrap{display:flex!important;flex-direction:column;align-items:center;text-align:center!important;max-width:1100px!important;margin:0 auto!important;}
.close-band .close-h{text-align:center!important;margin:0 auto var(--s5)!important;}
.close-band .btn{margin:0 auto!important;}
.feat-card .feat-media{cursor:pointer;}

/* v55: header extras */
.hdr-search-btn,.hdr-admin-btn{display:none;}
@media(max-width:1080px){
  .hdr-search-btn{display:inline-flex;}
  .hdr-admin-btn:not([hidden]){display:inline-flex;}
  .hdr{position:sticky;}
  .hdr.vp-search-open .hdr-search{display:block!important;position:absolute;left:12px;right:12px;top:calc(100% + 8px);z-index:60;max-width:none;margin:0;}
  .hdr.vp-search-open .hdr-search .search{display:flex!important;background:var(--c-card);border:1px solid var(--c-line-2);border-radius:var(--r-pill);box-shadow:var(--sh-lg);}
}
.vp-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--c-ink-3);cursor:pointer;border-radius:8px;transition:color var(--t-fast) var(--ease);}
.vp-eye:hover,.vp-eye.on{color:var(--c-accent);}

/* v57: the sidecart buttons are plain .btn instances */
.cart-sidebar .cart-sidebar-button.btn{width:100%;display:inline-flex;justify-content:center;box-sizing:border-box;overflow:visible;}
.cart-sidebar .cart-sidebar-button.btn.btn-solid{background:var(--c-card);color:var(--c-ink);border:1.5px solid var(--c-line-2);}
.cart-sidebar .cart-sidebar-button.btn.btn-solid:hover{background:var(--c-ink);color:var(--c-page);}
.cart-sidebar .cart-sidebar-button.btn.btn-solid::before{display:none!important;}
.btn-solid{border:1.5px solid var(--c-line-2)!important;}
.btn-solid:hover{box-shadow:var(--sh-md);transform:translateY(-1px);}

/* v57: no flash between themes or before auth resolves */
.vp-img-dark{display:none!important;} html.vp-dark .vp-img-dark{display:block!important;} html.vp-dark .vp-img-light{display:none!important;}
html.vp-has-session:not(.vp-auth-resolved) [data-auth-swap]{visibility:hidden;}
html.vp-has-session:not(.vp-auth-resolved) .mb-signin{visibility:hidden;}

/* v57 partner code card: code bigger, link block quieter (desktop + mobile) */
.pp-code-value{font-size:2.6rem!important;letter-spacing:.08em!important;}
.pp-code-row{margin:8px 0 14px!important;}
.pp-link-box{padding:10px 12px!important;}
.pp-link-box .pp-code-label{font-size:.6rem!important;}
.pp-link-input{font-size:.78rem!important;padding:8px 10px!important;}
.pp-code-btn{font-size:.74rem!important;padding:8px 12px!important;}
.pp-code-note{font-size:.74rem!important;line-height:1.5!important;margin-top:10px!important;opacity:.9;}
@media(max-width:760px){.pp-code-value{font-size:2.2rem!important;}}

/* ══ v57 RETROFIT: cart, checkout, payment ══════════════════════════════ */
body[data-page] h1{background:none!important;-webkit-background-clip:initial!important;-webkit-text-fill-color:currentColor!important;
  color:var(--c-ink)!important;font-family:var(--font)!important;font-weight:800!important;letter-spacing:-.03em!important;}
body[data-page="cart"] .page-shell{font-family:var(--font);}
body[data-page="cart"] .continue-shopping{color:var(--c-ink)!important;font-weight:700;}
body[data-page="cart"] .continue-shopping:hover{color:var(--c-accent)!important;}
body[data-page="cart"] .cart-item{display:grid!important;grid-template-columns:72px minmax(120px,1fr) max-content max-content max-content 30px;gap:12px;align-items:center;
  background:var(--c-card)!important;border:1px solid var(--c-line)!important;border-radius:var(--r-lg)!important;box-shadow:var(--sh-xs)!important;padding:18px 20px!important;}
body[data-page="cart"] .cart-item:hover{box-shadow:var(--sh-md)!important;transform:none!important;}
body[data-page="cart"] .item-image{width:72px;height:72px;border-radius:var(--r-md);background:var(--c-card);overflow:hidden;display:flex;align-items:center;justify-content:center;}
body[data-page="cart"] .item-image img{width:100%;height:100%;object-fit:cover;transform:scale(1.25);}
body[data-page="cart"] .item-details{min-width:0;}
body[data-page="cart"] .item-name{color:var(--c-ink)!important;font-size:1rem!important;font-weight:800!important;letter-spacing:-.01em;line-height:1.3;}
body[data-page="cart"] .item-sku{color:var(--c-ink-3)!important;font-size:.78rem;}
body[data-page="cart"] .item-price,body[data-page="cart"] .item-total{background:none!important;-webkit-background-clip:initial!important;-webkit-text-fill-color:currentColor!important;
  color:var(--c-ink)!important;font-weight:800!important;font-size:1rem!important;white-space:nowrap;}
body[data-page="cart"] .item-price s,body[data-page="cart"] .item-price del,body[data-page="cart"] .item-price .old{color:var(--c-ink-4)!important;font-weight:600;margin-right:6px;}
body[data-page="cart"] .item-price .new,body[data-page="cart"] .item-price .disc{color:var(--c-ok)!important;}
body[data-page="cart"] .qty-controls{display:inline-flex;align-items:center;border:1.5px solid var(--c-line-2);border-radius:var(--r-pill);overflow:hidden;background:var(--c-card);}
body[data-page="cart"] .qty-btn{background:transparent!important;color:var(--c-ink)!important;border:0!important;width:36px;height:36px;font-weight:800;}
body[data-page="cart"] .qty-btn:hover{background:var(--c-ink)!important;color:var(--c-page)!important;}
body[data-page="cart"] .qty-value{min-width:36px;text-align:center;font-weight:800;color:var(--c-ink);}
body[data-page="cart"] .remove-btn{background:none!important;border:0!important;color:var(--c-ink-3)!important;width:34px;height:34px;border-radius:8px;}
body[data-page="cart"] .remove-btn:hover{color:var(--c-bad)!important;background:var(--c-panel)!important;}
body[data-page="cart"] .summary-row{color:var(--c-ink-2);font-family:var(--font);}
body[data-page="cart"] .summary-row span:last-child{color:var(--c-ink);font-weight:700;}
body[data-page="cart"] .summary-row.total{border-top:1px solid var(--c-line-2)!important;border-bottom:0!important;color:var(--c-ink);}
body[data-page="cart"] .summary-row.total span:last-child{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--c-ink)!important;font-size:1.35rem;font-weight:800;}
body[data-page="cart"] .btn-checkout.btn{width:100%;display:inline-flex;justify-content:center;margin-top:18px;}
body[data-page="cart"] .free-ship-card{background:var(--c-panel)!important;border:1px solid var(--c-line)!important;border-radius:var(--r-md)!important;}
body[data-page="cart"] .progress-bar{background:var(--c-bar-track,#DCDCDC)!important;}
body[data-page="cart"] .progress-fill{background:var(--grad-wave)!important;background-size:200% 100%!important;background-position:calc(var(--vp-pan,0)*1%) 50%!important;}
body[data-page="cart"] .item-count{color:var(--c-ink-3);}
body[data-page="checkout"] .co-hero .gt,body[data-page="checkout"] .co-hero p:first-child{color:var(--c-ink-3)!important;background:none!important;-webkit-text-fill-color:currentColor!important;
  font-size:.7rem!important;font-weight:800!important;letter-spacing:.18em!important;text-transform:uppercase!important;}
body[data-page="checkout"] .co-trust span,body[data-page="checkout"] .co-trust > *{background:var(--c-panel)!important;color:var(--c-ink)!important;border:1px solid var(--c-line)!important;border-radius:var(--r-pill)!important;}
body[data-page="checkout"] .co-trust svg{color:var(--c-accent);}
body[data-page="checkout"] .step-num{background:var(--c-panel)!important;color:var(--c-ink-3)!important;border:1.5px solid var(--c-line-2)!important;box-shadow:none!important;font-weight:800;}
body[data-page="checkout"] .step-item.active .step-num,body[data-page="checkout"] .step-item.done .step-num{background:var(--c-ink)!important;color:var(--c-page)!important;border-color:var(--c-ink)!important;}
body[data-page="checkout"] .step-label{color:var(--c-ink-3)!important;}
body[data-page="checkout"] .step-item.active .step-label,body[data-page="checkout"] .step-item.done .step-label{color:var(--c-ink)!important;}
body[data-page="checkout"] .step-line{background:var(--c-line-2)!important;}
body[data-page="checkout"] .step-item.done ~ .step-line,body[data-page="checkout"] .step-line.done{background:var(--c-ink)!important;}
body[data-page="checkout"] .co-card{background:var(--c-card)!important;border:1px solid var(--c-line)!important;border-radius:var(--r-lg)!important;box-shadow:var(--sh-xs)!important;overflow:hidden;}
body[data-page="checkout"] .co-card::before{background:var(--grad-wave)!important;background-size:200% 100%!important;background-position:calc(var(--vp-pan,0)*1%) 50%!important;}
body[data-page="checkout"] .card-icon{background:var(--c-panel)!important;color:var(--c-accent)!important;border-radius:10px;}
body[data-page="checkout"] .field{background:var(--c-panel)!important;border:1px solid var(--c-line)!important;border-radius:var(--r-md)!important;}
body[data-page="checkout"] .field label{color:var(--c-ink)!important;font-weight:800;}
body[data-page="checkout"] .req{color:var(--c-bad);}
body[data-page] :is(.page-shell,.co-card,.field,.pay-card,.pay-detail,.cs-promo-wrap,.review-row,.md-body,form) :is(input:not([type=checkbox]):not([type=radio]),select,textarea):not(.hdr *){background:var(--c-card)!important;color:var(--c-ink)!important;
  border:1.5px solid var(--c-line-2)!important;border-radius:var(--r-sm)!important;font-family:var(--font)!important;}
body[data-page] :is(.page-shell,.co-card,.field,.pay-card,.pay-detail,.cs-promo-wrap,.review-row,.md-body,form) :is(input,select,textarea):not(.hdr *):focus{border-color:var(--c-accent)!important;box-shadow:0 0 0 3px var(--c-focus)!important;outline:none;}
body[data-page] input::placeholder,body[data-page] textarea::placeholder{color:var(--c-ink-4);}
body[data-page="checkout"] .summary-line{color:var(--c-ink-2);}
body[data-page="checkout"] .summary-line.total,body[data-page="checkout"] .summary-line.total span{color:var(--c-ink)!important;-webkit-text-fill-color:currentColor!important;background:none!important;}
body[data-page="checkout"] .si-price{color:var(--c-ink)!important;font-weight:800;}
body[data-page="checkout"] .si-price s,body[data-page="checkout"] .si-price del{color:var(--c-ink-4)!important;}
body[data-page="checkout"] .ship-option{background:var(--c-card)!important;border:1.5px solid var(--c-line-2)!important;border-radius:var(--r-md)!important;}
body[data-page="checkout"] .ship-option.selected,body[data-page="checkout"] .ship-option:has(input:checked){border-color:var(--c-ink)!important;box-shadow:0 0 0 1px var(--c-ink)!important;}
body[data-page="checkout"] .ship-price{color:var(--c-ink)!important;font-weight:800;}
body[data-page="checkout"] .ship-tooltip > svg,body[data-page="checkout"] .ship-tooltip > span:first-child{display:none!important;}
body[data-page="checkout"] .ship-tooltip::before{content:'?';display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;
  background:var(--c-ink);color:var(--c-page);font-size:.68rem;font-weight:800;line-height:1;}
body[data-page="checkout"] .ship-tip-text{background:var(--c-ink)!important;color:var(--c-page)!important;border:0!important;border-radius:var(--r-sm)!important;box-shadow:var(--sh-lg)!important;font-family:var(--font)!important;}
body[data-page="checkout"] .btn-continue.btn,body[data-page="checkout"] .btn-place.btn{width:auto;min-width:220px;display:inline-flex;justify-content:center;}
body[data-page="checkout"] .btn-back.btn{display:inline-flex;}
body[data-page="checkout"] .pay-method-card{background:var(--c-card)!important;border:1.5px solid var(--c-line-2)!important;border-radius:var(--r-md)!important;}
body[data-page="checkout"] .pay-method-card:has(input:checked),body[data-page="checkout"] .pay-method-card.selected{border-color:var(--c-ink)!important;box-shadow:0 0 0 1px var(--c-ink)!important;}
body[data-page="checkout"] .pay-method-name{color:var(--c-ink)!important;font-weight:800;}
body[data-page="checkout"] .pay-method-hint{color:var(--c-ink-3)!important;}
body[data-page="checkout"] .md-line,body[data-page="checkout"] .review-row{color:var(--c-ink-2);border-color:var(--c-line)!important;}
body[data-page="checkout"] .review-label{color:var(--c-ink-3)!important;} body[data-page="checkout"] .review-val{color:var(--c-ink)!important;font-weight:700;}
/* payment page: gradient glyphs, dark-safe panes */
body[data-page="payment"] .pay-card,body[data-page="payment"] .pay-detail,body[data-page="payment"] .order-card,body[data-page="payment"] .steps-card{background:var(--c-card)!important;color:var(--c-ink)!important;border:1px solid var(--c-line)!important;border-radius:var(--r-lg)!important;}
body[data-page="payment"] .pay-tabs{background:var(--c-panel)!important;border:1px solid var(--c-line)!important;border-radius:var(--r-md)!important;overflow:hidden;}
body[data-page="payment"] .pay-tab{background:transparent!important;color:var(--c-ink-3)!important;border:0!important;font-family:var(--font)!important;font-weight:800!important;display:flex!important;flex-direction:column;align-items:center;gap:8px;padding:16px 8px!important;}
body[data-page="payment"] .pay-tab:not(:last-child){border-right:1px solid var(--c-line)!important;}
body[data-page="payment"] .pay-tab.active{background:var(--c-card)!important;color:var(--c-ink)!important;}
body[data-page="payment"] .pay-tab:hover{opacity:1!important;background:var(--c-card)!important;}
body[data-page="payment"] code,body[data-page="payment"] .copy-box,body[data-page="payment"] .handle-box,body[data-page="payment"] pre{background:var(--c-panel)!important;color:var(--c-ink)!important;border:1px solid var(--c-line)!important;}
.pay-glyph{display:inline-block;width:38px;height:38px;background:var(--grad-wave);background-size:200% 100%;background-position:calc(var(--vp-pan,0)*1%) 50%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;}
.pay-glyph-zelle{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 2h18a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm3.2 4v3h6.1L6 17.6V19h12v-3h-6.4L18 7.4V6z' fill='black'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 2h18a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm3.2 4v3h6.1L6 17.6V19h12v-3h-6.4L18 7.4V6z' fill='black'/></svg>");}
.pay-glyph-venmo{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h5.6l2.9 10.2L15.4 3H21l-7 18H8.6z' fill='black'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h5.6l2.9 10.2L15.4 3H21l-7 18H8.6z' fill='black'/></svg>");}
.pay-glyph-btc{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.5 1h1.8v2.2h1.6V1h1.8v2.3c2.7.3 4.5 1.8 4.5 4.3 0 1.5-.8 2.7-2 3.3 1.6.5 2.8 1.8 2.8 3.8 0 2.8-2 4.5-5.3 4.8V23h-1.8v-2.4h-1.6V23H9.5v-2.4H6V18h1.6V6H6V3.5h3.5zm1.7 5v4.2h2.2c1.6 0 2.5-.8 2.5-2.1 0-1.4-.9-2.1-2.5-2.1zm0 6.8V18h2.6c1.8 0 2.8-.9 2.8-2.3 0-1.5-1-2.3-2.8-2.3z' fill='black'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.5 1h1.8v2.2h1.6V1h1.8v2.3c2.7.3 4.5 1.8 4.5 4.3 0 1.5-.8 2.7-2 3.3 1.6.5 2.8 1.8 2.8 3.8 0 2.8-2 4.5-5.3 4.8V23h-1.8v-2.4h-1.6V23H9.5v-2.4H6V18h1.6V6H6V3.5h3.5zm1.7 5v4.2h2.2c1.6 0 2.5-.8 2.5-2.1 0-1.4-.9-2.1-2.5-2.1zm0 6.8V18h2.6c1.8 0 2.8-.9 2.8-2.3 0-1.5-1-2.3-2.8-2.3z' fill='black'/></svg>");}

/* v57 cart refinements */
body[data-page="cart"] .item-name{white-space:normal;}
body[data-page="cart"] .item-price{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.15;}
body[data-page="cart"] .item-price s,body[data-page="cart"] .item-price del{margin:0;font-size:.82rem;}
body[data-page="cart"] .item-total{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.15;}
body[data-page="cart"] .item-total s,body[data-page="cart"] .item-total del{color:var(--c-ink-4)!important;font-weight:600;font-size:.82rem;}
body[data-page="cart"] .summary-row.total strong,body[data-page="cart"] #orderTotal{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--c-ink)!important;font-size:1.35rem;font-weight:800;}
body[data-page="cart"] .summary-row.total{display:flex;align-items:center;justify-content:space-between;}
body[data-page="cart"] h2,body[data-page="cart"] h3{color:var(--c-ink)!important;border-left-color:var(--c-ink)!important;}
body[data-page="cart"] .cs-promo-row,body[data-page="cart"] .cs-promo-wrap{border-color:var(--c-line-2)!important;}
body[data-page="cart"] .cs-promo-wrap .cs-promo-label,body[data-page="cart"] .cs-promo-wrap span{color:var(--c-ink)!important;}
@media(max-width:760px){body[data-page="cart"] .cart-item{grid-template-columns:72px minmax(0,1fr) 34px;grid-auto-rows:auto;}
  body[data-page="cart"] .item-price,body[data-page="cart"] .qty-controls,body[data-page="cart"] .item-total{grid-column:2;justify-self:start;align-items:flex-start;}}

/* v57 checkout refinements */
body[data-page="checkout"] .summary-total{color:var(--c-ink)!important;border-top:1px solid var(--c-line-2)!important;}
body[data-page="checkout"] .summary-total .st-val,body[data-page="checkout"] #sumTotal,body[data-page="checkout"] .md-total span,body[data-page="checkout"] .review-total .review-val{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--c-ink)!important;font-weight:800;}
body[data-page="checkout"] .oid-badge{background:var(--c-panel)!important;border:1px solid var(--c-line)!important;border-radius:var(--r-md)!important;}
body[data-page="checkout"] .oid-label{color:var(--c-ink-3)!important;}
body[data-page="checkout"] .oid-val{color:var(--c-ink)!important;background:none!important;-webkit-text-fill-color:currentColor!important;font-family:'Courier New',monospace;font-weight:800;letter-spacing:.06em;}
body[data-page="checkout"] .co-card::before{background:var(--grad-wave)!important;background-size:200% 100%!important;background-position:calc(var(--vp-pan,0)*1%) 50%!important;}
body[data-page="checkout"] .cs-promo-wrap,body[data-page="checkout"] .promo-toggle,body[data-page="checkout"] [class*=promo]{color:var(--c-ink)!important;border-color:var(--c-line-2)!important;}
body[data-page="checkout"] .co-trust span{text-transform:none!important;letter-spacing:0!important;font-size:.8rem!important;}

/* v57 payment refinements */
body[data-page="payment"] .oid-val,body[data-page="payment"] .pay-handle,body[data-page="payment"] .ptb-val,body[data-page="payment"] .oid-tile b,body[data-page="payment"] .oid-tile strong{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--c-ink)!important;font-weight:800;}
body[data-page="payment"] .oid-tile{background:var(--c-card)!important;border:1px solid var(--c-line)!important;border-radius:var(--r-lg)!important;}
body[data-page="payment"] .pay-tab:not(.active) .pay-glyph{opacity:.45;}
body[data-page="payment"] .pay-tab.active .pay-glyph{opacity:1;}
body[data-page="payment"] .pay-glyph{width:44px;height:44px;}
body[data-page="payment"] .pay-card a,body[data-page="payment"] .steps-card a,body[data-page="payment"] .pay-detail a,body[data-page="payment"] .pay-note a{color:var(--c-accent);}
body[data-page="payment"] .step-num{background:var(--c-panel)!important;color:var(--c-ink-3)!important;border:1.5px solid var(--c-line-2)!important;box-shadow:none!important;}
body[data-page="payment"] .step-item.active .step-num,body[data-page="payment"] .step-item.done .step-num{background:var(--c-ink)!important;color:var(--c-page)!important;border-color:var(--c-ink)!important;}
body[data-page="payment"] .pay-back-btn{border:1.5px solid var(--c-line-2)!important;background:var(--c-card)!important;color:var(--c-ink)!important;border-radius:var(--r-sm)!important;}
body[data-page="payment"] .pay-back-btn:hover{background:var(--c-ink)!important;color:var(--c-page)!important;}
body[data-page="cart"] .qty-controls{width:max-content!important;flex:0 0 auto;}
body[data-page="cart"] .qty-btn{width:32px!important;height:32px!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center;}
body[data-page="cart"] .item-price:has(s),body[data-page="cart"] .item-price:has(del){color:var(--c-ok)!important;}
body[data-page="cart"] .item-total:has(s),body[data-page="cart"] .item-total:has(del){color:var(--c-ok)!important;}
body[data-page="cart"] .item-price s,body[data-page="cart"] .item-total s{color:var(--c-ink-4)!important;}

/* v58 tested-at-every-step separators: short lines with gaps, never L shapes */
.test-tabs{gap:0!important;}
.test-tab{position:relative;border:0!important;border-bottom:0!important;border-radius:0!important;}
.test-tab::before,.test-tab::after{content:'';position:absolute;background:var(--c-line-2);opacity:.9;pointer-events:none;}
.test-tab::after{right:0;top:12px;bottom:12px;width:1px;}            /* right separator */
.test-tab::before{left:12px;right:12px;bottom:0;height:1px;}         /* bottom separator */
.test-tab:nth-child(5n)::after{display:none;}                        /* end of a row: no right line */
.test-tab:nth-child(n+6)::before{display:none;}                      /* last row: no bottom line */
@media(max-width:720px){
  .test-tabs{grid-template-columns:repeat(2,1fr)!important;}
  .test-tab:nth-child(5n)::after{display:block;}
  .test-tab:nth-child(n+6)::before{display:block;}
  .test-tab:nth-child(2n)::after{display:none;}                      /* right column: no right line */
  .test-tab:nth-child(n+9)::before{display:none;}                    /* last row of 2x5 */
}
.test-tab.active::before,.test-tab.active::after{opacity:.9;}

/* v58: no glow around typing areas, a plain ink border is the focus state */
.search:focus-within,.search input:focus,.news-form:focus-within,.news-form input:focus,#coa-q:focus,input:focus,textarea:focus,select:focus{box-shadow:none!important;outline:none!important;}
.search:focus-within,.news-form:focus-within{border-color:var(--c-ink)!important;}
input:focus,textarea:focus,select:focus{border-color:var(--c-ink)!important;}

/* ══ v58 PHONE SCALING ══════════════════════════════════════════════════
   Below Chrome's smallest desktop window the whole type scale steps down
   (everything is rem-based), gutters tighten, and grids collapse cleanly. */
@media(max-width:430px){html{font-size:15px;} .wrap{padding-left:14px!important;padding-right:14px!important;}}
@media(max-width:380px){html{font-size:14px;}}
@media(max-width:600px){
  img,svg,video{max-width:100%;}
  table{display:block;overflow-x:auto;max-width:100%;}
  .mb-grid2,.pp-dash-main,.pp-dash-stats,.stat-grid{grid-template-columns:1fr!important;}
  .adm-tabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;} .adm-tabs::-webkit-scrollbar{display:none;}
  .adm-tab{white-space:nowrap;}
  .pp-ladder{--tier-dot:52px!important;--tier-pad:2px!important;}
  .pp-tier-dot img{border-radius:inherit;}
  .pp-code-value{font-size:1.9rem!important;letter-spacing:.04em!important;}
  .pp-link-row{flex-wrap:wrap;} .pp-link-input{min-width:0;width:100%;}
  .mm-tabs{width:100%;justify-content:space-between;} .mm-tab{flex:1;padding:9px 6px;font-size:.8rem;}
  .ms-modal-card{border-radius:var(--r-lg);}
  .co-trust{flex-wrap:wrap;} .step-bar{transform:scale(.92);transform-origin:left center;}
  .vp-seg{transform:scale(.94);transform-origin:center;}
  .google-btn{white-space:nowrap;font-size:.92rem;padding:12px 14px;}
  .google-btn svg,.google-btn img{flex:0 0 auto;}
}
/* home: hero side on phones, sits below the hero card and above the four claims */
@media(max-width:900px){
  .hero-side{display:block!important;margin-top:var(--s4);text-align:center;padding:var(--s5)!important;}
  .hero-side img{max-width:min(270px,72%)!important;margin:0 auto;display:block;}
}
/* home: trusted section on phones */
@media(max-width:900px){
  .proof{display:flex!important;flex-direction:column;text-align:center;}
  .proof .stats{display:flex!important;flex-direction:row!important;justify-content:center;gap:clamp(12px,4vw,28px);flex-wrap:nowrap!important;}
  .proof .stat{flex:1 1 0;min-width:0;text-align:center;}
  .proof .stat b{font-size:clamp(1.5rem,7vw,2.2rem);display:block;}
  .proof .stat span{font-size:clamp(.58rem,2.6vw,.7rem);}
  .proof p.t-sm[style*="display:flex"]{justify-content:center;}
  .proof-media{position:relative;margin:var(--s6) auto 44px;text-align:center;max-width:420px;padding-bottom:0!important;}
  .proof-media img{margin:0 auto;display:block;}
  .proof-media .proof-cta{position:absolute!important;left:50%;bottom:-22px;transform:translateX(-50%);white-space:nowrap;}
}
/* home: why-choose cards raise, collection image shows on phones and opens the shop */
.bento .card-lift{transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out);}
.bento .card-lift:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);}
.bento-tall .bento-img-link{display:block;cursor:pointer;}
.bento-tall .bento-img-link img{display:block;}

/* home: closing-band vials on phones */
@media(max-width:900px){
  .close-band{overflow:hidden;padding-top:calc(var(--s9) + 20px)!important;}
  .close-vial-link{display:block!important;}
  .close-vial-link .close-vial{height:clamp(104px,30vw,150px)!important;}
  .close-vial-link.l-link{left:3%;top:9%;} .close-vial-link.r-link{right:3%;bottom:5%;}
}
/* home: featured carousel on phones (desktop grid untouched) */
@media(max-width:760px){
  .feat-grid{display:flex!important;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:6px;}
  .feat-grid::-webkit-scrollbar{display:none;}
  .feat-grid .feat-card{flex:0 0 100%!important;scroll-snap-align:start;scroll-snap-stop:always;}
  .feat-progress{height:4px;border-radius:999px;background:var(--c-bar-track,#DCDCDC);margin:12px 0 4px;overflow:hidden;}
  .feat-progress i{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad-wave);background-size:200% 100%;background-position:calc(var(--vp-pan,0)*1%) 50%;transition:width .12s linear;}
  .feat-dots{display:flex;justify-content:center;gap:8px;margin-top:8px;}
  .feat-dots i{width:7px;height:7px;border-radius:999px;background:var(--c-line-2);transition:background var(--t) var(--ease),transform var(--t) var(--ease);}
  .feat-dots i.on{background:var(--c-ink);transform:scale(1.3);}
}
@media(min-width:761px){.feat-progress,.feat-dots{display:none!important;}}
/* shop on phones */
@media(max-width:760px){
  .shop-head .t-body{font-size:.92rem!important;}
  .shop-tools{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:10px!important;align-items:stretch!important;}
  .shop-tools .search{flex:1 1 100%!important;width:100%!important;max-width:none!important;margin:0!important;}
  .shop-tools .shop-sortwrap,.shop-tools .shop-groupwrap{flex:1 1 calc(50% - 5px)!important;width:calc(50% - 5px)!important;max-width:calc(50% - 5px)!important;min-width:0;display:flex;margin:0!important;}
  .shop-tools .shop-sortbtn,.shop-tools .shop-groupbtn{width:100%;justify-content:center;font-size:.84rem;padding:11px 10px;}
  .fine-cats{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:6px;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .fine-cats::-webkit-scrollbar{display:none;}
  .fine-cats>*{flex:0 0 auto;white-space:nowrap;font-size:.76rem!important;padding:7px 12px!important;}
}
@media(max-width:600px){
  .pcard-name{font-size:.82rem!important;letter-spacing:0!important;}
  .pcard-price{font-size:.9rem!important;}
  .pcard-size{font-size:.7rem!important;}
  .pcard .btn{font-size:.72rem!important;padding:9px 6px!important;letter-spacing:0!important;white-space:nowrap;}
  .coa-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .coa-name{font-size:.8rem!important;}
  .news-form{flex-direction:column!important;align-items:stretch!important;}
  .news-form input,.news-form button{width:100%!important;}
}

/* v58: shared modal shell (memberships, facility) */
.ms-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(10,10,10,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.ms-modal[hidden]{display:none;}
.ms-modal-card{position:relative;width:min(520px,100%);max-height:92vh;overflow:auto;background:var(--c-card);color:var(--c-ink);
  border:1px solid var(--c-line);border-radius:var(--r-xl);box-shadow:var(--sh-lg);font-family:var(--font);}
.mm-x{position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;background:none;color:var(--c-ink-3);font-size:1.5rem;line-height:1;cursor:pointer;border-radius:8px;}
.mm-x:hover{color:var(--c-bad);}
.mm-top{padding:28px 28px 20px;border-bottom:1px solid var(--c-line);}
.mm-eyebrow{display:block;font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  background:var(--grad-wave);background-size:200% 100%;background-position:calc(var(--vp-pan,0)*1%) 50%;-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px;}
.mm-title{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin:0 0 10px;}
.mm-amount{font-size:2.2rem;font-weight:800;letter-spacing:-.04em;}
.mm-amount span{font-size:1rem;font-weight:600;color:var(--c-ink-3);margin-left:4px;letter-spacing:0;}
.mm-ref{font-size:.86rem;color:var(--c-ink-2);margin:12px 0 0;line-height:1.6;}
.mm-ref code{display:inline-block;margin-top:6px;padding:8px 14px;border-radius:var(--r-sm);background:var(--c-panel);border:1px dashed var(--c-line-2);
  font-family:'Courier New',monospace;font-weight:800;letter-spacing:.08em;color:var(--c-ink);}
.mm-body{padding:20px 28px 28px;}
.mm-tabs{display:inline-flex;gap:4px;padding:5px;background:var(--c-panel);border-radius:var(--r-pill);margin-bottom:18px;}
.mm-tab{padding:9px 20px;border-radius:var(--r-pill);border:1.5px solid transparent;background:transparent;color:var(--c-ink-3);font-family:var(--font);font-weight:700;font-size:.86rem;cursor:pointer;transition:all var(--t-fast) var(--ease);}
.mm-tab.active{background:var(--c-ink);color:var(--c-page);border-color:var(--c-ink);}
.mm-pane{display:none;} .mm-pane.active{display:block;}
.mm-label{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-3);margin:0 0 6px;}
.mm-handle{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin:0 0 12px;}
.mm-qr{width:160px;height:160px;border-radius:var(--r-md);overflow:hidden;background:#fff;border:1px solid var(--c-line);margin:0 0 12px;}
.mm-qr img{width:100%;height:100%;object-fit:cover;display:block;}
.mm-pane-note{font-size:.9rem;color:var(--c-ink-2);line-height:1.6;margin:0 0 6px;}
.mm-done{width:100%;margin-top:18px;padding:15px;border:2px solid transparent;border-radius:var(--r-sm);color:#fff;font-family:var(--font);font-weight:800;font-size:.95rem;cursor:pointer;
  background:var(--grad-wave);background-size:200% 100%;background-position:calc(var(--vp-pan,0)*1%) 50%;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);}
.mm-done:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(78,43,164,.32),0 6px 20px rgba(12,140,206,.26);}
.mm-foot{font-size:.78rem;color:var(--c-ink-3);line-height:1.6;margin:14px 0 0;}
.ms-cta-msg{font-size:.82rem;color:var(--c-bad);margin-top:8px;min-height:1em;}
@media(max-width:760px){.shop-tools>*{box-sizing:border-box;} .shop-tools .search{order:-1;}}
@media(max-width:900px){.proof-media{overflow:visible!important;} .proof-media .proof-cta{z-index:3;}}

/* ══ v59 ═════════════════════════════════════════════════════════════════ */
/* 3) newsletter: the raised outline stays on focus and gains the gradient glow; phones get the same outline */
.news-form{box-shadow:var(--sh-md),0 0 0 1px var(--c-line)!important;}
.news-form:focus-within{box-shadow:var(--sh-md),0 0 0 1px var(--c-line),0 12px 32px rgba(78,43,164,.28),0 6px 20px rgba(12,140,206,.22)!important;border-color:var(--c-line)!important;}
/* 4) dark mode typing: the field keeps its colour, text is ink (autofill included) */
html.vp-dark input:focus,html.vp-dark textarea:focus,html.vp-dark select:focus{background:var(--c-card)!important;color:var(--c-ink)!important;}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--c-card) inset!important;box-shadow:0 0 0 1000px var(--c-card) inset!important;
  -webkit-text-fill-color:var(--c-ink)!important;caret-color:var(--c-ink);transition:background-color 9999s ease-out 0s;}
input,textarea,select{caret-color:var(--c-ink);}
/* 11) one utility for anything that should ride the scroll wave; no transition on the position so it never stutters */
.vp-wave,.pp-code-card,.pp-code-btn.solid{transition-property:transform,box-shadow,color,border-color,opacity!important;}
.vp-wave{background:var(--grad-wave)!important;background-size:200% 100%!important;background-position:calc(var(--vp-pan,0)*1%) 50%!important;}
/* 19) sparkle on every progress fill; nothing shows at 0% because the fill has no width */
.free-shipping-bar,body[data-page="cart"] .progress-fill,#pp-progress-fill,.pp-track>div{position:relative;overflow:hidden;}
.free-shipping-bar::after,body[data-page="cart"] .progress-fill::after,#pp-progress-fill::after,.pp-track>div::after{content:'';position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);transform:translateX(-120%);animation:vpBarShine 1.3s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none;}
@media (prefers-reduced-motion:reduce){.free-shipping-bar::after,body[data-page="cart"] .progress-fill::after,#pp-progress-fill::after,.pp-track>div::after{animation:none;}}
/* 16) legal + FAQ readable in dark mode */
.lp-card{background:var(--c-card)!important;border:1px solid var(--c-line)!important;color:var(--c-ink)!important;box-shadow:var(--sh-xs)!important;backdrop-filter:none!important;}
.lp-card h2,.lp-card h3{color:var(--c-ink)!important;} .lp-card p,.lp-card li{color:var(--c-ink-2)!important;}
.lp-geo{background:var(--c-panel)!important;border-color:var(--c-line)!important;color:var(--c-ink)!important;}
.faq-category,.faq-item{background:var(--c-card)!important;border-color:var(--c-line)!important;color:var(--c-ink)!important;}
.faq-item button,.faq-q,.faq-question{color:var(--c-ink)!important;background:transparent!important;}
.faq-answer,.faq-answer p{color:var(--c-ink-2)!important;background:transparent!important;}
.faq-category-title,.faq-category h2{color:var(--c-ink)!important;}
/* 17) wave on legal + FAQ gradient bits */
.lp-card::before,.faq-category::before,.lp-hero .eyebrow,.faq-cat-icon,.sub-chevron{background-image:var(--grad-wave)!important;background-size:200% 100%!important;background-position:calc(var(--vp-pan,0)*1%) 50%!important;}
/* 18) cart pages: dark-safe summary, no sku codes, wave on every gradient */
body[data-page="cart"] .cart-summary,body[data-page="cart"] .summary-card,body[data-page="cart"] .order-summary{background:var(--c-card)!important;border:1px solid var(--c-line)!important;color:var(--c-ink)!important;}
body[data-page="cart"] .item-sku{display:none!important;}
body[data-page="cart"] .cart-item{overflow:visible!important;}
body[data-page="cart"] .cart-item.single-qty .item-price{display:none!important;}
body[data-page="cart"] h2::before,body[data-page="cart"] .summary-title::before,body[data-page="cart"] .cs-promo-icon,body[data-page="cart"] .promo-ico{background:var(--grad-wave)!important;background-size:200% 100%!important;background-position:calc(var(--vp-pan,0)*1%) 50%!important;}
body[data-page="cart"] .cs-promo-wrap,body[data-page="cart"] .cs-promo-row,body[data-page="cart"] .cs-promo-head{background:var(--c-panel)!important;color:var(--c-ink)!important;border-color:var(--c-line-2)!important;}
body[data-page="cart"] .cs-promo-wrap *{color:var(--c-ink);}
@media(max-width:1180px){
  body[data-page="cart"] .cart-item{grid-template-columns:72px minmax(0,1fr) 30px!important;grid-template-areas:"img details x" "img meta meta";row-gap:10px;}
  body[data-page="cart"] .item-image{grid-area:img;} body[data-page="cart"] .item-details{grid-area:details;} body[data-page="cart"] .remove-btn{grid-area:x;}
  body[data-page="cart"] .item-price,body[data-page="cart"] .qty-controls,body[data-page="cart"] .item-total{grid-area:meta;justify-self:start;align-self:center;}
  body[data-page="cart"] .qty-controls{grid-area:meta;justify-self:center;} body[data-page="cart"] .item-total{justify-self:end;}
}
body[data-page="payment"] .pay-total-banner,body[data-page="payment"] .steps-card::before,body[data-page="payment"] .oid-tile::before,body[data-page="checkout"] .oid-badge::before{background-image:var(--grad-wave)!important;background-size:200% 100%!important;background-position:calc(var(--vp-pan,0)*1%) 50%!important;}
/* 20) login */
html.vp-dark .google-btn{border-color:rgba(255,255,255,.34)!important;}
.google-btn{border-width:1.5px!important;}
#forgot-link,.auth-alt a,.auth-foot a{background:var(--grad-wave)!important;background-size:200% 100%!important;background-position:calc(var(--vp-pan,0)*1%) 50%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;font-weight:800;}

/* ══ v59 home on phones (362 first) ══════════════════════════════════════ */
@media(max-width:900px){
  .hero-main .btn-primary,.hero .btn-primary{display:inline-flex;margin:26px auto 4px!important;}
  .hero-main{text-align:center;} .hero-main .hero-actions{justify-content:center;}
  section:has(> .proof){text-align:center;}
  section:has(> .proof) .eyebrow,section:has(> .proof) h2{text-align:center;display:block;}
  .proof-quote{font-size:1rem!important;line-height:1.4!important;margin:0 0 8px!important;}
  .proof p.t-sm{font-size:.8rem!important;margin-bottom:12px!important;}
  .proof{padding-top:var(--s5)!important;}
  .proof .stats{margin-top:6px!important;padding-top:0!important;}
  .proof .stat{border-top:0!important;padding-top:0!important;}
  .proof p.t-sm[style*="display:flex"]{margin-top:10px!important;}
  .proof-media{margin:6px auto 34px!important;}
  .proof-media .proof-cta{font-size:clamp(.66rem,3.1vw,.8rem)!important;padding:9px 12px!important;bottom:-18px;}
}
@media(max-width:430px){
  .test-tab{padding:9px 4px!important;gap:8px!important;min-width:0;}
  .test-tab .tile,.test-tab>span:first-child{width:32px!important;height:32px!important;flex:0 0 32px!important;}
  .test-tab span:last-child,.test-tab .lbl{font-size:.76rem!important;overflow-wrap:anywhere;text-align:left;line-height:1.15;}
  .pcard-body{min-width:0;}
  .pcard-name{font-size:clamp(.72rem,3.4vw,.85rem)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pcard-size{font-size:clamp(.6rem,2.9vw,.72rem)!important;white-space:nowrap;}
  .pcard-price{font-size:clamp(.7rem,3.2vw,.9rem)!important;white-space:nowrap!important;letter-spacing:0!important;}
  .pcard .btn{font-size:clamp(.64rem,3vw,.74rem)!important;padding:8px 4px!important;}
}
/* 7) featured carousel v2: narrower card, arrow boxes in the gutters, seamless loop, small centered progress */
@media(max-width:760px){
  .feat-wrap{position:relative;}
  .feat-grid{padding:0 44px!important;scroll-padding:0 44px;gap:16px!important;}
  .feat-grid .feat-card{flex:0 0 calc(100% - 0px)!important;}

  .feat-arrow{position:absolute;top:120px;width:34px;height:34px;border-radius:10px;border:1.5px solid var(--c-line-2);background:var(--c-card);color:var(--c-ink);
    display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:4;box-shadow:var(--sh-sm);animation:vpArrowPulse 2.6s ease-in-out infinite;}
  .feat-arrow.prev{left:2px;} .feat-arrow.next{right:2px;animation-delay:1.3s;}
  .feat-arrow:active{transform:scale(.94);}
  @keyframes vpArrowPulse{0%,100%{box-shadow:var(--sh-sm);}50%{box-shadow:0 8px 22px rgba(78,43,164,.22),0 4px 12px rgba(12,140,206,.18);}}
  .feat-progress{height:3px!important;max-width:140px;margin:10px auto 2px!important;}
  .feat-dots{margin-top:6px!important;}
}

/* v59 coas + shop: aligned buttons, compact 2x2 methods on phones, smaller badge on phones */
.coa-card{display:flex;flex-direction:column;}
.coa-body{display:flex;flex-direction:column;flex:1 1 auto;}
.coa-body .btn{margin-top:auto!important;}
.pcard{display:flex;flex-direction:column;}
.pcard-body{display:flex;flex-direction:column;flex:1 1 auto;}
.pcard-body .btn,.pcard .btn-quick-add,.pcard .btn{margin-top:auto!important;}
.coa-gq-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.coa-gq-toggle{display:none;width:28px;height:28px;border:1px solid var(--c-line-2);border-radius:8px;background:var(--c-card);color:var(--c-ink);font-weight:800;cursor:pointer;line-height:1;}
.coa-methods{overflow:hidden;max-height:1200px;transition:max-height .45s var(--ease-out),opacity .3s var(--ease),margin .45s var(--ease-out);}
.coa-guarantee.is-min .coa-methods{max-height:0;opacity:0;margin:0!important;}
@media(max-width:760px){
  .coa-gq-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .coa-methods{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:12px!important;}
  .coa-method{padding:10px 10px!important;border-radius:var(--r-sm)!important;}
  .coa-method h3,.coa-method .t-h4,.coa-method b{font-size:.68rem!important;letter-spacing:.06em;text-transform:uppercase;}
  .coa-method p{font-size:.72rem!important;line-height:1.4!important;margin:4px 0 0!important;}
  .coa-guarantee>p{font-size:.82rem!important;}
  .coa-badge{padding:4px 8px!important;font-size:.58rem!important;gap:4px!important;}
  .coa-badge svg{width:10px!important;height:10px!important;}
}

/* v59 admin on phones: everything stays inside the viewport and scales */
@media(max-width:600px){
  body[data-page="admin"]{overflow-x:hidden;}
  body[data-page="admin"] .wrap,body[data-page="admin"] .container{padding-left:10px!important;padding-right:10px!important;}
  body[data-page="admin"] .create-card,body[data-page="admin"] .adm-panel,body[data-page="admin"] .stat{padding:12px!important;min-width:0;max-width:100%;}
  body[data-page="admin"] .stat-grid{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  body[data-page="admin"] .row-fields,body[data-page="admin"] .create-body-inner{grid-template-columns:1fr!important;display:grid!important;}
  body[data-page="admin"] .fld input,body[data-page="admin"] .fld select,body[data-page="admin"] .fld textarea{width:100%!important;min-width:0!important;max-width:100%!important;}
  body[data-page="admin"] .actions{flex-wrap:wrap!important;gap:6px!important;}
  body[data-page="admin"] .adm-btn,body[data-page="admin"] .adm-btn-sm,body[data-page="admin"] .btn{white-space:nowrap;font-size:.78rem!important;padding:8px 10px!important;}
  body[data-page="admin"] .det-line,body[data-page="admin"] .create-head{flex-wrap:wrap!important;}
  body[data-page="admin"] .k,body[data-page="admin"] .v{overflow-wrap:anywhere;}
  body[data-page="admin"] .pill{font-size:.62rem!important;}
  body[data-page="admin"] table{font-size:.74rem;}
}

/* v59 promo row, both cart pages, both themes */
.cs-promo,.cs-promo-row,.cs-promo-wrap,.cart-page-promo-input{background:var(--c-panel)!important;color:var(--c-ink)!important;border-color:var(--c-line-2)!important;}
.cs-promo-label,.cs-promo-chev,.cs-promo-btn-label{color:var(--c-ink)!important;}
.cs-promo-icon{background:var(--grad-wave)!important;background-size:200% 100%!important;background-position:calc(var(--vp-pan,0)*1%) 50%!important;color:#fff!important;}
body[data-page="checkout"] details summary{color:var(--c-ink)!important;}

/* ══ v60 product pages on phones ═════════════════════════════════════════ */
.price-now{color:var(--c-bad);} .price-was{color:var(--c-ink-4);opacity:.7;font-size:.72em;font-weight:600;margin-left:8px;text-decoration:line-through;}
.pdp-swipe,.pdp-swipe-dots{display:none;}
@media(max-width:760px){
  .pdp-thumbs{display:none!important;}
  .pdp-main{display:none!important;}
  .pdp-swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);background:var(--c-card);border:1px solid var(--c-line);}
  .pdp-swipe::-webkit-scrollbar{display:none;}
  .pdp-swipe-item{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;}
  .pdp-swipe-item img{width:100%;height:100%;object-fit:cover;}
  .pdp-swipe-dots{display:flex;justify-content:center;gap:6px;margin:10px 0 4px;}
  .pdp-swipe-dots i{width:6px;height:6px;border-radius:999px;background:var(--c-line-2);transition:width var(--t) var(--ease),background var(--t) var(--ease);}
  .pdp-swipe-dots i.on{width:22px;background:var(--c-ink);}
  .pdp-gallery{gap:8px!important;} .pdp-fav{top:10px;right:10px;}
  .pdp-info{text-align:center;padding-top:0!important;}
  .pdp-title{justify-content:center;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:1.6rem!important;margin:0 0 2px!important;}
  .pdp-sub{margin:0 0 10px!important;} .pdp-price{margin:0 0 12px!important;font-size:1.4rem!important;}
  .pdp-sizes-under{margin:0 auto 12px!important;text-align:center;}
  .pdp-sizes-under .pdp-size,.pdp-sizes-under .pdp-sizes-label{display:none!important;}
  .pdp-size-select{width:min(100%,320px);padding:12px 40px 12px 14px;border:1.5px solid var(--c-line-2);border-radius:var(--r-pill);background:var(--c-card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0C0C' stroke-width='2.4' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 14px center/14px;color:var(--c-ink);font-family:var(--font);font-weight:700;font-size:.9rem;-webkit-appearance:none;appearance:none;}
  html.vp-dark .pdp-size-select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");}
  .pdp-avail{justify-content:center;display:flex;align-items:center;}
  .pdp-qty-label{text-align:center!important;} .pdp-qty{margin:0 auto;justify-content:center;}
  .pdp-bundle-h{text-align:center;} .pdp-bundles{justify-content:center;}
  .pdp-actions .btn-primary{width:100%;}
  .pdp-sub-row{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:8px;}
  .pdp-sub-row .btn{flex:1 1 0!important;width:auto!important;height:auto!important;min-height:0!important;padding:6px 6px!important;font-size:.66rem!important;line-height:1.2!important;letter-spacing:0!important;white-space:nowrap;}
  .pdp-gallery .pdp-sizes-label,.pdp-sizes-label{display:none!important;}
  .pdp-sub-row .sub-emb{width:11px!important;height:11px!important;min-width:11px!important;margin-right:5px!important;}
  .pdp-assure{display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px 18px!important;text-align:center;}
  .pdp-assure>span{flex:0 0 auto;} .pdp-assure>span:nth-child(3){flex-basis:100%;justify-content:center;display:inline-flex;}
  .pdp-info-h,.pdp-coa-actions{text-align:center;justify-content:center;}
  .pdp-related{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
}
@media(max-width:430px){.pdp-related{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:760px){
  .pdp-sub-row #sub-save,.pdp-sub-row .pdp-coa-btn{height:auto!important;min-height:0!important;padding:6px 6px!important;flex:1 1 0!important;min-width:0!important;width:auto!important;overflow:hidden;text-overflow:ellipsis;}
}

/* ══ v60 checkout / payment / sidecart / login ═══════════════════════════ */
.auth-card::before,.auth-eyebrow,.auth-divider span{background-image:var(--grad-wave)!important;background-size:200% 100%!important;background-position:calc(var(--vp-pan,0)*1%) 50%!important;}
.auth-btn.btn-primary{overflow:visible!important;position:relative!important;border:2px solid transparent!important;}
.auth-btn.btn-primary:hover:not(:disabled){background:#0C0C0C!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 12px 32px rgba(78,43,164,.32),0 6px 20px rgba(12,140,206,.26)!important;}
body[data-page="checkout"] .btn-continue,body[data-page="checkout"] .btn-place:not(:disabled){background:var(--grad-wave)!important;background-size:200% 100%!important;background-position:calc(var(--vp-pan,0)*1%) 50%!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;border:2px solid transparent!important;position:relative!important;overflow:visible!important;box-sizing:border-box;max-width:100%;margin-left:auto;margin-right:auto;}
body[data-page="checkout"] .btn-continue:hover:not(:disabled),body[data-page="checkout"] .btn-place:hover:not(:disabled){background:#0C0C0C!important;color:#fff!important;-webkit-text-fill-color:#fff!important;transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(78,43,164,.32),0 6px 20px rgba(12,140,206,.26)!important;}
body[data-page="checkout"] .btn-continue:hover:not(:disabled) svg,body[data-page="checkout"] .btn-place:hover:not(:disabled) svg{stroke:#fff!important;color:#fff!important;}
body[data-page="checkout"] .mobile-bar-left .mb-count-badge{background:var(--c-ink)!important;color:var(--c-page)!important;}
body[data-page="checkout"] .mobile-bar-right .mb-total-val{background:none!important;-webkit-background-clip:initial!important;-webkit-text-fill-color:currentColor!important;color:var(--c-ink)!important;font-weight:800;}
body[data-page="checkout"] .mobile-bar,body[data-page="checkout"] .mobile-bar-left,body[data-page="checkout"] .mobile-bar-right{color:var(--c-ink);}
body[data-page="payment"] .pay-total-banner{background:var(--c-panel)!important;border:1px solid var(--c-line)!important;}
body[data-page="payment"] .pay-total-banner .ptb-val{background:none!important;-webkit-background-clip:initial!important;-webkit-text-fill-color:currentColor!important;color:var(--c-ink)!important;}
body[data-page="payment"] .oid-tile,body[data-page="payment"] .steps-card,body[data-page="payment"] .pay-card,body[data-page="payment"] .pay-detail,body[data-page="payment"] .order-card{background:var(--c-panel)!important;border:1px solid var(--c-line)!important;}
body[data-page="payment"] .pay-tabs{background:var(--c-card)!important;} body[data-page="payment"] .pay-tab.active{background:var(--c-panel)!important;}
.cs-bacwater-nudge{background:var(--c-panel)!important;border:1px solid var(--c-line-2)!important;box-shadow:none!important;border-radius:var(--r-md)!important;}
.cs-bacwater-nudge::before,.cs-bacwater-nudge::after{display:none!important;}
.cs-bacwater-nudge b,.cs-bacwater-nudge strong,.cs-bacwater-nudge .cs-bacwater-title{color:var(--c-ink)!important;} .cs-bacwater-nudge p,.cs-bacwater-nudge span{color:var(--c-ink-2);}
.cart-sidebar .cart-sidebar-button.btn{padding:14px 16px!important;font-size:.92rem!important;min-height:48px;line-height:1.2;}
.free-shipping-bar::after,body[data-page="cart"] .progress-fill::after{z-index:2;}

/* v60 */
.feat-arrow,.feat-progress,.feat-dots{display:none;}
/* 2) featured carousel on phones: a card stack. The active card sits on top, the other two peek from behind and rotate in. */
@media(max-width:760px){
  .feat-wrap{position:relative;padding:0 26px;}
  .feat-grid{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;padding:0!important;scroll-snap-type:none!important;gap:0!important;}
  .feat-grid .feat-card{grid-area:1/1;transition:transform .55s cubic-bezier(.22,.9,.3,1),opacity .45s var(--ease),filter .45s var(--ease);will-change:transform;
    transform:translateX(0) scale(.86);opacity:0;pointer-events:none;filter:saturate(.7);}
  .feat-grid .feat-card.is-active{transform:none;opacity:1;z-index:3;pointer-events:auto;filter:none;}
  .feat-grid .feat-card.is-prev{transform:translateX(-22px) scale(.9);opacity:.55;z-index:1;}
  .feat-grid .feat-card.is-next{transform:translateX(22px) scale(.9);opacity:.55;z-index:2;}
  .feat-arrow{display:inline-flex;position:absolute;top:110px;width:32px;height:32px;border-radius:9px;border:1.5px solid var(--c-line-2);background:var(--c-card);color:var(--c-ink);
    align-items:center;justify-content:center;cursor:pointer;z-index:5;box-shadow:var(--sh-sm);animation:vpArrowPulse 2.6s ease-in-out infinite;}
  .feat-arrow.prev{left:-6px;} .feat-arrow.next{right:-6px;animation-delay:1.3s;}
  .feat-progress{display:block;height:3px;border-radius:999px;background:var(--c-bar-track,#DCDCDC);max-width:140px;margin:12px auto 2px;overflow:hidden;}
  .feat-progress i{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad-wave);background-size:200% 100%;background-position:calc(var(--vp-pan,0)*1%) 50%;}
  .feat-dots{display:flex;justify-content:center;gap:6px;margin-top:8px;}
  .feat-dots i{width:6px;height:6px;border-radius:999px;background:var(--c-line-2);transition:width var(--t) var(--ease),background var(--t) var(--ease);}
  .feat-dots i.on{width:20px;background:var(--c-ink);}
}
/* 3) newsletter on phones: icon beside a narrower field, button full width beneath */
@media(max-width:600px){
  .news-form{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center;gap:8px 10px!important;padding:10px 12px!important;}
  .news-form>svg{grid-column:1;grid-row:1;width:20px;height:20px;flex:0 0 auto;}
  .news-form input{grid-column:2;grid-row:1;width:100%!important;min-width:0;}
  .news-form .btn{grid-column:1/-1;grid-row:2;width:100%!important;}
  .news-form>p{display:none;}
}

/* v61 */
.feat-media{aspect-ratio:1/1!important;overflow:hidden;}
.feat-media img{width:100%;height:100%;object-fit:cover;}
@media(max-width:760px){
  .feat-grid .feat-card{background:var(--c-card)!important;border:1px solid var(--c-line);border-radius:var(--r-lg);padding:10px;box-sizing:border-box;}
  .feat-grid .feat-card:not(.is-active):not(.is-prev):not(.is-next){visibility:hidden;}
  .feat-grid .feat-card.is-prev,.feat-grid .feat-card.is-next{pointer-events:none;}
}
@media(max-width:760px){
  .pdp-info,.pdp-info>*{text-align:center!important;}
  .pdp-sub,.pdp-price,.pdp-qty-label,.pdp-bundle-h,.pdp-info-h{text-align:center!important;justify-content:center!important;margin-left:auto!important;margin-right:auto!important;}
  .pdp-price{display:flex!important;align-items:baseline;justify-content:center!important;gap:0;}
  .pdp-qty{display:inline-flex!important;margin:0 auto!important;}
  .pdp-bundle-h{margin-top:var(--s5)!important;}
  .pdp-bundles{display:grid!important;grid-template-columns:1fr 1fr!important;margin:0 auto!important;max-width:440px;}
}
@media(max-width:760px){.pdp-qty{width:auto!important;max-width:none!important;justify-content:center!important;display:inline-flex!important;} .pdp-info>.pdp-qty{margin:0 auto var(--s4)!important;}}
@media(max-width:760px){.pdp-info *:has(> .pdp-qty){display:flex!important;flex-direction:column;align-items:center!important;justify-content:center!important;text-align:center!important;}}
@media(max-width:760px){.pdp-qty{display:flex!important;width:max-content!important;margin-left:auto!important;margin-right:auto!important;}}
@media(max-width:760px){.pdp-price{gap:8px!important;} .pdp-sub-row .btn{font-size:.6rem!important;} .pdp-sub-row .sub-emb{display:none!important;}}

/* v62: filters hide cards with inline display:none; nothing may override that */
.pcard[style*="display: none"],.pcard[style*="display:none"],.coa-card[style*="display: none"],.coa-card[style*="display:none"]{display:none!important;}
body[data-page="contact"] .ct-photo img,.ct-photo img{transform:scale(1.25);} .ct-photo:hover img{transform:scale(1.3)!important;}
@media(max-width:760px){.feat-arrow{top:var(--feat-arrow-top,140px);transform:translateY(-50%);}}