/* ═══════════════════════════════════════════════════════════════════
   PDP SYSTEM — unified product-page design (2026-07 redesign)
   Spec: PDP_REDESIGN_HANDOFF.md · motion language v2 · dark-only
   Carries its own base layer (global.min.css ships none).
   All motion scoped html.enhance; no-JS renders the complete page.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#080808;--surface:#0e0e0e;--surface-2:#141414;--surface-3:#181818;
  --pink:#db266c;--pink-hover:#c01f5c;--pink-text:#ff5a9e;--pink-text-strong:#b81f5b;
  --pink-soft:rgba(219,38,108,.15);--pink-dim:rgba(219,38,108,.10);--pink-glow:rgba(219,38,108,.08);
  --border-pink:rgba(219,38,108,.30);
  --green:#107f38;--green-text:#13993f;--green-soft:rgba(16,127,56,.12);
  --wa:#25d366;
  --white:#f8f8f8;--gray:#bdbdbd;--gray-light:#cccccc;--gray-dark:#989898;--gray-faint:#6a6a72;--glow-muted:var(--gray);
  --border:rgba(255,255,255,.07);--border-2:rgba(255,255,255,.12);--border-strong:rgba(255,255,255,.14);
  --mono:'DM Mono','DM Mono Fallback',ui-monospace,monospace;
  --serif:'Cormorant Garamond','Cormorant Fallback',Georgia,serif;
  --sans:'Outfit','Outfit Fallback',system-ui,sans-serif;
  --r-xs:3px;--r-sm:6px;--r:10px;--r-lg:14px;--r-xl:18px;
  --shadow-2:0 24px 70px rgba(0,0,0,.55);
  --shadow-pink:0 18px 50px rgba(219,38,108,.30);
  --d-1:120ms;--d-2:240ms;--d-3:420ms;--d-4:640ms;--d-5:900ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --max:1240px;
  color-scheme:dark;
}
/* ── base layer (page sheets used to carry this) ── */
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip;background:var(--bg)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--white);font-family:var(--sans);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::after{content:'';position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.4;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}
main h1,main h2,main h3{line-height:1.06;letter-spacing:-.02em}
main em{font-family:var(--serif);font-style:italic;color:var(--pink-text);font-weight:400}
main ::selection{background:var(--pink);color:#fff}
main [id]{scroll-margin-top:150px}
.pink{color:var(--pink-text)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── reveal system — enhance-gated from-only keyframes ──
   Header-only fade (2026-07-11): animating full-section opacity forced Chrome to
   rasterize + GPU-upload each section at Retina resolution mid-scroll (~200ms
   stalls on first scroll). Section bodies now appear instantly; only the small
   header elements (.section-tag, h2) fade in. */
html.enhance .rv .section-tag,html.enhance .rv h2{opacity:0}
html.enhance .rv.in .section-tag,html.enhance .rv.in h2{opacity:1;animation:rvIn var(--d-4) var(--ease-out) backwards}
@keyframes rvIn{from{opacity:0;transform:translateY(18px)}}
html.enhance .d1.in{animation-delay:70ms}
html.enhance .d2.in{animation-delay:140ms}
html.enhance .d3.in{animation-delay:210ms}
html.enhance .d4.in{animation-delay:280ms}
html.enhance .d5.in{animation-delay:350ms}
html.enhance .rv .section-tag::after{transform:scaleX(0);transform-origin:left}
html.enhance .rv.in .section-tag::after{transform:scaleX(1);transition:transform var(--d-4) var(--ease-out) 120ms}
.hl{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.hl>span{display:inline-block;will-change:transform}
html.enhance .title .hl>span{transform:translateY(112%)}
html.enhance .title.in .hl>span{transform:translateY(0);transition:transform 740ms var(--ease-out)}
html.enhance .title.in .hl:nth-child(2)>span{transition-delay:70ms}
html.enhance .title.in .hl:nth-child(3)>span{transition-delay:140ms}
/* The deferred motion layer must never gate the above-the-fold PDP content. */
html.enhance .pdp .rv,html.enhance .pdp .rv.in{opacity:1;animation:none}
html.enhance .pdp .rv .section-tag,html.enhance .pdp .rv h2,html.enhance .pdp .rv.in .section-tag,html.enhance .pdp .rv.in h2{opacity:1;animation:none}
html.enhance .pdp .title .hl>span,html.enhance .pdp .title.in .hl>span{transform:none;transition:none}
html.enhance .pdp .rv .section-tag::after,html.enhance .pdp .rv.in .section-tag::after{transform:scaleX(1);transition:none}
.title .tail{display:block;font-size:.46em;line-height:1.35;margin-top:12px;color:var(--gray);font-weight:400;letter-spacing:0}
@media (prefers-reduced-motion:reduce){
  html.enhance .rv,html.enhance .rv.in{opacity:1;animation:none}
  html.enhance .rv .section-tag,html.enhance .rv h2{opacity:1;animation:none}
  html.enhance .title .hl>span{transform:none;transition:none}
  html.enhance .rv .section-tag::after{transform:scaleX(1);transition:none}
  main *,main *::before,main *::after{animation:none!important;transition:none!important}
}

/* ── shell-adjacent ── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.pdp-breadcrumb{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--gray-dark);padding:26px 0 8px;max-width:var(--max);margin:0 auto}
/* 44px touch target without shifting the visual line: pad + equal negative margin */
.pdp-breadcrumb a{display:inline-flex;align-items:center;padding:14px 0;margin:-14px 0}
.pdp-breadcrumb a:hover{color:var(--pink-text)}
.pdp-breadcrumb .bc-sep{color:var(--gray-faint);margin:0 2px}
.pdp-breadcrumb span{color:var(--gray)}
/* Keep the full desktop navigation inside the viewport before its hamburger breakpoint. */
@media (min-width:1341px) and (max-width:1500px){
  body>nav[aria-label="Main navigation"]{padding-inline:20px;gap:12px}
  body>nav .nav-logo{font-size:19px;letter-spacing:.09em;gap:8px}
  body>nav .nav-logo .logo-mark svg{width:22px;height:16px}
  body>nav .nav-left{gap:10px}
  body>nav .nav-left .nav-link{font-size:11px;letter-spacing:.09em}
  body>nav .nav-right{gap:8px}
  body>nav .nav-right .nav-cta{padding-inline:14px;font-size:10px}
}
/* Dynamic shell controls keep their visual size while exposing a full touch target. */
body .cart-sidebar-close{width:44px;height:44px;min-width:44px;margin:-10px -10px -10px 0}
body .rc-teaser-x::before{inset:-11px}

/* ── hero grid ── */
.pdp{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(30px,4.5vw,72px);padding:20px 0 40px;align-items:start;max-width:var(--max);margin:0 auto}
.pdp::before{content:'';position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(219,38,108,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(219,38,108,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 78% 82% at 42% 44%,#000 18%,transparent 78%);mask-image:radial-gradient(ellipse 78% 82% at 42% 44%,#000 18%,transparent 78%)}
.pdp>*{position:relative;z-index:1}
@media (max-width:940px){.pdp{grid-template-columns:minmax(0,1fr);gap:36px}}
@media (min-width:941px) and (max-width:1415px){.pdp{padding-right:60px}}

.gallery{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
@media (max-width:940px){.gallery{position:static}}
/* pen shadow lives HERE as a static background layer, not as filter:drop-shadow
   on the animating img: a filter on a composited animated layer re-runs its
   50px GPU blur EVERY frame, and the sticky gallery keeps that layer on screen
   for the whole hero region — measured as the first-scroll jank on desktop
   PDPs (p95 225ms -> 100ms with the filter removed). */
.frame{position:relative;border-radius:var(--r-xl);overflow:hidden;background:radial-gradient(120% 90% at 50% 8%,rgba(219,38,108,.14),transparent 55%),radial-gradient(46% 30% at 50% 64%,rgba(0,0,0,.55),transparent 72%),linear-gradient(180deg,#101010,#0a0a0a);border:1px solid var(--border);box-shadow:var(--shadow-2);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.frame::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:4;background:linear-gradient(90deg,transparent,var(--pink),transparent)}
/* Product artwork is intentionally static. No bob, tilt, sheen, perspective or
   will-change layer: the image should never zoom or move under the pointer. */
.frame img{width:78%;height:auto;scale:var(--art-zoom,1.32)}
.frame .ribbon{position:absolute;top:16px;left:16px;z-index:4;background:rgba(8,8,8,.82);border:1px solid var(--border-2);color:var(--gray);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;border-radius:999px}
.frame .purity{position:absolute;bottom:16px;right:16px;z-index:4;background:var(--pink);color:#fff;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;padding:8px 15px;border-radius:999px;box-shadow:var(--shadow-pink)}
.product-fallback-label{display:none}

/* spec chips (live .spec-grid vocabulary) */
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spec{padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);transition:transform var(--d-2) var(--ease-out),border-color var(--d-2)}
.spec:hover{transform:translateY(-3px);border-color:var(--pink-text)}
.spec-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--pink-text);margin-bottom:6px}
.spec-value{font-size:13.5px;color:var(--gray-light);line-height:1.55}

/* COA mini-card (live .coa-badge vocabulary) */
.coa-badge{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;position:relative;overflow:hidden}
.coa-badge::before{content:'';position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(var(--green),var(--pink))}
.coa-badge-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.coa-badge-mark{font-size:14px;font-weight:500;color:var(--white);display:flex;align-items:center;gap:8px}
.coa-badge-mark::before{content:'✓';width:19px;height:19px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.coa-badge-link{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--pink-text);white-space:nowrap;display:inline-flex;align-items:center;padding:14px 0;margin:-14px 0}
.coa-badge-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.coa-badge-cell{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 13px}
.coa-badge-cell dt{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--gray-dark);margin-bottom:4px}
.coa-badge-cell dd{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;margin:0;color:var(--white)}
.coa-badge-cell dd code{font-family:var(--mono);font-size:12px;color:var(--white);background:none;padding:0}
.coa-badge-cell--hero{background:var(--pink-dim);border-color:var(--border-pink)}
.coa-badge-cell--hero dd{color:var(--pink-text)}
.coa-badge-foot{margin-top:12px;font-size:12.5px;color:var(--gray-dark);line-height:1.65}
.coa-badge-foot a{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px}
.coa-badge-foot code{font-family:var(--mono);font-size:11px;color:var(--gray-light)}
.coa-proof{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px}
.coa-proof-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-text);margin-bottom:8px}
.coa-proof-copy{font-size:13px;color:var(--gray-dark);line-height:1.7}
.coa-proof-copy a{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px}
.coa-proof-link{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-text)}

/* ── buy column ── */
.buy{display:flex;flex-direction:column;gap:22px}
.hero-tag{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-text)}
.hero-tag::before{content:'';width:44px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.7));flex-shrink:0}
.title{font-family:var(--serif);font-size:clamp(32px,4vw,50px);font-weight:600;line-height:1.04;letter-spacing:-.02em;margin:12px 0 10px;text-align:left}
.hero-sub{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--gray);line-height:1.7;margin-bottom:10px}
.product-rating{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--gray);background:transparent;border:none;padding:0;box-shadow:none}
.product-rating__stars{color:var(--pink-text);letter-spacing:2px;font-size:15px}
.product-rating strong{color:var(--white);font-weight:500}
.product-rating a{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px}
.price-asof{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--gray)!important;line-height:1.8;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
.price-asof strong{color:var(--white)!important;font-weight:500}
.stock-badge{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--green-text);font-weight:500;line-height:1.6}
.stock-dot{width:8px;height:8px;border-radius:50%;background:var(--green-text);flex-shrink:0;box-shadow:0 0 0 3px var(--green-soft)}
.hero-desc{font-size:15.5px;color:var(--gray);line-height:1.8;font-weight:300;max-width:60ch}
.hero-desc a{color:var(--pink-text);text-decoration:underline;text-underline-offset:3px}
.hero-desc strong{color:var(--white);font-weight:500}
.hero-points{display:flex;flex-wrap:wrap;gap:8px}
.hero-pill{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--gray-light);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:7px 13px}
.product-title{font-family:var(--serif);font-size:22px;font-weight:600}
.product-variant{font-size:13.5px;color:var(--gray-dark);line-height:1.7}
.product-variant a{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px}
.product-brand,.doc-chip{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-dark)}
.product-head{display:flex;justify-content:space-between;align-items:center}

/* order panel inside buy column */
.order-section-head .section-tag{margin-bottom:8px}
h2.tier-h,.order-section-head h2{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.15;margin:0 0 4px}
.tier-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.tier-card{position:relative;text-align:center;padding:20px 12px 16px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);cursor:pointer;transition:transform var(--d-2) var(--ease-out),border-color var(--d-2),background var(--d-2);overflow:hidden}
.tier-card:hover{transform:translateY(-3px);border-color:var(--pink-text)}
.tier-card.selected{border-color:var(--pink);background:var(--pink-dim);box-shadow:inset 0 0 0 1px rgba(219,38,108,.22)}
.tier-card.selected::after{content:'✓';position:absolute;top:9px;right:10px;width:19px;height:19px;background:var(--pink);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;animation:pop var(--d-3) var(--ease-out)}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.tier-card .qty{font-size:30px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.2}
.tier-card .qty-label{font-family:var(--mono);font-size:11px;color:var(--gray-dark);letter-spacing:.05em;text-transform:uppercase}
.tier-card .price{font-size:15px;font-weight:500;margin-top:9px;font-variant-numeric:tabular-nums}
.tier-card .price-sub{font-family:var(--mono);font-size:11px;color:var(--gray-dark);margin-top:2px}
.tier-card .save{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10px;font-weight:500;color:var(--green-text);background:var(--green-soft);padding:3px 9px;border-radius:999px;letter-spacing:.03em}
@media (max-width:600px){.tier-selector{grid-template-columns:1fr}.tier-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 14px;text-align:left;padding:14px 16px}.tier-card .qty{font-size:22px}.tier-card .price{margin-top:0}.tier-card .save{margin-top:0;grid-column:3}.tier-card.selected::after{top:50%;transform:translateY(-50%)}}

/* buttons */
.order-btn,.btn-primary{position:relative;min-height:54px;padding:0 26px;border:none;border-radius:999px;background:var(--pink);color:#fff;font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;box-shadow:var(--shadow-pink);transition:transform var(--d-2) var(--ease-out),background var(--d-2);text-decoration:none;cursor:pointer}
.order-btn{width:100%;margin-top:14px}
.order-btn::after,.btn-primary::after{content:'';position:absolute;top:0;left:-80%;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .6s var(--ease-out)}
.order-btn:hover::after,.btn-primary:hover::after{left:130%}
.order-btn:hover,.btn-primary:hover{background:var(--pink-hover);transform:translateY(-1px)}
.order-btn:active,.btn-primary:active{transform:translateY(1px)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1px solid var(--border-strong);border-radius:999px;color:var(--white);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:border-color var(--d-2),transform var(--d-2) var(--ease-out);background:transparent}
.btn-secondary:hover{border-color:var(--white);transform:translateY(-1px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.product-contact-strip{display:flex;flex-wrap:wrap;gap:10px}
.btn-contact{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;transition:transform var(--d-2) var(--ease-out),background var(--d-2);flex:1 1 auto}
.btn-contact svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}
.btn-contact--whatsapp{background:var(--wa);color:#052e16}
.btn-contact--whatsapp:hover{background:#2ee06f;transform:translateY(-1px)}
.wholesale-inline{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;font-size:13.5px;color:var(--gray);line-height:1.7;margin-top:14px}
.wholesale-inline strong{color:var(--white);font-weight:500;margin-right:6px}
.wholesale-inline a{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;margin-left:6px}

/* ── sticky order bar (desktop) ── */
.orderbar{position:fixed;top:0;left:0;right:0;z-index:99;background:rgba(8,8,8,.96);border-bottom:1px solid var(--border-2);transform:translateY(-110%);transition:transform var(--d-3) var(--ease-out);will-change:transform}
.orderbar.on{transform:translateY(var(--nav-h-desktop,80px))}
.orderbar__in{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,40px);height:58px;display:flex;align-items:center;gap:18px}
.orderbar__name{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orderbar__coa{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--gray-dark);white-space:nowrap}
.orderbar__coa b{color:var(--green-text);font-weight:500}
.orderbar__price{margin-left:auto;font-size:19px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.orderbar__price small{font-family:var(--mono);font-size:11px;color:var(--gray-dark);font-weight:400}
.orderbar .order-btn{width:auto;margin:0;min-height:40px;font-size:11px;padding:0 20px;flex-shrink:0}
.orderbar__wa{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--wa);color:#fff;flex-shrink:0;transition:transform var(--d-2) var(--ease-out)}
.orderbar__wa:hover{transform:translateY(-1px)}
.orderbar__wa svg{width:20px;height:20px;fill:currentColor}
@media (max-width:1023px){.orderbar{display:none}}
@media (prefers-reduced-motion:reduce){.orderbar{transition:none}}

/* ── OOS variant (vials) ── */
.stock-badge--muted{color:var(--gray-dark)}
.stock-badge--muted .stock-dot{background:var(--gray-dark);box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.order-btn:disabled,.order-btn[aria-disabled="true"],.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.order-btn:disabled::after{display:none}
.recon-bridge{max-width:var(--max);margin:26px auto 0}
.recon-bridge__card{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);padding:20px 24px;position:relative;overflow:hidden}
.recon-bridge__card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--pink),transparent)}
.recon-bridge__kicker{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-text);margin-bottom:6px}
.recon-bridge__text{font-size:14px;color:var(--gray);line-height:1.7;max-width:56ch}
.recon-bridge__cta{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;background:var(--pink);color:#fff;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;transition:background var(--d-2),transform var(--d-2) var(--ease-out);flex-shrink:0}
.recon-bridge__cta:hover{background:var(--pink-hover);transform:translateY(-1px)}

/* ── trust strip (live .strip vocabulary) ── */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;max-width:var(--max);margin:10px auto 4px}
@media (max-width:940px){.strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.strip{grid-template-columns:1fr}}
.strip-card{background:var(--surface);padding:22px 20px;transition:background var(--d-2)}
.strip-card:hover{background:var(--surface-2)}
.strip-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-text);margin-bottom:8px;font-variant-numeric:tabular-nums}
.strip-copy{font-size:13px;color:var(--gray-dark);line-height:1.65}
.strip-copy a{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px}

/* ── sections ── */
.section,.science,.product-detail{padding:clamp(52px,7vw,96px) 0;border-top:1px solid var(--border);max-width:var(--max);margin:0 auto}
.section-tag{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--pink-text);margin-bottom:20px}
.section-tag::after{content:'';flex:1;height:1px;background:var(--border-2);max-width:220px}
.section>h2,.science>h2,.product-detail h2,.section-title{font-family:var(--serif);font-size:clamp(30px,3.4vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin-bottom:16px;max-width:24ch}
.section-intro,.section .prose,.science .section-intro,.landing-prose{max-width:820px;font-size:16px;color:var(--gray);line-height:1.85;font-weight:300}
.section p a,.science p a,.product-detail p a{color:var(--pink-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.section p a:hover,.science p a:hover{color:var(--white)}

/* COA section */
.coa-section .section-intro{margin-bottom:22px}
.coa-proof-preview{display:block;max-width:640px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-2);background:#fff;position:relative;margin:0 0 18px}
.coa-proof-preview img{width:100%;height:auto;transition:transform .6s var(--ease-out)}
.coa-proof-preview:hover img{transform:scale(1.02)}
.coa-proof-caption{display:block;padding:12px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#333;background:#f4f4f4;border-top:1px solid rgba(0,0,0,.08)}
.coa-doc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;max-width:860px}
.coa-doc-meta-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;transition:transform var(--d-2) var(--ease-out),border-color var(--d-2)}
.coa-doc-meta-item:hover{transform:translateY(-3px);border-color:var(--pink-text)}
.coa-doc-meta-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-dark);margin-bottom:7px}
.coa-doc-meta-value{font-size:17px;font-weight:500;font-variant-numeric:tabular-nums}
.coa-doc-meta-value.pink{color:var(--pink-text)}

/* clicks table */
.clicks{max-width:640px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-top:24px}
.clicks .cr{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--border)}
.clicks .cr:last-child{border-bottom:none}
.clicks .cr.head{background:var(--surface-2)}
.clicks .cr.head span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-dark)}
.clicks .cr span{padding:14px 24px;font-size:15px;font-variant-numeric:tabular-nums}
.clicks .cr span:last-child{text-align:right;color:var(--pink-text);font-weight:500}
.clicks .cr:hover:not(.head){background:var(--pink-dim)}

/* reviews (live vocabulary) */
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:26px}
.review-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;transition:transform var(--d-2) var(--ease-out),border-color var(--d-2)}
.review-card:hover{transform:translateY(-4px);border-color:var(--pink-text)}
.review-stars{color:var(--pink-text);letter-spacing:2px;font-size:15px}
.review-body{margin:12px 0 10px;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--gray-light);line-height:1.5;font-weight:400}
.review-name{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--gray)}
.review-note{margin-top:20px;font-size:12.5px;color:var(--gray-dark);line-height:1.6;max-width:760px}

/* FAQ */
.faq{max-width:860px}
.faq .qa{border-bottom:1px solid var(--border)}
.faq .qa summary{list-style:none;cursor:pointer}
.faq .qa summary::-webkit-details-marker{display:none}
.faq .qh{display:block;position:relative;padding:22px 48px 22px 4px;text-align:left;font-size:17px;font-weight:400;color:var(--white);line-height:1.5}
.faq .qh::after{content:'+';position:absolute;right:4px;top:50%;translate:0 -50%;width:26px;height:26px;border-radius:50%;border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--gray);transition:transform var(--d-3) var(--ease-out),background var(--d-2),color var(--d-2),border-color var(--d-2)}
.faq .qa[open] .qh::after{transform:rotate(45deg);background:var(--pink);color:#fff;border-color:var(--pink)}
.faq .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-3) var(--ease-out)}
.faq .qa[open] .ans{grid-template-rows:1fr}
.faq .ans>div{overflow:hidden;min-height:0}
.faq .ans p{padding:0 4px 24px;font-size:15px;color:var(--gray);line-height:1.8;font-weight:300;max-width:76ch}
.faq .ans a{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.faq .ans{transition:none}}

/* CTA band */
.cta-band{max-width:var(--max);margin:24px auto 0;display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(120deg,var(--surface-2),var(--surface));border:1px solid var(--border-2);border-radius:var(--r-xl);padding:36px clamp(24px,4vw,44px);position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--pink),transparent)}
.cta-band h3{font-family:var(--serif);font-size:clamp(26px,3vw,36px);font-weight:600;margin-bottom:8px}
.cta-band p{color:var(--gray);font-size:14px;font-family:var(--mono);letter-spacing:.02em}
.cta-band .btn-primary{min-width:220px;flex-shrink:0}
@media (max-width:720px){.cta-band{flex-direction:column;align-items:stretch;text-align:center}}

/* cross-sell alignment overrides (cross-sell.css stays linked) */
.cross-sell{max-width:var(--max);margin:0 auto;padding:clamp(52px,7vw,96px) 0;border-top:1px solid var(--border)}
.cross-sell__eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--pink-text);margin-bottom:20px}
.cross-sell__title{font-family:var(--serif);font-size:clamp(30px,3.4vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin-bottom:16px}
.cross-sell__card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);transition:transform var(--d-2) var(--ease-out),border-color var(--d-2)}
.cross-sell__card:hover{transform:translateY(-5px);border-color:var(--pink-text)}
.cross-sell__img-wrap{background:#fff;border-radius:var(--r) var(--r) 0 0}

/* page paddings: sections inside main get side gutters */
main>.section,main>.strip,main>.cta-band,main>.cross-sell{margin-left:auto;margin-right:auto}
main{padding:0 clamp(20px,4vw,40px)}
main>.research-summary{max-width:var(--max);margin-left:auto;margin-right:auto}

/* These named panels are dark in the PDP system, despite a legacy light-panel override. */
main .dosing-visual .pink,
main .dosing-visual a,
main .detail-right a,
main #clicks-per-dose a,
main #clicks-per-dose a:visited{color:var(--pink-text)!important}
main #clicks-per-dose a[style*="var(--pink-text)"],
main #clicks-per-dose dd[style*="var(--pink-text)"]{color:var(--pink-text)!important}

@media (max-width:720px){
  html.enhance .rv.in{animation-duration:var(--d-3)}
  @keyframes rvIn{from{opacity:0;transform:translateY(10px)}}
  .title{font-size:clamp(30px,8vw,36px)}
  .frame img{filter:none}
  .rating-row a,.coa-strip__verify,.review-note a,.review-more>summary{display:inline-flex;align-items:center;min-height:44px}
  footer a{display:inline-flex;align-items:center;min-height:44px}
}

/* ── flagship (/remedium) vocabulary ── */
.hero-subtitle{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--gray);line-height:1.7;margin-bottom:10px}
.hero-proof-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.hero-proof-chips li{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--gray-light);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:7px 13px}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border:1px solid var(--border-strong);border-radius:999px;color:var(--white);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:transparent;transition:border-color var(--d-2),transform var(--d-2) var(--ease-out)}
.btn-ghost:hover{border-color:var(--white);transform:translateY(-1px)}
.product-dose{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--gray-dark);text-transform:uppercase}
.product-micro-note{font-size:12.5px;color:var(--gray-dark);line-height:1.65}
.product-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:600px){.product-specs{grid-template-columns:repeat(2,1fr)}}
.product-specs .spec-item{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;text-align:center}
.product-specs .spec-label{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--gray-dark);margin-bottom:4px}
.product-specs .spec-value{font-size:13.5px;font-weight:500;color:var(--white)}
.product-specs .spec-value.pink{color:var(--pink-text)}
.trust-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;max-width:var(--max);margin:10px auto 4px}
@media (max-width:940px){.trust-bar{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.trust-bar{grid-template-columns:1fr}}
.trust-item{background:var(--surface);padding:22px 20px;transition:background var(--d-2)}
.trust-item:hover{background:var(--surface-2)}
.trust-kicker{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-text);margin-bottom:8px}
.trust-item strong{display:block;font-size:23px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--white)}
.trust-item p{font-size:12.5px;color:var(--gray-dark);margin-top:5px;line-height:1.5;font-family:var(--mono);letter-spacing:.01em}
.pdp-trust-row{display:flex;flex-wrap:wrap;gap:8px;max-width:var(--max);margin:18px auto 0}
.pdp-trust-row__item{font-family:var(--mono);font-size:11px;color:var(--gray-light);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:7px 13px}
.pdp-trust-row__item strong{color:var(--white);font-weight:500}
.pdp-trust-row__item a{color:var(--pink-text)}
.order-band-text{font-size:14.5px;color:var(--gray);margin:2px 0 0}
.order-band-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.order-band-meta-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
.order-band-meta-label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-text);margin-bottom:5px}
.order-band-meta-item strong{display:block;font-size:15px;font-weight:500;color:var(--white)}
.order-band-meta-item p{font-size:12px;color:var(--gray-dark);line-height:1.55;margin-top:3px}
.order-band-footer{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.order-band-footer .price-sub{font-family:var(--mono);font-size:12px;color:var(--gray-dark)}
.tier-card__popular-badge,.tier-card__value-badge{position:absolute;top:0;left:0;right:0;transform:none;border-radius:0;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:5px;color:#fff;background:var(--pink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tier-card__popular-badge--value{background:var(--green)}
.tier-card--value .tier-card__value-badge,.tier-card--value .tier-card__popular-badge{background:var(--green)}
.tier-card--popular .qty,.tier-card--value .qty{margin-top:16px}
@media (max-width:600px){.tier-card__popular-badge,.tier-card__value-badge{position:static;transform:none;grid-column:1/-1;border-radius:4px;margin-bottom:6px}}

.coa-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-family:var(--mono);font-size:11.5px;color:var(--gray-light);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 14px;margin-bottom:4px}
.coa-strip__icon{width:15px;height:15px;color:var(--green-text);flex-shrink:0}
.coa-strip__batch{color:var(--gray-light)}
.coa-strip__purity{color:var(--pink-text)}
.coa-strip__sep{color:var(--gray-faint)}
.coa-strip__verify{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px}

/* ── notify-restock UI (injected by notify-restock.js) ── */
.notify-trigger{position:relative;min-height:54px;padding:0 26px;border:none;border-radius:999px;background:var(--pink);color:#fff;font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-shadow:var(--shadow-pink);transition:transform var(--d-2) var(--ease-out),background var(--d-2);cursor:pointer}
.notify-trigger:hover{background:var(--pink-hover);transform:translateY(-1px)}
.notify-trigger:active{transform:translateY(1px)}
.notify-trigger--block{display:flex;width:100%;margin-top:12px}
.notify-trigger.is-done{background:var(--green);box-shadow:none}
.notify-modal{border:none;border-radius:var(--r-xl);background:transparent;padding:0;max-width:min(480px,calc(100vw - 32px))}
.notify-modal::backdrop{background:rgba(0,0,0,.7)}
.notify-modal__card{position:relative;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-xl);padding:28px;color:var(--white);font-family:var(--sans)}
.notify-modal__card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--pink),transparent);border-radius:var(--r-xl) var(--r-xl) 0 0}
.notify-modal__close{position:absolute;top:11px;right:11px;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-2);background:transparent;color:var(--gray);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color var(--d-2),color var(--d-2)}
.notify-modal__close:hover{border-color:var(--pink-text);color:var(--white)}
.notify-modal__title{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0 44px 8px 0}
.notify-modal__sub{font-size:14px;color:var(--gray);line-height:1.7;margin:0 0 18px}
.notify-modal__form{display:flex;flex-direction:column;gap:10px}
.notify-modal__label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-dark)}
.notify-modal__input{width:100%;min-height:50px;padding:0 16px;font-family:var(--sans);font-size:16px;color:var(--white);background:var(--bg);border:1px solid var(--border-2);border-radius:var(--r);outline:none;transition:border-color var(--d-2)}
.notify-modal__input:focus{border-color:var(--border-pink)}
.notify-modal__input::placeholder{color:var(--gray-faint)}
.notify-modal__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notify-modal__submit{min-height:52px;border:none;border-radius:999px;background:var(--pink);color:#fff;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:var(--shadow-pink);transition:background var(--d-2),transform var(--d-2) var(--ease-out)}
.notify-modal__submit:hover{background:var(--pink-hover);transform:translateY(-1px)}
.notify-modal__submit:disabled{opacity:.5;cursor:wait;transform:none}
.notify-modal__fine{font-size:12px;color:var(--gray-dark);line-height:1.6;margin:2px 0 0}
.notify-modal__status{font-size:14px;line-height:1.6;margin:10px 0 0;min-height:1em}
.notify-modal__status.is-ok{color:#00e676}
.notify-modal__status.is-err{color:#ff6b6b}

/* ── wide spec/comparison tables: mobile swipe cue (mirrors article.css .table-wrap convention).
   Wrappers are white cards, so the hint uses product-page ink, not the dark-theme grays.
   480px threshold: every tagged table is ≥408px wide, so the cue never shows on a table that fits. ── */
@media (max-width:480px){
  .table-wrap::before{content:'Swipe sideways to compare columns ->';display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(31,23,32,.62);margin:12px 14px 2px}
}

/* chemistry/comparison tables: horizontal scroll on narrow viewports.
   .chemistry-table-scroll markup survived the redesign but its rules did not,
   so the third column was clipped mid-word and unreachable at 375px. */
.chemistry-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;overscroll-behavior-inline:contain}
.chemistry-table-scroll>table{min-width:660px}
.chemistry-table-scroll:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* add-to-cart toast (cart-utils.js showToast -> #toast.show). The div ships on
   all 20 PDPs but had no rules here, so the message painted in normal flow at
   the end of the page. Parked above the FAB stack via the --fab-* contract. */
.toast{position:fixed;bottom:calc(var(--fab-bottom,28px) + var(--fab-size,56px) + 20px);right:var(--fab-right,28px);z-index:1200;background:var(--surface);border:1px solid var(--pink);border-radius:999px;padding:12px 22px;font-family:var(--sans);font-size:14px;color:var(--white);box-shadow:var(--shadow-2);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--d-2) var(--ease-out),transform var(--d-2) var(--ease-out)}
.toast.show{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.toast{transition:opacity var(--d-2) linear}}

/* ── sections whose markup outlived their stylesheet in the redesign ────────
   .callout (AI-summary / format-comparison blocks on mots-c, ss-31, bac-water),
   .inventory-banner (the OOS status callout on glow-pen) and the bare
   .product-card wrapper (ss-31's 50mg reference format) all shipped with no
   rules, so they rendered as unframed text. Dark-palette equivalents: */
.callout{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--pink);border-radius:var(--r);padding:20px 24px;margin:24px 0}
.callout p{margin:0}
.callout p + p{margin-top:10px}
.callout strong{color:var(--white)}

.inventory-banner{background:var(--surface-2);border:1px solid var(--border-2);border-left:3px solid var(--pink);border-radius:var(--r);padding:16px 20px;margin:16px 0}
.inventory-banner__eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink-text);margin-bottom:6px}
.inventory-banner__copy{font-size:14px;line-height:1.6;color:var(--gray)}
.inventory-banner__copy a{color:var(--pink-text);text-decoration:underline;text-underline-offset:2px}

.product-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px}
@media (max-width:429px){
  .chemistry-table-scroll::before{content:'Swipe sideways to compare columns ->';display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin:12px 14px 2px}
}