/* ---- Self-hosted web fonts (2026-09-03). The same woff2 files Google Fonts served, now on our own
   edge (a year-long immutable cache, preloaded from every page head), so they arrive with the
   stylesheet instead of two cross-origin round trips later. font-display:fallback gives each face a
   100ms block then a 3s swap window: with the latin files preloaded (~47KB) they are ready for the
   first render, so text is never shown in a fallback face on a normal load, and a slow load still
   ends in the brand face rather than leaving the page in a system font. Plus Jakarta Sans is one variable file per subset (weights 200-800);
   IBM Plex Mono is a static 400 and 500. Google's unicode-ranges are kept so only latin loads. ---- */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:fallback;src:url(/wp-content/themes/helion/static/fonts/plexmono-400-cyrillic-ext.woff2?v=1) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:fallback;src:url(/wp-content/themes/helion/static/fonts/plexmono-400-cyrillic.woff2?v=1) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:fallback;src:url(/wp-content/themes/helion/static/fonts/plexmono-400-vietnamese.woff2?v=1) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:fallback;src:url(/wp-content/themes/helion/static/fonts/plexmono-400-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:fallback;src:url(/wp-content/themes/helion/static/fonts/plexmono-400-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:fallback;src:url(/wp-content/themes/helion/static/fonts/plexmono-500-cyrillic-ext.woff2?v=1) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:fallback;src:url(/wp-content/themes/helion/static/fonts/plexmono-500-cyrillic.woff2?v=1) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:fallback;src:url(/wp-content/themes/helion/static/fonts/plexmono-500-vietnamese.woff2?v=1) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:fallback;src:url(/wp-content/themes/helion/static/fonts/plexmono-500-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:fallback;src:url(/wp-content/themes/helion/static/fonts/plexmono-500-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:fallback;src:url(/wp-content/themes/helion/static/fonts/pjs-cyrillic-ext.woff2?v=1) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:fallback;src:url(/wp-content/themes/helion/static/fonts/pjs-vietnamese.woff2?v=1) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:fallback;src:url(/wp-content/themes/helion/static/fonts/pjs-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:fallback;src:url(/wp-content/themes/helion/static/fonts/pjs-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
--canvas:        #FFFFFF;
--canvas-2:      #E5E5E2;
--surface:       #F5F5F3;
--surface-2:     #FFFFFF;
--media:         #F4EEE2;
--vial-well:     #EFE7D6;
--tan:           #EADFCB;
--tan-2:         #D8CAAE;
--tan-tint:      #F5EFE4;
--tan-ink:       #8A6B3E;
/* --vial-well: DO NOT CHANGE. It is the background baked into the vial
renders; any other value puts a visible seam around every product image.
Using --media here shows a 1-step seam. Re-measure adjacent-pixel steps
across every well edge after ANY edit near a media well. */
--line:          #DBDAD6;
--line-2:        #BDBCB7;
--line-ink:      rgba(10,10,11,.10);
--silver:        #85847F;
--silver-deep:   #75746F;
--ink:           #0A0A0B;
--ink-2:         #444441;
--ink-3:         #65645F;
--ink-lift:      #22221F;
--ink-inv:       #FAFAF8;
--ink-inv-2:     rgba(250,250,248,.80);
--ink-inv-3:     rgba(250,250,248,.66);
--ink-inv-lift:  #FFFFFF;
--ink-fill:      rgba(10,10,11,.08);
--inv-fill:      rgba(10,10,11,.22);
--accent:        #1F5C4E;
--accent-dark:   #17463C;
--accent-lift:   #2A7563;
--accent-tint:   #E2EEEA;
--accent-tint-2: #C4DAD2;
--accent-glow:   rgba(31,92,78,.26);
--band-glow:     rgba(255,255,255,.75);
--band:          #EFEFEC;
--band-2:        #E6E6E2;
--band-line:     rgba(10,10,11,.10);
--band-line-2:   rgba(10,10,11,.26);
--band-fill:     rgba(255,255,255,.55);
--band-fill-2:   rgba(255,255,255,.78);
--band-grad:     linear-gradient(128deg, var(--band) 0%, var(--band-2) 100%);
--ok:            #1F5C4E;
--ok-tint:       #E2EEEA;
--pending:       #6E5714;
--pending-tint:  #F2E9CE;
--pending-line:  #E0D2A8;
--muted:         #85847F;
--muted-tint:    #E9E9E6;
--alert:         #8C3B24;
--alert-tint:    #F4E2DA;
--sh-1: 0 1px 2px rgba(15,20,18,.05), 0 3px 10px rgba(15,20,18,.05);
--sh-2: 0 8px 26px rgba(15,20,18,.10);
--sh-3: 0 22px 60px rgba(15,20,18,.16);
--sh-inset: inset 0 1px 0 rgba(255,255,255,.55);
--sh-accent: 0 10px 28px rgba(31,92,78,.24);
--ring: 0 0 0 3px var(--accent-glow);
--scrim: rgba(13,10,4,.44);
--s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px; --s6:24px;
--s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;
--pad: clamp(16px, 4vw, 32px);
--max: 1240px;
--max-prose: 680px;
--max-lede: 620px;
--sec-y:       clamp(48px, 6vw, 88px);
--sec-y-tight: clamp(30px, 3.6vw, 52px);
--sec-y-join:  clamp(24px, 2.8vw, 40px);
--gap:    18px;
--gap-sm: 12px;
--promo-h: 32px;
--nav-h:   64px;
--head-h:  96px;
--r-xs:  6px;
--r-sm: 10px;
--r-md: 12px;
--r:    14px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 999px;
--font-display: 'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--font-body:    'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--font-mono:    'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;
--fs-display: clamp(38px, 5.2vw, 66px);
--fs-h1:      clamp(30px, 3.8vw, 46px);
--fs-h2:      clamp(25px, 2.9vw, 36px);
--fs-stat-card: clamp(28px, 2.5vw, 36px);
--fs-h3:      clamp(19px, 1.7vw, 23px);
--fs-h4:      16.5px;
--fs-lede:    clamp(15.5px, 1.25vw, 17.5px);
--fs-body:    15.5px;
--fs-sm:      14px;
--fs-xs:      13px;
--fs-2xs:     12px;
--fs-3xs:     11px;
--fs-micro:   10.5px;
--fs-price:   clamp(24px, 2.4vw, 32px);
--fs-stat:    clamp(30px, 3.6vw, 44px);
--ease:        cubic-bezier(.22,.61,.36,1);
--ease-in-out: cubic-bezier(.65,0,.35,1);
--t-fast: 130ms;  --t: 180ms;  --t-mid: 240ms;  --t-slow: 320ms;  --t-reveal: 520ms;
--z-base:0; --z-raise:5; --z-sticky:20; --z-promo:25; --z-nav:30;
--z-dropdown:40; --z-scrim:60; --z-drawer:70; --z-modal:80; --z-toast:90; --z-gate:100;
--caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2346433C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
}
*,*::before,*::after{box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:var(--head-h);
-webkit-text-size-adjust:100%;
background:var(--canvas);
}
body{
margin:0;
background:var(--canvas);
color:var(--ink-2);
font:400 var(--fs-body)/1.65 var(--font-body);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img,svg,video,canvas{max-width:100%;display:block}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
h1,h2,h3,h4{
margin:0;
color:var(--ink);
font-family:var(--font-display);
font-weight:700;
text-transform:none;
}
h1{font-size:var(--fs-h1);letter-spacing:-.022em;line-height:1.06}
h2{font-size:var(--fs-h2);letter-spacing:-.018em;line-height:1.10}
h3{font-size:var(--fs-h3);letter-spacing:-.012em;line-height:1.22}
h4{font-size:var(--fs-h4);letter-spacing:-.006em;line-height:1.30}
p{margin:0}
strong,b{font-weight:700}
small{font-size:var(--fs-2xs)}
:where(ul[class],ol[class]){list-style:none;margin:0;padding:0}
code,kbd,samp,pre{font-family:var(--font-mono);font-size:.94em}
table{border-collapse:collapse;border-spacing:0}
[hidden]{display:none}
::selection{background:var(--accent);color:var(--ink-inv)}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
outline:2px solid var(--accent);
outline-offset:2px;
border-radius:var(--r-xs);
}
:where(.band,.foot,.promo) :where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
outline-color:var(--ink-inv);
}
:where(.pdp__qty,.cart-row__qty,.pdp__stage,.scroller) :where(a,button,input,select):focus-visible{
outline-offset:-3px;
}
.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;
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
html *:is([class],*):is([class],*):is([class],*),
html *:is([class],*):is([class],*):is([class],*)::before,
html *:is([class],*):is([class],*):is([class],*)::after{
animation-duration:1ms;
animation-delay:0ms;
animation-iteration-count:1;
transition-duration:1ms;
transition-delay:0ms;
scroll-behavior:auto;
}
.reveal{opacity:1;transform:none}
video[autoplay]{display:none}
}
.wrap{
width:100%;
max-width:var(--max);
margin-inline:auto;
padding-inline:var(--pad);
}
.wrap--prose{max-width:var(--max-prose)}
.section{padding-block:var(--sec-y)}
.section--tight{padding-block:var(--sec-y-tight)}
.section--soft{background:var(--canvas)}
.section--flush-top{padding-top:0}
.section:not(.section--soft) + .section:not(.section--soft){padding-top:0}
.section--tight:not(.section--soft) + .section:not(.section--soft):not(.section--tight):not(.section--flush-top){
padding-top:calc(var(--sec-y) - var(--sec-y-tight));
}
.section--soft + .section:not(.section--soft):not(.section--flush-top){
padding-top:var(--sec-y-join);
}
.section:not(.section--soft):has(+ .section--soft){
padding-bottom:var(--sec-y-join);
}
.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(28px,4vw,56px);
align-items:center;
}
.split--wide-left{grid-template-columns:1.15fr .85fr}
.stack{display:grid;gap:var(--s4)}
.row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.scroller{
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;
scrollbar-width:thin;
scrollbar-color:var(--silver-deep) transparent;
}
.scroller::-webkit-scrollbar{height:8px}
.scroller::-webkit-scrollbar-track{background:transparent}
.scroller::-webkit-scrollbar-thumb{
background:var(--silver-deep);
border-radius:var(--r-pill);
}
@media (max-width:900px){
.split,
.split--wide-left{grid-template-columns:1fr}
.grid-3,
.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.grid-3,
.grid-4{grid-template-columns:1fr;gap:var(--gap-sm)}
}
.skip{
position:absolute;
left:var(--s4);
top:-120px;
z-index:var(--z-toast);
padding:12px 18px;
border-radius:var(--r-sm);
background:var(--ink);
color:var(--ink-inv);
font-size:var(--fs-xs);
font-weight:600;
box-shadow:var(--sh-2);
transition:top var(--t) var(--ease);
}
.skip:focus,
.skip:focus-visible{top:var(--s2)}
.promo{
position:sticky;
top:0;
z-index:var(--z-promo);
height:var(--promo-h);
display:flex;
align-items:center;
overflow:hidden;
background:var(--tan);
color:var(--ink-2);
border-bottom:1px solid var(--tan-2);
font-size:var(--fs-2xs);
line-height:1;
}
.promo__track{
display:flex;
width:max-content;
animation:promoScroll 48s linear infinite;
}
.promo__track:hover{animation-play-state:paused}
.promo__seq{display:flex;align-items:center;white-space:nowrap}
.promo__item{line-height:1}
.promo__item::after{
content:"·";
margin:0 14px;
color:var(--ink-3);
}
.promo__item strong{font-weight:700;color:var(--ink)}
@keyframes promoScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
.promo__track{animation:none;transform:none}
}
.nav{
position:sticky;
top:var(--promo-h);
z-index:var(--z-nav);
background:var(--canvas);
border-bottom:1px solid var(--silver-deep);
box-shadow:none;
transition:box-shadow var(--t) var(--ease);
}
@supports (backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px)){
.nav{
background:color-mix(in srgb, var(--canvas) 88%, transparent);
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
}
}
.nav.is-scrolled{box-shadow:var(--sh-1)}
.nav__inner{
width:100%;
max-width:var(--max);
margin-inline:auto;
padding-inline:var(--pad);
height:var(--nav-h);
display:flex;
align-items:center;
gap:var(--s5);
}
.nav__brand{display:inline-flex;align-items:center;min-height:44px;flex:none}
.brand-wm{
font-family:var(--font-display);
font-weight:800;
font-size:21px;
letter-spacing:-.03em;
line-height:1;
color:var(--ink);
}
.brand-wm--inv{color:var(--ink)}
.brand-wm__dot{color:var(--accent)}
.nav__menu{display:flex;align-items:center;gap:2px}
.nav__menu > a{
display:inline-flex;
align-items:center;
padding:9px 12px;
border-radius:var(--r-pill);
font-size:var(--fs-xs);
font-weight:600;
color:var(--ink-2);
white-space:nowrap;
transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__menu > a:hover{background:var(--surface);color:var(--ink)}
.nav__menu > a.is-current{background:var(--surface);color:var(--ink)}
.mnav__label,
.mnav__foot,
.nav__scrim{display:none}
.nav__menu > a.mnav__sub{display:none}
.nav__actions{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.nav__search,
.nav__burger{
position:relative;
width:38px;
height:38px;
flex:none;
display:grid;
place-items:center;
border-radius:50%;
border:1px solid var(--silver-deep);
background:var(--surface);
color:var(--ink-2);
transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
background var(--t-fast) var(--ease);
}
.nav__search::after,
.nav__burger::after{content:"";position:absolute;inset:-3px;border-radius:50%}
.nav__search:hover,
.nav__burger:hover{border-color:var(--ink);color:var(--ink)}
.nav__burger{display:none}
.nav__account{
display:inline-flex;
align-items:center;
gap:8px;
height:38px;
padding:0 14px;
border-radius:var(--r-pill);
border:1px solid var(--silver-deep);
background:var(--surface);
color:var(--ink-2);
font-size:var(--fs-xs);
font-weight:600;
white-space:nowrap;
transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__account:hover{border-color:var(--ink);color:var(--ink)}
.nav__cart{
display:inline-flex;
align-items:center;
gap:8px;
height:38px;
padding:0 14px;
border-radius:var(--r-pill);
border:1px solid var(--accent);
background:var(--accent);
color:var(--ink-inv);
font-size:var(--fs-xs);
font-weight:600;
white-space:nowrap;
transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav__cart:hover{background:var(--ink-lift);border-color:var(--ink-lift)}
.nav__cart-total:not([hidden]){display:inline;font-variant-numeric:tabular-nums}
.nav__cart-count{
min-width:17px;
height:17px;
padding:0 5px;
border-radius:var(--r-pill);
background:var(--surface-2);
color:var(--accent-dark);
font-size:var(--fs-3xs);
font-weight:700;
line-height:17px;
text-align:center;
font-variant-numeric:tabular-nums;
display:none;
align-items:center;
justify-content:center;
}
.nav__cart-link{
display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
font-size:var(--fs-xs);font-weight:600;color:var(--accent-dark);
text-decoration:underline;text-underline-offset:4px;
}
.nav--checkout{top:0}
.nav--checkout .nav__menu,
.nav--checkout .nav__search,
.nav--checkout .nav__account,
.nav--checkout .nav__burger,
.nav--checkout .nav__scrim{display:none}
.nav--checkout .nav__inner{gap:var(--s4)}
@media (max-width:1280px){
.nav__menu > a{padding:9px 8px}
.nav__account-label{display:none}
.nav__account{padding:0 11px}
}
@media (max-width:1080px){
.nav__burger{display:grid}
.nav{
-webkit-backdrop-filter:none;
backdrop-filter:none;
background:var(--canvas);
}
.nav__menu{
position:fixed;
inset:var(--head-h) 0 0 auto;
width:min(360px,88vw);
z-index:var(--z-drawer);
display:flex;
flex-direction:column;
align-items:stretch;
gap:0;
padding:var(--s4) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom));
background:var(--surface);
border-left:1px solid var(--line);
box-shadow:var(--sh-3);
overflow-y:auto;
overscroll-behavior:contain;
transform:translateX(100%);
visibility:hidden;
transition:transform var(--t-mid) var(--ease-in-out), visibility var(--t-mid);
}
.nav__menu.is-open{transform:none;visibility:visible}
.nav__menu > a{
min-height:48px;
padding:0 var(--s3);
border-radius:var(--r-sm);
font-size:var(--fs-body);
color:var(--ink);
}
.mnav__label{
display:block;
padding:var(--s5) var(--s3) var(--s1);
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
}
.mnav__label:first-child{padding-top:var(--s2)}
.nav__menu > a.mnav__sub{
display:flex;
min-height:44px;
padding:0 var(--s3) 0 var(--s6);
font-size:var(--fs-sm);
color:var(--ink-2);
}
.mnav__foot{
display:grid;
gap:var(--s2);
margin-top:auto;
padding-top:var(--s5);
border-top:1px solid var(--line);
}
.mnav__mail{
display:flex;
align-items:center;
justify-content:center;
min-height:44px;
font-size:var(--fs-2xs);
color:var(--ink-3);
text-align:center;
word-break:break-word;
}
.nav__scrim{
display:block;
position:fixed;
inset:var(--head-h) 0 0 0;
z-index:var(--z-scrim);
background:var(--scrim);
-webkit-backdrop-filter:blur(2px);
backdrop-filter:blur(2px);
opacity:0;
visibility:hidden;
touch-action:none;
transition:opacity var(--t-mid) var(--ease), visibility var(--t-mid);
}
.nav__menu.is-open + .nav__scrim{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}
}
.foot{
background:var(--band-grad);
color:var(--ink-2);
border-top:1px solid var(--band-line);
padding-top:clamp(40px,5vw,64px);
font-size:var(--fs-sm);
}
.foot__top{
display:grid;
grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr;
gap:var(--s8);
padding-bottom:clamp(28px,3.5vw,40px);
border-bottom:1px solid var(--band-line);
}
.foot__brand{max-width:340px;display:grid;gap:var(--s3);align-content:start}
.foot__brand p{font-size:var(--fs-2xs);line-height:1.7;color:var(--ink-2)}
.foot__brand .microcap{color:var(--ink-3)}
.foot__sub{display:grid;gap:6px;margin-top:var(--s2);max-width:340px}
.foot__sub-label{font-size:var(--fs-xs);font-weight:700;color:var(--ink)}
.foot__sub-hint{margin:0;font-size:var(--fs-2xs);line-height:1.55;color:var(--ink-3)}
.foot__sub-row{display:flex;gap:6px;align-items:stretch}
.foot__sub-row input{
flex:1;min-width:0;min-height:38px;padding:0 14px;
border:1px solid var(--band-line-2);border-radius:var(--r-pill);
background:var(--band-fill-2);color:var(--ink);
font:inherit;font-size:var(--fs-2xs);
transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.foot__sub-row input::placeholder{color:var(--silver)}
.foot__sub-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint-2)}
.foot__sub-row .btn{flex:none}
.foot__sub-msg{margin:0;font-size:var(--fs-2xs);line-height:1.5;color:var(--ink-3);min-height:0}
.foot__sub-msg:empty{display:none}
.foot__sub-msg.is-ok{color:var(--ok)}
.foot__sub-msg.is-err{color:var(--alert)}
.foot h4,
.foot h2{font-size:var(--fs-h4);font-weight:700;color:var(--ink);letter-spacing:normal}
.foot__col ul{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:2px}
.foot__col a{
display:inline-flex;
align-items:center;
min-height:30px;
font-size:var(--fs-sm);
color:var(--ink-2);
transition:color var(--t-fast) var(--ease);
word-break:break-word;
}
.foot__col a[href^="mailto:"]{
font-size:var(--fs-2xs);
letter-spacing:.01em;
white-space:nowrap;
}
.foot a:hover{color:var(--accent-dark)}
.foot__ship{
margin-top:var(--s6);
padding:var(--s4) var(--s5);
background:var(--band-fill);
border:1px solid var(--band-line);
border-radius:var(--r);
font-size:var(--fs-2xs);
line-height:1.7;
}
.foot__pay{
margin-top:var(--s4);
display:flex;
align-items:center;
gap:var(--s2);
flex-wrap:wrap;
}
.foot__pay .foot__pay-label{color:var(--ink-3);margin-right:var(--s1)}
.foot__pay-icon{
padding:6px 12px;
border:1px solid var(--band-line);
border-radius:var(--r-pill);
background:var(--band-fill);
font-size:var(--fs-2xs);
font-weight:600;
color:var(--ink-2);
}
.foot__ruo{
margin-top:var(--s6);
max-width:840px;
font-size:var(--fs-2xs);
line-height:1.7;
color:var(--ink-3);
}
.foot__ruo strong{color:var(--ink-2)}
.foot__bottom{
margin-top:var(--s6);
padding:var(--s5) 0 var(--s6);
border-top:1px solid var(--band-line);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s3);
flex-wrap:wrap;
font-size:var(--fs-2xs);
color:var(--ink-3);
}
@media (max-width:1080px){
.foot__col a[href^="mailto:"]{white-space:normal}
}
@media (max-width:900px){
.foot__top{grid-template-columns:1fr 1fr;gap:var(--s6)}
.foot__col a{min-height:44px;font-size:14px}
.foot__bottom{padding-bottom:calc(var(--s6) + env(safe-area-inset-bottom))}
}
@media (max-width:560px){
.foot__top{grid-template-columns:1fr}
}
.gate{display:none}
.gate.is-armed{
display:flex;
position:fixed;
inset:0;
z-index:var(--z-gate);
background:var(--canvas);
align-items:center;
justify-content:center;
padding:var(--pad);
}
.gate__card{
width:min(520px,100%);
text-align:center;
padding:clamp(24px,4vw,40px);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-xl);
box-shadow:var(--sh-3);
}
.gate__title{font-size:var(--fs-h2)}
.gate__copy{margin-top:var(--s3);font-size:var(--fs-sm);color:var(--ink-2)}
.gate__acts{
margin-top:var(--s6);
display:flex;
gap:var(--s3);
justify-content:center;
flex-wrap:wrap;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:12px 22px;
min-height:44px;
border-radius:var(--r-pill);
border:1.5px solid transparent;
font:600 var(--fs-xs)/1 var(--font-body);
white-space:nowrap;
transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--accent{background:var(--accent);color:var(--ink-inv)}
.btn--accent:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:var(--sh-accent)}
.btn--solid{background:var(--accent);color:var(--ink-inv)}
.btn--solid:hover{background:var(--ink-lift);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn--ghost{background:var(--surface-2);border-color:var(--silver-deep);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn--quiet{
background:none;
padding-inline:6px;
color:var(--accent-dark);
text-decoration:underline;
text-underline-offset:4px;
}
.btn--quiet:hover{color:var(--accent)}
.btn--inv{background:var(--accent);color:var(--ink-inv)}
.btn--inv:hover{background:var(--accent-dark);transform:translateY(-1px)}
.btn--inv-ghost{background:var(--surface-2);border-color:var(--line-2);color:var(--ink)}
.btn--inv-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn--sm{padding:9px 16px;min-height:38px;font-size:var(--fs-2xs)}
.btn--lg{padding:15px 30px;min-height:52px;font-size:var(--fs-body)}
.btn--block{width:100%}
.btn[disabled],
.btn.is-disabled{opacity:.45;pointer-events:none}
.btn.is-busy{cursor:progress}
.btn.is-added{
opacity:1;
background:var(--accent-dark);
border-color:var(--accent-dark);
color:var(--ink-inv);
pointer-events:none;
}
@media (max-width:420px){
.btn{padding:12px 18px}
.btn--lg{padding:14px 22px}
}
.lede{
max-width:var(--max-lede);
margin-top:12px;
font-size:var(--fs-lede);
line-height:1.6;
color:var(--ink-2);
}
.eyebrow{
display:inline-block;
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--tan-ink);
}
.section--soft .eyebrow{color:var(--tan-ink)}
.shead{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:var(--s5);
flex-wrap:wrap;
margin-bottom:clamp(22px,3vw,36px);
}
.shead__lead{max-width:640px}
.shead__lead h2{font-size:var(--fs-h2)}
.shead__action{flex:none}
.shead--center{
display:block;
text-align:center;
max-width:660px;
margin-inline:auto;
}
.shead--center .lede{margin-inline:auto}
.page-hd{
padding-block:clamp(30px,4vw,54px) clamp(24px,3vw,36px);
border-bottom:1px solid var(--line);
}
.page-hd h1{font-size:var(--fs-h1)}
.page-hd__meta{
margin-top:var(--s4);
display:flex;
align-items:center;
gap:var(--s3);
flex-wrap:wrap;
}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.pgrid--3{grid-template-columns:repeat(3,1fr)}
.pcard{
display:flex;
flex-direction:column;
padding:8px;
background:var(--surface);
border:1px solid var(--silver);
border-radius:var(--r);
box-shadow:var(--sh-1);
overflow:hidden;
transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
border-color var(--t) var(--ease);
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--silver-deep)}
.pcard__link{display:block;color:inherit}
.pcard__media{
position:relative;
aspect-ratio:1;
background:var(--vial-well);
border-radius:calc(var(--r) - 8px);
overflow:hidden;
}
.pcard__media img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform var(--t-mid) var(--ease);
}
.pcard:hover .pcard__media img{transform:scale(1.035)}
.pcard__body{padding:14px 8px 6px;flex:1}
.pcard__cat{
display:block;
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
}
.pcard__name{
margin-top:6px;
font-size:var(--fs-body);
font-weight:600;
line-height:1.3;
letter-spacing:-.006em;
color:var(--ink);
}
.pcard__dose{font-weight:500;color:var(--ink-3)}
.pcard__spec{
margin-top:6px;
font-size:var(--fs-2xs);
line-height:1.5;
color:var(--ink-3);
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
}
.pcard--reagent .pcard__spec{-webkit-line-clamp:none;overflow:visible;display:block}
.pcard__foot{
margin-top:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s3);
padding:0 8px 8px;
}
.pcard__price{
font-size:var(--fs-h4);
font-weight:700;
color:var(--ink);
font-variant-numeric:tabular-nums;
}
.pcard__price i{font-style:normal;font-size:var(--fs-2xs);color:var(--ink-3);margin-right:1px}
.pcard__add:hover{transform:none}
.pcard--oos .pcard__media{filter:saturate(.55) opacity(.72)}
.pcard--oos .pcard__name{color:var(--ink-2)}
@media (max-width:1080px){
.pgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
.pgrid,
.pgrid--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.pgrid,
.pgrid--3{grid-template-columns:repeat(2,1fr);gap:var(--gap-sm)}
.pcard__name{font-size:14px}
.pcard__body{padding:10px 4px 4px}
.pcard__foot{padding:0 4px 4px;flex-wrap:wrap;gap:var(--s2)}
.pcard__add,
.pcard__notify{width:100%}
}
.trust{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:var(--s4);
list-style:none;
margin:0;
padding:var(--s5);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
}
.trust__item{
display:grid;
grid-template-columns:38px 1fr;
grid-template-rows:auto auto;
column-gap:var(--s3);
row-gap:2px;
align-items:center;
}
.trust__icon{
grid-row:1 / span 2;
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:var(--r-sm);
background:var(--tan-tint);
border:1px solid var(--tan-2);
color:var(--ink);
}
.trust__icon svg{width:18px;height:18px}
.trust__item b{font-size:var(--fs-sm);font-weight:700;color:var(--ink);align-self:end}
.trust__item span:not(.trust__icon){font-size:var(--fs-2xs);color:var(--ink-3);align-self:start}
@media (max-width:900px){
.trust{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4)}
}
@media (max-width:420px){
.trust{padding:var(--s4)}
.trust__item{column-gap:var(--s2)}
}
.band{
position:relative;
overflow:hidden;
border-radius:var(--r-lg);
color:var(--ink);
background:var(--band-grad);
}
.band::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(120% 160% at 88% 6%, var(--band-glow), transparent 58%);
pointer-events:none;
}
.band::after{
content:"";
position:absolute;
inset:0 0 auto;
height:4px;
background:linear-gradient(90deg, var(--band-line-2) 0 38%, var(--band-line) 100%);
}
.band__in{
position:relative;
display:grid;
grid-template-columns:.92fr 1.08fr;
gap:clamp(24px,4vw,52px);
padding:clamp(28px,4vw,52px);
align-items:center;
}
.band__copy{min-width:0}
.band__aside{min-width:0}
.band h2{font-size:var(--fs-h2);color:var(--ink)}
.band h3{color:var(--ink)}
.band .lede{color:var(--ink-2);max-width:420px}
.band .eyebrow{color:var(--tan-ink)}
.band .microcap{color:var(--ink-3)}
.band--single .band__in{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}
@media (max-width:900px){
.band__in{grid-template-columns:1fr}
.band .lede{max-width:none}
}
.cmp{
background:var(--surface-2);
border:1px solid var(--band-line);
border-radius:var(--r);
padding:6px 18px;
}
.cmp__head,
.cmp__row{
display:grid;
grid-template-columns:1fr 84px 128px;
gap:12px;
align-items:center;
}
.cmp__head{
padding:12px 0;
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
text-align:center;
}
.cmp__head span:first-child{text-align:left}
.cmp__us{
justify-self:center;
padding:5px 12px;
border-radius:var(--r-pill);
background:var(--accent);
color:var(--ink-inv);
}
.cmp__row{
padding:13px 0;
border-bottom:1px solid var(--band-line);
font-size:var(--fs-sm);
color:var(--ink-2);
}
.cmp__row:last-child{border-bottom:0}
.cmp__yes{display:grid;place-items:center}
.cmp__yes i{
width:24px;
height:24px;
display:grid;
place-items:center;
border-radius:50%;
background:var(--accent);
color:var(--ink-inv);
font-style:normal;
font-size:var(--fs-2xs);
font-weight:700;
}
.cmp__no{
font-size:var(--fs-2xs);
color:var(--ink-3);
text-align:center;
}
@media (max-width:560px){
.cmp{padding:4px 12px}
.cmp__head,
.cmp__row{grid-template-columns:1fr 40px 72px;gap:8px;font-size:var(--fs-2xs)}
.cmp__yes i{width:20px;height:20px;font-size:var(--fs-3xs)}
.cmp__head{
text-transform:none;
letter-spacing:0;
font-size:var(--fs-3xs);
line-height:1.25;
align-items:end;
}
.cmp__us{background:none;padding:0;color:var(--accent-dark)}
}
.dtable{
width:100%;
border-collapse:separate;
border-spacing:0;
background:var(--surface);
border:1px solid var(--silver-deep);
border-radius:var(--r);
overflow:hidden;
}
.dtable th{
padding:11px 14px;
text-align:left;
background:var(--canvas-2);
font-size:var(--fs-3xs);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
white-space:nowrap;
}
.dtable td{
padding:13px 14px;
border-bottom:1px solid var(--silver);
font-size:var(--fs-sm);
color:var(--ink-2);
vertical-align:middle;
}
.dtable td:first-child{font-weight:600;color:var(--ink)}
.dtable tr:last-child td{border-bottom:0}
@media (max-width:720px){
.dtable{border:0;background:none;border-radius:0;overflow:visible}
.dtable thead{position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;overflow:hidden}
.dtable tr{
display:block;
margin-bottom:10px;
background:var(--surface);
border:1px solid var(--silver-deep);
border-radius:var(--r-sm);
}
.dtable td{
display:flex;
justify-content:space-between;
gap:14px;
text-align:right;
border-bottom:0;
padding:10px 14px;
}
.dtable td::before{
content:attr(data-th);
font-weight:600;
color:var(--ink-3);
text-align:left;
}
.dtable td:first-child{
display:block;
text-align:left;
font-size:15.5px;
font-weight:700;
border-bottom:1px solid var(--silver);
}
.dtable td:first-child::before{display:none}
.dtable tr:last-child td{border-bottom:0}
.dtable tr:last-child td:first-child{border-bottom:1px solid var(--silver)}
}
.tag{
position:absolute;
top:10px;
left:10px;
z-index:var(--z-raise);
padding:5px 10px;
border-radius:var(--r-pill);
font-size:var(--fs-3xs);
font-weight:700;
line-height:1.3;
max-width:calc(100% - 20px);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.tag--accent{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2)}
.tag--tint{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.tag--muted{background:var(--muted-tint);color:var(--ink-3)}
.tag--pending{background:var(--pending-tint);color:var(--pending)}
.pill{
display:inline-flex;
align-items:center;
gap:7px;
padding:6px 12px;
border:1px solid var(--silver-deep);
border-radius:var(--r-pill);
background:var(--surface);
font-size:var(--fs-2xs);
font-weight:600;
color:var(--ink-2);
line-height:1.3;
}
.pill--ok{background:var(--ok-tint);color:var(--ok);border-color:var(--accent-tint-2)}
.pill--ok::before{
content:"";
width:7px;
height:7px;
border-radius:50%;
background:var(--ok);
flex:none;
}
.pill--pending{background:var(--pending-tint);color:var(--pending);border-color:var(--pending-line)}
.pill--muted{background:var(--muted-tint);color:var(--ink-3);border-color:var(--line-2)}
.chip{
position:relative;
display:inline-flex;
align-items:center;
min-height:40px;
padding:9px 15px;
border:1.5px solid var(--silver-deep);
border-radius:var(--r-pill);
background:var(--surface);
font-size:var(--fs-2xs);
font-weight:600;
color:var(--ink-2);
white-space:nowrap;
transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
.chip::after{content:"";position:absolute;inset:-2px;border-radius:var(--r-pill)}
.chip:hover{border-color:var(--accent);color:var(--accent-dark)}
.chip.is-on{background:var(--accent);color:var(--ink-inv);border-color:var(--accent)}
.chip.is-on:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--ink-inv)}
.chip__n{
margin-left:7px;
padding:1px 6px;
border-radius:var(--r-pill);
background:var(--ink-fill);
font-size:11px;
font-variant-numeric:tabular-nums;
}
.chip.is-on .chip__n{background:var(--inv-fill)}
.microcap{
display:inline-block;
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
line-height:1.3;
color:var(--ink-3);
}
.mono{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.02em}
.specimen{
display:inline-block;
transform:rotate(-9deg);
padding:8px 14px;
border:2.5px solid var(--pending);
border-radius:var(--r-sm);
color:var(--pending);
font:800 var(--fs-body)/1 var(--font-mono);
letter-spacing:.24em;
text-transform:uppercase;
opacity:.9;
}
@media (max-width:560px){
.chip{min-height:44px}
}
.info-card{
display:grid;
gap:var(--s2);
align-content:start;
padding:var(--s5);
background:var(--surface);
border:1px solid var(--silver);
border-radius:var(--r);
box-shadow:var(--sh-1);
}
.info-card h3{font-size:var(--fs-h3)}
.info-card p{font-size:var(--fs-sm);color:var(--ink-2)}
.info-card__icon{
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:var(--r-sm);
background:var(--tan-tint);
border:1px solid var(--tan-2);
color:var(--ink);
margin-bottom:var(--s1);
}
.info-card__icon svg{width:18px;height:18px}
.field{display:grid;gap:6px;min-width:0}
.field__label{font-size:var(--fs-2xs);font-weight:700;color:var(--ink)}
.field__req{color:var(--accent)}
.field__ctl{min-width:0}
.field__hint{font-size:var(--fs-2xs);color:var(--ink-3)}
.field__err{font-size:var(--fs-2xs);font-weight:600;color:var(--alert)}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea{
width:100%;
min-height:48px;
padding:0 14px;
background:var(--surface-2);
border:1.5px solid var(--silver-deep);
border-radius:var(--r);
font-size:16px;
color:var(--ink);
transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input::placeholder,
textarea::placeholder{color:var(--ink-3);opacity:1}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus{
outline:none;
border-color:var(--accent);
box-shadow:var(--ring);
}
textarea{padding:12px 14px;min-height:110px;line-height:1.55;resize:vertical}
select{
appearance:none;
-webkit-appearance:none;
padding-right:38px;
background-image:var(--caret);
background-repeat:no-repeat;
background-position:right 14px center;
background-size:12px 8px;
cursor:pointer;
}
input[disabled],
select[disabled],
textarea[disabled]{
background:var(--canvas-2);
color:var(--ink-3);
cursor:not-allowed;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{border-color:var(--alert)}
.field.is-invalid .field__label{color:var(--alert)}
.field--split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.field__ctl--unit{display:flex;gap:8px}
.field__ctl--unit input{flex:1;min-width:0}
.field__ctl--unit select{width:104px;flex:none}
.check{
display:flex;
gap:10px;
align-items:flex-start;
min-height:44px;
font-size:var(--fs-sm);
color:var(--ink-2);
cursor:pointer;
}
.check input[type="checkbox"],
.check input[type="radio"]{
width:19px;
height:19px;
min-height:0;
flex:none;
margin-top:2px;
padding:0;
accent-color:var(--accent);
cursor:pointer;
}
.check input[type="radio"]{border-radius:50%}
@media (max-width:560px){
.field--split{grid-template-columns:1fr}
}
.modal{
position:fixed;
left:50%;
top:50%;
z-index:var(--z-modal);
width:min(760px,94vw);
max-height:calc(100dvh - 32px);
overflow-y:auto;
overscroll-behavior:contain;
padding:clamp(20px,3vw,32px);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-xl);
box-shadow:var(--sh-3);
opacity:0;
visibility:hidden;
transform:translate(-50%,-46%);
transition:opacity var(--t-mid) var(--ease-in-out),
transform var(--t-mid) var(--ease-in-out),
visibility var(--t-mid);
}
.modal.is-open{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
.modal__head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:var(--s4);
margin-bottom:var(--s4);
}
.modal__close{
width:38px;
height:38px;
flex:none;
display:grid;
place-items:center;
border-radius:50%;
border:1px solid var(--silver-deep);
background:var(--surface-2);
color:var(--ink-2);
position:relative;
transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.modal__close::after{content:"";position:absolute;inset:-3px;border-radius:50%}
.modal__close:hover{border-color:var(--ink);color:var(--ink)}
.modal__scrim{
position:fixed;
inset:0;
z-index:var(--z-scrim);
background:var(--scrim);
-webkit-backdrop-filter:blur(2px);
backdrop-filter:blur(2px);
opacity:0;
visibility:hidden;
transition:opacity var(--t-mid) var(--ease), visibility var(--t-mid);
}
.modal__scrim.is-open{opacity:1;visibility:visible}
body.modal-open{overflow:hidden}
.toast{
position:fixed;
left:50%;
bottom:calc(24px + env(safe-area-inset-bottom));
z-index:var(--z-toast);
width:max-content;
max-width:calc(100vw - 32px);
padding:12px 22px;
border-radius:var(--r-pill);
background:var(--ink);
color:var(--ink-inv);
font-size:var(--fs-xs);
font-weight:600;
box-shadow:var(--sh-3);
opacity:0;
visibility:hidden;
transform:translate(-50%,10px);
transition:opacity var(--t) var(--ease), transform var(--t) var(--ease),
visibility var(--t);
}
.toast.is-open{opacity:1;visibility:visible;transform:translate(-50%,0)}
.qa{
margin-bottom:10px;
background:var(--surface);
border:1px solid var(--silver);
border-radius:var(--r);
box-shadow:var(--sh-1);
transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.qa[open],
.qa.is-open{box-shadow:var(--sh-2);border-color:var(--silver-deep)}
.faq__q{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s4);
padding:16px 18px;
min-height:56px;
cursor:pointer;
list-style:none;
font-family:var(--font-display);
font-size:var(--fs-h3);
font-weight:700;
letter-spacing:-.012em;
line-height:1.22;
color:var(--ink);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::marker{content:""}
.qa__plus{
position:relative;
width:28px;
height:28px;
flex:none;
border-radius:50%;
border:1.5px solid var(--silver-deep);
transition:transform var(--t) var(--ease), background var(--t) var(--ease),
border-color var(--t) var(--ease);
}
.qa__plus::before,
.qa__plus::after{
content:"";
position:absolute;
left:50%;
top:50%;
background:var(--ink-2);
transition:background var(--t) var(--ease);
}
.qa__plus::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
.qa__plus::after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
.qa[open] .qa__plus,
.qa.is-open .qa__plus{transform:rotate(45deg);background:var(--accent);border-color:var(--accent)}
.qa[open] .qa__plus::before,
.qa[open] .qa__plus::after,
.qa.is-open .qa__plus::before,
.qa.is-open .qa__plus::after{background:var(--ink-inv)}
.qa__a{padding:0 18px 18px}
.qa__a p{font-size:var(--fs-sm);color:var(--ink-2)}
.qa__a p + p{margin-top:10px}
@media (max-width:560px){
.faq__q{padding:14px 14px;gap:var(--s3)}
.qa__a{padding:0 14px 14px}
}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.stat{display:grid;gap:6px;align-content:start;min-width:0}
.stat__num{
font-family:var(--font-display);
font-size:var(--fs-stat);
font-weight:800;
line-height:1;
letter-spacing:-.026em;
color:var(--ink);
font-variant-numeric:tabular-nums;
}
.stat__lbl{
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
line-height:1.4;
color:var(--ink-3);
}
.band .stat__num{color:var(--ink)}
.band .stat__lbl{color:var(--ink-3)}
@media (max-width:560px){
.stat-row{grid-template-columns:1fr 1fr;gap:var(--s4)}
}
.notice{
display:flex;
gap:12px;
padding:14px 16px;
border-radius:var(--r);
border:1px solid;
font-size:var(--fs-sm);
line-height:1.6;
}
.notice__icon{flex:none;margin-top:2px}
.notice__icon svg{width:18px;height:18px}
.notice strong{font-weight:700}
.notice--info{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-2)}
.notice--pending{background:var(--pending-tint);border-color:var(--pending-line);color:var(--pending)}
.notice--placeholder{background:var(--muted-tint);border-color:var(--line-2);color:var(--ink-3)}
.notice--ruo{background:var(--surface);border-color:var(--line);color:var(--ink-3);font-size:var(--fs-2xs)}
.notice--placeholder[data-placeholder]{border-style:dashed}
.notice--placeholder:not([data-placeholder]){border-color:var(--alert);color:var(--alert)}
.empty{
text-align:center;
padding:clamp(40px,6vw,72px) var(--pad);
background:var(--surface);
border:1px dashed var(--silver-deep);
border-radius:var(--r-lg);
}
.empty h3,
.empty h2{font-size:var(--fs-h3)}
.empty .lede{margin-inline:auto}
.empty .btn{margin-top:var(--s5)}
:is(.cat-card,.info-card,.step,.trust__item).reveal{
opacity:0;
transform:translateY(10px);
transition:opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
transition-delay:calc(var(--reveal-i,0) * 60ms);
}
:is(.cat-card,.info-card,.step,.trust__item).reveal.in-view{
opacity:1;
transform:none;
}
.hero{padding-block:0 0}
.hero__plate{
position:relative;
display:grid;
align-items:center;
min-height:clamp(480px,44vw,620px);
border:1px solid var(--silver-deep);
border-top:0;
border-radius:0;
background:var(--media);
box-shadow:var(--sh-2);
overflow:hidden;
}
.hero__media{position:absolute;inset:0}
.hero__media img,
.hero__media video{
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%;
}
.hero__video{
position:absolute;
inset:0;
opacity:0;
transition:opacity var(--t-slow) var(--ease);
}
.hero__video.is-ready{opacity:1}
.hero__scrim{position:absolute;inset:0;pointer-events:none}
@supports (background:color-mix(in srgb,red 50%,transparent)){
.hero__scrim{
background:
linear-gradient(97deg,
color-mix(in srgb, var(--media) 95%, transparent) 0%,
color-mix(in srgb, var(--media) 90%, transparent) 30%,
color-mix(in srgb, var(--media) 58%, transparent) 50%,
color-mix(in srgb, var(--media)  0%, transparent) 72%),
linear-gradient(to left,
color-mix(in srgb, var(--media) 72%, transparent) 0%,
color-mix(in srgb, var(--media) 34%, transparent) 8%,
color-mix(in srgb, var(--media)  0%, transparent) 19%),
linear-gradient(to top,
color-mix(in srgb, var(--media) 52%, transparent) 0%,
color-mix(in srgb, var(--media)  0%, transparent) 15%);
}
}
.hero__in{
position:relative;
padding:clamp(24px,3.4vw,46px);
max-width:min(620px,56%);
}
.hero__title{
margin-top:14px;
font-size:var(--fs-display);
font-weight:800;
line-height:1.02;
letter-spacing:-.03em;
color:var(--ink);
text-wrap:balance;
}
.hero__in .lede{margin-top:14px}
.hero__acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.hero__proof{
margin-top:clamp(18px,2.4vw,26px);
padding:var(--s5) var(--s5) var(--s4);
background:var(--surface);
border:1px solid var(--silver-deep);
border-radius:var(--r-lg);
box-shadow:var(--sh-inset), var(--sh-2);
}
.hero__proof .stat-row{grid-template-columns:repeat(3,1fr);gap:0}
.hero__proof .stat{
justify-items:center;
text-align:center;
padding-inline:var(--s2);
gap:8px;
}
.hero__proof .stat + .stat{border-left:1px solid var(--silver-deep)}
.hero__proof .stat__num{font-size:var(--fs-stat-card)}
.hero__proof .stat__lbl{letter-spacing:.11em}
.hero__proof .hero__proof-list{
margin:var(--s4) 0 0;
padding:var(--s4) 0 0;
border-top:1px solid var(--silver-deep);
display:grid;
gap:9px;
list-style:none;
}
.hero__proof-list li{
display:flex;
gap:10px;
align-items:flex-start;
font-size:var(--fs-2xs);
line-height:1.5;
color:var(--ink-2);
}
.hero__proof-list svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--ink-2)}
@media (max-width:1280px){
.hero__in{max-width:min(560px,58%)}
}
@media (max-width:1080px){
.hero__plate{display:flex;flex-direction:column;min-height:0}
.hero__media{position:relative;inset:auto;aspect-ratio:16/9}
.hero__scrim{display:none}
.hero__video{display:none}
.hero__media{order:2;aspect-ratio:1/1;width:min(78%,440px);max-width:none;margin:4px auto 0}
.hero__media img{object-fit:cover;object-position:50% 50%}
.hero__in{
order:1;
max-width:none;
padding:clamp(26px,5vw,40px) clamp(20px,4vw,34px) 6px;
background:transparent;
border-top:0;
}
.hero__proof{background:var(--canvas)}
}
@media (max-width:560px){
.hero__media{aspect-ratio:1/1}
.hero__media img,
.hero__media video{object-position:50% 50%}
.hero__acts .btn{flex:1 1 100%}
.hero__proof{padding:var(--s4)}
.hero__proof .stat-row{grid-template-columns:1fr;gap:0}
.hero__proof .stat{
grid-template-columns:1fr auto;
align-items:baseline;
justify-items:start;
text-align:left;
padding:10px 0 9px;
gap:var(--s4);
}
.hero__proof .stat + .stat{border-left:0;border-top:1px solid var(--silver-deep)}
.hero__proof .stat__lbl{order:1}
.hero__proof .stat__num{order:2;font-size:var(--fs-h3)}
.hero__proof .hero__proof-list{margin-top:var(--s3);padding-top:var(--s3)}
}
.cat-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.cat-card{grid-column:span 3}
.cat-card{
display:grid;
grid-template-columns:64px minmax(0,1fr) auto;
align-items:center;
gap:var(--s4);
padding:var(--s4);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r);
box-shadow:var(--sh-1);
transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
border-color var(--t) var(--ease);
}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.cat-card__media{
width:64px;
height:64px;
border-radius:var(--r-sm);
background:var(--vial-well);
overflow:hidden;
}
.cat-card__media img{
width:100%;
height:100%;
object-fit:cover;
transition:transform var(--t-mid) var(--ease);
}
.cat-card:hover .cat-card__media img{transform:scale(1.05)}
.cat-card__body{min-width:0}
.cat-card__name{
display:block;
font-size:var(--fs-sm);
font-weight:700;
line-height:1.3;
letter-spacing:-.006em;
color:var(--ink);
overflow-wrap:break-word;
}
.cat-card__meta{
display:block;
margin-top:5px;
font-size:var(--fs-2xs);
color:var(--ink-3);
font-variant-numeric:tabular-nums;
}
.cat-card__meta b{font-weight:700;color:var(--ink-2)}
.cat-card__go{
font-size:var(--fs-sm);
line-height:1;
color:var(--ink-3);
transition:color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cat-card:hover .cat-card__go{color:var(--ink);transform:translate(2px,-2px)}
.cat-card--lead{
grid-column:span 6;
grid-template-columns:96px minmax(0,1fr) auto;
padding:var(--s5);
}
.cat-card--lead .cat-card__media{width:96px;height:96px}
.cat-card--lead .cat-card__name{font-size:var(--fs-h4)}
.cat-card__desc{
display:block;
margin-top:6px;
font-size:var(--fs-2xs);
line-height:1.5;
color:var(--ink-2);
}
@media (max-width:1080px){
.cat-card{grid-column:span 6}
}
@media (max-width:560px){
.cat-grid{gap:var(--gap-sm)}
.cat-card{grid-column:span 12;grid-template-columns:48px minmax(0,1fr) auto;gap:var(--s3);padding:var(--s3)}
.cat-card__media{width:48px;height:48px}
.cat-card--lead{grid-template-columns:64px minmax(0,1fr) auto}
.cat-card--lead .cat-card__media{width:64px;height:64px}
}
.hm-compare .band__copy h2{margin-top:12px}
.hm-compare .band__copy .microcap{display:block;margin:var(--s5) 0 var(--s4)}
.mplate{
position:relative;
max-width:520px;
aspect-ratio:1;
border:1px solid var(--line);
border-radius:var(--r-lg);
background:var(--vial-well);
box-shadow:var(--sh-1);
overflow:hidden;
}
.mplate img{width:100%;height:100%;object-fit:cover}
.mplate__cap{
position:absolute;
left:var(--s4);
bottom:var(--s4);
max-width:calc(100% - var(--s8));
padding:7px 13px;
border:1px solid var(--line);
border-radius:var(--r-pill);
background:var(--surface-2);
font-family:var(--font-mono);
font-size:var(--fs-3xs);
letter-spacing:.02em;
color:var(--ink-3);
}
.std{min-width:0}
.std h2{margin-top:12px}
.std .lede{margin-top:14px}
.std__acts{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
.feat-list{display:grid;gap:var(--s5);margin-top:var(--s8)}
.feat{display:grid;grid-template-columns:38px minmax(0,1fr);gap:var(--s4);align-items:start}
.feat__n{
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:var(--r-sm);
background:var(--tan-tint);
border:1px solid var(--tan-2);
color:var(--ink);
font-family:var(--font-mono);
font-size:var(--fs-2xs);
font-weight:500;
letter-spacing:.02em;
}
.feat b{display:block;font-size:var(--fs-body);font-weight:700;color:var(--ink);line-height:1.35}
.feat p{margin-top:5px;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.pull{
max-width:820px;
margin-top:clamp(32px,4.5vw,52px);
padding-top:clamp(22px,3vw,30px);
border-top:1px solid var(--line-2);
font-family:var(--font-display);
font-size:var(--fs-h2);
font-weight:600;
line-height:1.25;
letter-spacing:-.012em;
color:var(--ink);
text-wrap:balance;
}
.pull em{font-style:italic;color:var(--tan-ink)}
@media (max-width:900px){
.mplate{max-width:420px}
.feat-list{margin-top:var(--s6)}
.std__acts{margin-top:var(--s6)}
}
@media (max-width:560px){
.mplate{max-width:none}
.feat{grid-template-columns:32px minmax(0,1fr);gap:var(--s3)}
.feat__n{width:32px;height:32px;font-size:var(--fs-3xs)}
}
.save-card{
display:grid;
gap:var(--s3);
align-content:start;
padding:var(--s6);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r);
box-shadow:var(--sh-1);
}
.save-card__off{
justify-self:start;
padding:6px 14px;
border:1px solid var(--accent-tint-2);
border-radius:var(--r-pill);
background:var(--accent-tint);
color:var(--accent-dark);
font-family:var(--font-display);
font-size:var(--fs-h3);
font-weight:800;
line-height:1.1;
letter-spacing:-.012em;
font-variant-numeric:tabular-nums;
}
.save-card h3{font-size:var(--fs-h3)}
.save-card p{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.save-card__cta{justify-self:start;margin-top:var(--s1)}
@media (max-width:560px){
.save-card{padding:var(--s5)}
}
.hm-verify .band__copy{flex:1 1 460px;min-width:0}
.hm-verify .band__copy h2{margin-top:12px}
.hm-verify .band .lede{max-width:560px}
.hm-verify__cta{
display:grid;
justify-items:end;
gap:var(--s3);
flex:0 0 auto;
text-align:right;
}
@media (max-width:900px){
.hm-verify .band__copy{flex-basis:100%}
.hm-verify .band .lede{max-width:none}
.hm-verify__cta{
flex:1 1 100%;
min-width:0;
justify-items:stretch;
text-align:left;
margin-top:var(--s6);
}
.hm-verify__cta .btn{justify-self:start}
}
.steps{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--gap);
list-style:none;
margin:0;
padding:0;
}
.step{
position:relative;
padding-top:var(--s5);
border-top:2px solid var(--line);
min-width:0;
}
.step::before{
content:"";
position:absolute;
top:-2px;
left:0;
width:34%;
height:2px;
background:var(--accent);
}
.step__n{
display:block;
font-family:var(--font-mono);
font-size:var(--fs-2xs);
font-weight:500;
letter-spacing:.02em;
color:var(--tan-ink);
}
.step h3{margin-top:7px;font-size:var(--fs-h3)}
.step p{margin-top:9px;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
@media (max-width:900px){
.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--gap)}
}
@media (max-width:560px){
.steps{grid-template-columns:1fr;gap:var(--s6)}
}
.hm-faq{max-width:820px;margin-inline:auto}
.hm-faq .qa:last-child{margin-bottom:0}
.hm-faq__more{display:flex;justify-content:center;margin-top:var(--s6)}
.hero{padding-block:0}
.hero > .wrap:first-child{max-width:none;padding-inline:0}
.hero__plate{
border:0;
border-radius:0;
box-shadow:none;
border-bottom:1px solid var(--silver-deep);
padding-inline:max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
min-height:0;
}
@media (min-width:1081px){
.hero__in{max-width:620px}
}
@media (min-width:1081px){
.hero__plate{height:645px}
.hero__media img,
.hero__media video{object-position:50% 42%}
}
@media (min-width:1081px){
@supports (background:color-mix(in srgb,red 50%,transparent)){
.hero__scrim{
background:
linear-gradient(97deg,
color-mix(in srgb, var(--media) 95%, transparent) 0,
color-mix(in srgb, var(--media) 90%, transparent) clamp(260px,24vw,440px),
color-mix(in srgb, var(--media) 58%, transparent) clamp(430px,38vw,660px),
color-mix(in srgb, var(--media)  0%, transparent) clamp(620px,54vw,960px)),
linear-gradient(to left,
color-mix(in srgb, var(--media) 72%, transparent) 0%,
color-mix(in srgb, var(--media) 34%, transparent) 8%,
color-mix(in srgb, var(--media)  0%, transparent) 19%),
linear-gradient(to top,
color-mix(in srgb, var(--media) 52%, transparent) 0%,
color-mix(in srgb, var(--media)  0%, transparent) 15%);
}
}
}
.cat-grid--even .cat-card{
grid-column:span 4;
grid-template-columns:88px minmax(0,1fr);
}
.cat-grid--even .cat-card__media{width:88px;height:88px}
.cat-grid--even .cat-card__go{display:none}
.cat-card__shop{
margin-top:6px;
font-size:var(--fs-xs);
font-weight:700;
color:var(--ink);
}
.cat-card:hover .cat-card__shop{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1080px){
.cat-grid--even .cat-card{grid-column:span 6}
}
@media (max-width:560px){
.cat-grid--even .cat-card{grid-column:span 12;grid-template-columns:56px minmax(0,1fr)}
.cat-grid--even .cat-card__media{width:56px;height:56px}
}
.cat-grid--four .cat-card{grid-column:span 6}
@media (max-width:560px){
.cat-grid--four .cat-card{grid-column:span 12}
}
.grid-3.is-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin-inline:auto}
.crumbs{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:var(--s2);
padding-top:var(--s5);
font-size:var(--fs-2xs);
color:var(--ink-3);
}
.crumbs a{display:inline-flex;align-items:center;min-height:24px;color:var(--ink-3);transition:color var(--t-fast) var(--ease)}
.crumbs a:hover{color:var(--ink)}
.crumbs__sep{color:var(--ink-3)}
.crumbs [aria-current]{color:var(--ink-2);font-weight:600}
.shop-bar{
position:static;
background:var(--canvas);
border-bottom:1px solid var(--line);
}
.shop-bar__in{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s4);
padding-block:var(--s3);
}
.shop-bar__chips{
display:flex;
align-items:center;
gap:var(--s2);
flex:1 1 auto;
min-width:0;
flex-wrap:wrap;
overflow-x:visible;
padding-block:var(--s1);
}
.shop-bar__chips .chip{flex:none}
.shop-bar__right{
display:flex;
align-items:center;
gap:var(--s3);
flex:none;
}
.shop-count{
font-size:var(--fs-2xs);
color:var(--ink-3);
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.shop-sort{
display:flex;
align-items:center;
gap:var(--s2);
}
.shop-sort select{
min-height:40px;
width:auto;
min-width:206px;
padding:0 38px 0 16px;
font-size:16px;
border-radius:var(--r-pill);
background-color:var(--surface);
}
.shop-body{
display:grid;
grid-template-columns:236px minmax(0,1fr);
gap:clamp(20px,3vw,36px);
align-items:start;
}
.catfilter{
max-height:calc(100vh - var(--head-h) - var(--s8));
overflow-y:auto;
overscroll-behavior:contain;
position:sticky;
top:calc(var(--head-h) + var(--s4));
padding:var(--s5);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r);
box-shadow:var(--sh-1);
}
.catfilter__toggle{
display:none;
align-items:center;
justify-content:space-between;
gap:var(--s3);
min-height:44px;
cursor:pointer;
list-style:none;
font-size:var(--fs-xs);
font-weight:700;
color:var(--ink);
}
.catfilter__toggle::-webkit-details-marker{display:none}
.catfilter__toggle::marker{content:""}
.catfilter__grp{padding-block:var(--s4)}
.catfilter__grp + .catfilter__grp{border-top:1px solid var(--line)}
.catfilter__grp:first-of-type{padding-top:0}
.catfilter__h{
display:block;
margin-bottom:var(--s3);
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
}
.catfilter__list{display:grid;gap:2px}
.catfilter__opt{
display:flex;
align-items:center;
gap:10px;
min-height:44px;
cursor:pointer;
font-size:var(--fs-sm);
color:var(--ink-2);
line-height:1.3;
}
.catfilter__opt input{
width:19px;
height:19px;
min-height:0;
flex:none;
padding:0;
accent-color:var(--accent);
cursor:pointer;
}
.catfilter__opt:hover{color:var(--ink)}
.catfilter__opt-n{
margin-left:auto;
font-size:var(--fs-3xs);
color:var(--ink-3);
font-variant-numeric:tabular-nums;
}
.catfilter__foot{
padding-top:var(--s4);
border-top:1px solid var(--line);
}
.catfilter__reset{width:100%}
.catfilter__q{margin-bottom:var(--s4)}
.catfilter__q input{min-height:44px;font-size:16px}
.shop-results{min-width:0}
.shop-results .empty{margin-top:var(--s2)}
.shop-active{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:var(--s2);
margin-bottom:var(--s4);
}
.shop-active__lbl{
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
}
.shop-tok{
display:inline-flex;
align-items:center;
gap:8px;
min-height:32px;
padding:5px 6px 5px 13px;
border:1px solid var(--line-2);
border-radius:var(--r-pill);
background:var(--surface-2);
color:var(--ink);
font-size:var(--fs-2xs);
font-weight:600;
}
.shop-tok__x{
display:grid;
place-items:center;
width:24px;
height:24px;
flex:none;
border-radius:50%;
background:var(--surface);
color:var(--ink-2);
font-size:var(--fs-3xs);
line-height:1;
transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.shop-tok__x:hover{background:var(--accent);color:var(--ink-inv)}
.shop-split{
display:flex;
align-items:center;
gap:var(--s4);
margin:var(--s10) 0 var(--s5);
}
.shop-split::after{
content:"";
flex:1;
height:1px;
background:var(--line);
}
.shop-split span{
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
}
.pcard__fallback,
.pdp__fallback{
display:none;
position:absolute;
inset:0;
place-items:center;
padding:var(--s4);
text-align:center;
font-family:var(--font-mono);
font-size:var(--fs-2xs);
letter-spacing:.14em;
text-transform:uppercase;
line-height:1.5;
color:var(--ink-3);
}
.pcard__fallback.is-on,
.pdp__fallback.is-on,
.pcard__media img[hidden] + .pcard__fallback,
.pdp__slide--image img[hidden] + .pdp__fallback{display:grid}
.pcard__media img[hidden],
.pdp__slide--image img[hidden]{display:none}
.pdp{
display:grid;
grid-template-columns:1.02fr .98fr;
gap:clamp(26px,4vw,56px);
align-items:start;
padding-block:clamp(24px,3vw,40px) clamp(36px,5vw,64px);
}
.pdp__stage{
position:sticky;
top:calc(var(--head-h) + 16px);
border:1px solid var(--line);
border-radius:var(--r-lg);
background:var(--surface);
box-shadow:var(--sh-1);
overflow:hidden;
}
.pdp__carousel{position:relative}
.pdp__slides{
display:flex;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;
scrollbar-width:none;
}
.pdp__slides::-webkit-scrollbar{display:none}
.pdp__slide{
position:relative;
flex:0 0 100%;
width:100%;
aspect-ratio:1;
scroll-snap-align:start;
scroll-snap-stop:always;
}
.pdp__slide--image{background:var(--vial-well)}
.pdp__slide--image img{
width:100%;
height:100%;
object-fit:cover;
}
.pdp__slide--coa{background:var(--media)}
.pdp__slide--coa iframe{width:100%;height:100%;border:0;display:block}
.pdp__coa-img{width:100%;height:100%;object-fit:contain;display:block}
.pdp__swipe-hint{
display:none;
position:absolute;
right:12px;
bottom:12px;
z-index:var(--z-raise);
padding:6px 12px;
border-radius:var(--r-pill);
background:var(--surface-2);
border:1px solid var(--line);
box-shadow:var(--sh-1);
font-size:var(--fs-3xs);
font-weight:600;
color:var(--ink-3);
pointer-events:none;
}
.pdp__carousel.is-on-coa .pdp__swipe-hint{opacity:0}
.pdp__slide-chip{
position:absolute;
left:12px;
right:12px;
bottom:12px;
z-index:var(--z-raise);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s3);
padding:9px 9px 9px 14px;
border-radius:var(--r-pill);
background:var(--surface);
border:1px solid var(--line);
box-shadow:var(--sh-1);
}
.pdp__slide-chip-label{
font-size:var(--fs-3xs);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
}
.pdp__slide-chip-btn{
padding:6px 14px;
border-radius:var(--r-pill);
background:var(--accent);
color:var(--ink-inv);
font-size:var(--fs-3xs);
font-weight:700;
}
.pdp__slide-chip-btn:hover{background:var(--accent-dark)}
.pdp__coa-empty{
position:absolute;
inset:0;
display:grid;
align-content:center;
justify-items:center;
gap:var(--s3);
padding:clamp(20px,4vw,40px);
text-align:center;
background:var(--pending-tint);
color:var(--pending);
}
.pdp__coa-empty svg{width:34px;height:34px;fill:none;stroke:currentColor}
.pdp__coa-empty h4,
.pdp__coa-empty__t{font-size:var(--fs-h4);font-weight:700;color:var(--pending)}
.pdp__per-was{color:var(--ink-3);text-decoration-thickness:1px}
.pdp__coa-empty p{
max-width:42ch;
font-size:var(--fs-2xs);
line-height:1.65;
color:var(--pending);
}
.pdp__coa-empty a{text-decoration:underline;text-underline-offset:3px}
.pdp__dots{
display:flex;
align-items:center;
justify-content:center;
gap:2px;
padding:5px 0 7px;
border-top:1px solid var(--line);
background:var(--surface-2);
}
.pdp__dot{
display:grid;
place-items:center;
width:24px;
height:24px;
flex:none;
border-radius:50%;
}
.pdp__dot::before{
content:"";
width:9px;
height:9px;
border-radius:50%;
background:var(--ink-3);
transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pdp__dot.is-active::before{background:var(--accent);transform:scale(1.25)}
.pdp__buy{min-width:0}
.pdp__cat{
font-family:var(--font-mono);
font-size:var(--fs-2xs);
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
}
.pdp__title{
margin-top:10px;
font-size:var(--fs-h1);
}
.pdp__meta{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:var(--s2);
margin-top:var(--s4);
}
.pdp__price-row{
display:flex;
align-items:baseline;
flex-wrap:wrap;
gap:var(--s3);
margin-top:var(--s5);
}
.pdp__price{
font-family:var(--font-display);
font-size:var(--fs-price);
font-weight:800;
letter-spacing:-.02em;
line-height:1;
color:var(--ink);
font-variant-numeric:tabular-nums;
}
.pdp__price--oos{color:var(--ink-2)}
.pdp__per{font-size:var(--fs-2xs);color:var(--ink-3)}
.pdp__desc{
margin-top:var(--s4);
max-width:var(--max-lede);
font-size:var(--fs-sm);
line-height:1.65;
color:var(--ink-2);
}
.pdp__specline{
margin-top:10px;
font-size:var(--fs-2xs);
color:var(--ink-3);
}
.pdp__variants{margin-top:var(--s6)}
.pdp__variants[hidden]{display:none}
.pdp__variants-h{
display:block;
margin-bottom:var(--s2);
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
}
.pdp__variant-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pdp__variant{
display:inline-flex;
align-items:baseline;
gap:8px;
min-height:44px;
padding:11px 16px;
border:1.5px solid var(--silver-deep);
border-radius:var(--r-pill);
background:var(--surface);
font-size:var(--fs-2xs);
font-weight:700;
color:var(--ink);
transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.pdp__variant span{font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pdp__variant:hover{border-color:var(--accent);color:var(--accent-dark)}
.pdp__variant.is-active{background:var(--accent);border-color:var(--accent);color:var(--ink-inv)}
.pdp__variant.is-active span{color:var(--ink-inv)}
.pdp__variant.is-oos{color:var(--ink-3)}
.pdp__buy > .pdp__variants-h{margin-top:var(--s6)}
.pdp__opts{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--s2);
margin-top:var(--s6);
}
.pdp__variants-h + .pdp__opts{margin-top:var(--s2)}
.pdp__opts:empty{display:none}
.pdp__opt{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s2);
min-height:52px;
padding:11px 14px;
border:1.5px solid var(--silver-deep);
border-radius:var(--r);
background:var(--surface);
text-align:left;
transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pdp__opt:hover{border-color:var(--accent)}
.pdp__opt.is-active{border-color:var(--accent);background:var(--accent-tint)}
.pdp__opt-label{font-size:var(--fs-2xs);font-weight:700;color:var(--ink)}
.pdp__opt-price{
font-size:var(--fs-2xs);
font-weight:600;
color:var(--ink-3);
font-variant-numeric:tabular-nums;
text-align:right;
}
.pdp__opt.is-active .pdp__opt-price{color:var(--accent-dark)}
.pdp__add{
display:flex;
align-items:stretch;
gap:var(--s3);
margin-top:var(--s5);
}
.pdp__qty{
display:flex;
align-items:center;
flex:none;
border:1.5px solid var(--silver-deep);
border-radius:var(--r-pill);
background:var(--surface);
}
.pdp__qty-btn{
display:grid;
place-items:center;
width:44px;
height:50px;
flex:none;
color:var(--ink-2);
transition:color var(--t-fast) var(--ease);
}
.pdp__qty-btn:hover{color:var(--ink)}
.pdp__qty-btn svg{width:16px;height:16px}
.pdp__qty input{
width:44px;
min-height:0;
height:50px;
padding:0;
border:0;
background:none;
border-radius:0;
text-align:center;
font-size:16px;
font-weight:700;
color:var(--ink);
font-variant-numeric:tabular-nums;
-moz-appearance:textfield;
}
.pdp__qty input::-webkit-outer-spin-button,
.pdp__qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp__qty input:focus:not(:focus-visible){box-shadow:none;border:0}
.pdp__qty input:focus-visible{box-shadow:var(--ring);border:0}
.pdp__add .btn{flex:1;min-width:0}
.pdp__ship{
display:flex;
align-items:center;
gap:9px;
margin-top:var(--s4);
font-size:var(--fs-2xs);
color:var(--ink-2);
}
.pdp__ship svg{width:16px;height:16px;flex:none;color:var(--ink-2)}
.pdp__assure{
display:grid;
gap:10px;
margin-top:var(--s6);
padding-top:var(--s5);
border-top:1px solid var(--line);
}
.pdp__assure li{
display:flex;
align-items:flex-start;
gap:10px;
font-size:var(--fs-2xs);
line-height:1.55;
color:var(--ink-2);
}
.pdp__assure svg{
width:16px;
height:16px;
flex:none;
margin-top:2px;
color:var(--ink-2);
}
.pdp__specs{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 var(--s6);
margin:0;
padding:var(--s2) var(--s6);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r);
box-shadow:var(--sh-1);
}
.pdp__spec{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:var(--s4);
padding:13px 0;
border-bottom:1px solid var(--line);
}
.pdp__spec dt{
font-size:var(--fs-sm);
font-weight:600;
color:var(--ink);
}
.pdp__spec dd{
margin:0;
font-family:var(--font-mono);
font-size:var(--fs-2xs);
letter-spacing:.02em;
color:var(--ink-2);
text-align:right;
}
.pdp__spec:nth-last-child(-n+2){border-bottom:0}
.pdp__specnote{
margin-top:var(--s4);
max-width:var(--max-prose);
}
.pdp__coa{
display:grid;
grid-template-columns:280px minmax(0,1fr);
gap:clamp(20px,3vw,40px);
align-items:center;
padding:clamp(20px,3vw,32px);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
}
.pdp__coa-doc{
position:relative;
display:grid;
gap:9px;
align-content:start;
padding:var(--s5) var(--s5) var(--s16);
background:var(--surface-2);
border:1px solid var(--line);
border-radius:var(--r);
overflow:hidden;
}
.pdp__coa-doc::before{
content:"";
position:absolute;
inset:0 0 auto;
height:4px;
background:var(--pending);
}
.pdp__coa-mast{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:var(--s3);
padding-bottom:9px;
margin-bottom:2px;
border-bottom:1px solid var(--line);
}
.pdp__coa-row{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:var(--s4);
font-size:var(--fs-3xs);
color:var(--ink-3);
}
.pdp__coa-row b{font-weight:600;color:var(--ink-2)}
.pdp__coa-row i{font-style:normal;font-family:var(--font-mono);color:var(--ink-3)}
.pdp__coa-stamp{
position:absolute;
right:14px;
bottom:16px;
}
.pdp__coa-cap{
margin-top:var(--s3);
font-size:var(--fs-3xs);
line-height:1.5;
color:var(--ink-3);
}
.pdp__coa-body{min-width:0;display:grid;gap:var(--s4);justify-items:start}
.pdp__coa-body h2{font-size:var(--fs-h3)}
.pdp--solo{grid-template-columns:minmax(0,1fr)}
.shop-active[hidden],
.shop-split[hidden],
.pdp__variants[hidden],
.pdp__variants-h[hidden],
.pdp__coa[hidden],
.pdp__ship[hidden]{display:none}
.pdp__add[hidden]{display:none}
.pdp__restock{
display:grid;gap:8px;margin-top:var(--s5);padding:16px 18px;
background:var(--tan-tint);border:1px solid var(--tan-2);border-radius:var(--r);
}
.pdp__restock[hidden]{display:none}
.pdp__restock-h{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tan-ink)}
.pdp__restock-p{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2)}
.pdp__restock-row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.pdp__restock-row input[type=email]{
flex:1;min-width:200px;min-height:46px;padding:0 16px;
border:1.5px solid var(--line-2);border-radius:var(--r-pill);
background:var(--surface-2);color:var(--ink);font:inherit;font-size:var(--fs-sm);
transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.pdp__restock-row input[type=email]::placeholder{color:var(--silver)}
.pdp__restock-row input[type=email]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint-2)}
.pdp__restock-row .btn{flex:none}
.pdp__restock-msg{margin:0;font-size:var(--fs-xs);line-height:1.5;color:var(--ink-2)}
.pdp__restock-msg:empty{display:none}
.pdp__restock-msg.is-ok{color:var(--ok)}
.pdp__restock-msg.is-err{color:var(--alert)}
@media (max-width:1080px){
.shop-bar{
position:sticky;
top:var(--head-h);
z-index:var(--z-sticky);
}
@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)){
.shop-bar{
background:color-mix(in srgb, var(--canvas) 90%, transparent);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
}
}
.shop-bar__chips{
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
scrollbar-color:var(--silver-deep) transparent;
}
.shop-bar__chips::-webkit-scrollbar{height:6px}
.shop-bar__chips::-webkit-scrollbar-track{background:transparent}
.shop-bar__chips::-webkit-scrollbar-thumb{background:var(--silver-deep);border-radius:var(--r-pill)}
.catfilter{top:calc(var(--head-h) + 80px)}
.shop-body{grid-template-columns:214px minmax(0,1fr)}
.pdp__coa{grid-template-columns:236px minmax(0,1fr)}
}
@media (max-width:900px){
.shop-body{grid-template-columns:1fr}
.catfilter{position:static;padding:var(--s4)}
.catfilter__toggle{display:flex}
.catfilter__grp:first-of-type{padding-top:var(--s4)}
.catfilter[open] .catfilter__toggle{margin-bottom:var(--s1)}
.pdp__stage{position:static}
}
@media (max-width:720px){
.pdp{grid-template-columns:1fr;padding-top:var(--s5)}
.pdp__swipe-hint{display:block}
.pdp__coa{grid-template-columns:1fr}
.pdp__coa-doc{max-width:340px}
.pdp__specs{grid-template-columns:1fr;padding-inline:var(--s5)}
.pdp__spec:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.pdp__spec:last-child{border-bottom:0}
.shop-bar__in{flex-wrap:wrap}
.shop-bar__right{width:100%;justify-content:space-between}
.shop-sort select{flex:1;min-width:0}
}
@media (max-width:560px){
.shop-bar__in{gap:var(--s3);padding-block:var(--s2) var(--s3)}
.shop-bar__chips{width:100%;scrollbar-width:none}
.shop-bar__chips::-webkit-scrollbar{display:none}
.shop-split{margin-top:var(--s8)}
.shop-tok{min-height:44px;padding-left:15px}
.shop-tok__x{width:28px;height:28px}
.pdp__dots{padding:2px 0 4px}
.pdp__dot{width:44px;height:44px}
.pdp__opts{grid-template-columns:1fr}
.pdp__add{flex-wrap:wrap}
.pdp__qty{width:100%;justify-content:space-between}
.pdp__qty input{flex:1;width:auto}
.pdp__add .btn{flex:1 1 100%}
.pdp__coa{padding:var(--s5)}
.pdp__coa-doc{max-width:none}
}
@media (max-width:420px){
.catfilter{padding:var(--s3)}
.pdp__specs{padding-inline:var(--s4)}
.pdp__spec{flex-direction:column;align-items:flex-start;gap:2px}
.pdp__spec dd{text-align:left}
}
.pdp__thumbs{display:flex;gap:var(--s2);margin-top:var(--s3)}
.pdp__thumb{
width:64px;height:64px;padding:0;
border:1px solid var(--line);border-radius:var(--r-sm);
background:var(--vial-well);overflow:hidden;cursor:pointer;
display:grid;place-items:center;
transition:border-color .12s ease,transform .12s ease;
}
.pdp__thumb img{width:100%;height:100%;object-fit:contain;display:block}
.pdp__thumb-doc{width:22px;height:22px;color:var(--ink-3)}
.pdp__thumb-doc svg{width:100%;height:100%}
.pdp__thumb:hover{border-color:var(--accent)}
.pdp__thumb.is-active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pdp__stage:has(.pdp__thumbs:not([hidden])) .pdp__dots{display:none}
.pdp__lot-chip{
position:absolute;left:14px;top:14px;z-index:2;
padding:6px 11px;border-radius:var(--r-pill);
background:var(--surface-2);border:1px solid var(--line);
font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--ink-2);
box-shadow:var(--sh-1);
}
.pdp__slide--scene img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.pdp__cutoff{display:flex;align-items:flex-start;gap:8px;margin:6px 0 0;font-size:var(--fs-xs);color:var(--ink-2);line-height:1.45}
.pdp__cutoff svg{width:16px;height:16px;flex:none;color:var(--ink-2);margin-top:1px}
.pdp__cutoff b{color:var(--ink);font-weight:700}
.pdp__lot{
display:flex;align-items:center;gap:var(--s3);
margin-top:var(--s5);padding:var(--s3) var(--s4);
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
}
.pdp__lot-ico{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
.pdp__lot-ico svg{width:18px;height:18px}
.pdp__lot-txt{display:grid;gap:2px;min-width:0;flex:1}
.pdp__lot-txt b{font-size:var(--fs-body);color:var(--ink)}
.pdp__lot-txt > span:last-child{font-size:var(--fs-2xs);color:var(--ink-3)}
.pdp__about{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:clamp(24px,4vw,56px);align-items:start}
.pdp__about-main{max-width:680px}
.pdp__about-main h2{margin-top:var(--s2)}
.pdp__about-main h3{margin-top:var(--s6);font-size:var(--fs-h4)}
.pdp__about-p{margin-top:var(--s3);font-size:var(--fs-body);line-height:1.7;color:var(--ink-2)}
.pdp__about-ruo{margin-top:var(--s6);padding:var(--s3) var(--s4);border-left:2px solid var(--line-2);font-size:var(--fs-xs);line-height:1.6;color:var(--ink-3)}
.pdp__glance{
position:sticky;top:calc(var(--head-h) + 16px);
padding:var(--s5) var(--s6);
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.pdp__glance-list{margin:var(--s3) 0 0;display:grid}
.pdp__glance-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s3);padding:10px 0;border-top:1px solid var(--line);font-size:var(--fs-xs)}
.pdp__glance-row:first-child{border-top:0;padding-top:0}
.pdp__glance-row dt{color:var(--ink-3)}
.pdp__glance-row dd{color:var(--ink);font-weight:600;text-align:right}
.pdp__results{padding:clamp(20px,3vw,32px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.pdp__results-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.pdp__results-head h2{font-size:var(--fs-h3);margin-top:var(--s2)}
.pdp__results-head .lede{margin-top:var(--s2);max-width:640px;font-size:var(--fs-sm)}
.pdp__results-grid{display:grid;grid-template-columns:minmax(200px,.75fr) minmax(0,1.4fr) minmax(170px,.7fr);gap:var(--s5);margin-top:var(--s6)}
.pdp__results-big{display:grid;align-content:start;gap:6px;padding:var(--s5);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.pdp__results-big b{font-family:var(--font-display);font-size:clamp(38px,4.6vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.pdp__results-big b i{font-style:normal;font-size:.5em;font-weight:700;margin-left:2px;color:var(--ink-2)}
.pdp__results-id{font-size:var(--fs-2xs);color:var(--ink-3)}
.pdp__results-rows{list-style:none;margin:0;padding:0;display:grid;align-content:start}
.pdp__results-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s4);align-items:center;padding:11px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.pdp__results-rows li:first-child{border-top:0;padding-top:0}
.pdp__results-k{display:grid;line-height:1.25}
.pdp__results-k b{color:var(--ink)}
.pdp__results-k small{font-size:var(--fs-2xs);color:var(--ink-3)}
.pdp__results-v{color:var(--ink);font-size:var(--fs-xs)}
.pdp__results-ok{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);background:var(--ok-tint);border:1px solid var(--accent-tint-2);font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ok)}
.pdp__results-ok svg{width:12px;height:12px}
.pdp__results-cert{display:grid;gap:var(--s2);align-content:start;padding:var(--s3);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);text-decoration:none;transition:border-color .12s ease,transform .12s ease}
.pdp__results-cert:hover{border-color:var(--accent);transform:translateY(-1px)}
.pdp__results-cert img{width:100%;aspect-ratio:8.5/11;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:6px;background:#fff}
.pdp__results-cert span{font-size:var(--fs-xs);color:var(--ink-2)}
.pdp__results-cert span b{color:var(--ink)}
.pdp__results-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin:var(--s6) 0 0;padding-top:var(--s5);border-top:1px solid var(--line)}
.pdp__results-meta dt{font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pdp__results-meta dd{margin-top:3px;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.pdp__faq{max-width:820px}
.pdp__faq .qa:last-child{margin-bottom:0}
.pdp__bar{
position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
background:var(--surface-2);border-top:1px solid var(--line);
box-shadow:0 -8px 26px rgba(30,22,8,.08);
padding:10px 0;padding-bottom:max(10px, env(safe-area-inset-bottom));
}
.pdp__bar-in{display:flex;align-items:center;gap:var(--s4)}
.pdp__bar img{width:44px;height:44px;object-fit:contain;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.pdp__bar-txt{display:grid;min-width:0;flex:1;line-height:1.25}
.pdp__bar-txt b{font-size:var(--fs-sm);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp__bar-txt span{font-size:var(--fs-2xs);color:var(--ink-3)}
.pdp__bar-price{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:800;color:var(--ink);white-space:nowrap}
@media (max-width:980px){
.pdp__about{grid-template-columns:1fr}
.pdp__glance{position:static}
.pdp__results-grid{grid-template-columns:1fr 1fr}
.pdp__results-cert{grid-column:1 / -1;grid-template-columns:120px 1fr;align-items:center}
}
@media (max-width:640px){
.pdp__results-grid{grid-template-columns:1fr}
.pdp__results-cert{grid-template-columns:100px 1fr}
.pdp__results-meta{grid-template-columns:1fr 1fr}
.pdp__bar-txt span{display:none}
.pdp__bar img{display:none}
.pdp__thumb{width:52px;height:52px}
}
.pdp__thumbs[hidden],.pdp__cutoff[hidden],.pdp__lot[hidden],.pdp__lot-chip[hidden],.pdp__bar[hidden]{display:none}
.pcard .pcard__media{position:relative}
.pcard__coa{
position:absolute;right:12px;bottom:12px;z-index:2;
display:inline-flex;align-items:center;gap:4px;
padding:4px 8px;border-radius:var(--r-pill);
background:var(--surface-2);border:1px solid var(--line);
font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-2);
}
.pcard__coa svg{width:11px;height:11px;color:var(--accent-dark)}
@media (max-width:560px){
.pcard__media .tag{max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;padding:5px 9px}
}
.coa-lookup{
padding:clamp(20px,3vw,28px);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
}
.coa-lookup h2{font-size:var(--fs-h3)}
.coa-lookup__intro{
margin-top:6px;
max-width:var(--max-lede);
font-size:var(--fs-sm);
color:var(--ink-2);
}
.coa-lookup__form{
display:grid;
grid-template-columns:1fr auto;
gap:var(--s3);
align-items:end;
margin-top:var(--s5);
}
.coa-lookup__hint{
grid-column:1 / -1;
margin-top:-6px;
font-size:var(--fs-2xs);
color:var(--ink-3);
}
.coa-lookup__msg{margin-top:var(--s4)}
.coa-lookup__msg:empty{display:none}
.coa-lookup__msg p + p{margin-top:6px}
.coa-lookup__msg a{
color:inherit;
text-decoration:underline;
text-underline-offset:3px;
font-weight:600;
}
@media (max-width:560px){
.coa-lookup__form{grid-template-columns:1fr}
.coa-lookup__form .btn{width:100%}
}
.coa-bar{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:var(--s4);
flex-wrap:wrap;
margin-bottom:var(--s5);
}
.coa-bar__side{
display:flex;
align-items:center;
gap:var(--s3);
flex-wrap:wrap;
}
.coa-chipwrap{max-width:100%}
.coa-chips{
display:flex;
align-items:center;
gap:var(--s2);
flex-wrap:wrap;
padding:2px;
}
.coa-count{
font-size:var(--fs-2xs);
color:var(--ink-3);
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.coa-sort{width:auto;min-width:186px}
@media (max-width:900px){
.coa-bar{align-items:stretch}
.coa-bar__side{justify-content:space-between;width:100%}
}
@media (max-width:560px){
.coa-chips{flex-wrap:nowrap}
.coa-sort{min-width:0;flex:1}
}
.coa-table td:last-child,
.coa-table th:last-child{text-align:right}
.coa-table__doc{white-space:nowrap}
.coa-table tbody tr{scroll-margin-top:calc(var(--head-h) + var(--s6))}
.coa-table tbody tr.is-hit td{background:var(--canvas-2)}
.coa-table tbody tr.is-hit td:first-child{
border-left:3px solid var(--accent);
padding-left:11px;
}
.coa-table .mono{color:var(--ink-3)}
@media (max-width:900px){
.coa-table__dose{display:none}
}
@media (max-width:720px){
.coa-table td:last-child,
.coa-table th:last-child{text-align:left}
.coa-table td[data-th="Dose"]{display:none}
.coa-table td{padding:10px 14px}
.coa-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.coa-table tbody tr td{grid-column:1 / -1}
.coa-table td[data-th="SKU"],
.coa-table td[data-th="Status"]{grid-column:1}
.coa-table td[data-th="Lot"],
.coa-table td[data-th="Document"]{grid-column:2}
.coa-table td[data-th="Status"],
.coa-table td[data-th="Document"]{align-items:center}
.coa-table td[data-th="Status"]::before,
.coa-table td[data-th="Document"]::before{display:none}
.coa-table td[data-th="Document"]{justify-content:flex-end}
.coa-table tbody tr.is-hit{border-color:var(--accent)}
.coa-table tbody tr.is-hit td:first-child{border-left:0;padding-left:14px}
}
@media (max-width:420px){
.coa-table td[data-th="Status"]{padding-right:6px}
.coa-table td[data-th="Status"] .pill{padding-inline:9px;white-space:nowrap}
}
.coa-specimen-row{align-items:center}
.coadoc{position:relative;margin:0}
.coadoc__sheet{
position:relative;
overflow:hidden;
padding:clamp(20px,3vw,32px);
background:var(--surface-2);
border:1px solid var(--line);
border-radius:var(--r);
box-shadow:var(--sh-2);
}
.coadoc__mast{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:var(--s5);
padding-bottom:var(--s4);
border-bottom:2px solid var(--ink);
}
.coadoc__mast-l{display:grid;gap:5px;justify-items:start;min-width:0}
.coadoc__mast-r{text-align:right;display:grid;gap:4px;justify-items:end;min-width:0}
.coadoc__kind{font-size:var(--fs-h4);font-weight:700;color:var(--ink)}
.coadoc__meta{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:var(--s4) var(--s5);
margin:var(--s5) 0 0;
}
.coadoc__meta div{display:grid;gap:3px;min-width:0}
.coadoc__meta dt{margin:0}
.coadoc__meta dd{
margin:0;
font-family:var(--font-mono);
font-size:var(--fs-xs);
letter-spacing:.02em;
color:var(--ink-3);
overflow-wrap:anywhere;
}
.coadoc__meta dd.is-known{color:var(--ink)}
.coadoc__rows{margin-top:var(--s5)}
.coadoc__rows h4,
.coadoc__rows h3{margin-bottom:var(--s3);font-size:var(--fs-h4);font-weight:700;color:var(--ink)}
.coadoc__dash{
font-family:var(--font-mono);
font-size:var(--fs-sm);
color:var(--ink-3);
}
.coadoc__sig{
display:flex;
align-items:flex-end;
justify-content:flex-start;
gap:var(--s8);
flex-wrap:wrap;
margin-top:var(--s5);
padding-top:var(--s4);
padding-right:164px;
border-top:1px solid var(--line);
}
.coadoc__sig div{display:grid;gap:4px}
.coadoc__rule{
width:min(220px,58vw);
height:1px;
margin-top:var(--s6);
background:var(--silver);
}
.coadoc__stamp{
position:absolute;
right:clamp(16px,4vw,40px);
bottom:clamp(16px,4vw,36px);
z-index:var(--z-raise);
pointer-events:none;
}
.coadoc__cap{
margin-top:var(--s4);
font-size:var(--fs-2xs);
line-height:1.6;
color:var(--ink-3);
}
.coadoc__cap strong{color:var(--ink-2)}
img.coadoc__frame{object-fit:contain}
.coadoc__frame{
width:100%;
height:min(64vh,720px);
border:1px solid var(--line);
border-radius:var(--r-sm);
background:var(--media);
}
.coadoc__actions{
display:flex;
gap:var(--s3);
flex-wrap:wrap;
margin-top:var(--s4);
}
@media (max-width:720px){
.coadoc__meta{grid-template-columns:repeat(2,1fr)}
.coadoc__frame{display:none}
}
@media (max-width:560px){
.coadoc__mast{flex-direction:column;gap:var(--s3)}
.coadoc__mast-r{text-align:left;justify-items:start}
.coadoc__meta{grid-template-columns:1fr}
.coadoc__sig{padding-right:0;gap:var(--s5)}
.coadoc__stamp{
position:static;
display:block;
margin-top:var(--s5);
}
}
.standards{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:var(--gap);
list-style:none;
margin:0;
padding:0;
}
.standard{
display:grid;
grid-template-columns:38px 1fr;
gap:var(--s4);
align-items:start;
padding:var(--s5);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r);
box-shadow:var(--sh-1);
}
.standard__n{
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:var(--r-sm);
background:var(--tan-tint);
border:1px solid var(--tan-2);
color:var(--ink);
font-family:var(--font-mono);
font-size:var(--fs-xs);
font-weight:500;
letter-spacing:.02em;
}
.standard__b{display:grid;gap:6px;min-width:0}
.standard__b h3{font-size:var(--fs-h3)}
.standard__b p{font-size:var(--fs-sm);color:var(--ink-2)}
.standard__b .microcap{color:var(--ink-3)}
.relspec{display:grid;gap:var(--s4);margin-top:var(--s6)}
.relspec h3{font-size:var(--fs-h3)}
@media (max-width:900px){
.standards{grid-template-columns:1fr}
}
@media (max-width:420px){
.standard{grid-template-columns:1fr;gap:var(--s3)}
}
.trust-lead{min-width:0}
.trust-lead .lede{margin-bottom:var(--s4)}
.trust-lead .stack{margin-bottom:var(--s6)}
.trust-pull{
max-width:880px;
margin-inline:auto;
text-align:center;
}
.trust-pull p{
font-family:var(--font-display);
font-size:var(--fs-h2);
font-weight:700;
letter-spacing:-.018em;
line-height:1.18;
color:var(--ink);
}
.trust-pull em{font-style:normal;color:var(--tan-ink)}
.trust-pull .eyebrow{margin-bottom:var(--s4)}
.trust-plate{
overflow:hidden;
border-radius:var(--r-xl);
background:var(--media);
border:1px solid var(--line);
box-shadow:var(--sh-1);
}
.trust-plate img{width:100%;height:auto;display:block}
.trust-plate figcaption{
padding:var(--s3) var(--s5) var(--s4);
font-size:var(--fs-2xs);
color:var(--ink-3);
}
.lp-hero{padding-block:clamp(36px,5vw,72px)}
.lp-hero__in{
display:grid;
grid-template-columns:1.06fr .94fr;
gap:clamp(28px,4vw,56px);
align-items:center;
}
.lp-hero__copy{min-width:0}
.lp-hero__acts{
display:flex;
gap:var(--s3);
flex-wrap:wrap;
margin-top:var(--s6);
}
.lp-stats{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--s5) var(--s8);
margin-top:var(--s6);
max-width:440px;
}
.lp-stat b{
display:block;
font-family:var(--font-display);
font-size:clamp(24px,2.2vw,32px);
font-weight:800;
letter-spacing:-.02em;
line-height:1;
color:var(--ink);
font-variant-numeric:tabular-nums;
}
.lp-stat span{
display:block;
margin-top:6px;
font-size:var(--fs-2xs);
color:var(--ink-3);
}
.lp-hero__media{
overflow:hidden;
border-radius:var(--r-xl);
background:var(--media);
border:1px solid var(--line);
box-shadow:var(--sh-2);
aspect-ratio:4/5;
}
.lp-hero__media img{
width:100%;
height:100%;
object-fit:cover;
object-position:68% 50%;
display:block;
}
.cutoff{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:var(--s5);
padding:10px 16px;
border-radius:var(--r-pill);
background:var(--surface-2);
border:1px solid var(--line-2);
color:var(--ink);
font-size:var(--fs-2xs);
font-weight:600;
line-height:1.4;
}
.cutoff__dot{
width:7px;
height:7px;
flex:none;
border-radius:50%;
background:var(--ok);
}
.cutoff__t{
font-family:var(--font-mono);
font-weight:500;
letter-spacing:.02em;
font-variant-numeric:tabular-nums;
}
.lp-form{display:grid;gap:var(--s4);max-width:520px}
.lp-form__row{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:end}
.lp-form__msg{margin:0;font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.5}
.lp-form__msg:empty{display:none}
.lp-form__msg.is-error{color:var(--danger,#B3261E)}
.lp-faq{
display:grid;
grid-template-columns:minmax(240px,300px) minmax(0,1fr);
column-gap:var(--s10);
align-items:start;
}
.lp-faq__head{
grid-column:1;
display:grid;
gap:var(--s3);
justify-items:start;
}
.lp-faq__head .btn--quiet{margin-top:var(--s2)}
.lp-faq__list{grid-column:2}
.lp-sticky{display:none}
.lp-sticky__pad{display:none}
@media (max-width:900px){
.lp-hero__in{grid-template-columns:1fr}
.lp-hero__media{aspect-ratio:16/9}
.lp-faq{display:block}
.lp-faq__head{margin-bottom:var(--s5)}
.lp-sticky{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:var(--z-sticky);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s4);
min-height:calc(var(--s16) + env(safe-area-inset-bottom));
padding:var(--s3) var(--pad) calc(var(--s3) + env(safe-area-inset-bottom));
background:var(--canvas);
border-top:1px solid var(--line);
box-shadow:var(--sh-3);
}
.lp-sticky__note{
min-width:0;
font-size:var(--fs-2xs);
line-height:1.35;
color:var(--ink-3);
overflow:hidden;
}
.lp-sticky__note b{display:block;color:var(--ink);font-size:var(--fs-xs)}
.lp-sticky .btn{flex:none}
.lp-sticky__pad{
display:block;
height:calc(var(--s16) + env(safe-area-inset-bottom));
background:var(--band-2);
}
}
@media (max-width:560px){
.lp-form__row{grid-template-columns:1fr}
.lp-form__row .btn{width:100%}
}
.coa-modal__kind{display:grid;gap:4px}
.coa-modal__kind h2{font-size:var(--fs-h3)}
.coa-modal__body{display:grid;gap:var(--s4)}
.summary[hidden],
.summary__row[hidden],
.bundle-hint[hidden],
.cd-savings[hidden],
.cart-coupon[hidden],
.login-panel[hidden],
.login-marquee[hidden],
.login-cats[hidden],
.acct-card[hidden],
.acct-body[hidden],
.oc-num[hidden],
.oc-ship[hidden],
.oc-acts[hidden],
.co-grid[hidden],
.cart-body[hidden]{display:none}
.cart-backdrop{
position:fixed;
inset:0;
z-index:var(--z-scrim);
background:var(--scrim);
-webkit-backdrop-filter:blur(2px);
backdrop-filter:blur(2px);
opacity:0;
visibility:hidden;
transition:opacity var(--t-mid) var(--ease), visibility var(--t-mid);
}
.cart-backdrop.is-open{opacity:1;visibility:visible}
.cart-drawer{
position:fixed;
top:0;
right:0;
bottom:0;
z-index:var(--z-drawer);
width:min(430px,94vw);
display:flex;
flex-direction:column;
background:var(--surface);
border-left:1px solid var(--line);
box-shadow:var(--sh-3);
transform:translateX(100%);
visibility:hidden;
overscroll-behavior:contain;
transition:transform var(--t-mid) var(--ease-in-out), visibility var(--t-mid);
}
.cart-drawer.is-open{transform:none;visibility:visible}
body.cart-open{overflow:hidden}
.cart-drawer__head{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s4);
padding:var(--s5) var(--s5) var(--s4);
border-bottom:1px solid var(--line);
}
.cart-drawer__head h3{font-size:var(--fs-h3)}
.cart-drawer__count{
font-size:var(--fs-sm);
font-weight:600;
color:var(--ink-3);
font-variant-numeric:tabular-nums;
}
.cart-drawer__close{
position:relative;
width:38px;
height:38px;
flex:none;
display:grid;
place-items:center;
border-radius:50%;
border:1px solid var(--line);
background:var(--surface-2);
color:var(--ink-2);
font-size:20px;
line-height:1;
transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cart-drawer__close::after{content:"";position:absolute;inset:-3px;border-radius:50%}
.cart-drawer__close:hover{border-color:var(--ink);color:var(--ink)}
.cart-drawer__body{
flex:1;
min-height:0;
overflow-y:auto;
overscroll-behavior:contain;
padding:var(--s4) var(--s5);
}
.cd-row{
display:grid;
grid-template-columns:62px minmax(0,1fr) auto;
gap:var(--s3);
align-items:center;
padding:var(--s3) 0;
border-bottom:1px solid var(--line);
}
.cd-row:last-child{border-bottom:0}
.cd-row__media{
width:62px;
height:62px;
border-radius:var(--r-sm);
background:var(--vial-well);
overflow:hidden;
}
.cd-row__media img{width:100%;height:100%;object-fit:cover}
.cd-row__name{
font-size:var(--fs-sm);
font-weight:600;
color:var(--ink);
line-height:1.35;
}
.cd-row__meta{
margin-top:8px;
display:flex;
align-items:center;
gap:var(--s3);
flex-wrap:wrap;
}
.cd-qty{
display:inline-flex;
align-items:center;
border:1.5px solid var(--silver-deep);
border-radius:var(--r-pill);
background:var(--surface-2);
overflow:hidden;
}
.cd-qty button{
width:30px;
height:30px;
display:grid;
place-items:center;
font-size:var(--fs-sm);
font-weight:700;
color:var(--ink-2);
transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cd-qty button:hover{background:var(--surface);color:var(--ink)}
.cd-qty > span{
min-width:26px;
text-align:center;
font-size:var(--fs-2xs);
font-weight:700;
color:var(--ink);
font-variant-numeric:tabular-nums;
}
.cd-row__rm{
font-size:var(--fs-3xs);
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--ink-3);
text-decoration:underline;
text-underline-offset:3px;
transition:color var(--t-fast) var(--ease);
}
.cd-row__rm:hover{color:var(--alert)}
.cd-row__price{
font-size:var(--fs-sm);
font-weight:700;
color:var(--ink);
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.cd-empty{
text-align:center;
padding:var(--s12) var(--s4);
color:var(--ink-3);
}
.cd-empty svg{margin:0 auto var(--s4);color:var(--silver-deep)}
.cd-empty h4{font-size:var(--fs-h3);margin-bottom:var(--s2)}
.cd-empty p{font-size:var(--fs-sm);margin-bottom:var(--s5)}
.cd-ship{
padding:var(--s3) var(--s5);
background:var(--surface);
border-bottom:1px solid var(--line);
}
.cd-ship__msg{font-size:var(--fs-2xs);color:var(--ink-2);margin-bottom:8px}
.cd-ship__msg strong{font-weight:700}
.cd-ship__bar{
height:6px;
border-radius:var(--r-pill);
background:var(--surface-2);
overflow:hidden;
}
.cd-ship__fill{
height:100%;
border-radius:var(--r-pill);
background:var(--accent);
transition:width var(--t-mid) var(--ease);
}
.cd-upsell{
display:grid;
grid-template-columns:52px minmax(0,1fr);
gap:var(--s3);
align-items:center;
margin:0 var(--s5) var(--s4);
padding:var(--s3);
background:var(--canvas);
border:1px dashed var(--silver);
border-radius:var(--r);
}
.cd-upsell__media{
width:52px;
height:52px;
border-radius:var(--r-sm);
background:var(--vial-well);
overflow:hidden;
}
.cd-upsell__media img{width:100%;height:100%;object-fit:cover}
.cd-upsell__eyebrow{
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
}
.cd-upsell__name{font-size:var(--fs-sm);font-weight:600;color:var(--ink);margin-top:2px}
.cd-upsell__desc{font-size:var(--fs-2xs);color:var(--ink-3);margin-top:2px}
.cd-upsell__add{
grid-column:1 / -1;
min-height:38px;
padding:9px 16px;
border-radius:var(--r-pill);
border:1.5px solid var(--silver-deep);
background:var(--surface);
font-size:var(--fs-2xs);
font-weight:600;
color:var(--ink);
transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cd-upsell__add:hover{border-color:var(--ink);color:var(--ink)}
.cart-drawer__foot{
padding:var(--s4) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom));
border-top:1px solid var(--silver-deep);
background:var(--surface);
display:grid;
gap:10px;
}
.cd-foot__row{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:var(--s3);
font-size:var(--fs-sm);
color:var(--ink-2);
}
.cd-foot__total{
font-size:var(--fs-h3);
font-weight:800;
color:var(--ink);
font-variant-numeric:tabular-nums;
}
.cd-foot__note{font-size:var(--fs-2xs);color:var(--ink-3);text-align:center}
.cd-savings{
display:grid;
gap:6px;
padding:10px 12px;
border-radius:var(--r-sm);
background:var(--surface-2);
border:1px solid var(--line-2);
font-size:var(--fs-2xs);
color:var(--ink);
}
.cd-savings__row{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:var(--s3);
}
.cd-savings__row b{font-weight:700;font-variant-numeric:tabular-nums}
.cd-savings__note{color:var(--ink-2);opacity:.85}
@media (max-width:420px){
.cart-drawer__head,
.cart-drawer__body,
.cart-drawer__foot{padding-inline:var(--s4)}
.cd-ship{padding-inline:var(--s4)}
.cd-upsell{margin-inline:var(--s4)}
.cd-row{grid-template-columns:52px minmax(0,1fr) auto;gap:10px}
.cd-row__media{width:52px;height:52px}
}
.upsell-modal-backdrop{
position:fixed;
inset:0;
z-index:var(--z-scrim);
background:var(--scrim);
-webkit-backdrop-filter:blur(2px);
backdrop-filter:blur(2px);
opacity:0;
visibility:hidden;
transition:opacity var(--t-mid) var(--ease), visibility var(--t-mid);
}
.upsell-modal-backdrop.is-open{opacity:1;visibility:visible}
.upsell-modal{
position:fixed;
left:50%;
top:50%;
z-index:var(--z-modal);
width:min(760px,94vw);
max-height:calc(100dvh - 32px);
overflow-y:auto;
overscroll-behavior:contain;
padding:clamp(20px,3vw,32px);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-xl);
box-shadow:var(--sh-3);
opacity:0;
visibility:hidden;
transform:translate(-50%,-46%);
transition:opacity var(--t-mid) var(--ease-in-out),
transform var(--t-mid) var(--ease-in-out),
visibility var(--t-mid);
}
.upsell-modal.is-open{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
.upsell-modal__head{position:relative;padding-right:48px;margin-bottom:var(--s5)}
.upsell-modal__head h3{font-size:var(--fs-h2)}
.upsell-modal__head p{margin-top:8px;font-size:var(--fs-sm);color:var(--ink-2)}
.upsell-modal__close{
position:absolute;
top:0;
right:0;
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:50%;
border:1px solid var(--line);
background:var(--surface-2);
color:var(--ink-2);
font-size:20px;
line-height:1;
transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.upsell-modal__close:hover{border-color:var(--ink);color:var(--ink)}
.upsell-modal__label{
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
margin-bottom:var(--s3);
}
.upsell-modal__grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:var(--gap);
}
.upsell-modal__foot{
margin-top:var(--s6);
padding-top:var(--s5);
border-top:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s3);
flex-wrap:wrap;
}
.upsell-modal__keep{
min-height:44px;
padding:0 6px;
font-size:var(--fs-xs);
font-weight:600;
color:var(--accent-dark);
text-decoration:underline;
text-underline-offset:4px;
}
.upsell-modal__keep:hover{color:var(--accent)}
.um-card{
display:flex;
flex-direction:column;
padding:8px;
background:var(--surface-2);
border:1px solid var(--line);
border-radius:var(--r);
box-shadow:var(--sh-1);
}
.um-card__media{
aspect-ratio:1;
border-radius:calc(var(--r) - 8px);
background:var(--vial-well);
overflow:hidden;
}
.um-card__media img{width:100%;height:100%;object-fit:cover}
.um-card__body{
display:grid;
grid-template-rows:1fr auto auto;
gap:4px;
padding:10px 6px 4px;
flex:1;
}
.um-card__name{font-size:var(--fs-2xs);font-weight:600;color:var(--ink);line-height:1.35;align-self:start}
.um-card__price{
font-size:var(--fs-sm);
font-weight:700;
color:var(--ink);
font-variant-numeric:tabular-nums;
}
.um-card__add{
margin-top:auto;
min-height:38px;
padding:8px 12px;
border-radius:var(--r-pill);
border:1.5px solid var(--silver-deep);
background:var(--surface);
font-size:var(--fs-2xs);
font-weight:600;
color:var(--ink);
transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
background var(--t-fast) var(--ease);
}
.um-card__add:hover{border-color:var(--ink);color:var(--ink)}
.um-card__add.is-added{
background:var(--accent);
border-color:var(--accent);
color:var(--ink-inv);
}
@media (max-width:720px){
.upsell-modal__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:420px){
.upsell-modal__foot{flex-direction:column-reverse;align-items:stretch}
.upsell-modal__continue{width:100%}
}
.cart-body{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(24px,3.4vw,44px);
align-items:start;
}
.cart-body:has(> .summary[hidden]){grid-template-columns:minmax(0,1fr)}
.summary{
position:sticky;
top:calc(var(--head-h) + var(--s4));
display:grid;
gap:10px;
padding:var(--s5);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
}
.summary h2{font-size:var(--fs-h3);margin-bottom:var(--s2)}
.summary__row{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:var(--s3);
font-size:var(--fs-sm);
color:var(--ink-2);
}
.summary__row > span:last-child{
font-weight:600;
color:var(--ink);
font-variant-numeric:tabular-nums;
text-align:right;
white-space:nowrap;
}
.summary__row--total{
padding-top:var(--s3);
margin-top:2px;
border-top:1px solid var(--line);
font-size:var(--fs-h4);
font-weight:700;
color:var(--ink);
}
.summary__row--total > span:last-child{font-size:var(--fs-h3);font-weight:800}
.summary__row--save > span:last-child{color:var(--accent-dark)}
.summary__row > span.is-free{color:var(--accent-dark);font-weight:800}
.summary__note{font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.6}
.summary__note strong{color:var(--ink-2)}
.summary .divider{
height:1px;
margin:var(--s2) 0;
border:0;
background:var(--line);
}
.summary .btn{margin-top:var(--s2)}
.bundle-hint{
padding:10px 12px;
border-radius:var(--r-sm);
background:var(--surface-2);
border:1px solid var(--line-2);
font-size:var(--fs-2xs);
color:var(--ink);
line-height:1.5;
}
.bundle-hint strong{font-weight:700}
.cart-coupon{
display:flex;
gap:var(--s2);
flex-wrap:wrap;
align-items:flex-start;
margin-top:var(--s2);
}
.cart-coupon input{flex:1;min-width:150px}
.cart-coupon .btn{margin-top:0;flex:none}
.coupon-msg{
flex-basis:100%;
font-size:var(--fs-2xs);
color:var(--ink-3);
line-height:1.5;
}
.coupon-msg:empty{display:none}
.oc-num__link{
display:inline-block;
margin-top:var(--s2);
font-size:var(--fs-2xs);
color:var(--accent);
text-underline-offset:3px;
}
.cart-row{
display:grid;
grid-template-columns:88px minmax(0,1fr) auto auto;
gap:var(--s4);
align-items:center;
padding:var(--s4) 0;
border-bottom:1px solid var(--line);
}
.cart-row:first-child{padding-top:0}
.cart-row__media{
width:88px;
height:88px;
border-radius:var(--r-sm);
background:var(--vial-well);
overflow:hidden;
}
.cart-row__media img{width:100%;height:100%;object-fit:cover}
.cart-row__cat{
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
}
.cart-row__name{
margin:4px 0 6px;
font-size:var(--fs-body);
font-weight:600;
color:var(--ink);
line-height:1.3;
}
.cart-row__qty{
display:inline-flex;
align-items:center;
border:1.5px solid var(--silver-deep);
border-radius:var(--r-pill);
background:var(--surface-2);
overflow:hidden;
}
.cart-row__qty button{
width:38px;
height:44px;
display:grid;
place-items:center;
font-size:var(--fs-sm);
font-weight:700;
color:var(--ink-2);
transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cart-row__qty button:hover{background:var(--surface);color:var(--ink)}
.cart-row__qty input{
width:46px;
min-height:44px;
padding:0;
border:0;
border-radius:0;
background:none;
text-align:center;
font-weight:700;
color:var(--ink);
font-variant-numeric:tabular-nums;
-moz-appearance:textfield;
}
.cart-row__qty input:focus:not(:focus-visible){box-shadow:none;border-color:transparent}
.cart-row__qty input:focus-visible{box-shadow:var(--ring);border-color:transparent}
.cart-row__qty input::-webkit-outer-spin-button,
.cart-row__qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cart-row__price{
font-size:var(--fs-h4);
font-weight:700;
color:var(--ink);
font-variant-numeric:tabular-nums;
text-align:right;
white-space:nowrap;
}
.cart-row__acts{gap:var(--s4)}
.cart-row__view,
.cart-row__rm{
min-height:24px;
padding:5px 0;
display:inline-flex;
align-items:center;
background:none;
border:0;
cursor:pointer;
}
.cart-row__view{color:var(--ink-2)}
.cart-row__view:hover{color:var(--ink)}
.cart-row__rm{color:var(--ink-3)}
.cart-row__rm:hover{color:var(--ink)}
.cart-ship{
margin-bottom:var(--s5);
padding:var(--s4) var(--s5);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r);
}
.cart-ship__msg{font-size:var(--fs-2xs);color:var(--ink-2);margin-bottom:8px}
.cart-ship__msg strong{font-weight:700}
.cart-ship__bar{
height:6px;
border-radius:var(--r-pill);
background:var(--surface-2);
overflow:hidden;
}
.cart-ship__fill{
height:100%;
border-radius:var(--r-pill);
background:var(--accent);
transition:width var(--t-mid) var(--ease);
}
.cart-upsell{
display:grid;
grid-template-columns:64px minmax(0,1fr) auto;
gap:var(--s4);
align-items:center;
margin-top:var(--s5);
padding:var(--s4);
background:var(--surface);
border:1px dashed var(--silver);
border-radius:var(--r);
}
.cart-upsell__media{
width:64px;
height:64px;
border-radius:var(--r-sm);
background:var(--vial-well);
overflow:hidden;
}
.cart-upsell__media img{width:100%;height:100%;object-fit:cover}
.cart-upsell__eyebrow{
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
}
.cart-upsell__name{font-size:var(--fs-sm);font-weight:700;color:var(--ink);margin-top:3px}
.cart-upsell__desc{font-size:var(--fs-2xs);color:var(--ink-3);margin-top:3px}
.cart-upsell__add{
flex:none;
min-height:44px;
padding:12px 20px;
border-radius:var(--r-pill);
border:1.5px solid var(--silver-deep);
background:var(--surface-2);
font-size:var(--fs-xs);
font-weight:600;
color:var(--ink);
white-space:nowrap;
transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cart-upsell__add:hover{border-color:var(--ink);color:var(--ink)}
.cart-reco{margin-top:var(--s10);padding-top:var(--s6);border-top:1px solid var(--line)}
.cart-reco__title{font-size:var(--fs-h3);margin-bottom:var(--s4)}
.cart-reco__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
@media (max-width:900px){
.cart-body{grid-template-columns:1fr}
.summary{position:static}
.cart-reco__grid{grid-template-columns:repeat(2,1fr)}
.cart-body > div:first-child{display:contents}
#cartRows{order:1}
#cartEmpty{order:1}
.cart-body > .summary{order:2}
#cartUpsell{order:3}
#cartReco{order:4}
}
@media (max-width:720px){
.cart-row{
grid-template-columns:72px minmax(0,1fr);
grid-template-areas:
"media body"
"qty   price";
gap:var(--s3) var(--s4);
}
.cart-row__media{grid-area:media;width:72px;height:72px}
.cart-row > div:nth-child(2){grid-area:body}
.cart-row__qty{grid-area:qty;justify-self:start}
.cart-row__price{grid-area:price;align-self:center}
.cart-upsell{grid-template-columns:56px minmax(0,1fr)}
.cart-upsell__media{width:56px;height:56px}
.cart-upsell__add{grid-column:1 / -1;width:100%}
}
@media (max-width:560px){
.cart-reco__grid{grid-template-columns:repeat(2,1fr);gap:var(--gap-sm)}
}
.hsearch{
position:fixed;
inset:0;
z-index:var(--z-drawer);
display:flex;
align-items:flex-start;
justify-content:center;
padding:clamp(16px,8vh,96px) var(--pad) var(--pad);
opacity:0;
visibility:hidden;
transition:opacity var(--t-mid) var(--ease-in-out), visibility var(--t-mid);
}
.hsearch.is-open{opacity:1;visibility:visible}
body.search-open{overflow:hidden}
.hsearch__scrim{
position:absolute;
inset:0;
background:var(--scrim);
-webkit-backdrop-filter:blur(2px);
backdrop-filter:blur(2px);
}
.hsearch__panel{
position:relative;
width:min(680px,94vw);
max-height:min(620px, calc(100dvh - 96px));
display:flex;
flex-direction:column;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-xl);
box-shadow:var(--sh-3);
overflow:hidden;
transform:translateY(-10px);
transition:transform var(--t-mid) var(--ease-in-out);
}
.hsearch.is-open .hsearch__panel{transform:none}
.hsearch__bar{
display:flex;
align-items:center;
gap:var(--s3);
padding:var(--s3) var(--s4);
border-bottom:1px solid var(--line);
}
.hsearch__bar > svg{flex:none;width:18px;height:18px;color:var(--ink-3)}
.hsearch__input{
flex:1;
min-width:0;
min-height:44px;
padding:0;
border:0;
border-radius:0;
background:none;
font-size:16px;
color:var(--ink);
}
.hsearch__input:focus{box-shadow:none;border-color:transparent}
.hsearch__esc{
flex:none;
min-height:32px;
padding:0 10px;
border:1px solid var(--line-2);
border-radius:var(--r-xs);
background:var(--surface-2);
font-family:var(--font-mono);
font-size:var(--fs-3xs);
font-weight:500;
color:var(--ink-3);
transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.hsearch__esc:hover{border-color:var(--ink);color:var(--ink)}
.hsearch__list{
flex:1;
min-height:0;
overflow-y:auto;
overscroll-behavior:contain;
padding:var(--s2);
}
.hsearch__row{
display:grid;
grid-template-columns:46px minmax(0,1fr) auto;
gap:var(--s3);
align-items:center;
padding:8px 10px;
border-radius:var(--r-sm);
color:var(--ink-2);
transition:background var(--t-fast) var(--ease);
}
.hsearch__row:hover,
.hsearch__row.is-active{background:var(--surface)}
.hsearch__thumb{
width:46px;
height:46px;
border-radius:var(--r-xs);
background:var(--vial-well);
overflow:hidden;
}
.hsearch__thumb img{width:100%;height:100%;object-fit:cover}
.hsearch__name{font-size:var(--fs-sm);font-weight:600;color:var(--ink);line-height:1.35}
.hsearch__sub{
display:block;
margin-top:2px;
font-size:var(--fs-2xs);
font-weight:400;
color:var(--ink-3);
}
.hsearch__meta{
flex:none;
text-align:right;
font-size:var(--fs-2xs);
font-weight:700;
color:var(--ink);
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.hsearch__meta.is-oos{color:var(--ink-3);font-weight:600}
.hsearch__empty{
padding:var(--s10) var(--s5);
text-align:center;
color:var(--ink-3);
}
.hsearch__empty h3{font-size:var(--fs-h3);margin-bottom:8px}
.hsearch__empty p{font-size:var(--fs-sm)}
.hsearch__foot{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s3);
padding:10px var(--s4);
border-top:1px solid var(--line);
background:var(--canvas);
font-size:var(--fs-2xs);
color:var(--ink-3);
}
.hsearch__keys{font-family:var(--font-mono);letter-spacing:.02em}
.hsearch__count{font-variant-numeric:tabular-nums;font-weight:600}
@media (max-width:560px){
.hsearch{padding-top:var(--s4)}
.hsearch__panel{max-height:calc(100dvh - 32px)}
.hsearch__keys{display:none}
}
.legal{color:var(--ink-2)}
.legal__updated{
display:inline-block;
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
line-height:1.3;
color:var(--ink-3);
padding:6px 12px;
background:var(--muted-tint);
border-radius:var(--r-pill);
}
.legal h2{
font-size:var(--fs-h3);
margin:clamp(28px,3vw,40px) 0 10px;
scroll-margin-top:calc(var(--head-h) + var(--s4));
}
.legal h3{
font-size:var(--fs-h4);
margin:var(--s6) 0 var(--s2);
}
.legal p{
margin-bottom:14px;
max-width:var(--max-prose);
font-size:var(--fs-body);
line-height:1.75;
}
.legal p:last-child{margin-bottom:0}
.legal strong{color:var(--ink)}
.legal ul,
.legal ol{
margin:0 0 14px;
padding-left:21px;
max-width:var(--max-prose);
font-size:var(--fs-body);
line-height:1.75;
}
.legal li{margin-bottom:6px}
.legal li:last-child{margin-bottom:0}
.legal li::marker{color:var(--ink-3)}
.legal a{
color:var(--accent-dark);
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
transition:color var(--t-fast) var(--ease);
}
.legal a:hover{color:var(--accent)}
.legal .scroller,
.legal .notice{margin-bottom:var(--s5)}
.legal__toc{
margin:var(--s6) 0 0;
padding:var(--s5);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r);
box-shadow:var(--sh-1);
}
.legal__toc > .microcap{display:block;margin-bottom:var(--s2)}
.legal__toc ol{
margin:0;
padding:0;
max-width:none;
list-style:none;
counter-reset:toc;
}
.legal__toc li{margin:0;counter-increment:toc}
.legal__toc a{
display:flex;
gap:12px;
align-items:baseline;
min-height:38px;
padding:8px 0;
font-size:var(--fs-sm);
line-height:1.4;
color:var(--ink-2);
text-decoration:none;
border-bottom:1px solid var(--line);
}
.legal__toc li:last-child a{border-bottom:0}
.legal__toc a::before{
content:counter(toc,decimal-leading-zero);
flex:none;
min-width:20px;
font-family:var(--font-mono);
font-size:var(--fs-3xs);
letter-spacing:.02em;
color:var(--ink-3);
}
.legal__toc a:hover{color:var(--accent-dark)}
.legal__also{
margin-top:var(--s10);
padding-top:var(--s5);
border-top:1px solid var(--line);
display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--s2) var(--s5);
}
.legal__also .microcap{color:var(--ink-3)}
.legal__also a{
font-size:var(--fs-sm);
font-weight:600;
color:var(--accent-dark);
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
min-height:38px;
display:inline-flex;
align-items:center;
}
.legal__also a:hover{color:var(--accent)}
.faq-nav{
position:sticky;
top:var(--head-h);
z-index:var(--z-sticky);
background:var(--canvas);
border-bottom:1px solid var(--line);
}
.faq-nav__row{
display:flex;
align-items:center;
gap:var(--s2);
padding-block:var(--s3);
width:max-content;
min-width:100%;
}
.faq-nav .chip{flex:none}
.faq-group{
display:grid;
grid-template-columns:minmax(240px,300px) minmax(0,1fr);
column-gap:var(--s10);
align-items:start;
max-width:none;
}
.faq-group__head{
grid-column:1;
grid-row:1 / span 9;
display:flex;
align-items:baseline;
flex-wrap:wrap;
gap:var(--s3);
margin-bottom:0;
position:sticky;
top:calc(var(--head-h) + 72px);
scroll-margin-top:calc(var(--head-h) + 64px);
}
.faq-group .qa{grid-column:2}
.faq-group__head h2{font-size:var(--fs-h2)}
.faq-group .qa__a a{
color:var(--accent-dark);
font-weight:600;
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
transition:color var(--t-fast) var(--ease);
}
.faq-group .qa__a a:hover{color:var(--accent)}
.faq-group__n{
flex:none;
font-family:var(--font-mono);
font-size:var(--fs-2xs);
letter-spacing:.02em;
color:var(--ink-3);
font-variant-numeric:tabular-nums;
}
.section--soft .faq-group__n{color:var(--ink-2)}
.prog-split{align-items:start}
.prog-cta{margin-top:var(--s6)}
.prog-lead{
display:block;
max-width:760px;
padding:clamp(24px,3.6vw,38px);
border-radius:var(--r-lg);
font-size:var(--fs-lede);
line-height:1.65;
}
.prog-lead strong{
display:block;
margin-bottom:var(--s3);
font-family:var(--font-display);
font-size:var(--fs-h3);
letter-spacing:-.012em;
line-height:1.22;
color:var(--ink-2);
}
.prog-lead p + p{margin-top:var(--s3)}
@media (max-width:900px){
.faq-group{display:block}
.faq-group__head{position:static;margin-bottom:var(--s5)}
}
@media (max-width:720px){
}
@media (max-width:560px){
.rgrid{grid-template-columns:1fr}
.legal__also{gap:var(--s2) var(--s4)}
.faq-group__head{flex-wrap:wrap;gap:var(--s1) var(--s3)}
}
@media (max-width:768px){
.tag{
white-space:normal;
overflow:visible;
text-overflow:clip;
max-width:calc(100% - 16px);
}
}
@media (max-width:768px){
.nav__search,
.nav__account,
.nav__cart,
.nav__burger,
.modal__close{min-width:44px;min-height:44px}
.btn--sm{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.legal__toc a{display:block;min-height:44px;display:flex;align-items:center}
.cart-row__rm,
.cart-row__view{min-height:44px;display:inline-flex;align-items:center}
.cart-row__acts{gap:var(--s4)}
}
@media (max-width:720px){
img.coadoc__frame{
display:block;
height:240px;
object-fit:cover;
object-position:top center;
}
}
.pdp__specnote,
.notice--placeholder{margin-bottom:var(--s4)}
.pdp__specnote{width:100%}
.oc-empty + .notice--ruo{margin-top:var(--s5)}
.coupon-msg--err{color:var(--alert)}
@media (max-width:720px){
.dtable tr.oc-total td:empty{display:none}
}
@media (max-width:720px){
.pdp__slide-chip-btn{min-height:44px;padding-block:0;display:inline-flex;align-items:center}
.cart-drawer__close{min-width:44px;min-height:44px}
.legal__also a{display:inline-flex;align-items:center;min-height:44px}
.crumbs a{display:inline-flex;align-items:center;min-height:40px}
}
.contact__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:var(--gap);align-items:start}
.contact__form{display:grid;gap:var(--s5);padding:var(--s6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.contact__form .field__ctl input,
.contact__form .field__ctl select,
.contact__form .field__ctl textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--canvas);font:inherit;font-size:16px;color:var(--ink)}
.contact__form .field__ctl textarea{min-height:150px;resize:vertical;line-height:1.55}
.contact__form .field__ctl input:focus,
.contact__form .field__ctl select:focus,
.contact__form .field__ctl textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.contact__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.contact__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact__status{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.contact__status:empty{display:none}
.contact__status.is-ok{color:var(--accent-dark);font-weight:600}
.contact__status.is-err{color:var(--alert);font-weight:600}
.contact__aside{display:grid;gap:var(--s4)}
.contact__aside .info-card p{margin-top:8px}
.contact__aside .info-card a{color:var(--accent-dark);font-weight:600;text-decoration:none}
.contact__aside .info-card a:hover{text-decoration:underline}
.hm-save__note{margin-top:var(--s6);max-width:none;text-align:center}
.nf{max-width:640px}
.nf__acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
@media (max-width:860px){
.contact__grid{grid-template-columns:1fr}
.contact__row{grid-template-columns:1fr}
}


/* PDP v2 */
.pdp__title{font-size:clamp(36px,4.4vw,58px);line-height:1.02}
.pdp__price{font-size:clamp(30px,3.1vw,40px)}
.pdp .btn--lg{min-height:58px;font-size:16.5px}
.pdp__qty{min-height:58px}
.pdp__qty button,.pdp__qty input{min-height:56px}
.pdp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);background:var(--canvas);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(10,10,11,.08);padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.pdp-sticky[hidden]{display:none}
.pdp-sticky__in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.pdp-sticky__meta{display:flex;flex-direction:column;min-width:0}
.pdp-sticky__name{font-weight:700;font-size:var(--fs-sm);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp-sticky__price{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.pdp-sticky .btn{min-height:48px;padding:0 24px;flex:none}
@media (max-width:560px){.pdp-sticky .btn{flex:1 1 auto}}

/* COA index thumbs */
.coa-table__thumb{width:34px;height:48px;object-fit:cover;object-position:top;border-radius:4px;border:1px solid var(--line);background:var(--canvas);vertical-align:middle;margin-right:10px;box-shadow:var(--sh-1)}
@media (max-width:640px){.coa-table__thumb{width:28px;height:40px;margin-right:8px}}

/* PDP refs */
.pdp__refs{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.pdp__refs-list{margin:var(--s2) 0 0;padding-left:1.25em;display:grid;gap:10px}
.pdp__refs-list li{font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2)}
.pdp__refs-list a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line-2)}
.pdp__refs-list a:hover{color:var(--accent-dark);border-color:var(--accent)}
.pdp__ref-meta{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px}
.pdp__refs-note{margin:var(--s3) 0 0;font-size:var(--fs-xs);color:var(--ink-3)}

.coa-table__thumb{float:left;margin:-2px 10px 0 0}

/* Shop certificate band + PDP bulk card (Sep 2) */
.band--cert .band__aside{display:flex;justify-content:center}
.band__doc{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:inherit}
.band__doc img{display:block;width:min(100%,250px);height:auto;border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.18);background:#fff;transition:transform .25s ease}
.band__doc:hover img{transform:translateY(-3px)}
.band__doc .microcap{opacity:.85}
.pdp__bulk{margin-top:16px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);display:flex;flex-direction:column;gap:3px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.pdp__bulk b{font-weight:600;color:var(--ink)}
.pdp__bulk a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
@media (max-width:760px){.band__doc img{width:min(70%,220px)}}

.band--cert .band__doc{width:100%}

/* Catalog v3 (Sep 2 night): meta row, intros, bundle note, sticky bar */
.pcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:0 8px 8px;font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.3}
.pcard__stock{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pcard__stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.pcard__stock.is-low{color:var(--tan-ink)}
.pcard__stock.is-low::before{background:var(--tan-ink)}
.pcard__lot{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pcard__lot:hover{color:var(--accent-dark);text-decoration-color:currentColor}
.pcard__sizes{display:inline-flex;gap:4px;margin-left:auto}
.pcard__sizes a,.pcard__sizes b{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-weight:500;color:var(--ink-2);font-size:11px;line-height:1}
.pcard__sizes b{background:var(--ink);color:var(--ink-inv);border-color:var(--ink)}
.pcard__sizes a:hover{border-color:var(--accent);color:var(--accent-dark)}
.shop-intro{margin:0 0 var(--s5);padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.shop-intro__h{font-size:clamp(20px,2vw,26px);margin:0 0 6px;letter-spacing:-.01em}
.shop-intro__p{margin:0;color:var(--ink-2);max-width:70ch}
.catfilter__note{padding-top:var(--s4);margin-top:var(--s4);border-top:1px solid var(--line)}
.catfilter__note-list{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:6px}
.catfilter__note-list li{display:flex;justify-content:space-between;gap:var(--s3);font-size:13px}
.catfilter__note-list b{font-weight:600;color:var(--ink)}
.catfilter__note-list span{color:var(--ink-2)}
.catfilter__note-list a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px}
.catfilter__note-p{margin:var(--s3) 0 0;font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.45}
@media (min-width:901px){.shop-bar{position:sticky;top:calc(var(--promo-h) + var(--nav-h));z-index:calc(var(--z-nav) - 2)}}
@media (max-width:600px){.pcard__meta{padding:0 4px 6px}.pcard__sizes{margin-left:0}}

/* COA Portal: published-report cards (Sep 2 night) */
.coa-latest{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.coa-card{border:1px solid var(--line);border-radius:var(--r-md);background:var(--canvas);overflow:hidden;display:flex;flex-direction:column}
.coa-card__doc{display:block;background:var(--band);padding:14px 14px 0;border-bottom:1px solid var(--line)}
.coa-card__doc img{display:block;width:100%;height:auto;max-height:230px;object-fit:cover;object-position:top;border-radius:6px 6px 0 0;box-shadow:0 8px 24px rgba(0,0,0,.12);background:#fff;transition:transform .25s ease}
.coa-card__doc:hover img{transform:translateY(-3px)}
.coa-card__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.coa-card__name{font-size:15px;margin:0;line-height:1.3}
.coa-card__name a{color:inherit}
.coa-card__name a:hover{color:var(--accent-dark)}
.coa-card__meta{margin:0;font-size:var(--fs-2xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (max-width:1080px){.coa-latest{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.coa-latest{grid-template-columns:repeat(2,1fr);gap:var(--gap-sm)}.coa-card__doc{padding:10px 10px 0}.coa-card__doc img{max-height:170px}}

/* Hero copy clear of the vial (Sep 3): the lede used to run under the glass */
@media (min-width:1081px){.hero__in{max-width:min(600px,48%)}.hero__in .lede{max-width:40ch}}

/* PDP sticky gallery (Sep 3): the stage follows the buy column on wide screens */
@media (min-width:1081px){.pdp__stage{position:sticky;top:calc(var(--promo-h) + var(--nav-h) + 16px);align-self:start}}

/* 16 — Product page, built out (chips, lot box, tiers, trust rows, proof,
   molecular profile, literature, close). Colours are the locked system:
   white page, cool grey cards, cream plates, tan accents, teal on pressable. */
.pdp__chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s3)}
.pdp__chips span{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pdp__chips[hidden]{display:none}
.pdp__batch{display:flex;align-items:center;gap:var(--s3);margin:var(--s4) 0 0;padding:12px 14px;background:var(--tan-tint);border:1px solid var(--tan-2);border-radius:var(--r)}
.pdp__batch[hidden]{display:none}
.pdp__batch-ico{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);background:#fff;border:1px solid var(--tan-2);color:var(--tan-ink)}
.pdp__batch-ico svg{width:18px;height:18px}
.pdp__batch-txt{display:grid;gap:1px;min-width:0;flex:1}
.pdp__batch-txt .microcap{color:var(--tan-ink)}
.pdp__batch-txt b{font-family:var(--font-mono);font-size:var(--fs-body);letter-spacing:.04em;color:var(--ink)}
.pdp__batch-txt small{font-size:var(--fs-2xs);color:var(--ink-3)}
.pdp__batch-open{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2xs);font-weight:700;color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.pdp__batch--pending{background:var(--surface);border-color:var(--line)}
.pdp__batch--pending .pdp__batch-ico{color:var(--ink-3);border-color:var(--line)}
.pdp__batch--pending .microcap{color:var(--ink-3)}
.pdp__opts-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-top:var(--s6)}
.pdp__opts-head[hidden]{display:none}
.pdp__opts-head .pdp__variants-h{margin:0}
.pdp__opts-note{font-size:var(--fs-2xs);color:var(--ink-3)}
.pdp__opts-head + .pdp__opts{margin-top:var(--s2)}
.pdp__opt{position:relative;flex-wrap:wrap}
.pdp__opt-off{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tan-ink);margin-top:2px}
.pdp__opt.is-active .pdp__opt-off{color:var(--accent-dark)}
.pdp__opt-tag{position:absolute;top:-9px;left:12px;padding:2px 8px;border-radius:var(--r-pill);background:var(--ink);color:var(--ink-inv);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pdp__coa-btn{flex:none;padding-left:18px;padding-right:18px}
.pdp__cutoff{margin-top:var(--s4);padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-size:var(--fs-xs)}
.pdp__cutoff svg{color:var(--accent)}
.pdp__assure li span{display:grid;gap:2px}
.pdp__assure li span b{font-size:var(--fs-xs);font-weight:700;color:var(--ink);line-height:1.35}
.pdp__assure li span small{font-size:var(--fs-2xs);line-height:1.5;color:var(--ink-3)}
.pdp__assure li svg{color:var(--accent);margin-top:2px}
.pdp__assure li[hidden]{display:none}
.pdp__pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pdp__pay i{font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;color:var(--ink-2)}
.pdp__ruo-line{margin:var(--s4) 0 0;font-size:var(--fs-2xs);color:var(--ink-3)}
/* More ways to save */
.mws{display:flex;align-items:center;gap:var(--s5);padding:var(--s5) var(--s6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.mws__badge{flex:none;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:#fff;border:1px solid var(--tan-2);color:var(--tan-ink);line-height:1;text-align:center}
.mws__badge b{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.mws__badge small{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.mws__txt{flex:1;min-width:0}
.mws__txt h3{display:flex;align-items:center;gap:10px;font-size:var(--fs-h4);margin:0 0 4px}
.mws__txt p{margin:0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55;max-width:60ch}
.mws .btn{flex:none}
/* Proof */
.proof{display:grid;gap:var(--s5)}
.proof__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.lab{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-1);display:grid;gap:var(--s4)}
.lab__head{display:flex;align-items:center;gap:12px}
.lab__mark{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--ink);color:var(--ink-inv);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em}
.lab__who{display:grid;gap:1px;flex:1;min-width:0}
.lab__who b{font-size:var(--fs-body);color:var(--ink)}
.lab__who span{font-size:var(--fs-2xs);color:var(--ink-3)}
.lab__id{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;font-size:var(--fs-2xs);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.lab__id b{font-family:var(--font-mono);letter-spacing:.04em;color:var(--ink);text-transform:none}
.lab__big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.lab__big b{font-size:clamp(44px,5vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.lab__big b i{font-style:normal;font-size:.5em;font-weight:700;color:var(--ink-3)}
.lab__big span{font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lab__big span.spec{margin-left:auto;padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);letter-spacing:.04em}
.lab__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r)}
.lab__grid div{background:#fff;padding:10px 14px;display:grid;gap:2px}
.lab__grid dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.lab__grid dd{margin:0;font-size:var(--fs-body);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.lab__grid dd small{font-size:.7em;font-weight:600;color:var(--ink-3);margin-left:2px}
.lab__chips{display:flex;flex-wrap:wrap;gap:6px}
.lab__chips span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);background:var(--tan-tint);border:1px solid var(--tan-2);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tan-ink)}
.lab__meta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:var(--fs-2xs);color:var(--ink-2)}
.lab__meta dt{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.lab__meta dd{margin:0}
.lab__cert{display:grid;grid-template-columns:1fr 96px;gap:var(--s4);align-items:end}
.lab__cert img{width:96px;height:auto;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-1);transform:rotate(2deg);background:#fff}
.lab .btn{width:100%}
.qc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-1)}
.qc__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.qc__head b{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.qc__sum{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);background:var(--ok-tint);color:var(--ok);font-size:11px;font-weight:700}
.qc__sum svg{width:12px;height:12px}
.qc__rows{list-style:none;margin:0;padding:0}
.qc__rows li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.qc__rows li:last-child{border-bottom:0}
.qc__k b{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.qc__k small{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.qc__v{text-align:right;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink);font-variant-numeric:tabular-nums}
.qc__v small{display:block;font-family:var(--font-body);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.qc__s{display:inline-flex;align-items:center;gap:6px;min-width:96px;justify-content:center;padding:5px 10px;border-radius:var(--r-pill);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.qc__s--pass{background:var(--ok-tint);color:var(--ok)}
.qc__s--rep{background:var(--muted-tint);color:var(--ink-2)}
.qc__s svg{width:12px;height:12px}
.lots{display:grid;gap:var(--s3)}
.lots__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lots__head h3{margin:0;font-size:var(--fs-h4)}
.lots__head p{margin:2px 0 0;font-size:var(--fs-2xs);color:var(--ink-3)}
.lots__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s3)}
.lot{display:grid;gap:8px;padding:var(--s4);background:#fff;border:1px solid var(--line);border-radius:var(--r);position:relative}
.lot--current{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.lot__tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.lot--current .lot__tag{color:var(--accent-dark)}
.lot__id{font-family:var(--font-mono);font-size:var(--fs-body);font-weight:700;color:var(--ink);letter-spacing:.04em}
.lot__big{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.lot__big i{font-style:normal;font-size:.5em;color:var(--ink-3);font-weight:700}
.lot dl{margin:0;display:grid;gap:5px}
.lot dl div{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-2xs);padding-bottom:5px;border-bottom:1px solid var(--line)}
.lot dt{color:var(--ink-3)}
.lot dd{margin:0;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.lot a{font-size:var(--fs-2xs);font-weight:700;color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.proof__pending{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.proof__pending svg{width:26px;height:26px;color:var(--ink-3)}
.proof__pending h3{margin:0 0 6px;font-size:var(--fs-h4)}
.proof__pending p{margin:0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55;max-width:70ch}
/* Compound info extras */
.pdp__mol,.pdp__stor{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);display:grid;gap:var(--s3)}
.pdp__mol[hidden],.pdp__stor[hidden]{display:none}
.pdp__mol .pdp__glance-list a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.pdp__stor-tile{display:grid;gap:3px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.pdp__stor-tile b{font-size:var(--fs-body);color:var(--ink)}
.pdp__stor-tile span{font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.5}
/* Literature */
.lit{list-style:none;margin:0;padding:0;counter-reset:lit;display:grid;gap:0;border-top:1px solid var(--line)}
.lit li{counter-increment:lit;display:grid;grid-template-columns:40px minmax(0,1fr);grid-auto-rows:auto;column-gap:var(--s4);row-gap:0;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.lit li::before{content:counter(lit,decimal-leading-zero);grid-column:1;grid-row:1 / span 3;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--tan-ink);padding-top:3px}
.lit li > *{grid-column:2;min-width:0}
.lit__src{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.lit__t{display:block;margin:4px 0 2px;font-size:var(--fs-body);font-weight:700;color:var(--ink);text-decoration:none;line-height:1.35}
.lit__t:hover{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.lit__a{font-size:var(--fs-2xs);color:var(--ink-3)}
.pdp__litnote{margin-top:var(--s5)}
/* Close band */
.pdp__close .lede{max-width:60ch}
.pdp__close-stats{display:flex;flex-wrap:wrap;gap:var(--s6);margin:var(--s5) 0}
.pdp__close-stats div{display:grid;gap:2px}
.pdp__close-stats b{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pdp__close-stats span{font-size:var(--fs-2xs);color:var(--ink-3)}
@media (max-width:900px){
  .proof__grid{grid-template-columns:1fr}
  .mws{flex-direction:column;align-items:flex-start}
  .lab__cert{grid-template-columns:1fr}
  .lab__cert img{display:none}
}
@media (max-width:560px){
  .pdp__add{flex-wrap:wrap}
  .pdp__coa-btn{order:3;width:100%}
  .qc__rows li{grid-template-columns:minmax(0,1fr) auto}
  .qc__s{grid-column:1 / -1;justify-self:start}
}

/* Catalog and portal facts strip */
.shop-stats{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.shop-stats li{display:grid;gap:2px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.shop-stats b{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.shop-stats span{font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.4}
.shop-collections .shead{margin-bottom:var(--s4)}
.coa-assays .info-card p{font-size:var(--fs-sm)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
@media (max-width:900px){.shop-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid-4{grid-template-columns:1fr}}

/* pay chips: the assure-row grid rule must not stack the chip row */
.pdp__assure li span.pdp__pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* ---- Deep band: the compare table on a deep-green ground (Sep 3) ---- */
.band--deep{background:linear-gradient(128deg,var(--accent-dark) 0%,#123B32 100%);color:var(--ink-inv)}
.band--deep::after{background:linear-gradient(90deg,rgba(255,255,255,.34) 0 38%,rgba(255,255,255,.12) 100%)}
.band--deep h2,.band--deep h3,.band--deep .stat__num{color:var(--ink-inv)}
.band--deep .lede{color:var(--ink-inv-2)}
.band--deep .eyebrow,.band--deep .microcap,.band--deep .stat__lbl{color:var(--ink-inv-3)}
.band--deep .btn--inv{background:var(--ink-inv);color:var(--accent-dark);border-color:transparent}
.band--deep .btn--inv:hover{background:var(--ink-inv-lift);color:var(--accent-dark)}
.band--deep .cmp{background:var(--surface-2);border-color:transparent;box-shadow:0 24px 60px -30px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.12)}
.band--deep .cmp__row{border-bottom-color:var(--line)}
/* ---- Page header with a media plate (shop) ---- */
.page-hd--media .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s6) var(--s7);align-items:center}
.page-hd--media .page-hd__copy{min-width:0}
.page-hd--media .page-hd__media{margin:0;min-width:0;border-radius:var(--r-lg);overflow:hidden;background:var(--vial-well);border:1px solid var(--line);box-shadow:var(--sh-1);aspect-ratio:16/10}
.page-hd--media .page-hd__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.page-hd--media .shop-stats{grid-column:1/-1}
@media(max-width:900px){.page-hd--media .wrap{grid-template-columns:1fr;gap:var(--s5)}.page-hd--media .page-hd__media{aspect-ratio:16/9;order:-1}}

/* deep band: tone the corner highlight down so it reads as light on green, not milk */
.band--deep::before{background:radial-gradient(120% 160% at 88% 6%,rgba(255,255,255,.11),rgba(0,0,0,0) 58%)}

/* COA header: the newest certificate as a document on a plate */
.page-hd__media--doc{aspect-ratio:16/10;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;padding:18px 18px 10px;gap:8px;grid-template-rows:1fr auto}
.page-hd__media--doc a{display:block;height:100%;max-height:100%;min-height:0}
.page-hd--media .page-hd__media--doc img{width:auto;height:100%;max-height:100%;object-fit:contain;object-position:center;border-radius:6px;background:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.10);transition:transform .25s ease}
.page-hd__media--doc a:hover img{transform:translateY(-2px)}
.page-hd__media--doc figcaption{color:var(--ink-3);text-align:center}
@media(max-width:900px){.page-hd__media--doc{aspect-ratio:auto;padding:14px 14px 8px}.page-hd__media--doc a{height:auto}.page-hd--media .page-hd__media--doc img{width:100%;height:auto;max-height:min(70vw,520px)}}

/* purity on the card pill */
.pcard__coa[data-purity]{gap:5px;padding:4px 9px}
.pcard__coa b{font-weight:800;letter-spacing:0;color:var(--accent-dark);font-variant-numeric:tabular-nums}

/* ---- Pay your way band (home) ---- */
.pay-band{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:var(--s6) var(--s7);align-items:start;padding:var(--s6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.pay-band__copy .lede{margin-top:var(--s3);max-width:38ch}
.pay-tiles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s3)}
.pay-tile{position:relative;flex:1 1 200px;min-width:0;display:grid;gap:6px;padding:16px 16px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.pay-tile--save{border-color:var(--accent-tint-2);background:linear-gradient(180deg,#fff 0%,var(--accent-tint) 140%)}
.pay-tile__off{position:absolute;top:12px;right:12px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);background:var(--accent);color:var(--ink-inv)}
.pay-tile__name{font-weight:700;color:var(--ink);padding-right:70px}
.pay-tile__marks{display:flex;flex-wrap:wrap;gap:5px}
.pay-tile__marks i{font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;color:var(--ink-2)}
.pay-tile__note{font-size:var(--fs-2xs);line-height:1.5;color:var(--ink-3)}
@media(max-width:900px){.pay-band{grid-template-columns:1fr;padding:var(--s5)}.pay-tile{flex-basis:calc(50% - var(--s3))}}
@media(max-width:560px){.pay-tile{flex-basis:100%}}

/* pay tiles: a balanced 2-up grid; an odd last tile spans the row */
.pay-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pay-tile{flex:none}
.pay-tile:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:560px){.pay-tiles{grid-template-columns:1fr}.pay-tile:last-child:nth-child(odd){grid-column:auto}}

/* ---- Certificate library (coa.html) ---- */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4)}
.cert{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s4);padding:var(--s4);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.cert__thumb{display:block;border-radius:8px;overflow:hidden;background:var(--surface);border:1px solid var(--line);aspect-ratio:120/155}
.cert__thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.cert__body{display:grid;gap:4px;align-content:start;min-width:0}
.cert__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cert__name{font-weight:700;color:var(--ink);line-height:1.25}
.cert__lab{flex:none;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:var(--r-pill);background:var(--accent-tint);color:var(--accent-dark)}
.cert__big{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:4px}
.cert__big i{font-style:normal;font-size:.5em;color:var(--ink-3);font-weight:700}
.cert__big--pass{color:var(--accent-dark);font-size:24px}
.cert__sub,.cert__meta,.cert__assays{font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.45}
.cert__meta b{color:var(--ink);font-weight:700}
.cert__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
@media(max-width:420px){.cert{grid-template-columns:72px minmax(0,1fr)}}
/* ---- PDP arrival window ---- */
.pdp__arrive{display:block;margin-top:4px;font-size:var(--fs-2xs);color:var(--ink-3)}
.pdp__arrive b{color:var(--ink);font-weight:700}
/* ---- Shop promo tiles ---- */
.shop-promos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.shop-promo{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:6px var(--s4);align-items:center;padding:var(--s4) var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);color:inherit;text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.shop-promo:hover{border-color:var(--line-2);transform:translateY(-1px)}
.shop-promo__ring{grid-row:1/3;width:72px;height:72px;border-radius:50%;border:2px solid var(--accent);display:grid;place-items:center;align-content:center;color:var(--accent-dark);line-height:1;text-align:center}
.shop-promo__ring b{font-size:20px;font-weight:800;letter-spacing:-.02em}
.shop-promo__ring b i{font-style:normal;font-size:.6em}
.shop-promo__ring span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.shop-promo__body{display:grid;gap:2px;min-width:0}
.shop-promo__body b{font-weight:700;color:var(--ink)}
.shop-promo__body span{font-size:var(--fs-2xs);line-height:1.5;color:var(--ink-3)}
.shop-promo__cta{justify-self:start}
@media(max-width:900px){.shop-promos{grid-template-columns:1fr}}

/* ---- Home statement: centred ---- */
.hm-claim--center{text-align:center;max-width:none;margin-left:auto;margin-right:auto}

/* ---- PDP literature: only what the existing .lit design does not cover ---- */
.lit__note{margin:var(--s4) 0 0;font-size:var(--fs-2xs);color:var(--ink-3);max-width:70ch}
/* ---- Research library: the "also" variant line ---- */
.rl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.rl-item{display:grid;gap:var(--s3);align-content:start;padding:var(--s5);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);scroll-margin-top:120px}
.rl-item__hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)}
.rl-item__name{margin:0;font-size:var(--fs-h4);line-height:1.25}
.rl-item__name a{color:var(--ink);text-decoration:none}
.rl-item__name a:hover{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.rl-item__also{display:block;margin-top:2px;font-size:var(--fs-2xs);font-weight:400;color:var(--ink-3);letter-spacing:0}
.rl-item__n{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);padding:3px 9px;border-radius:var(--r-pill);background:var(--accent-tint)}
.rl-item__p{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.rl-list{margin:0;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.rl-list li{padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--fs-2xs);line-height:1.45}
.rl-list li:last-child{border-bottom:0;padding-bottom:0}
.rl-list a{display:block;color:var(--ink);font-weight:600;font-size:var(--fs-sm);text-decoration:none;border:0;line-height:1.4}
.rl-list a:hover{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.rl-list .pdp__ref-meta{display:block;margin-top:2px;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-3)}
@media(max-width:900px){.rl-grid{grid-template-columns:1fr}.rl-item{padding:var(--s4)}}

/* ---- Even cards + no image dragging (2026-09-03) ----
   .pcard__spec is the only variable-height element in a product card, so a
   two-line spec made its whole grid row 18px taller than every other row.
   Reserve two lines for it and clamp to two, and every card matches. */
.pcard__spec{min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Images are content, not draggable objects. */
img{-webkit-user-drag:none;user-drag:none}
a img,.pcard img,.cat-card img,.cert__thumb img{user-select:none}

/* ---- Even card rows (2026-09-03) ----
   Every card grid used grid-auto-rows:auto, so a row containing one long
   card was taller than the row above it and the cards stopped lining up.
   1fr makes each implicit row the height of the tallest in the grid.
   Held above 560px only: in a single-column stack, equal rows would pad
   every short card out to the height of the longest one. */
@media (min-width:561px){
  .grid-3,.grid-4,.steps,.trust,.pay-tiles,.cert-grid,.shop-stats,
  .pdp__stor,.lots__grid,.shop-promos,.rl-grid,.coa-assays{grid-auto-rows:1fr}
}

/* The facts strip stays two-up even on a phone, so its rows must stay even
   at every width, not just above 560px. */
.shop-stats{grid-auto-rows:1fr}

/* ---- Certificate cards, refined (2026-09-03) ----
   The name was competing with the purity figure on the same row and the
   ISO pill squeezed it into two ragged lines. The name now owns a row of
   its own with two lines reserved, so the purity figure starts at the same
   height on every card, and only one action carries weight. */
.cert{grid-template-columns:104px minmax(0,1fr);gap:var(--s4);padding:var(--s5)}
.cert__thumb{aspect-ratio:104/134;box-shadow:0 6px 18px -10px rgba(10,10,11,.45)}
.cert__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em;font-weight:700;line-height:1.25;color:var(--ink)}
.cert__big{margin-top:2px}
.cert__acts{margin-top:auto;padding-top:var(--s3);align-items:center}
.cert__link{font-size:var(--fs-2xs);font-weight:700;color:var(--accent-dark);text-decoration:none}
.cert__link:hover{text-decoration:underline;text-underline-offset:3px}
.cert__body{align-content:start}
@media(max-width:420px){.cert{grid-template-columns:80px minmax(0,1fr);padding:var(--s4)}}

/* Both actions on one line inside the narrow certificate card. */
.cert__acts{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:10px}
.cert__acts .btn{white-space:nowrap}

/* ---- Lab card and test panel must match (2026-09-03) ----
   .proof__grid used align-items:start, so the two bordered cards beside each
   other ended at different heights (111px apart on the COA page, 280px on a
   PDP carrying a certificate thumbnail). Both now fill the row, and the test
   panel spreads its assay rows down the card instead of leaving dead space. */
.proof__grid{align-items:stretch}
.qc{display:grid;grid-template-rows:auto 1fr;gap:var(--s3)}
.qc__rows{display:grid;align-content:space-between;gap:0}
.qc__rows li:first-child{padding-top:0}
@media (max-width:900px){
  .qc{grid-template-rows:auto auto}
  .qc__rows{align-content:start}
}

/* ---- Storage as a full-width band under compound information ----
   It used to sit at the bottom of the right-hand aside, which made that
   column far taller than the prose beside it and left a large gap. */
.pdp__stor--band{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:start;padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.pdp__stor--band .microcap{align-self:center;white-space:nowrap;color:var(--ink-3)}
@media(max-width:900px){.pdp__stor--band{grid-template-columns:1fr}}

/* Lot as a matchable token on the certificate card, and the index's result column */
.cert__lots{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 2px}
.cert__lot{font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 8px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.coa-table__res{font-variant-numeric:tabular-nums}
@media (max-width:900px){.coa-table__res{display:none}}

/* ---- Catalog cards: let the photography carry the card (2026-09-03) ----
   The card framed every vial in 8px of grey, sat on a mid-grey border with a
   resting shadow, and squeezed price and CTA onto one 194px line. The media
   now runs corner to corner, the card is quiet at rest and does its work on
   hover, and the price gets its own row above a full-width button. */
.pcard{padding:0;background:var(--surface-2);border-color:var(--line);box-shadow:none;overflow:hidden}
.pcard:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 22px 46px -24px rgba(15,20,18,.38)}
.pcard__media{border-radius:0}
.pcard__media::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line);z-index:1}
.pcard__media img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pcard:hover .pcard__media img{transform:scale(1.035)}
.pcard__body{padding:16px 16px 0}
.pcard__name{position:relative;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__name::after{content:"";position:absolute;left:0;bottom:-3px;height:1.5px;width:0;background:var(--accent);transition:width .3s cubic-bezier(.2,.8,.2,1)}
.pcard:hover .pcard__name::after{width:26px}
.pcard__class{display:inline-block;margin-top:6px;padding:3px 8px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:10.5px;font-weight:600;color:var(--ink-3)}
.pcard .tag{top:12px;left:12px;padding:5px 9px;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.pcard .tag--muted{background:rgba(250,250,248,.92);color:var(--ink-3);border:1px solid var(--line)}
.pcard__foot{display:block;padding:0 16px 16px;margin-top:auto}
.pcard__price{display:block;font-size:19px;padding-bottom:2px}
.pcard__unit{display:block;font:400 10px/1.5 var(--font-mono);letter-spacing:.06em;color:var(--ink-3);margin:0 0 10px}
.pcard__add,.pcard__notify{width:100%;min-height:44px;font-size:13px;font-weight:700;justify-content:center}
/* the media well now reaches the card edge, so its own rounding must go */
.pcard__media,.pcard__media img{border-top-left-radius:0;border-top-right-radius:0}
@media(max-width:560px){.pcard__body{padding:14px 14px 0}.pcard__foot{padding:0 14px 14px}}
/* one column of filters fewer means a narrower rail and bigger cards */
.shop-body{grid-template-columns:196px minmax(0,1fr)}
@media(max-width:900px){.shop-body{grid-template-columns:1fr}}

/* ---- Catalog section headers (2026-09-03) ----
   Full-width rows inside the product grid, so the four named groups read as
   sections without the card columns shifting. Dotted leader between the title
   and its count, the way the rest of the site sets a numbered step. */
.pgrid__head{grid-column:1/-1;display:flex;align-items:baseline;gap:var(--s4);margin:var(--s7) 0 calc(var(--s2) * -1)}
.pgrid__head:first-child{margin-top:0}
.pgrid__n{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--accent);flex:none}
.pgrid__t{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);flex:none}
.pgrid__head::after{content:"";flex:1 1 auto;height:1px;align-self:center;background-image:radial-gradient(circle,var(--line-2) 1px,transparent 1px);background-size:6px 1px;background-repeat:repeat-x;background-position:0 50%}
.pgrid__c{flex:none;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:560px){.pgrid__t{font-size:19px}.pgrid__head{margin-top:var(--s6)}}

/* The sold-out divider now carries the same parts as a section header. */
.shop-split{align-items:baseline;gap:var(--s4)}
.shop-split #shopSplitLbl{display:contents}
.shop-split::after{align-self:center;background:none;background-image:radial-gradient(circle,var(--line-2) 1px,transparent 1px);background-size:6px 1px;background-repeat:repeat-x;background-position:0 50%;order:3}
.shop-split .pgrid__t{order:2}
.shop-split .pgrid__n{order:1}
.shop-split .pgrid__c{order:4;font-size:9.5px}

/* ---- Product media: a stack, not a carousel (2026-09-03) ----
   The slides used scroll-snap, so the photo slid sideways under the pointer
   and the certificate view was reachable only by dragging. They are stacked
   now and the thumbnails switch them outright. */
.pdp__slides{display:grid;overflow:hidden;scroll-snap-type:none;scroll-behavior:auto}
.pdp__slide{grid-area:1/1;flex:none;width:100%;visibility:hidden}
.pdp__slide.is-on{visibility:visible}
.pdp__dots{display:none}
/* The certificate thumbnail in the lab card was rotated 2deg, which read as a
   sticker stuck on the corner rather than part of the card. */
.lab__cert img{transform:none;border-radius:6px;box-shadow:0 6px 16px -10px rgba(10,10,11,.4)}
.lab__cert{align-items:start}

/* The lab card no longer carries a thumbnail, so its method list runs full width. */
.lab__cert{grid-template-columns:minmax(0,1fr)}

/* The lookup is one field: the count sits beside the button so typing has a
   visible response, instead of reporting 600px further down the page. */
.coa-lookup__form{grid-template-columns:minmax(0,1fr) auto auto}
.coa-lookup__form .coa-count{align-self:center;white-space:nowrap;font-size:var(--fs-2xs);color:var(--ink-3);padding-left:var(--s2)}
@media(max-width:700px){.coa-lookup__form{grid-template-columns:1fr}.coa-lookup__form .coa-count{padding-left:0}}

/* ---- COA header plate (2026-09-03) ----
   The document is portrait and the plate was 16/10, so the certificate sat
   small between two wide empty margins and the caption ran as one long
   uppercase line. The plate now follows the document's own proportion. */
.page-hd--media .page-hd__media--doc{aspect-ratio:auto;padding:20px;gap:12px;align-content:center;background:var(--surface)}
.page-hd--media .page-hd__media--doc img{width:100%;height:auto;max-height:none;max-width:340px;margin-inline:auto}
.page-hd--media .page-hd__media--doc a{height:auto;width:100%}
.page-hd__cap{display:grid;gap:2px;text-align:center;font-size:var(--fs-2xs);line-height:1.45;color:var(--ink-3);text-transform:none;letter-spacing:0}
.page-hd__cap b{font-weight:700;color:var(--ink-2);font-size:var(--fs-xs)}
@media(max-width:900px){.page-hd--media .page-hd__media--doc img{max-width:260px}}

/* ============================================================
   2026-09-03 late: shop strip, catalog cards, PDP plate, COA hero
   ============================================================ */
/* The shop header no longer draws a rule under itself; the ways strip closes it. */
.page-hd--open{border-bottom:0;padding-bottom:clamp(18px,2.4vw,28px)}
.ways-wrap{padding-block:0 clamp(22px,3vw,34px);border-bottom:1px solid var(--line)}
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.way{display:grid;align-content:start;gap:6px;padding:22px 26px 22px 0;color:inherit;text-decoration:none;position:relative}
.way + .way{padding-left:26px;border-left:1px solid var(--line)}
.way__eye{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-dark)}
.way__t{font-size:16px;font-weight:700;letter-spacing:-.012em;line-height:1.3;color:var(--ink)}
.way__d{font-size:var(--fs-2xs);line-height:1.55;color:var(--ink-3)}
.way__go{margin-top:6px;font-size:var(--fs-xs);font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.way__go::after{content:"";width:14px;height:1.5px;background:currentColor;transition:width .2s ease}
.way:hover .way__go{color:var(--accent-dark)}
.way:hover .way__go::after{width:22px}
@media(max-width:860px){.ways{grid-template-columns:1fr}.way{padding:18px 0}.way + .way{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

/* Catalog cards: one clear hierarchy, no duplicate labels, no lot codes. */
.pcard__body{padding:14px 16px 0}
.pcard__cat{font-size:10px;letter-spacing:.16em;color:var(--ink-3)}
.pcard__name{margin-top:6px;font-size:16px;font-weight:700;letter-spacing:-.012em;line-height:1.28;min-height:0}
.pcard__name::after{display:none}
.pcard__dose{font-weight:500;color:var(--ink-3)}
.pcard__spec{margin-top:6px;min-height:36px;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.pcard__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px 0;font-size:12px;color:var(--ink-3)}
.pcard__sizes{margin-left:auto;gap:4px}
.pcard__sizes a,.pcard__sizes b{min-height:24px;padding:0 9px;font-size:11.5px;border-radius:6px}
.pcard__foot{padding:12px 16px 16px}
.pcard__price-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.pcard__price{font-size:22px;font-weight:800;letter-spacing:-.02em}
.pcard__price i{font-size:13px;margin-right:2px;color:var(--ink-3)}
.pcard__unit{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.pcard__add{min-height:42px;border-radius:10px}
.pcard__coa{right:10px;bottom:10px;padding:4px 8px;font-size:10.5px}
.pcard__media::after{display:none}

/* PDP plate: a true square with the two views centred beneath it, and nothing drags. */
.pdp__stage{padding:0 0 12px;background:var(--surface)}
.pdp__stage img,.pdp__thumb img{-webkit-user-drag:none;user-drag:none;user-select:none;-webkit-user-select:none}
.pdp__thumb img{pointer-events:none}
.pdp__thumbs{justify-content:center;gap:10px;margin:12px 0 0;padding:0 12px}
.pdp__thumb{width:58px;height:58px;border-radius:10px;background:var(--vial-well)}
.pdp__thumb.is-active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pdp__lot-chip{display:none!important}

/* COA cards: the compound's own render, square, on the cream well. */
.cert__thumb--vial{width:104px;height:104px;border-radius:12px;background:var(--vial-well);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;flex:none}
.cert__thumb--vial img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:560px){.cert__thumb--vial{width:88px;height:88px}}

/* The certificate box on the PDP now carries a sentence, not a lot code. */
.pdp__batch-txt b,.pdp__lot-txt b{font-family:inherit;letter-spacing:-.01em}

/* Index table: the compound's render, square on the cream well, instead of a 34px document. */
.coa-table__thumb--vial{width:34px;height:34px;object-fit:cover;border-radius:7px;background:var(--vial-well);border:1px solid var(--line)}

/* ============================================================
   Full-bleed page heroes (catalog + COA), 2026-09-03 evening
   ============================================================ */
.page-hd--bleed{background:var(--vial-well);border-bottom:0;padding-block:clamp(34px,4.6vw,64px) clamp(30px,4vw,56px);overflow:hidden}
.page-hd--bleed .eyebrow{color:var(--tan-ink)}
.page-hd__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center}
.page-hd__grid--coa{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
.page-hd__h1{font-size:clamp(40px,5.4vw,66px);line-height:1.02;letter-spacing:-.035em;margin:10px 0 18px;max-width:14ch}
.page-hd__h1 em{font-style:italic;color:var(--tan-ink);font-weight:800}
.page-hd--bleed .lede{max-width:52ch;margin-bottom:18px}
.page-hd--bleed .page-hd__meta{margin-bottom:22px}
.hd-facts{list-style:none;margin:0;padding:18px 0 0;display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(10,10,11,.14)}
.hd-facts li{display:grid;gap:4px;padding:0 26px 0 0;margin-right:26px;border-right:1px solid rgba(10,10,11,.14)}
.hd-facts li:last-child{border-right:0;margin-right:0;padding-right:0}
.hd-facts__k{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.hd-facts b{font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.page-hd__cta{margin-top:26px;border-radius:var(--r-pill);padding-inline:26px}
.page-hd__art{margin:0;min-width:0;position:relative}
.page-hd__art img{display:block;width:118%;max-width:none;height:auto;margin-left:-9%;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 62% 66% at 50% 52%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 62% 66% at 50% 52%,#000 58%,transparent 100%)}
/* lookup inside the COA hero */
.coa-lookup--hero{background:none;border:0;padding:0;margin:0 0 22px;box-shadow:none}
.coa-lookup--hero .field__label{display:none}
.coa-lookup--hero .coa-lookup__form{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px}
.coa-lookup--hero input{background:var(--surface-2);border-color:rgba(10,10,11,.18);min-height:52px;font-size:15px}
.coa-lookup--hero .coa-lookup__hint{grid-column:1/-1;margin:6px 0 0;color:var(--ink-3)}
/* dark proof card */
.hero-proof{background:linear-gradient(128deg,var(--accent-dark) 0%,#123B32 100%);color:#fff;border-radius:22px;padding:24px 26px 22px;display:grid;gap:14px;box-shadow:0 30px 60px -30px rgba(10,30,24,.55)}
.hero-proof[hidden]{display:none}
.hero-proof__top{display:flex;align-items:center;gap:12px}
.hero-proof__mark{width:40px;height:40px;border-radius:10px;background:#fff;color:var(--accent-dark);display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;flex:none}
.hero-proof__who{display:grid;gap:2px;min-width:0}
.hero-proof__who b{font-size:15px;font-weight:700}
.hero-proof__who span{font-size:11.5px;color:rgba(255,255,255,.66)}
.hero-proof__pass{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hero-proof__eye{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.hero-proof__eye b{color:#fff;font-weight:600;letter-spacing:.04em}
.hero-proof__main{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hero-proof__big b{display:block;font-size:clamp(46px,4.6vw,62px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.hero-proof__big b i{font-style:normal;font-size:.5em;color:var(--tan);margin-left:2px}
.hero-proof__big span{display:block;margin-top:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.hero-proof__vial{width:112px;height:112px;object-fit:cover;border-radius:16px;background:var(--vial-well);flex:none;box-shadow:0 14px 30px -16px rgba(0,0,0,.6)}
.hero-proof__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.hero-proof__grid div{display:grid;gap:3px;min-width:0}
.hero-proof__grid dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.hero-proof__grid dd{margin:0;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-proof__note{margin:0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.72)}
.hero-proof__cta.btn{background:#fff;color:var(--accent-dark);border-color:#fff;min-height:50px;font-weight:700;margin-top:4px}
.hero-proof__cta.btn:hover{background:var(--tan);border-color:var(--tan);color:var(--ink)}
/* cards: price as one figure, size pills on their own row */
.pcard__price{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.pcard__unit{font-family:inherit;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.pcard__meta{flex-wrap:wrap;row-gap:8px}
.pcard__sizes{margin-left:0;flex-basis:100%}
@media(max-width:900px){
  .page-hd__grid,.page-hd__grid--coa{grid-template-columns:1fr;gap:18px}
  .page-hd__art{order:-1}.page-hd__art img{width:112%;margin-left:-6%}
  .page-hd__h1{font-size:clamp(34px,9vw,46px);max-width:none}
  .hd-facts li{padding-right:16px;margin-right:16px}.hd-facts b{font-size:20px}
  .hero-proof__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .coa-lookup--hero .coa-lookup__form{grid-template-columns:1fr}
}

/* ============================================================
   PDP buy box to the reference layout (2026-09-03 evening)
   ============================================================ */
.pdp__stage{border:0;box-shadow:none;border-radius:22px;background:radial-gradient(ellipse 70% 60% at 50% 42%,#F6F1E6 0%,var(--vial-well) 62%,#E6DCC8 100%);padding:0 0 14px}
.pdp__slide{aspect-ratio:4/5}
.pdp__slide--image{background:transparent}
.pdp__slide--image img{object-fit:contain;mix-blend-mode:multiply;padding:6%}
.pdp__thumbs{margin-top:8px}
.pdp__cat{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.pdp__title{margin:8px 0 12px}
.pdp__chips{margin-bottom:14px}
.pdp__desc{margin:0 0 6px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.pdp__specline{margin:0 0 14px;font-size:13px;color:var(--ink-3)}
.pdp__meta{margin:0 0 18px}
.pdp__meta .pill--ok{background:transparent;border:0;padding:0;font-weight:700;color:var(--ink)}
.pdp__meta .pill--ok::before{background:var(--accent)}
.pdp__variants{display:flex;align-items:center;gap:18px;margin:0 0 16px}
.pdp__variants-h{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);flex:none;min-width:84px}
.pdp__variant-row{display:flex;flex-wrap:wrap;gap:8px}
.pdp__qtyprice{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:16px}
.pdp__qtyprice-l{display:flex;align-items:center;gap:18px}
.pdp__qtyprice-r .pdp__price-row{display:grid;justify-items:end;gap:2px;margin:0}
.pdp__qtyprice-r .pdp__price{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1}
.pdp__qtyprice-r .pdp__per{font-size:12px;color:var(--ink-3)}
.pdp__batch{margin:0 0 18px}
.pdp__opts-head{margin-bottom:10px}
.pdp__opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.pdp__opt{display:grid;justify-items:center;gap:4px;padding:14px 8px 12px;text-align:center;border-radius:14px}
.pdp__opt-label{font-size:12.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;display:grid;justify-items:center;gap:2px}
.pdp__opt-off{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--accent-dark);text-transform:none;letter-spacing:0}
.pdp__opt-price{font-size:12px;color:var(--ink-3)}
.pdp__opt.is-active .pdp__opt-price{color:var(--ink-2)}
.pdp__add{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin-bottom:14px}
.pdp__add .pdp__coa-btn{border-radius:var(--r-pill);padding-inline:26px}
.pdp__add #pdpAddBtn{background:var(--ink);border-color:var(--ink);color:#fff;border-radius:var(--r-pill);font-size:16px;font-weight:700}
.pdp__add #pdpAddBtn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.pdp__cutoff{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;padding:12px 16px;border-radius:14px;background:#E8F2EC;border:1px solid #CFE3D7;color:var(--ink);font-size:13.5px;line-height:1.45}
.pdp__cutoff b{color:var(--accent-dark)}
.pdp__ship{margin:0 0 12px;font-size:13px;color:var(--ink-3)}
.pdp__assure{margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pdp__assure li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);font-size:13.5px}
.pdp__assure li:first-child{border-top:0;background:var(--surface)}
@media(max-width:700px){
  .pdp__opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp__qtyprice{flex-wrap:wrap}
  .pdp__variants{align-items:flex-start;flex-direction:column;gap:8px}
}

/* Facts row: a fixed four-up so the last item never drops to a second line; proof card cells wrap. */
.hd-facts{display:grid;grid-template-columns:repeat(4,max-content);column-gap:0}
.hd-facts li{padding-right:22px;margin-right:22px}
.hero-proof__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
.hero-proof__grid dd{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
@media(max-width:1100px){.hd-facts{grid-template-columns:repeat(2,max-content);row-gap:14px}.hd-facts li:nth-child(2){border-right:0}}
@media(max-width:900px){.hd-facts{grid-template-columns:repeat(2,minmax(0,max-content))}}

/* Storage tiles stretch to the taller sibling; bundle tile prices sit on two tidy lines. */
.pdp__stor--band{align-items:stretch}
.pdp__stor--band .pdp__stor-tile{height:100%;box-sizing:border-box}
.pdp__opt-price{font-size:12.5px;line-height:1.3;font-weight:700;color:var(--ink)}
.pdp__opt-price small{display:block;font-size:11px;font-weight:500;color:var(--ink-3)}

/* Size pills are buttons now (in-place swap); same look as before. */
.pcard__sizes button{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border:1px solid var(--line-2);border-radius:6px;font:inherit;font-size:11.5px;font-weight:500;color:var(--ink-2);background:transparent;cursor:pointer;line-height:1}
.pcard__sizes button:hover{border-color:var(--accent);color:var(--accent-dark)}
.pcard__sizes b{border-radius:6px}
/* PDP plate: still, square, and the render fills it exactly, so nothing shifts or follows the scroll. */
.pdp__stage{position:static;top:auto;background:var(--vial-well);border-radius:22px;overflow:hidden}
.pdp__slide{aspect-ratio:1}
.pdp__slide--image{background:var(--vial-well)}
.pdp__slide--image img{object-fit:cover;padding:0;mix-blend-mode:normal}
.pdp__thumbs{background:var(--surface);margin:0;padding:12px}

/* ============================================================
   Catalog hero: vials painted as the band's own background (no image box to crop).
   COA library: continues the cream band. PDP: bulk strip, mini related, about, FAQ.
   ============================================================ */
/* (The earlier background-image catalog hero was removed 2026-09-03: every declaration in it was
   overridden by the cutout hero block below, and it still pointed at the slow PHP-routed asset path.) */
.coa-lib-sec{background:var(--vial-well);padding-top:0!important;margin-top:-1px}
.coa-lib-sec .cert{background:var(--surface-2);border-color:rgba(10,10,11,.10);box-shadow:0 18px 40px -30px rgba(10,20,16,.35)}
.coa-lib-sec .cert__thumb--vial{border-color:rgba(10,10,11,.08)}
.page-hd--bleed + .coa-lib-sec{padding-top:clamp(18px,2.6vw,34px)!important}
/* bulk strip on the PDP */
.mws--strip{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s6);padding:22px 0;background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0}
.mws--strip h3{font-size:18px;margin:6px 0 6px;letter-spacing:-.012em}
.mws--strip p{max-width:70ch}
@media(max-width:700px){.mws--strip{grid-template-columns:1fr}}
/* related: six small cards */
.pgrid--6{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pgrid--mini .pcard__body{padding:10px 12px 0}
.pgrid--mini .pcard__cat{font-size:9px;letter-spacing:.14em}
.pgrid--mini .pcard__name{font-size:13.5px;line-height:1.25;margin-top:4px}
.pgrid--mini .pcard__spec,.pgrid--mini .pcard__meta{display:none}
.pgrid--mini .pcard__foot{padding:8px 12px 12px}
.pgrid--mini .pcard__price-row{margin-bottom:8px}
.pgrid--mini .pcard__price{font-size:17px}
.pgrid--mini .pcard__unit{font-size:11px}
.pgrid--mini .pcard__add,.pgrid--mini .pcard__notify{min-height:36px;font-size:12.5px;border-radius:8px}
.pgrid--mini .pcard__coa{padding:3px 6px;font-size:9.5px;right:8px;bottom:8px}
@media(max-width:1100px){.pgrid--6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.pgrid--6{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* compound information */
.pdp__about{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}
.pdp__about-main{max-width:none}
.hd-facts--about{margin:14px 0 18px;padding-top:14px;border-top:1px solid var(--line);grid-template-columns:repeat(4,max-content)}
.hd-facts--about b{font-size:16px;letter-spacing:-.01em}
.hd-facts--about li{border-right-color:var(--line)}
.pdp__about-p--lead{font-size:17px;line-height:1.6;color:var(--ink);margin-top:0}
.pdp__about-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.pdp__about-card{padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.pdp__about-card .pdp__about-p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.pdp__about-ruo{margin-top:18px}
.pdp__glance{padding:22px 24px}
.pdp__glance-row{grid-template-columns:118px minmax(0,1fr);gap:12px;padding:9px 0;font-size:13.5px}
.pdp__glance-row dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.pdp__glance-row dd{text-align:left;font-weight:600;line-height:1.4}
.pdp__mol{margin-top:16px;padding-top:12px}
@media(max-width:900px){.pdp__about-cols{grid-template-columns:1fr}.hd-facts--about{grid-template-columns:repeat(2,minmax(0,max-content))}}
/* FAQ on the PDP: two columns */
.pdp__faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:none}
.pdp__faq .qa{margin:0;align-self:start}
@media(max-width:800px){.pdp__faq{grid-template-columns:1fr}}
/* closing band as the deep plate, stats on a hairline */
.band--single{background:linear-gradient(128deg,var(--accent-dark) 0%,#123B32 100%);color:#fff}
.band--single .eyebrow{color:var(--tan)}
.band--single h2,.band--single .lede{color:#fff}
.band--single .lede{color:rgba(255,255,255,.8);max-width:56ch}
.band--single .btn--inv{background:#fff;color:var(--accent-dark);border-color:#fff}
.pdp__close-stats{display:flex;gap:28px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}
.pdp__close-stats b{color:#fff}.pdp__close-stats span,.pdp__close-stats small{color:rgba(255,255,255,.7)}

/* Mini related cards: no class tag on the photo, price as one figure. */
.pgrid--mini .pcard__media .tag:not(.tag--muted){display:none}
.pgrid--mini .pcard__price i{font-size:inherit;font-style:normal;margin:0;color:inherit}

/* Closing band: no pale highlight in the corner; the molecular rows are on the facts strip already. */
.band--single::before,.band--single::after{display:none}
.pdp__about:has(#pdpFacts:not([hidden])) .pdp__mol{display:none}

/* ---- Certificate cards v2: the vial lives in its own media area, so nothing sits on the card like a sticker. ---- */
.coa-lib-sec{background:var(--canvas)}
.coa-lib-sec .cert{box-shadow:none}
.cert-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cert--v2{display:flex;flex-direction:column;padding:0;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);border-radius:18px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.cert--v2:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 22px 46px -26px rgba(15,20,18,.35)}
.cert__media{position:relative;display:block;aspect-ratio:1;background:var(--vial-well);width:auto;height:auto;border:0;border-radius:0}
.cert__media img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.cert__pill{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.cert__pill b{color:var(--accent-dark);letter-spacing:0;font-variant-numeric:tabular-nums}
.cert--v2 .cert__body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;flex:1}
.cert__cat{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.cert--v2 .cert__name{font-size:15px;font-weight:700;line-height:1.28;letter-spacing:-.01em;margin:2px 0 6px;min-height:0;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.cert__big{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.cert__big i{font-style:normal;font-size:.5em;color:var(--ink-3);margin-left:1px}
.cert--v2 .cert__sub{font-size:12px;color:var(--ink-3)}
.cert--v2 .cert__meta{font-size:12px;color:var(--ink-3);margin-top:2px}
.cert--v2 .cert__acts{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cert--v2 .cert__acts .btn{min-height:38px;border-radius:9px}
.cert__link{font-size:12.5px;font-weight:600;color:var(--ink-2)}
@media(max-width:1100px){.cert-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.cert-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* ---- PDP: the image column runs the full height of the buy box (reference layout) ---- */
@media(min-width:901px){
  .pdp{align-items:stretch}
  .pdp__stage{position:static;height:100%;display:flex;flex-direction:column;min-height:0}
  .pdp__carousel{flex:1 1 auto;min-height:0;display:flex}
  .pdp__slides{flex:1 1 auto;height:auto}
  .pdp__slide{aspect-ratio:auto;height:100%;min-height:560px}
  .pdp__slide--image img{object-fit:cover;object-position:center}
  .pdp__thumbs{flex:none}
  /* the glance card sticks and stays level with the copy */
  .pdp__about{align-items:start}
  .pdp__glance{position:sticky;top:calc(var(--promo-h,36px) + var(--nav-h,72px) + 16px);align-self:start;margin-top:0}
}
.pcard__unit{display:none}

/* PDP plate: the render sits at its natural size on a gradient sampled from its own cream
   (top ~#F1EBDB, bottom ~#EDE5D3), so the square's edges disappear instead of the vial being zoomed. */
@media(min-width:901px){
  .pdp__slide--image{background:linear-gradient(180deg,#F1EBDB 0%,#EDE5D3 100%)}
  .pdp__slide--image img{object-fit:contain;object-position:center;max-height:none}
  .pdp__stage{background:linear-gradient(180deg,#F1EBDB 0%,#EDE5D3 100%)}
}

/* ---- The cream hero dissolves into the section below instead of ending on a hard edge ---- */
.page-hd--bleed{border-bottom:0}
.page-hd--bleed + section,.page-hd--bleed + .section,.page-hd--bleed + .ways-wrap{position:relative;isolation:isolate}
.page-hd--bleed + section::before,.page-hd--bleed + .section::before,.page-hd--bleed + .ways-wrap::before{content:"";position:absolute;left:0;right:0;top:0;height:220px;background:linear-gradient(180deg,var(--vial-well) 0%,rgba(239,231,214,.55) 40%,rgba(239,231,214,0) 100%);z-index:-1;pointer-events:none}
.page-hd--bleed + .section{padding-top:clamp(40px,5vw,72px)}
.page-hd--bleed + .ways-wrap{padding-top:0}
.page-hd--bleed + .ways-wrap .ways{border-top-color:rgba(10,10,11,.12)}

/* ============================================================
   2026-09-03 final pass: hero blend, PDP top at half height, even compound section
   ============================================================ */
/* Catalog hero: the cutout sits in a soft cream glow with a wider contact shadow, so it reads as photographed on the band. */
.page-hd--vials .page-hd__art::before{content:"";position:absolute;inset:-6% -8% -4% -8%;border-radius:50%;background:radial-gradient(ellipse at 50% 58%,rgba(255,252,246,.9) 0%,rgba(255,252,246,.45) 38%,rgba(239,231,214,0) 72%);z-index:0}
.page-hd--vials .page-hd__art::after{left:6%;right:4%;bottom:3%;height:16%;background:radial-gradient(ellipse at center,rgba(70,52,24,.30),rgba(70,52,24,.10) 45%,rgba(70,52,24,0) 72%);filter:blur(10px);z-index:0}
.page-hd--vials .page-hd__art img{filter:drop-shadow(0 18px 22px rgba(60,45,20,.18))}
/* PDP top: a wider square plate the render fills, beside a compact buy box; about half a screen, not a screen and a half. */
@media(min-width:901px){
  .pdp{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start;gap:clamp(24px,3.4vw,44px)}
  .pdp__stage{height:auto;display:block;background:var(--vial-well)}
  .pdp__carousel{display:block}
  .pdp__slides{height:auto}
  .pdp__slide{aspect-ratio:1;height:auto;min-height:0}
  .pdp__slide--image{background:var(--vial-well)}
  .pdp__slide--image img{object-fit:cover;object-position:center}
  .pdp__title{font-size:clamp(32px,3.2vw,42px);margin:6px 0 10px}
  .pdp__desc{font-size:14.5px;line-height:1.55;margin-bottom:4px}
  .pdp__specline{margin-bottom:10px}
  .pdp__meta{margin-bottom:12px}
  .pdp__variants{margin-bottom:12px}
  .pdp__qtyprice{padding:12px 0;margin-bottom:12px}
  .pdp__batch{margin-bottom:12px}
  .pdp__opts{margin-bottom:10px}
  .pdp__add{margin-bottom:10px}
  .pdp__cutoff{margin-bottom:8px}
  .pdp__ship{display:none}
  .pdp__assure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp__assure li{border-top:0;border-bottom:1px solid var(--line);padding:10px 14px;font-size:12.5px}
  .pdp__assure li:nth-child(odd){border-right:1px solid var(--line)}
  .pdp__assure li:first-child{background:transparent}
  .pdp__assure li:nth-last-child(-n+2){border-bottom:0}
}
/* Compound information: both columns end together; the research-use note runs under both. */
@media(min-width:901px){
  .pdp__about{align-items:stretch}
  .pdp__glance{position:static;height:100%;box-sizing:border-box}
}
.pdp__about-ruo--wide{grid-column:1/-1;margin-top:4px}
/* Storage and handling band is not shown on the PDP. */
#pdpStorSec,.pdp__stor--band{display:none!important}

/* PDP: the plate runs exactly the height of the (compact) buy box, so the two columns line up top and bottom
   like the reference; the render fills the plate with a centred cover crop. */
@media(min-width:901px){
  .pdp{align-items:stretch}
  .pdp__stage{height:100%;max-height:880px;display:flex;flex-direction:column;min-height:0}
  .pdp__carousel{flex:1 1 auto;min-height:0;display:flex}
  .pdp__slides{flex:1 1 auto;height:auto;min-height:0}
  .pdp__slide{aspect-ratio:auto;height:100%;min-height:520px}
  .pdp__slide--image img{object-fit:cover;object-position:center}
  .pdp__thumbs{flex:none}
}

/* ---- Shop hero: shorter, and the vials without the halo ---- */
.page-hd--vials{padding-block:clamp(22px,3vw,40px) clamp(18px,2.6vw,34px)}
.page-hd--vials .page-hd__h1{font-size:clamp(34px,4.2vw,52px);margin:8px 0 12px}
.page-hd--vials .lede{font-size:15.5px;margin-bottom:12px;max-width:48ch}
.page-hd--vials .page-hd__meta{margin-bottom:14px}
.page-hd--vials .hd-facts{padding-top:12px}
.page-hd--vials .hd-facts b{font-size:20px}
.page-hd--vials .page-hd__cta{margin-top:18px;min-height:46px}
.page-hd--vials .page-hd__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(20px,3vw,48px)}
.page-hd--vials .page-hd__art{max-width:520px;padding-bottom:10px}
.page-hd--vials .page-hd__art::before{display:none}
.page-hd--vials .page-hd__art::after{left:12%;right:10%;bottom:0;height:9%;background:radial-gradient(ellipse at center,rgba(70,52,24,.22),rgba(70,52,24,.06) 55%,rgba(70,52,24,0) 75%);filter:blur(6px)}
.page-hd--vials .page-hd__art img{filter:drop-shadow(0 10px 14px rgba(60,45,20,.14))}
@media(max-width:900px){.page-hd--vials .page-hd__art{max-width:66%}.page-hd--vials .page-hd__h1{font-size:clamp(30px,8vw,40px)}}

/* COA assay explainers: four-up so eight cards fill two rows; the summary cards follow without a gap. */
.coa-assays.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.coa-assays .info-card h3{font-size:17px}
.coa-assays .info-card p{font-size:13px}
@media(max-width:1100px){.coa-assays.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.coa-assays.grid-4{grid-template-columns:1fr}}
.section--soft + .section--soft.section--flush-top{padding-top:0}

/* Phone: the shop hero is one column again (the desktop grid rule above must not reach here). */
@media(max-width:900px){
  .page-hd--vials .page-hd__grid{grid-template-columns:1fr!important;gap:14px}
  .page-hd--vials .page-hd__art{order:-1;justify-self:center;max-width:64%;margin:0 auto 4px;padding-bottom:6px}
  .page-hd--vials .page-hd__h1{max-width:none}
  .page-hd--vials .lede{max-width:none}
  .page-hd--vials .hd-facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .page-hd--vials .hd-facts li{padding-right:12px;margin-right:12px}
  .page-hd--vials .hd-facts b{font-size:18px}
}

/* Phone: compound information stacks (a later desktop rule had leaked past the breakpoint). */
@media(max-width:900px){.pdp__about{grid-template-columns:1fr!important;gap:18px}.pdp__glance{height:auto}}

/* ============================================================
   PDP to the reference structure (2026-09-03, late)
   ============================================================ */
@media(min-width:901px){
  .pdp__stage{background:radial-gradient(ellipse 70% 62% at 50% 46%,#F4EFE3 0%,#EFE7D6 58%,#E9E0CC 100%)}
  .pdp__slide--image{background:transparent}
  .pdp__slide--image img{object-fit:contain;object-position:center;padding:16% 20%;mix-blend-mode:multiply}
}
.pdp__thumbs,.pdp__dots{display:none!important}
.pdp__stage{padding-bottom:0}
/* bundle tiles: everything centred, including the active tile */
.pdp__opt,.pdp__opt.is-active{display:grid;justify-items:center;align-content:center;text-align:center;gap:4px;padding:14px 8px 12px}
.pdp__opt-label{justify-items:center;text-align:center}
.pdp__opt-price{text-align:center}
/* compound information as two spec cards */
.pdp__info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pdp__info-card{padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2)}
.pdp__info-card h3{margin:8px 0 14px;font-size:20px;letter-spacing:-.015em}
.pdp__info-list{margin:0;display:grid}
.pdp__info-list .pdp__glance-row{grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:11px 0;font-size:14px}
.pdp__info-list .pdp__glance-row dt{font-family:inherit;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--ink-3);padding-top:0}
.pdp__info-list .pdp__glance-row dd{text-align:right;font-weight:700;color:var(--ink)}
.pdp__info-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.pdp__info-chips span{padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--surface)}
.pdp__temp{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--surface);margin-top:10px}
.pdp__temp b{display:grid;place-items:center;height:44px;border-radius:10px;background:var(--tan);color:var(--tan-ink);font-size:13px;font-weight:800;letter-spacing:-.01em}
.pdp__temp strong{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.pdp__temp span{display:block;font-size:12.5px;line-height:1.5;color:var(--ink-3);margin-top:2px}
.pdp__notice{padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2)}
.pdp__notice p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.pdp__notice p b{color:var(--ink)}
@media(max-width:900px){.pdp__info{grid-template-columns:1fr}}

/* Bundle tiles: centred at higher specificity than the original tile rules. */
.pdp__opts .pdp__opt,.pdp__opts .pdp__opt.is-active,.pdp__opts .pdp__opt--bulk{display:grid!important;justify-items:center!important;align-content:center;text-align:center!important;gap:4px}
.pdp__opts .pdp__opt > *{justify-self:center;text-align:center;width:100%}
.pdp__opts .pdp__opt-label{display:grid;justify-items:center}
.pdp__opts .pdp__opt-tag{position:absolute;left:50%;transform:translateX(-50%);width:auto}

/* PDP plate: the cutout floats on a soft cream gradient at every width; no square, no blend. */
.pdp__stage,.pdp__slide--image{background:radial-gradient(ellipse 72% 64% at 50% 46%,#F5F0E4 0%,#EFE7D6 55%,#E8DFCB 100%)}
.pdp__slide--image img{object-fit:contain!important;object-position:center;padding:9% 13%;mix-blend-mode:normal!important;filter:drop-shadow(0 22px 26px rgba(60,45,20,.16))}
@media(min-width:901px){.pdp__slide--image img{padding:11% 16%}}
@media(max-width:900px){.pdp__slide{aspect-ratio:1;height:auto}}

/* The tile's single grid track was auto-sized to its content and sat at the start; make the track span the tile. */
.pdp__opts .pdp__opt,.pdp__opts .pdp__opt.is-active{grid-template-columns:minmax(0,1fr)!important;justify-content:center!important}

/* The plate runs exactly as tall as the buy box, whatever the buy box needs; the cutout is sized by the plate's width, so the vial stays the same size. */
@media(min-width:901px){
  .pdp{align-items:stretch}
  .pdp__stage{max-height:none;height:100%}
  .pdp__carousel,.pdp__slides,.pdp__slide{height:100%}
  .pdp__slide{min-height:0}
  .pdp__slide--image img{object-position:center 46%}
}

/* Buy-box trust rows: one column, icon + bold line + one short line, like the reference. */
@media(min-width:901px){
  .pdp__assure{display:block}
  .pdp__assure li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:center;padding:11px 14px;border:0;border-top:1px solid var(--line);font-size:13px}
  .pdp__assure li:first-child{border-top:0}
  .pdp__assure li:nth-child(odd){border-right:0}
}
.pdp__assure li b{font-size:13.5px;font-weight:700;color:var(--ink)}
.pdp__assure li span:not(.pdp__pay){font-size:12.5px;color:var(--ink-3);line-height:1.45}
.pdp__assure li > svg,.pdp__assure li > .ico,.pdp__assure li > span:first-child svg{grid-row:1/span 2}
.pdp__assure-pay .pdp__pay{display:inline;font-size:12.5px;color:var(--ink-3)}
.pdp__assure-pay .pdp__pay i,.pdp__assure-pay .pdp__pay span{display:inline;border:0;padding:0;margin:0;background:none;font:inherit;font-style:normal;letter-spacing:0;text-transform:none;color:inherit}
.pdp__assure-pay .pdp__pay i + i::before,.pdp__assure-pay .pdp__pay span + span::before{content:" \00b7 "}
/* Bulk strip badge: solid, not a ring. */
.mws--badge{grid-template-columns:auto minmax(0,1fr) auto;gap:22px}
.mws__pct{width:76px;height:76px;border-radius:22px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);color:#fff;display:grid;place-items:center;align-content:center;line-height:1;text-align:center;box-shadow:0 14px 28px -16px rgba(20,60,50,.6);flex:none}
.mws__pct b{font-size:24px;font-weight:800;letter-spacing:-.03em}
.mws__pct small{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
@media(max-width:700px){.mws--badge{grid-template-columns:1fr}.mws__pct{width:64px;height:64px;border-radius:18px}}

/* Trust rows use <span><b>title</b><small>line</small></span>; lay the pair out as two tight lines. */
.pdp__assure li > span:not(.pdp__pay){display:grid;gap:2px;min-width:0}
.pdp__assure li small{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.pdp__assure li > svg{width:18px;height:18px;color:var(--accent-dark)}

/* ============================================================
   PDP top: shorter column, larger vial (2026-09-03, final)
   The buy box drove the plate height (1215px = taller than a laptop screen),
   and a tall plate shrank the contained render. Tighten every block, put the
   trust rows back in a 2x2, and let the vial fill more of the plate.
   ============================================================ */
@media(min-width:901px){
  .pdp__title{font-size:clamp(30px,2.9vw,38px);margin:4px 0 8px}
  .pdp__chips{margin-bottom:10px;gap:6px}
  .pdp__chips > *{padding:4px 9px;font-size:10px}
  .pdp__desc{font-size:14px;line-height:1.5;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .pdp__specline{margin-bottom:8px}
  .pdp__meta{margin-bottom:10px}
  .pdp__variants{margin-bottom:10px}
  .pdp__qtyprice{padding:10px 0;margin-bottom:10px}
  .pdp__qtyprice-r .pdp__price{font-size:29px}
  .pdp__batch{margin-bottom:10px;padding:11px 13px}
  .pdp__opts-head{margin-bottom:8px}
  .pdp__opts{margin-bottom:9px;gap:7px}
  .pdp__opt{padding:11px 6px 10px}
  .pdp__add{margin-bottom:9px}
  .pdp__add #pdpAddBtn,.pdp__add .pdp__coa-btn{min-height:52px}
  .pdp__cutoff{margin-bottom:8px;padding:10px 13px;font-size:12.5px}
  /* trust rows: 2x2 with the payment row spanning, single line each */
  .pdp__assure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp__assure li{grid-template-columns:18px minmax(0,1fr);column-gap:9px;padding:9px 12px;border-top:1px solid var(--line)}
  .pdp__assure li:nth-child(1),.pdp__assure li:nth-child(2){border-top:0}
  .pdp__assure li:nth-child(odd){border-right:1px solid var(--line)}
  .pdp__assure li b{font-size:12.5px}
  .pdp__assure li small{font-size:11.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .pdp__assure li > svg{width:16px;height:16px}
  .pdp__assure-pay{grid-column:1/-1;border-right:0!important}
  /* the render fills the plate instead of floating in it */
  .pdp__slide--image img{padding:5% 7%!important;object-position:center 50%}
}

/* Floating hero composition: wider than the old upright trio, no ellipse under it (the art carries its own shadows). */
.page-hd--vials .page-hd__art{max-width:660px}
.page-hd--vials .page-hd__art::after{display:none}
.page-hd--vials .page-hd__art img{filter:none}
@media(max-width:900px){.page-hd--vials .page-hd__art{max-width:88%}}

/* Two-vial hero: wider than tall, so give it room and keep it optically centred. */
.page-hd--vials .page-hd__art{max-width:600px}
@media(max-width:900px){.page-hd--vials .page-hd__art{max-width:82%}}

/* Tier cards keep their filled height from the first frame (2026-09-03): the price fills in
   once cart.js has priced the pack and must not grow the row when it does (two lines: 16.25 + 14.3px). */
.pdp__opt-price{min-height:31px}

/* ==== Catalog hero v4 (2026-09-03): the Disguised catalog hero, ported. Same architecture (rule strip,
   headline, three-vial fan with reflections and a slow float, stats row with an accent tick, pill CTA),
   Helion's palette and type. Fan geometry comes from the cut renders' measured alpha box: the vial fills
   the middle 44% of the 820px square, 91.8% of its height, base at 96%. ==== */
.chero{--gr-w:.44;--gr-h:.918;--gr-bot:.96;--gh:clamp(158px,18vw,326px);--sq:calc(var(--gh) / var(--gr-h));--gw:calc(var(--sq) * var(--gr-w));--drop:calc(var(--sq) * (1 - var(--gr-bot)));position:relative;z-index:2;background:var(--vial-well);color:var(--ink);padding:0 0 clamp(42px,4.4vw,66px);overflow:visible;border-bottom:0}
.chero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(34% 38% at 74% 26%,rgba(255,255,255,.72),rgba(255,255,255,0) 74%),radial-gradient(56% 52% at 76% 78%,rgba(138,107,62,.16),rgba(138,107,62,0) 76%),radial-gradient(110% 96% at 82% 56%,rgba(138,107,62,.07),rgba(138,107,62,0) 80%),radial-gradient(120% 90% at 10% 104%,rgba(31,92,78,.06),rgba(31,92,78,0) 66%)}
.chero__rule{position:relative;z-index:3;display:flex;align-items:center;gap:16px;padding-top:11px;padding-bottom:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid rgba(10,10,11,.12)}
.chero__rule i{flex:1 1 0;height:1px;background:repeating-linear-gradient(90deg,rgba(10,10,11,.22) 0,rgba(10,10,11,.22) 1px,transparent 1px,transparent 9px)}
.chero__rule b{font-weight:700;color:var(--ink)}
.chero__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) max-content;grid-template-rows:max-content max-content;gap:0 clamp(16px,3vw,54px);align-items:end;padding-top:clamp(26px,3vw,52px)}
.chero__top{grid-area:1/1}.chero__bot{grid-area:2/1}.chero__fan{grid-area:1/2/span 2;align-self:end}
.chero .crumbs{margin:0}
.chero__h1{font-size:clamp(46px,6.2vw,100px);font-weight:800;letter-spacing:-.046em;line-height:.9;margin:18px 0 0;max-width:none}
.chero__h1 em{font-style:italic;color:var(--tan-ink);font-weight:800}
.chero__lede{font-size:clamp(15px,1.2vw,17px);line-height:1.62;color:var(--ink-2);margin:20px 0 0;max-width:46ch}
.chero__stats{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:34px 0 0;padding:16px 0 0;border-top:1px solid rgba(10,10,11,.14);position:relative}
.chero__stats::before{content:"";position:absolute;left:0;top:-1px;width:34px;height:3px;background:var(--accent)}
.chero__stats li{display:flex;flex-direction:column;padding:0 26px 0 0;margin-right:26px;border-right:1px solid rgba(10,10,11,.12)}
.chero__stats li:last-child{border-right:0;margin-right:0;padding-right:0}
.chero__stats span{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:400}
.chero__stats b{display:block;font-size:clamp(24px,2.3vw,34px);font-weight:800;line-height:1;letter-spacing:-.026em;margin-top:8px;color:var(--ink);font-variant-numeric:tabular-nums}
.chero__stats b i{font-style:normal}
.chero__go{margin-top:28px;border-radius:999px;gap:10px;box-shadow:0 16px 34px -18px rgba(23,70,60,.7)}
.chero__go svg{transition:transform .2s}.chero__go:hover svg{transform:translateY(3px)}
.chero__fan{position:relative;z-index:4;height:var(--gh);width:calc(var(--gw) * 3.7);max-width:100%;margin:0}
.cvial{position:absolute;bottom:0;display:block;width:var(--sq);height:calc(var(--sq) * var(--gr-bot));transform-origin:50% 100%}
.cvial img{position:absolute;left:0;top:auto;bottom:calc(var(--drop) * -1);width:var(--sq);height:var(--sq);max-width:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.cvial .o{z-index:2;transform:rotate(var(--rot,0deg));filter:saturate(1.04) contrast(1.02) drop-shadow(0 5px 6px rgba(60,45,20,.18)) drop-shadow(0 26px 34px rgba(60,45,20,.14));transition:filter .25s}
.cvial:hover .o{filter:saturate(1.08) contrast(1.04) drop-shadow(0 8px 10px rgba(60,45,20,.22)) drop-shadow(0 30px 40px rgba(60,45,20,.18))}
.cvial--l{--rot:-9deg;left:calc(50% - var(--sq)/2 - var(--gw) * 1.24);z-index:1}
.cvial--c{--rot:0deg;left:calc(50% - var(--sq)/2);z-index:3}
.cvial--r{--rot:9deg;left:calc(50% - var(--sq)/2 + var(--gw) * 1.24);z-index:2}
.cvial .r{top:calc(100% - var(--drop));bottom:auto;z-index:0;opacity:.28;transform:scaleY(-1) rotate(calc(-1 * var(--rot,0deg)));filter:saturate(.9) brightness(1.06) blur(.4px);pointer-events:none;-webkit-mask-image:linear-gradient(transparent 0,transparent 87%,rgba(0,0,0,.34) 95%,rgba(0,0,0,.62) 100%);mask-image:linear-gradient(transparent 0,transparent 87%,rgba(0,0,0,.34) 95%,rgba(0,0,0,.62) 100%)}
.cvial::after{content:"";position:absolute;left:50%;bottom:calc(var(--gw) * -.055);z-index:1;width:calc(var(--gw) * 1.22);height:calc(var(--gw) * .15);transform:translateX(-50%);pointer-events:none;background:radial-gradient(50% 50%,rgba(60,45,20,.34),rgba(60,45,20,0) 72%)}
@keyframes cbob{0%,100%{transform:rotate(var(--rot,0deg)) translateY(0)}50%{transform:rotate(var(--rot,0deg)) translateY(var(--bob,-10px))}}
.cvial--l .o{--bob:-10px;animation:cbob 4s ease-in-out infinite}
.cvial--c .o{--bob:-12px;animation:cbob 4.5s ease-in-out 1s infinite}
.cvial--r .o{--bob:-8px;animation:cbob 5s ease-in-out .5s infinite}
@media(prefers-reduced-motion:reduce){.cvial .o{animation:none!important}}
@media(max-width:1180px){.chero{--gh:clamp(158px,19.5vw,326px)}}
@media(max-width:980px){
  .chero{--gh:clamp(148px,24vw,204px);padding-bottom:clamp(38px,7vw,56px)}
  .chero::before{background:radial-gradient(46% 26% at 50% 84%,rgba(138,107,62,.22),rgba(138,107,62,0) 72%),radial-gradient(110% 46% at 50% 78%,rgba(138,107,62,.10),rgba(138,107,62,0) 76%)}
  .chero__in{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .chero__top,.chero__bot,.chero__fan{grid-area:auto/1}
  .chero__top{order:1}.chero__fan{order:2;margin:26px auto 0;align-self:center}.chero__bot{order:3}
  .chero__lede{margin-top:16px}.chero__stats{margin-top:22px}.chero__go{margin-top:22px}
  .chero__rule .opt{display:none}
}
@media(max-width:700px){
  .chero__stats{display:grid;grid-template-columns:1fr 1fr;gap:20px 0;margin-top:26px}
  .chero__stats li{padding:0;margin:0;border-right:0}
  .chero__stats li:nth-child(2n+1){border-right:1px solid rgba(10,10,11,.12);padding-right:18px}
  .chero__stats li:nth-child(2n){padding-left:18px}
  .chero__stats b{font-size:26px}
}
@media(max-width:520px){.chero{--gh:clamp(126px,32vw,156px)}}

/* ==== PDP stage (2026-09-03): the stage sizes itself to the viewport, so the whole vial is on screen on
   arrival and the sticky column never exceeds the space it sticks in; the render is always contained, never
   cropped; and the per-frame drop-shadow filter that made scrolling stutter is gone. ==== */
.pdp__slide--image img{object-fit:contain!important;object-position:center 50%!important;padding:6% 8%!important;filter:none!important;mix-blend-mode:normal!important}
@media(min-width:901px){
  .pdp{align-items:start}
  .pdp__stage{height:auto!important;max-height:none;display:block;align-self:start}
  .pdp__carousel{display:block;height:auto}
  .pdp__slides{display:grid;height:auto}
  .pdp__slide{aspect-ratio:auto;height:clamp(420px,calc(100vh - var(--promo-h) - var(--nav-h) - 120px),720px);min-height:0}
  .pdp__slide--image img{padding:5% 8%!important}
}
@media(min-width:1081px){.pdp__stage{position:sticky;top:calc(var(--promo-h) + var(--nav-h) + 16px)}}
@media(min-width:901px) and (max-width:1080px){.pdp__stage{position:static}}
@media(max-width:900px){.pdp__stage{height:auto}.pdp__slide{aspect-ratio:1;height:auto;min-height:0}}

/* Catalog hero v4 polish (2026-09-03): .page-hd h1 (0,1,1) outranked the headline size, and the crumb kept the
   standalone breadcrumb's top padding. Small phones show the rule strip as one line. */
.chero .chero__h1{font-size:clamp(46px,6.2vw,100px);line-height:.9;letter-spacing:-.046em}
.chero .crumbs{padding-top:0;margin:0}
@media(max-width:980px){.chero .chero__h1{font-size:clamp(42px,11vw,64px)}}
@media(max-width:520px){.chero__rule span:nth-of-type(2),.chero__rule i:first-of-type{display:none}}

/* Catalog hero v4: the fan box now spans exactly what the three vials cover (centre square plus 1.24 vial-widths
   each side), so nothing hangs past the container; at 1024px the old 3.7-vial-width box let the outer vials
   push the page 35px wide. The section clips like every other bleed header. */
.chero{overflow:hidden}
.chero__fan{width:calc(var(--sq) + var(--gw) * 2.48)}

/* Catalog hero v4: where the page has margins to spare (>=1400px) the fan box is 3.7 vial-widths like the
   reference and the outer vials overhang it into the gutter and the margin, which hands the text column the
   room the four-stat row needs; between 981 and 1399px the box is the full span and the stats sit 2x2. */
@media(min-width:1400px){.chero__fan{width:calc(var(--gw) * 3.7)}}
@media(min-width:981px) and (max-width:1399px){
  .chero__stats{display:grid;grid-template-columns:max-content max-content;justify-content:start;gap:22px 0}
  .chero__stats li{padding:0;margin:0;border-right:0}
  .chero__stats li:nth-child(2n+1){padding-right:26px;margin-right:26px;border-right:1px solid rgba(10,10,11,.12)}
}

/* Catalog hero v4: the stats hairline and its accent tick hug the stats themselves instead of the whole column,
   so the overhanging left vial never crosses the line; stacked layouts get room under the fan for the reflection. */
.chero__stats{width:fit-content;max-width:100%}
@media(max-width:980px){.chero__fan{margin:26px auto 14px}}

/* Catalog hero v4, compact (Noah, Sep 3 late: "dont make the hero so big"). Headline cap 100px -> 72px, fan cap
   326px -> 240px, tighter vertical rhythm, smaller stat numerals. The narrower fan also hands the text column the
   width the four-stat row needs at very wide viewports, where it had wrapped. */
.chero{--gh:clamp(150px,14vw,240px);padding-bottom:clamp(30px,3vw,44px)}
.chero__in{padding-top:clamp(18px,2.2vw,34px)}
.chero .chero__h1{font-size:clamp(40px,4.6vw,72px);line-height:.92;margin-top:14px}
.chero__lede{font-size:clamp(15px,1.05vw,16px);margin-top:14px;max-width:50ch}
.chero__stats{margin-top:24px;padding-top:14px}
.chero__stats b{font-size:clamp(22px,1.8vw,28px);margin-top:6px}
.chero__go{margin-top:22px}
@media(max-width:1180px){.chero{--gh:clamp(150px,15vw,240px)}}
@media(max-width:980px){.chero{--gh:clamp(130px,20vw,170px);padding-bottom:clamp(30px,5vw,44px)}.chero .chero__h1{font-size:clamp(36px,9vw,52px)}.chero__fan{margin:18px auto 10px}.chero__stats{margin-top:18px}.chero__go{margin-top:18px}}
@media(max-width:520px){.chero{--gh:clamp(116px,28vw,136px)}}

/* ==== PDP stage v3 (Noah, Sep 3 late): "make it stay still and be even with the right side", "product cropping
   is elite". The plate no longer sticks (no dragging while you read), it runs the full height of the buy column
   again, and the render is sized by height so the vial fills ~86% of the plate: every cut render has the same
   geometry (vial = the middle 44% of the square, 92% of its height), so the transparent sides clip and the vial
   itself is never cropped as long as the plate is wider than 0.45 of its height, which every layout here is. ==== */
@media(min-width:901px){
  .pdp{align-items:stretch}
  .pdp__stage{position:static!important;top:auto!important;height:100%!important;max-height:none!important;display:flex;flex-direction:column;min-height:0;align-self:stretch}
  .pdp__carousel{flex:1 1 auto;display:flex;min-height:0;height:auto}
  .pdp__slides{flex:1 1 auto;display:grid;height:auto;min-height:0}
  .pdp__slide{height:100%;min-height:520px;aspect-ratio:auto}
}
.pdp__slide--image{overflow:hidden}
.pdp__slide--image img{position:absolute!important;left:50%!important;top:50%!important;width:auto!important;height:94%!important;aspect-ratio:1/1!important;max-width:none!important;max-height:none!important;transform:translate(-50%,-50%);object-fit:contain!important;object-position:center!important;padding:0!important;filter:none!important;mix-blend-mode:normal!important}
@media(max-width:900px){.pdp__stage{height:auto}.pdp__slide{aspect-ratio:1;height:auto;min-height:0}}

/* PDP stage v3.1: the plate is as tall as the buy column, which is taller than most viewports, so a vial that
   fills the plate has its base below the fold on arrival. Size the render to the part of the plate that is on
   screen when the page opens (viewport minus the header stack, 4% breathing room) and centre it in that region;
   the plate continues beneath. --pdp-above = promo + nav + crumb row above the plate. */
@media(min-width:901px){
  .pdp{--pdp-above:calc(var(--promo-h) + var(--nav-h) + 86px)}
  .pdp__slide--image img{
    --vis:min(100%, calc(100vh - var(--pdp-above)));
    --sq:min(94%, calc(100vh - var(--pdp-above) - 44px));
    height:var(--sq)!important;
    top:calc((var(--vis) - var(--sq)) / 2)!important;
    transform:translateX(-50%);
  }
}

/* ==== Catalog hero v5 (Noah, Sep 3: "hero needs to look better"). Cream vials on a cream field read flat, so the
   GLP fan now stands on a deep-green stage plate: the same dark-plate contrast move Disguised made, in Helion's
   accent green that the PDP closing band and the COA proof card already use. The plate spans the full height of
   the text column (crumb to CTA), the vials are larger with real shadows and reflections, and the stats sit 2x2
   beside it at every desktop width so the column can be narrower. ==== */
.chero{--gh:clamp(200px,19vw,300px)}
.chero__fan{align-self:stretch;height:auto;min-height:calc(var(--gh) + 130px);width:clamp(460px,44vw,700px);max-width:100%;margin:0;position:relative;z-index:4;border-radius:28px;overflow:hidden;background:radial-gradient(90% 58% at 50% 16%,rgba(255,255,255,.16),rgba(255,255,255,0) 64%),radial-gradient(72% 36% at 50% 100%,rgba(234,223,203,.24),rgba(234,223,203,0) 72%),linear-gradient(160deg,#1F5C4E 0%,#17463C 46%,#0F2E27 100%);box-shadow:0 36px 72px -36px rgba(15,46,39,.6),inset 0 1px 0 rgba(255,255,255,.08)}
@media(min-width:1400px){.chero__fan{width:clamp(460px,44vw,700px)}}
.chero__fan-tag{position:absolute;left:24px;top:20px;z-index:5;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.64)}
.chero__fan-tag b{color:#fff;font-weight:700}
.cvial{bottom:12%}
.cvial--l{left:calc(50% - var(--sq)/2 - var(--gw) * 1.05)}
.cvial--r{left:calc(50% - var(--sq)/2 + var(--gw) * 1.05)}
.cvial .o{filter:saturate(1.04) contrast(1.02) drop-shadow(0 10px 14px rgba(0,0,0,.34)) drop-shadow(0 36px 54px rgba(0,0,0,.38))}
.cvial:hover .o{filter:saturate(1.08) contrast(1.04) drop-shadow(0 14px 18px rgba(0,0,0,.4)) drop-shadow(0 42px 62px rgba(0,0,0,.44))}
.cvial .r{opacity:.2;filter:saturate(.9) brightness(1.12) blur(.5px)}
.cvial::after{background:radial-gradient(50% 50%,rgba(0,0,0,.55),rgba(0,0,0,0) 72%)}
@media(min-width:981px){
  .chero__stats{display:grid;grid-template-columns:max-content max-content;justify-content:start;gap:20px 0;width:fit-content}
  .chero__stats li{padding:0;margin:0;border-right:0}
  .chero__stats li:nth-child(2n+1){padding-right:26px;margin-right:26px;border-right:1px solid rgba(10,10,11,.12)}
  .chero__lede{max-width:44ch}
}
@media(max-width:1180px){.chero{--gh:clamp(190px,20vw,280px)}.chero__fan{width:clamp(420px,44vw,620px)}}
@media(max-width:980px){
  .chero{--gh:clamp(170px,27vw,240px)}
  .chero__fan{width:100%;min-height:calc(var(--gh) + 104px);margin:18px 0 8px;align-self:auto;border-radius:24px}
  .cvial{bottom:11%}
  .chero__fan-tag{left:18px;top:16px}
}
@media(max-width:520px){.chero{--gh:clamp(140px,36vw,180px)}.chero__fan{min-height:calc(var(--gh) + 92px)}}

/* PDP stage v3.2 (Noah: "vial is wayy to big here", "make it clean"): the render square is now ~62% of the plate,
   capped at two-thirds of the visible region, centred in that region; generous cream around a smaller vial. The
   plate stays plain and full-height. Mobile square framing eased from 94% to 82%. */
@media(min-width:901px){
  .pdp__slide--image img{
    --sq:min(62%, calc((100vh - var(--pdp-above)) * 0.66));
  }
  .pdp__stage,.pdp__slide--image{background:radial-gradient(ellipse 80% 70% at 50% 44%,#F5F0E4 0%,#F0E8D7 58%,#EAE1CE 100%)}
}
@media(max-width:900px){.pdp__slide--image img{height:82%!important}}

/* ==== Catalog hero v6 (Noah, Sep 3: the plate "sucks, not what we were going for"). Back to the Disguised
   composition proper: a WHITE field like theirs (cream vials on the cream well were what read flat), the fan floats
   on it at DA's proportions with reflections and floor shadows, and depth comes from soft warm glows pooling under
   the vials, not from a plate. Overrides the v5 plate rules below/above it. ==== */
.chero{background:#fff;--gh:clamp(170px,18vw,300px)}
.chero::before{background:radial-gradient(34% 38% at 74% 26%,rgba(255,255,255,.9),rgba(255,255,255,0) 74%),radial-gradient(56% 52% at 76% 78%,rgba(138,107,62,.17),rgba(138,107,62,0) 76%),radial-gradient(110% 96% at 82% 56%,rgba(138,107,62,.07),rgba(138,107,62,0) 80%),radial-gradient(120% 90% at 10% 104%,rgba(31,92,78,.06),rgba(31,92,78,0) 66%),linear-gradient(#fff 0%,rgba(255,255,255,0) 20%),linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 16%)}
.chero__rule{border-bottom-color:rgba(10,10,11,.10)}
.chero__fan{align-self:end;height:var(--gh);min-height:0;width:calc(var(--sq) + var(--gw) * 2.48);max-width:100%;padding:0;margin:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
@media(min-width:1400px){.chero__fan{width:calc(var(--gw) * 3.7)}}
.chero__fan-tag{display:none}
.cvial{bottom:0}
.cvial--l{left:calc(50% - var(--sq)/2 - var(--gw) * 1.24)}
.cvial--r{left:calc(50% - var(--sq)/2 + var(--gw) * 1.24)}
.cvial .o{filter:saturate(1.06) contrast(1.03) drop-shadow(0 5px 6px rgba(60,45,20,.18)) drop-shadow(0 26px 34px rgba(60,45,20,.16))}
.cvial:hover .o{filter:saturate(1.1) contrast(1.05) drop-shadow(0 8px 10px rgba(60,45,20,.22)) drop-shadow(0 30px 40px rgba(60,45,20,.2))}
.cvial .r{opacity:.3;filter:saturate(.9) brightness(1.06) blur(.4px)}
.cvial::after{background:radial-gradient(50% 50%,rgba(60,45,20,.36),rgba(60,45,20,0) 72%)}
@media(min-width:981px){
  .chero__stats{display:flex;flex-wrap:wrap;gap:0;width:fit-content}
  .chero__stats li{padding:0 26px 0 0;margin-right:26px;border-right:1px solid rgba(10,10,11,.12)}
  .chero__stats li:last-child{border-right:0;margin-right:0;padding-right:0}
  .chero__lede{max-width:46ch}
}
@media(min-width:981px) and (max-width:1399px){
  .chero__stats{display:grid;grid-template-columns:max-content max-content;justify-content:start;gap:22px 0}
  .chero__stats li{padding:0;margin:0;border-right:0}
  .chero__stats li:nth-child(2n+1){padding-right:26px;margin-right:26px;border-right:1px solid rgba(10,10,11,.12)}
}
.chero + .ways-wrap::before{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 100%)}
@media(max-width:1180px){.chero{--gh:clamp(160px,19.5vw,300px)}.chero__fan{width:calc(var(--sq) + var(--gw) * 2.48)}}
@media(max-width:980px){
  .chero{--gh:clamp(148px,24vw,204px)}
  .chero::before{background:radial-gradient(46% 26% at 50% 84%,rgba(138,107,62,.22),rgba(138,107,62,0) 72%),radial-gradient(110% 46% at 50% 78%,rgba(138,107,62,.10),rgba(138,107,62,0) 76%),linear-gradient(#fff 0%,rgba(255,255,255,0) 20%)}
  .chero__fan{width:calc(var(--sq) + var(--gw) * 2.48);min-height:0;margin:26px auto 14px;align-self:center;border-radius:0}
  .cvial{bottom:0}
}
@media(max-width:520px){.chero{--gh:clamp(126px,32vw,156px)}}

/* PDP stage v3.3 (Noah: "still too big"): render square ~50% of the plate, capped at 52% of the visible region. */
@media(min-width:901px){.pdp__slide--image img{--sq:min(50%, calc((100vh - var(--pdp-above)) * 0.52))}}
@media(max-width:900px){.pdp__slide--image img{height:72%!important}}

/* Catalog hero v6.1: room under the reflections before the divider. */
.chero{padding-bottom:clamp(38px,3.6vw,56px)}
@media(max-width:980px){.chero{padding-bottom:clamp(34px,6vw,50px)}}

/* ==== PDP buy column rhythm (Noah: "spacing perfect everywhere on the pdp"). Measured gaps were 2/4/8/9/10/15/20/24px
   with the assurance list 9px under the CTA. One scale now: margins live on the top of each block, never the bottom,
   so sibling margins cannot stack or collapse unpredictably. ==== */
.pdp__buy > *{margin-bottom:0!important}
.pdp__buy > .pdp__cat{margin-top:0!important}
.pdp__buy > .pdp__title{margin-top:6px!important}
.pdp__buy > .pdp__chips{margin-top:12px!important}
.pdp__buy > .pdp__desc{margin-top:14px!important}
.pdp__buy > .pdp__specline{margin-top:6px!important}
.pdp__buy > .pdp__meta{margin-top:12px!important}
.pdp__buy > .pdp__variants{margin-top:16px!important}
.pdp__buy > .pdp__qtyprice{margin-top:16px!important}
.pdp__buy > .pdp__batch{margin-top:16px!important}
.pdp__buy > .pdp__opts-head{margin-top:22px!important}
.pdp__buy > .pdp__opts{margin-top:8px!important}
.pdp__buy > .pdp__add{margin-top:22px!important}
.pdp__buy > .pdp__restock{margin-top:22px!important}
.pdp__buy > .pdp__assure{margin-top:22px!important}
.pdp__buy > .pdp__ruo-line{margin-top:16px!important}

/* Catalog hero v6.2 (Noah: the tan blended background "was good", the vials were the issue). Field back to the
   cream well with the soft white/tan/green glows of v4; the DA-proportion floating fan from v6 stays. */
.chero{background:var(--vial-well)}
.chero::before{background:radial-gradient(34% 38% at 74% 26%,rgba(255,255,255,.72),rgba(255,255,255,0) 74%),radial-gradient(56% 52% at 76% 78%,rgba(138,107,62,.16),rgba(138,107,62,0) 76%),radial-gradient(110% 96% at 82% 56%,rgba(138,107,62,.07),rgba(138,107,62,0) 80%),radial-gradient(120% 90% at 10% 104%,rgba(31,92,78,.06),rgba(31,92,78,0) 66%)}
.chero__rule{border-bottom-color:rgba(10,10,11,.12)}
.chero + .ways-wrap::before{background:linear-gradient(180deg,var(--vial-well) 0%,rgba(239,231,214,.55) 40%,rgba(239,231,214,0) 100%)}
@media(max-width:980px){.chero::before{background:radial-gradient(46% 26% at 50% 84%,rgba(138,107,62,.22),rgba(138,107,62,0) 72%),radial-gradient(110% 46% at 50% 78%,rgba(138,107,62,.10),rgba(138,107,62,0) 76%)}}

/* PDP stage v3.4 (Noah: "make it float better and more centered"). The render sits at the plate's optical centre
   (44% of the free height above it, 56% below) instead of the top of the on-arrival region, and a soft contact
   shadow under its base gives it a ground, the way the hero vials have one. The size rule from v3.3 is unchanged and
   still keeps the whole vial on screen down to 1280x720. The geometry lives on the slide so the image and the shadow
   share it. */
@media(min-width:901px){
  .pdp__slide--image{--vis:min(100%, calc(100vh - var(--pdp-above)));--sq:min(50%, calc((100vh - var(--pdp-above)) * 0.52));--imgtop:calc((100% - var(--sq)) * 0.44)}
  .pdp__slide--image img{height:var(--sq)!important;top:var(--imgtop)!important;transform:translateX(-50%)}
  .pdp__slide--image::after{content:"";position:absolute;left:50%;top:calc(var(--imgtop) + var(--sq) * 0.935);width:calc(var(--sq) * 0.46);height:calc(var(--sq) * 0.075);transform:translateX(-50%);border-radius:50%;background:radial-gradient(50% 50%,rgba(60,45,20,.30),rgba(60,45,20,.12) 45%,rgba(60,45,20,0) 72%);pointer-events:none;z-index:0}
  .pdp__slide--image img{z-index:1}
}
@media(max-width:900px){
  .pdp__slide--image::after{content:"";position:absolute;left:50%;top:calc(9% + 82% * 0.935);width:38%;height:6%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(50% 50%,rgba(60,45,20,.28),rgba(60,45,20,.10) 45%,rgba(60,45,20,0) 72%);pointer-events:none;z-index:0}
  .pdp__slide--image img{z-index:1}
}

/* PDP stage v3.4b: optical centre, but never below the fold. On short viewports (1280x720) the centred vial's base
   dipped 23px under the fold, so the placement is clamped to keep the whole render inside the on-arrival region. */
@media(min-width:901px){.pdp__slide--image{--imgtop:min(calc((100% - var(--sq)) * 0.44), calc(var(--vis) - var(--sq) - 28px))}}

/* ==== Vials, integrated (Noah, Sep 3 late: edges "look cut off like I went in tools to crop it", "make the shadow
   perfect"). Cut-outs re-mattered at 3px (cut/<sku>.webp?v=3). On top of that every vial gets a tight ambient
   shadow that hugs the silhouette, which is what makes a cut-out read as an object in the scene instead of a
   sticker: the glass's own rim highlight then sits against a soft dark falloff rather than raw cream. ==== */
.cvial .o{filter:saturate(1.06) contrast(1.03) drop-shadow(0 0 5px rgba(60,45,20,.24)) drop-shadow(0 6px 8px rgba(60,45,20,.16)) drop-shadow(0 26px 34px rgba(60,45,20,.16))}
.cvial:hover .o{filter:saturate(1.1) contrast(1.05) drop-shadow(0 0 6px rgba(60,45,20,.26)) drop-shadow(0 9px 12px rgba(60,45,20,.2)) drop-shadow(0 30px 40px rgba(60,45,20,.2))}
.pdp__slide--image img{filter:drop-shadow(0 0 5px rgba(60,45,20,.22)) drop-shadow(0 14px 22px rgba(60,45,20,.12))!important}
/* PDP ground: a dense contact core under the base plus a wide, faint ambient pool, both tied to the render geometry. */
@media(min-width:901px){
  .pdp__slide--image::after{top:calc(var(--imgtop) + var(--sq) * 0.915);width:calc(var(--sq) * 0.62);height:calc(var(--sq) * 0.10);background:radial-gradient(50% 50%,rgba(60,45,20,.28) 0%,rgba(60,45,20,.14) 38%,rgba(60,45,20,0) 70%)}
  .pdp__slide--image::before{content:"";position:absolute;left:50%;top:calc(var(--imgtop) + var(--sq) * 0.88);width:calc(var(--sq) * 1.05);height:calc(var(--sq) * 0.18);transform:translateX(-50%);border-radius:50%;background:radial-gradient(50% 50%,rgba(60,45,20,.11) 0%,rgba(60,45,20,.05) 45%,rgba(60,45,20,0) 72%);pointer-events:none;z-index:0}
}
@media(max-width:900px){
  .pdp__slide--image::after{top:calc(9% + 82% * 0.915);width:52%;height:8%;background:radial-gradient(50% 50%,rgba(60,45,20,.26) 0%,rgba(60,45,20,.12) 38%,rgba(60,45,20,0) 70%)}
  .pdp__slide--image::before{content:"";position:absolute;left:50%;top:calc(9% + 82% * 0.88);width:86%;height:14%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(50% 50%,rgba(60,45,20,.10) 0%,rgba(60,45,20,.04) 45%,rgba(60,45,20,0) 72%);pointer-events:none;z-index:0}
}
/* Catalog cards (Noah: "another color instead of black"): the selected size pill takes the accent green the
   card's Add to cart and the PDP's size pills already use. */
.pcard__sizes b{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ==== Cuts v5 (2026-09-04): the floating cut-outs are back (Noah: "the floating was good before, just fix the way you
   cropped the vials"). Every vial is re-cut from its 1000px original with Apple Vision's subject matte (soft, natural
   glass edges; recut/vcut.swift + build.py), on the same geometry as the 820s (vial = middle 44% x 91.8% of the square,
   base at 96%), served as static/vials/cut/<sku>.webp?v=5. The fan, reflections and PDP ground are the rules above. ==== */
@media(min-width:1400px){.chero__stats li{white-space:nowrap}}

/* PDP Add to cart in the accent green (Noah, 2026-09-04: "yes pls change it"), matching the size pills and the
   catalog cards. Covers the buy-column button and the mobile sticky bar's button. */
.pdp__add #pdpAddBtn,#pdpAddBtn,.pdp__bar-in .btn,.pdp__bar-in button{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
.pdp__add #pdpAddBtn:hover,#pdpAddBtn:hover,.pdp__bar-in .btn:hover,.pdp__bar-in button:hover{background:var(--accent-dark,#17463C)!important;border-color:var(--accent-dark,#17463C)!important}
.pdp__add #pdpAddBtn[disabled],#pdpAddBtn[disabled]{opacity:.55}

/* ==== Mobile hero v156, 2026-09-05: one gutter, bigger vial, tighter stack ==== */
@media (max-width:560px){
.hero__in{padding:22px 20px 2px}
.hero__in .eyebrow{font-size:11px;letter-spacing:.14em}
.hero__title{margin-top:12px;font-size:clamp(34px,9.8vw,40px);line-height:1.04;letter-spacing:-.028em}
.hero__in .lede{margin-top:12px;font-size:16.5px;line-height:1.5;max-width:34ch}
.hero__acts{margin-top:18px;gap:10px}
.hero__acts .btn{min-height:52px}
.hero__media{width:calc(100% - 40px);aspect-ratio:1/1;margin:18px auto 22px;border-radius:18px;overflow:hidden;box-shadow:0 1px 0 rgba(10,10,11,.04),0 18px 40px -28px rgba(10,10,11,.28)}
.hero__media img{object-fit:cover;object-position:50% 50%;transform:none}
}

/* ==== Hero on phones and tablets = the desktop composition, resized (v157, 2026-09-05) ====
   Same 2200px scene (33 KB), same scrim idea turned vertical: cream at the top where the
   words sit, the GLP-3 Reta vial rising underneath, bottom fade into the next section. */
@media (max-width:1080px){
.hero__plate{display:block;position:relative;min-height:0;height:clamp(560px,150vw,760px);overflow:hidden;background:var(--media);padding:0}
.hero__media{position:absolute;inset:0;order:0;width:auto;max-width:none;aspect-ratio:auto;margin:0;border-radius:0;box-shadow:none}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;object-position:66% 100%;transform:none}
.hero__video{display:none}
.hero__scrim{display:block;position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, var(--media) 0%, rgba(240,235,224,.96) 26%, rgba(240,235,224,.72) 44%, rgba(240,235,224,.18) 58%, rgba(240,235,224,0) 68%),
             linear-gradient(to top, rgba(240,235,224,.55) 0%, rgba(240,235,224,0) 16%)}
.hero__in{position:relative;order:0;max-width:none;padding:26px 20px 0;background:transparent;border:0}
.hero__in .eyebrow{font-size:11px;letter-spacing:.14em}
.hero__title{margin-top:12px;font-size:clamp(32px,8.6vw,44px);line-height:1.04;letter-spacing:-.028em;max-width:10ch}
.hero__in .lede{margin-top:12px;font-size:16px;line-height:1.5;max-width:30ch}
.hero__acts{margin-top:16px;gap:10px}
.hero__acts .btn{flex:1 1 calc(50% - 5px);min-height:50px;padding-inline:14px;white-space:nowrap}
}
@supports (background:color-mix(in srgb,red 50%,transparent)){
@media (max-width:1080px){
.hero__scrim{background:linear-gradient(to bottom, var(--media) 0%, color-mix(in srgb,var(--media) 96%,transparent) 26%, color-mix(in srgb,var(--media) 72%,transparent) 44%, color-mix(in srgb,var(--media) 18%,transparent) 58%, color-mix(in srgb,var(--media) 0%,transparent) 68%),
             linear-gradient(to top, color-mix(in srgb,var(--media) 55%,transparent) 0%, color-mix(in srgb,var(--media) 0%,transparent) 16%)}
}
}
@media (max-width:560px){
.hero__plate{height:clamp(600px,168vw,700px)}
.hero__media img,.hero__media video{object-position:64% 100%}
.hero__in{padding:22px 20px 0}
.hero__title{font-size:clamp(33px,9.4vw,40px)}
.hero__acts .btn{flex:1 1 100%}
}

/* v158: phone hero, label clear of the buttons. Buttons share one row, the scene sits
   18% taller than the plate and is pinned to the bottom, so the GLP-3 Reta label lands
   under the words instead of behind them. */
@media (max-width:560px){
.hero__plate{height:clamp(600px,164vw,680px)}
.hero__media img,.hero__media video{position:absolute;left:0;bottom:0;top:auto;width:100%;height:118%;object-fit:cover;object-position:64% 100%}
.hero__in .lede{font-size:15.5px;line-height:1.5;max-width:32ch}
.hero__acts{margin-top:14px;gap:10px}
.hero__acts .btn{flex:1 1 calc(50% - 5px);min-height:48px;padding-inline:10px;font-size:15px}
}

/* v159: phone hero, the vial label sits below the buttons and the vial keeps its base. */
@media (max-width:560px){
.hero__plate{height:clamp(640px,181vw,700px)}
.hero__media img,.hero__media video{position:absolute;left:0;top:44px;bottom:auto;width:100%;height:104%;object-fit:cover;object-position:64% 0%}
.hero__scrim{background:linear-gradient(to bottom, var(--media) 0%, rgba(240,235,224,.97) 30%, rgba(240,235,224,.78) 46%, rgba(240,235,224,.22) 60%, rgba(240,235,224,0) 70%), linear-gradient(to top, rgba(240,235,224,.6) 0%, rgba(240,235,224,0) 14%)}
}
@supports (background:color-mix(in srgb,red 50%,transparent)){
@media (max-width:560px){
.hero__scrim{background:linear-gradient(to bottom, var(--media) 0%, color-mix(in srgb,var(--media) 97%,transparent) 30%, color-mix(in srgb,var(--media) 78%,transparent) 46%, color-mix(in srgb,var(--media) 22%,transparent) 60%, color-mix(in srgb,var(--media) 0%,transparent) 70%), linear-gradient(to top, color-mix(in srgb,var(--media) 60%,transparent) 0%, color-mix(in srgb,var(--media) 0%,transparent) 14%)}
}
}

/* v160: phone hero fits one screen. Words and buttons on cream, then the desktop scene as a
   short full-width band (16:10) underneath, vial at natural size, nothing stretched. */
@media (max-width:560px){
.hero__plate{display:flex;flex-direction:column;height:auto;min-height:0;padding:0;overflow:visible;background:var(--media)}
.hero__in{order:1;position:relative;padding:20px 20px 0;max-width:none}
.hero__in .eyebrow{font-size:11px;letter-spacing:.14em}
.hero__title{margin-top:10px;font-size:clamp(31px,8.8vw,38px);line-height:1.05;letter-spacing:-.028em;max-width:11ch}
.hero__in .lede{margin-top:10px;font-size:15.5px;line-height:1.5;max-width:34ch}
.hero__acts{margin-top:14px;gap:10px}
.hero__acts .btn{flex:1 1 calc(50% - 5px);min-height:46px;padding-inline:10px;font-size:15px;white-space:nowrap}
.hero__media{order:2;position:relative;inset:auto;top:auto;width:100%;height:auto;aspect-ratio:16/10;margin:18px 0 0;overflow:hidden;border-radius:0;box-shadow:none;border-top:1px solid var(--silver-deep)}
.hero__media img,.hero__media video{position:static;top:auto;bottom:auto;width:100%;height:100%;object-fit:cover;object-position:62% 48%;transform:none}
.hero__scrim{display:none}
}

/* v161: phone hero, one plate. Words at the top, the desktop scene behind them at a small size:
   the image sits in the lower part of the same plate, whole vial in frame, nothing cut off,
   its top edge feathered into the cream so it reads as one scene, not a band. */
@media (max-width:560px){
.hero__plate{display:block;position:relative;height:auto;min-height:0;padding:0 0 77vw;overflow:hidden;background:var(--media)}
.hero__in{position:relative;z-index:2;order:0;padding:20px 20px 0;max-width:none}
.hero__media{position:absolute;z-index:1;inset:auto;top:auto;left:auto;right:-4%;bottom:0;width:138%;height:auto;aspect-ratio:auto;margin:0;border:0;border-radius:0;box-shadow:none;overflow:visible;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 13%);mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 13%)}
.hero__media img,.hero__media video{position:static;top:auto;bottom:auto;display:block;width:100%;height:auto;object-fit:fill;object-position:center;transform:none}
.hero__scrim{display:none}
}

/* v162: the photo's top edge is a shade deeper than the plate cream, so the plate eases into that
   tone just above the image and the feather is short enough to leave the vial cap solid. */
@media (max-width:560px){
.hero__plate{background:linear-gradient(to bottom,#F4EEE2 0,#F4EEE2 calc(100% - 77vw - 44px),#E8DECB calc(100% - 77vw + 26px),#E8DECB 100%)}
.hero__media{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.55) 6%,#000 12%);mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.55) 6%,#000 12%)}
}

/* v163: phone hero built the Disguised Alpha way. One compact layered stage: the photo fills the
   plate behind everything, a cream scrim sits over it, and the copy stacks on top: eyebrow,
   two-line title, lede, two buttons, a rule, three proof stats. Whole vial in frame, ghosted
   under the words, height follows the copy (about 450px) so it never swallows the screen. */
.hero__proof-m{display:none}
@media (max-width:560px){
.hero__plate{display:block;position:relative;height:auto;min-height:0;padding:0;overflow:hidden;background:#EDE5D6}
.hero__media{position:absolute;inset:0;top:0;right:0;bottom:0;left:0;z-index:0;width:auto;height:auto;aspect-ratio:auto;margin:0;border:0;-webkit-mask-image:none;mask-image:none;overflow:hidden}
.hero__media img,.hero__media video{position:absolute;inset:0;top:0;bottom:0;display:block;width:100%;height:100%;object-fit:cover;object-position:72% 50%;transform:none}
.hero__scrim{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,238,226,.90) 0%,rgba(244,238,226,.66) 30%,rgba(244,238,226,.50) 55%,rgba(244,238,226,.54) 72%,rgba(244,238,226,.74) 88%,rgba(244,238,226,.86) 100%)}
.hero__in{position:relative;z-index:2;order:0;padding:34px 22px 30px;max-width:none;background:transparent;border:0}
.hero__in .eyebrow{font-size:11.5px;letter-spacing:.16em}
.hero__title{margin-top:12px;font-size:clamp(29px,8vw,33px);line-height:1.08;letter-spacing:-.025em;max-width:none}
.hero__in .lede{margin-top:12px;font-size:14.5px;line-height:1.55;max-width:none;color:var(--ink-2)}
.hero__acts{margin-top:18px;gap:10px}
.hero__acts .btn{flex:1 1 0;min-height:50px;padding-inline:10px;font-size:14.5px;white-space:nowrap}
.hero__proof-m{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 26px;list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid rgba(20,30,26,.16)}
.hero__proof-m li{margin:0;padding:0}
.hero__proof-m b{display:block;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.hero__proof-m span{display:block;margin-top:5px;font-size:12px;line-height:1.2;color:var(--ink-2)}
}

/* v164: the vial's white label read through the mid-band under the lede; a touch more cream there. */
@media (max-width:560px){
.hero__scrim{background:linear-gradient(180deg,rgba(244,238,226,.90) 0%,rgba(244,238,226,.70) 28%,rgba(244,238,226,.60) 52%,rgba(244,238,226,.62) 72%,rgba(244,238,226,.78) 88%,rgba(244,238,226,.88) 100%)}
}

/* v165: hero buttons on phones size to their words ("How We Ensure Quality" is the long one) */
@media (max-width:560px){ .hero__acts .btn{flex:1 1 auto;min-width:0;padding-inline:14px} }

/* v167: the hero scene is a real loop now. A 9s seamless clip of the same shot plays over the still
   once it is actually playing (desktop: landscape loop; phones: a portrait crop centred on the vial,
   and the phone still is that crop's first frame so the hand-off is invisible). The still stays under
   it for Data Saver, 2G, Reduce Motion and browsers that refuse autoplay. Phones also get a taller
   Disguised-size stage and a lighter scrim so the vial reads instead of ghosting. */
.hero__video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;pointer-events:none}
.hero__media.is-live .hero__video{opacity:1}
.hero__media.is-live img{animation:none}
.hero__media.is-live::after{display:none}
@media (prefers-reduced-motion:reduce){ .hero__video{display:none} }
@media (max-width:560px){
.hero__plate{min-height:462px;display:flex;flex-direction:column;justify-content:flex-end}
.hero__in{padding:40px 22px 34px}
.hero__media img,.hero__media video,.hero__video{object-position:50% 50%}
.hero__scrim{background:linear-gradient(180deg,rgba(244,238,226,.88) 0%,rgba(244,238,226,.68) 24%,rgba(244,238,226,.50) 42%,rgba(244,238,226,.34) 58%,rgba(244,238,226,.40) 76%,rgba(244,238,226,.70) 90%,rgba(244,238,226,.88) 100%)}
}

/* v169: phone stage, second pass. The loop is a ping-pong now (no crossfade, so the label never doubles).
   The scene sits in the lower 80% of the stage and a touch right of centre, its top edge feathered into the
   cream, so the cap lands under the lede and the label shows between the buttons and the stats the way the
   Disguised vial does, instead of the wordmark and label printing through the paragraph. */
@media (max-width:560px){
.hero__media img,.hero__media video,.hero__video{top:auto;bottom:0;height:80%;object-fit:cover;object-position:58% 100%;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 22%);mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 22%)}
.hero__media{-webkit-mask-image:none;mask-image:none}
.hero__scrim{background:linear-gradient(180deg,rgba(244,238,226,.92) 0%,rgba(244,238,226,.80) 22%,rgba(244,238,226,.58) 40%,rgba(244,238,226,.30) 56%,rgba(244,238,226,.28) 72%,rgba(244,238,226,.62) 88%,rgba(244,238,226,.86) 100%)}
}

/* v170: phone hero = the desktop hero compressed. Words in the left two thirds (eyebrow, title, lede,
   the two buttons stacked), the moving vial scene on the right third, the proof row across the bottom.
   No text sits on the label any more; the only scrim is a cream wash on the left and a fade under the
   stats. Stage is content-driven (about 490px), nothing empty above the headline. Landscape loop and
   landscape still at every width, positioned so the vial lands at four fifths of the width. */
@media (max-width:560px){
.hero__plate{display:block;position:relative;height:auto;min-height:0;padding:0;overflow:hidden;background:#EDE5D6}
.hero__media{position:absolute;inset:0;top:0;right:0;bottom:0;left:0;z-index:0;width:auto;height:auto;margin:0;overflow:hidden;-webkit-mask-image:none;mask-image:none}
.hero__media img,.hero__media video,.hero__video{position:absolute;inset:0;top:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;-webkit-mask-image:none;mask-image:none}
.hero__scrim{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(244,238,226,.90) 0%,rgba(244,238,226,.84) 48%,rgba(244,238,226,.30) 66%,rgba(244,238,226,0) 82%),
             linear-gradient(0deg,rgba(244,238,226,.86) 0,rgba(244,238,226,.55) 90px,rgba(244,238,226,0) 160px)}
.hero__in{position:relative;z-index:2;padding:30px 20px 24px;max-width:none}
.hero__in .eyebrow{display:block;max-width:68%;font-size:11px;letter-spacing:.15em;line-height:1.35}
.hero__title{margin-top:10px;font-size:clamp(27px,7.6vw,31px);line-height:1.06;letter-spacing:-.025em;max-width:68%}
.hero__in .lede{margin-top:10px;font-size:14px;line-height:1.5;max-width:66%;color:var(--ink-2)}
.hero__acts{margin-top:16px;display:flex;flex-direction:column;align-items:stretch;gap:8px;max-width:66%}
.hero__acts .btn{flex:0 0 auto;width:100%;min-height:46px;padding-inline:12px;font-size:14.5px;white-space:nowrap;justify-content:center}
.hero__proof-m{margin-top:20px;padding-top:16px;grid-template-columns:repeat(3,auto);gap:0 22px}
.hero__proof-m b{font-size:20px}
}

/* v171: eyebrow on one line across the top (nothing is under it there), vial nudged in so its whole
   right edge stays on screen, and the still-image drift is shut off on phones so the framing never creeps. */
@media (max-width:560px){
.hero__in .eyebrow{max-width:none;font-size:10.5px;letter-spacing:.14em;white-space:nowrap}
.hero__media img,.hero__media video,.hero__video{object-position:52% 50%}
.hero__media img{animation:none;transform:none}
.hero__media::after{display:none}
}

/* v172: phone hero, whole vial, nothing cropped, nothing behind the words.
   A landscape photo force-filled into a tall phone box was blowing the vial up and running the lede
   across the glass. Phones now use the transparent cut-out of the same Reta vial: it stands in the
   right column at its true proportions, cap to base, floating on the cream with a soft light pool
   behind it and a slow bob. The photo loop still carries tablets and desktop. */
@keyframes heroVialBob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(-.5deg)}}
@media (max-width:560px){
.hero__plate{position:relative;background:var(--media,#F4EEE2);overflow:hidden}
.hero__plate::before{content:"";position:absolute;z-index:0;right:-14%;top:10%;width:76%;height:66%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0))}
.hero__video{display:none!important}
.hero__scrim{display:none}
.hero__media{position:absolute;z-index:1;inset:auto;left:auto;top:auto;right:3%;bottom:104px;width:37%;height:auto;
  margin:0;overflow:visible;border:0;border-radius:0;box-shadow:none;background:none;
  -webkit-mask-image:none;mask-image:none;animation:heroVialBob 7.5s ease-in-out infinite;will-change:transform}
.hero__media picture{display:block}
.hero__media img{position:static;inset:auto;display:block;width:100%;height:auto;object-fit:contain;object-position:center;
  transform:none;animation:none;-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 16px 22px rgba(31,44,38,.18))}
.hero__media::after{display:none}
.hero__in{position:relative;z-index:2;padding:28px 20px 22px;max-width:none}
.hero__in .eyebrow{max-width:none;font-size:10.5px;letter-spacing:.14em;white-space:nowrap}
.hero__title{margin-top:10px;max-width:54%;font-size:clamp(25px,6.8vw,28px);line-height:1.07;letter-spacing:-.025em}
.hero__in .lede{margin-top:10px;max-width:54%;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.hero__acts{margin-top:16px;max-width:54%;flex-direction:column;align-items:stretch;gap:8px}
.hero__acts .btn{width:100%;min-height:46px;font-size:14px;padding-inline:10px}
.hero__proof-m{max-width:none;margin-top:22px;padding-top:16px}
}
@media (prefers-reduced-motion:reduce){ .hero__media{animation:none} }

/* v173: phone vial, sized off the STAGE not the screen width, and moving right to left.
   Sizing by width made the vial ~64% of the stage on a real iPhone (short text column) versus 53%
   in emulation, so it crowded the right edge. Height-based sizing renders the same on every phone.
   Motion: a slow right-to-left drift plus a light sweep that travels right to left across the glass,
   masked to the vial's own silhouette so only the vial catches the light. */
@keyframes heroVialDrift{0%{transform:translateX(9px)}50%{transform:translateX(-9px)}100%{transform:translateX(9px)}}
@keyframes heroVialShine{0%{background-position:150% 0}55%{background-position:-60% 0}100%{background-position:-60% 0}}
@media (max-width:560px){
.hero__media{right:5%;bottom:calc(20% + 22px);top:auto;left:auto;width:auto;height:52%;max-width:38%;
  animation:heroVialDrift 9s ease-in-out infinite}
.hero__media picture{display:block;height:100%}
.hero__media img{height:100%;width:auto;max-width:100%;object-fit:contain}
.hero__media::after{content:"";display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 58%);
  background-size:260% 100%;background-repeat:no-repeat;
  -webkit-mask-image:url(/wp-content/themes/helion/static/hero/hero-vial-solo.webp?v=1);mask-image:url(/wp-content/themes/helion/static/hero/hero-vial-solo.webp?v=1);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;mix-blend-mode:screen;
  animation:heroVialShine 7s ease-in-out infinite}
.hero__plate::before{right:-10%;top:12%;width:70%;height:60%}
}
@media (prefers-reduced-motion:reduce){ .hero__media,.hero__media::after{animation:none} }

/* v174: the drift was eating the right margin (11px clear at its rightmost point). Wider gutter,
   shorter throw, so the vial never approaches the screen edge. */
@keyframes heroVialDrift{0%{transform:translateX(7px)}50%{transform:translateX(-7px)}100%{transform:translateX(7px)}}
@media (max-width:560px){ .hero__media{right:7%} }

/* v175: the light pass was strong enough to haze the label at its peak. Softer band, same travel. */
@media (max-width:560px){
.hero__media::after{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 60%);background-size:260% 100%;background-repeat:no-repeat}
}

/* v176: on a 375px phone the drift's leftmost point left only ~6px between the buttons and the vial.
   Shorter throw and a slightly narrower text column below 380px keeps a real gap at every phase. */
@keyframes heroVialDrift{0%{transform:translateX(6px)}50%{transform:translateX(-6px)}100%{transform:translateX(6px)}}
@media (max-width:380px){
.hero__title,.hero__in .lede,.hero__acts{max-width:51%}
}

/* v177: narrowing the text column broke the headline into four ragged lines on a 375px phone.
   Text column goes back to 54%; the vial gives up the room instead. */
@media (max-width:380px){
.hero__title,.hero__in .lede,.hero__acts{max-width:54%}
.hero__media{height:49%}
}


/* v180: desktop hero back to its Sep-4 behaviour. The wide-screen aspect rule, the global still
   drift and the global light sweep are gone; the phone blocks below 561px are untouched. The one
   thing kept from that work is the announcement ticker still moving under Reduce Motion, which the
   original rule froze outright. */
@media (prefers-reduced-motion:reduce){ .promo__track{animation:promoScroll 110s linear infinite;transform:none} }

/* v181: phone hero back to the PHOTO (the 9:14 look Noah preferred), with the two things that were
   wrong with it fixed. Then, cover-fitting a 1.8:1 scene into a 0.8:1 stage scaled it to the stage
   HEIGHT and cropped half the width away, which is why the vial was giant and cut off at the edge.
   Now the media keeps the scene's own shape at a size chosen so the vial lands whole in the right
   third: media 149% wide, pushed right, its left edge feathered into the cream, the cream wash over
   the left for the copy. It moves: the loop plays, and the whole scene drifts right to left. */
@media (max-width:560px){
.hero__plate::before{display:none}
.hero__media{position:absolute;left:auto;right:-27.5%;top:auto;bottom:16%;width:149%;height:auto;max-width:none;
  aspect-ratio:1600/886;overflow:hidden;border:0;border-radius:0;box-shadow:none;background:none;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 8%,rgba(0,0,0,.45) 20%,#000 33%);
  mask-image:linear-gradient(to right,rgba(0,0,0,0) 8%,rgba(0,0,0,.45) 20%,#000 33%);
  animation:heroVialDrift 9s ease-in-out infinite}
.hero__media picture{display:block;height:100%}
.hero__media img,.hero__media video,.hero__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 50%;filter:none;animation:none;transform:none;
  -webkit-mask-image:none;mask-image:none}
.hero__video{display:block!important;z-index:1}
.hero__media::after{display:none}
.hero__scrim{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(244,238,226,.93) 0%,rgba(244,238,226,.88) 40%,rgba(244,238,226,.42) 58%,rgba(244,238,226,0) 76%)}
.hero__title{max-width:56%;font-size:clamp(26px,7.2vw,30px)}
.hero__in .lede{max-width:56%;font-size:14px}
.hero__acts{max-width:56%}
}
@media (max-width:380px){ .hero__media{height:auto} }

/* v182: the photo panel's top and bottom edges were visible as straight lines across the cream, and
   the drift's rightmost point left only ~9px at the screen edge. All four edges now feather into the
   plate (the fades stop short of the vial so its cap and base stay solid), and the panel sits a little
   higher with a shorter throw so both gaps hold at every point of the travel. */
@keyframes heroVialDrift{0%{transform:translateX(5px)}50%{transform:translateX(-5px)}100%{transform:translateX(5px)}}
@media (max-width:560px){
.hero__media{right:-26.5%;bottom:19%;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 8%,rgba(0,0,0,.45) 20%,#000 33%),linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 10%,#000 91%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,rgba(0,0,0,0) 8%,rgba(0,0,0,.45) 20%,#000 33%),linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 10%,#000 91%,rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
}

/* v183: on a 430px phone the copy column grows faster than the panel does, closing the gap to 10px.
   Above 400px the panel shifts right so the gap and the screen margin stay balanced. */
@media (min-width:401px) and (max-width:560px){ .hero__media{right:-29%} }

/* v184: -29% pushed the panel too far (6px to the screen edge at 430). Split the difference so both
   the gap to the copy and the screen margin sit around 20px on a large phone. */
@media (min-width:401px) and (max-width:560px){ .hero__media{right:-27.7%} }

/* v185: small phones had the opposite imbalance (9-13px to the copy, 21px to the edge). Same
   treatment there so both sides land near 15px on every phone size. */
@media (max-width:400px){ .hero__media{right:-28%} }

/* v186: the copy column and the panel scale at different rates, so the balance point moves with the
   screen. Three buckets, each landing both gaps around 15-18px. */
@media (min-width:386px) and (max-width:400px){ .hero__media{right:-27%} }

/* v187: the phone was running the ping-pong loop (forward then reversed), so the clip's slow camera
   creep played in and then back out - that in-and-out is the "squeezing". The panel drift on top of it
   made it worse. Phones now play the same clip desktop plays and the panel itself holds still, so the
   only motion is the scene's own, exactly like desktop. */
@media (max-width:560px){ .hero__media{animation:none} }

/* v188: phone motion now matches desktop's character without dragging the vial into the copy.
   Measured: the desktop clip's camera pushes in 16% and slides the vial 20% of the frame left over
   10s - fine edge to edge, but inside the narrow phone panel it walks the vial across the text. The
   phone plays the static-framing loop (light and dust only) and the PANEL does the push-in, scaled
   about the vial's own centre so the vial grows in place instead of travelling. No sideways drift:
   translating a feathered panel over static cream was what read as squeezing. */
@keyframes heroPanelPush{from{transform:scale(1)}to{transform:scale(1.055)}}
@media (max-width:560px){
.hero__media{transform-origin:67% 51%;animation:heroPanelPush 18s ease-in-out infinite alternate;will-change:transform}
}
@media (prefers-reduced-motion:reduce){ .hero__media{animation:none} }

/* v189: no more size change on the vial. The loop phones were playing was built from footage whose
   camera still creeps, and ping-ponging it made the vial's width breathe in and out for ever - that is
   the "skinnier and fatter". Phones now play hero3-phone.mp4, cut from the flattest four seconds of
   the footage (vial width varies 0.5% at most, loop seam 0.63) so the only thing that moves in the
   scene is the light and the dust. The panel push-in is gone too. Instead the WHOLE hero gets the
   motion: a wide, soft band of light travels right to left across the entire plate, cream included. */
@keyframes heroPlateLight{0%{transform:translateX(78%)}100%{transform:translateX(-78%)}}
@media (max-width:560px){
.hero__media{animation:none;transform:none;will-change:auto}
.hero__plate{position:relative;isolation:isolate}
.hero__plate::after{content:"";position:absolute;z-index:3;top:-10%;bottom:-10%;left:0;width:64%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.34) 46%,rgba(255,255,255,.34) 54%,rgba(255,255,255,0) 100%);
  mix-blend-mode:soft-light;animation:heroPlateLight 15s linear infinite}
}
@media (prefers-reduced-motion:reduce){ .hero__plate::after{animation:none;opacity:0} }

/* v190: the light band was strong enough to visibly lift the green button as it passed. Softer. */
@media (max-width:560px){
.hero__plate::after{background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.2) 46%,rgba(255,255,255,.2) 54%,rgba(255,255,255,0) 100%)}
}

/* v191: the sweeping band over the whole plate is off. Nothing on the phone hero scales, translates
   or sweeps any more. The only motion is the scene's own - light and dust drifting in the clip - at a
   framing that never changes size. */
@media (max-width:560px){
.hero__plate::after{display:none!important;animation:none!important}
.hero__media{animation:none!important;transform:none!important}
}

/* v192: PDP quantity row on phones. `.pdp__qty{width:100%}` made the stepper fill the row, so the
   price was pushed into the plus button and off the edge. The stepper takes only what it needs, the
   price keeps its own column, and the row never wraps or collides. */
@media (max-width:560px){
.pdp__qtyprice{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px}
.pdp__qtyprice-l{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.pdp__qtyprice-l .pdp__variants-h{flex:0 0 auto;font-size:10px;letter-spacing:.1em}
.pdp__qty{width:auto;min-width:116px;max-width:138px;flex:0 1 auto;justify-content:space-between}
.pdp__qty input{flex:1 1 auto;width:auto;min-width:0;text-align:center}
.pdp__qtyprice-r{flex:0 0 auto;min-width:0}
.pdp__qtyprice-r .pdp__price{font-size:26px;white-space:nowrap}
.pdp__qtyprice-r .pdp__per{white-space:nowrap}
}
@media (max-width:360px){
.pdp__qtyprice-l .pdp__variants-h{display:none}
.pdp__qtyprice-r .pdp__price{font-size:24px}
}

/* v193: phones get their own hero film, built at the hero's exact shape (900x1140, 15:19) instead of
   an oversized landscape panel bleeding off the screen. The vial is composed into the right third at
   its true proportions, the cream on the left is part of the film so the copy sits on it cleanly, the
   top and bottom feather into the plate, and a soft band of light travels right to left across the
   whole frame on an 8s seamless cycle. Nothing here scales, translates or masks - the film fills the
   plate the way the desktop film fills the desktop hero. */
@media (max-width:560px){
.hero__media{position:absolute;inset:0;left:0;right:0;top:0;bottom:0;width:auto;height:auto;min-width:0;max-width:none;
  aspect-ratio:auto;margin:0;overflow:hidden;border:0;border-radius:0;box-shadow:none;background:none;
  animation:none;transform:none;-webkit-mask-image:none;mask-image:none}
.hero__media picture{display:block;height:100%}
.hero__media img,.hero__media video,.hero__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 50%;animation:none;transform:none;filter:none;
  -webkit-mask-image:none;mask-image:none}
.hero__video{display:block!important;z-index:1}
.hero__media::after{display:none!important}
.hero__plate::before,.hero__plate::after{display:none!important}
.hero__scrim{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(244,238,226,.74) 0%,rgba(244,238,226,.62) 42%,rgba(244,238,226,.22) 60%,rgba(244,238,226,0) 76%)}
}

/* v194: match the desktop hero's proportions. On desktop the vial fills ~95% of the hero height and
   the copy sits in a narrow column beside it - that scale is what makes it look premium, and the phone
   version was a small object floating in cream. The new film puts the vial at 14-81% of the frame with
   the light ray and cream on the left for the copy. The stats row comes off phones: it repeated the
   trust card immediately below the hero, and removing it lets the hero sit tighter so the vial reads big. */
@media (max-width:560px){
.hero__proof-m{display:none}
.hero__in{padding:26px 20px 26px}
.hero__title{max-width:50%;font-size:clamp(25px,6.9vw,28px)}
.hero__in .lede{max-width:50%;font-size:13.5px;line-height:1.5}
.hero__acts{max-width:50%;margin-top:15px}
.hero__acts .btn{min-height:44px;font-size:13.5px}
.hero__scrim{background:linear-gradient(90deg,rgba(244,238,226,.66) 0%,rgba(244,238,226,.5) 38%,rgba(244,238,226,.14) 56%,rgba(244,238,226,0) 72%)}
}

/* v195: guarantee the motion even when the video cannot play. iOS blocks autoplay outright in Low
   Power Mode, and Data Saver / 2G skip it by design - in all of those the hero was a dead still. The
   same right-to-left light pass now runs in CSS over the poster whenever the film is NOT playing, and
   switches itself off the instant it is. It lives inside the media box, under the copy, so it can never
   wash the buttons the way the old plate-level band did. */
@keyframes heroStillLight{0%{background-position:130% 0}100%{background-position:-70% 0}}
@media (max-width:560px){
#heroMedia:not(.is-live)::after{content:"";display:block!important;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.26) 50%,rgba(255,255,255,0) 62%);
  background-size:230% 100%;background-repeat:no-repeat;
  animation:heroStillLight 10s linear infinite}
#heroMedia.is-live::after{display:none!important}
}
@media (prefers-reduced-motion:reduce){ #heroMedia::after{animation:none!important;display:none!important} }

/* v196: lock the composition against phone-to-phone height differences. The film is 0.86:1; if the
   copy renders even slightly taller than it does here the plate gets taller, `cover` then scales the
   film to the plate HEIGHT and trims the sides evenly - which walks the vial left and clips its right.
   Pinning the film to the right edge means any trim comes off the LEFT, which is flat cream behind the
   copy and invisible, so the vial stays exactly where it was composed on every phone. The plate also
   takes the film's own ratio as a floor so in the common case there is no trim at all. */
@media (max-width:560px){
.hero__plate{min-height:calc(100vw * 1.163)}
.hero__media img,.hero__media video,.hero__video{object-position:100% 50%}
}

/* v197: the vial's size and position must not depend on how tall the copy renders. The film is now
   TALLER (0.70:1) than any phone hero, so `cover` always scales it by WIDTH - the vial is therefore
   sized and placed purely by the screen width, identical on every handset. Anchoring to the bottom
   means the height the browser trims comes off the TOP of the film, which is empty cream behind the
   headline. Previously the film was shorter than the hero, so a phone whose copy ran a few lines
   taller scaled the whole film up and drove the vial into the text - that was the "out of position". */
@media (max-width:560px){
.hero__plate{min-height:0}
.hero__media img,.hero__media video,.hero__video{object-position:50% 100%}
}

/* v198: the motion is now an entrance, not a loop. A band sweeping over a photo reads as a loading
   shimmer and a panning scene reads as drift - both were rejected. The vial now glides in from the
   right and settles once, on load, then holds perfectly still. Nothing loops, nothing oscillates,
   nothing can look glitchy on the tenth cycle. The film is off on phones too, so the hero paints
   instantly from the poster and saves the 458 KB download. */
@keyframes heroGlideIn{
  from{transform:translateX(13%);opacity:0}
  35%{opacity:1}
  to{transform:translateX(0);opacity:1}
}
@media (max-width:560px){
.hero__media{overflow:hidden}
.hero__media img{animation:heroGlideIn 1600ms cubic-bezier(.17,.72,.22,1) both;will-change:transform}
#heroMedia::after{display:none!important;animation:none!important}
.hero__video{display:none!important}
}
@media (prefers-reduced-motion:reduce){ .hero__media img{animation:none!important} }

/* v199: make the entrance fail-safe. v198 put the animation straight on the img with
   `animation-fill-mode:both`, whose first keyframe is opacity:0 - so anywhere the animation does not
   actually run (throttled tab, a browser that skips it) the hero rendered EMPTY. The resting state is
   now the default: the vial is simply there, visible and in place. A script adds `hl-glide` only on a
   phone with motion allowed, and only then does it glide in from the right. No JS, no animation, no
   problem - you still get the hero. */
@media (max-width:560px){
.hero__media img{animation:none}
#heroMedia.hl-glide img{animation:heroGlideIn 1600ms cubic-bezier(.17,.72,.22,1) both;will-change:transform}
}

/* v200: motion switcher on the REAL homepage. ?motion=a|b|c|d picks the treatment so Noah is judging
   the actual hero at its real size and type, not a mock. No flag = whatever ships by default. */
@keyframes heroDriftM{0%{transform:translateX(2.2%) scale(1.055)}100%{transform:translateX(-2.2%) scale(1.055)}}
@keyframes heroShineM{0%{background-position:130% 0}100%{background-position:-70% 0}}
@media (max-width:560px){
#heroMedia.m-a img{animation:heroDriftM 22s ease-in-out infinite alternate!important}
#heroMedia.m-b img{animation:heroGlideIn 1600ms cubic-bezier(.17,.72,.22,1) both!important}
#heroMedia.m-c img{animation:none!important}
#heroMedia.m-c::after{content:"";display:block!important;position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.30) 50%,rgba(255,255,255,0) 62%);
  background-size:230% 100%;background-repeat:no-repeat;animation:heroShineM 9s linear infinite!important}
#heroMedia.m-d img{animation:none!important}
#heroMedia.m-d::after{display:none!important}
}

/* v201: fix the ragged headline. At 28px in a 176px column "Reference peptides," cannot fit on one
   line, so it broke to four lines with "fully" stranded alone - desktop gets three. Sized so
   "peptides, fully" fits the column, and the lede tightened a touch so it is not seven short lines. */
@media (max-width:560px){
.hero__title{font-size:clamp(22px,6.05vw,24px);line-height:1.09;letter-spacing:-.022em;text-wrap:balance}
.hero__in .lede{font-size:13px;line-height:1.52;max-width:52%}
.hero__title,.hero__acts{max-width:52%}
.hero__acts .btn{font-size:13px;min-height:43px}
}

/* v202: the glide no longer touches opacity. Starting the image at opacity 0 means any frame where the
   animation is frozen or throttled paints an EMPTY hero - it slides only, so a stalled frame still
   shows the vial, just offset. */
@keyframes heroGlideIn{from{transform:translateX(13%)}to{transform:translateX(0)}}

/* v203: the vial carries the hero the way it does on desktop. New film (1200x1668) composes the glass
   at ~43% of the frame width and 22-97% of its height, so on a phone it renders about 170px wide and
   330 tall instead of 138x277 - a fifth bigger, filling the frame. To pay for it the copy column
   narrows and the second half of the lede is dropped on phones: "99%+ identity purity, HPLC verified,
   fulfilled same-day from the United States" is repeated verbatim by the trust card immediately below
   the hero, so on a small screen it said the same thing twice and cost the vial its room. */
@media (max-width:560px){
.hero__in .lede-rest{display:none}
.hero__title{max-width:46%;font-size:clamp(21px,5.8vw,23px);line-height:1.1}
.hero__in .lede{max-width:46%;font-size:13px;line-height:1.5}
.hero__acts{max-width:46%}
.hero__acts .btn{font-size:12.5px;min-height:42px;padding-inline:8px}
}

/* v204: with the lede shortened the hero collapsed to 350px, and since the film is bottom-anchored
   that cropped the vial's CAP off the top. The hero now has a floor tied to the film's own ratio so the
   whole vial always fits: 1.18 x the viewport width leaves the vial fully in frame with air above it. */
@media (max-width:560px){ .hero__plate{min-height:calc(100vw * 1.18)} }

/* v205: back to the state Noah approved ("positioned better", "I like what u did with the text").
   Undoes the three things changed after it: the bigger vial film, the shrunk type, and the shortened
   lede. Keeps the two fixes that were never in question - the film is taller than the hero so device
   text metrics cannot rescale it, and the entrance slides without fading so a stalled frame can never
   paint an empty hero. */
@media (max-width:560px){
.hero__plate{min-height:0}
.hero__in .lede-rest{display:inline}
.hero__title{max-width:50%;font-size:clamp(25px,6.9vw,28px);line-height:1.08}
.hero__in .lede{max-width:50%;font-size:13.5px;line-height:1.5}
.hero__acts{max-width:50%}
.hero__acts .btn{font-size:13.5px;min-height:44px;padding-inline:10px}
}

/* v206: vial at product-page scale. On the PDP the vial fills ~82% of its frame; in the hero it was
   at 60%. The new film puts the glass at 49-96.5% of the frame width, so on a 393 phone it renders
   187px wide with a 14px gutter - about a third wider than before and filling the hero the way the
   product page does. The copy column comes back to 45% so it clears the vial's left edge at 193px. */
@media (max-width:560px){
.hero__in .lede-rest{display:inline}
.hero__title{max-width:45%;font-size:clamp(21px,5.6vw,23px);line-height:1.1}
.hero__in .lede{max-width:45%;font-size:12.5px;line-height:1.5}
.hero__acts{max-width:45%}
.hero__acts .btn{font-size:12px;min-height:41px;padding-inline:6px}
}

/* v207: mobile hero rebuilt on Disguised's STRUCTURE in Helion's own branding. What makes DA's phone
   hero work is not its composition, it is the dark ground: the product sits behind everything as a
   backdrop and the copy runs full width on top, so type and product never compete for the same pixels.
   On cream that fight is unwinnable at 393px. So the phone hero now uses the DARK cut of the same
   Helion vial scene (hero3-dark), a deep-green ground and scrim rather than DA's neutral black and
   magenta, cream type, and Helion's own buttons inverted for a dark ground. Desktop is untouched. */
@media (max-width:560px){
.hero__plate{background:#0E2620;min-height:calc(100vw * 1.16);border-color:#0E2620}
.hero__media{position:absolute;inset:0;left:0;right:0;top:0;bottom:0;width:auto;height:auto;overflow:hidden}
.hero__media img,.hero__media video,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
/* DA's six-stop scrim, in Helion green: heaviest top and bottom, open in the middle where the vial is */
.hero__scrim{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,38,32,.88) 0%,rgba(14,38,32,.62) 34%,rgba(14,38,32,.44) 58%,rgba(14,38,32,.52) 74%,rgba(14,38,32,.74) 90%,rgba(14,38,32,.86) 100%)}
/* copy runs full width on top, like DA */
.hero__in{position:relative;z-index:2;padding:34px 22px 30px;max-width:none}
.hero__in .eyebrow{max-width:none;color:#C8B48A;font-size:11px;letter-spacing:.15em;white-space:normal}
.hero__title{max-width:none;color:#fff;font-size:clamp(28px,7.9vw,32px);line-height:1.06;letter-spacing:-.03em;margin-top:12px}
.hero__in .lede{max-width:none;color:rgba(255,255,255,.92);font-size:14.5px;line-height:1.5;margin-top:12px}
.hero__in .lede-rest{display:inline}
.hero__acts{max-width:none;display:flex;flex-direction:row;gap:10px;margin-top:20px}
.hero__acts .btn{flex:1 1 0;min-height:50px;font-size:13.5px;padding-inline:8px;white-space:nowrap;justify-content:center}
.hero__acts .btn--accent{background:#F4EEE2;border-color:#F4EEE2;color:#123029}
.hero__acts .btn--ghost{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
/* rule + three proof stats, DA's closing move */
.hero__proof-m{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 26px;list-style:none;
  margin:22px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.22)}
.hero__proof-m li{margin:0;padding:0}
.hero__proof-m b{display:block;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1;color:#fff}
.hero__proof-m span{display:block;margin-top:5px;font-size:12px;line-height:1.2;color:rgba(255,255,255,.72)}
}

/* v208: Helion's vial has a CREAM label where DA's is dark, so at DA's scrim values the label read
   straight through the buttons and the stats row ("GLP-3 Reta" colliding with "3rd party"). The scrim
   now stays open across the cap and shoulder, where the vial is dark and reads well, and closes down
   hard from the label line to the base, which is the band the copy occupies. */
@media (max-width:560px){
.hero__media img,.hero__media video,.hero__video{object-position:56% 46%}
.hero__scrim{background:
  linear-gradient(180deg,rgba(14,38,32,.86) 0%,rgba(14,38,32,.56) 30%,rgba(14,38,32,.42) 46%,rgba(14,38,32,.66) 60%,rgba(14,38,32,.86) 74%,rgba(14,38,32,.93) 88%,rgba(14,38,32,.95) 100%)}
}

/* v209: mobile hero is now type on a solid tan ground - no vial, no film, no scrim. The image comes
   off phones entirely (nothing downloaded either), the plate is the brand tan --tan #EADFCB, and the
   whole hero is set as typography: mono tan-ink eyebrow, a large display headline that breaks in two
   or three lines at full width, the lede on a comfortable measure, Helion's green button beside a
   ghost, then the rule and three proof stats. Desktop is untouched. */
@media (max-width:560px){
.hero__plate{background:var(--tan);min-height:0;border-color:var(--tan-2);overflow:visible}
.hero__media,.hero__video,.hero__scrim{display:none!important}
.hero__in{position:relative;z-index:2;padding:38px 22px 34px;max-width:none}
.hero__in .eyebrow{max-width:none;color:var(--tan-ink);font-size:11px;letter-spacing:.16em;white-space:normal}
.hero__title{max-width:none;color:var(--ink);font-size:clamp(30px,8.4vw,36px);line-height:1.04;letter-spacing:-.032em;margin-top:14px;text-wrap:balance}
.hero__in .lede{max-width:36ch;color:var(--ink-2);font-size:15px;line-height:1.55;margin-top:14px}
.hero__in .lede-rest{display:inline}
.hero__acts{max-width:none;display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;margin-top:22px}
.hero__acts .btn{flex:1 1 0;min-height:50px;font-size:13.5px;padding-inline:8px;white-space:nowrap;justify-content:center}
.hero__acts .btn--accent{background:var(--accent);border-color:var(--accent);color:#fff}
.hero__acts .btn--ghost{background:transparent;border-color:rgba(10,10,11,.28);color:var(--ink)}
.hero__proof-m{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 24px;list-style:none;
  margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--tan-2)}
.hero__proof-m li{margin:0;padding:0}
.hero__proof-m b{display:block;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.hero__proof-m span{display:block;margin-top:5px;font-size:12px;line-height:1.2;color:var(--ink-3)}
}