/* Monarch BioLabs — v3 site styles
1. Tokens + base 2. Current header / hero (kept from live site)
3. v3 components 4. Page templates 5. Responsive */
/* ---------- 1. Tokens + base ---------- */
:root{
--ink:#0A1A12; --ink-2:#3C4A43; --muted:#6E7A74;
--g-900:#0C3525; --g-700:#1B6446; --g-600:#2E7D5B; --g-500:#3A9A6E; --g-300:#9FD3B7;
--tint:#F2F8F4; --tint-2:#E6F2EB; --line:#E3ECE7; --white:#FFFFFF;
--grad:linear-gradient(100deg,#155B3F 0%,#2E8A61 60%,#46AE7E 100%);
--mono:"IBM Plex Mono",ui-monospace,monospace; --sans:"Inter",system-ui,sans-serif;
--sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
--r-lg:28px; --r-md:20px; --max:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 16px/1.55 var(--sans);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--g-600)}
.eyebrow.line{display:inline-flex;align-items:center;gap:12px}
.eyebrow.line::after{content:"";width:80px;height:1px;background:linear-gradient(90deg,var(--g-300),transparent)}
h1,h2,h3{font-weight:900;letter-spacing:-.045em;line-height:.98}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ---------- 2. Current header / hero (recreated from live site) ---------- */
.mb-ticker{background:#0B1F1A;color:rgba(255,255,255,.85);width:100%;overflow:hidden;white-space:nowrap;height:40px;display:flex;align-items:center;font-family:var(--sys)}
.mb-ticker-track{display:inline-flex;align-items:center;gap:40px;padding-left:40px;animation:mb-ticker 96s linear infinite}
.mb-ticker-track span{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.mb-ticker-track span::before{content:"✓";color:#6FE3A0}
@keyframes mb-ticker{to{transform:translateX(-50%)}}
.mb-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid #E3E8F0;padding:24px 0;font-family:var(--sys)}
.mb-nav-wrap{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;position:relative}
.mb-logo{display:flex;align-items:center;gap:11px;color:#0B1F1A}
.mb-logo img{width:50px;height:50px;object-fit:contain;flex-shrink:0}
.mb-logo-text{display:flex;flex-direction:column;line-height:.88;font-family:Montserrat,sans-serif;font-weight:900;text-transform:uppercase;font-size:1rem;letter-spacing:.01em}
.mb-logo-text .p{color:#0F2E26}.mb-logo-text .s{color:#2E7D5B}
.mb-nav-links{display:flex;gap:30px;list-style:none}
.mb-nav-links a{font-size:.88rem;font-weight:700;color:#10192E;transition:color .15s;position:relative}
.mb-nav-links a:hover,.mb-nav-links a[aria-current=page]{color:#2E7D5B}
.mb-nav-links a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:#2E7D5B}
.mb-nav-right{display:flex;align-items:center;gap:16px}
.mb-icon{color:#0B1F1A;padding:5px;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:8px;transition:color .15s,background .15s}
.mb-icon:hover{color:#2E7D5B;background:#E1F5EA}
.mb-badge{position:absolute;top:-3px;right:-5px;background:#2E7D5B;color:#fff;font-size:.62rem;font-weight:700;min-width:16px;height:16px;padding:0 3px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;border:2px solid #fff}
.mb-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #E3E8F0;border-radius:10px;background:#fff;color:#0B1F1A;font-size:25px;line-height:1}
.mb-hero{position:relative;min-height:620px;display:flex;align-items:center;background:#062D23 url("https://monarchbiolabs.com/wp-content/uploads/2026/09/01-Codex-Image-Sep-21-2026-11_46_37-AM.png") center/cover no-repeat;font-family:var(--sys)}
.mb-hero-inner{width:100%;padding:0 clamp(40px,5.5vw,104px)}
.mb-hero-content{position:relative;z-index:2;width:min(620px,46vw);padding:110px 0 96px;color:#fff;transform:translateX(144px)}
.mb-hero h1{margin:0 0 20px;color:#fff;font-size:clamp(2.8rem,6vw,5.5rem);font-weight:800;line-height:.98;letter-spacing:-.045em}
.mb-hero .mb-sub{max-width:680px;margin:0 0 30px;color:rgba(255,255,255,.88);font-size:clamp(1rem,1.7vw,1.23rem);line-height:1.7}
.mb-cta{display:flex;flex-wrap:wrap;gap:12px}
.mb-btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;border-radius:10px;font-size:.92rem;font-weight:700;background:#2E7D5B;border:1px solid #2E7D5B;color:#fff;white-space:nowrap;transition:transform .15s,background .15s}
.mb-btn:hover{background:#255E45;border-color:#255E45;transform:translateY(-1px)}
.mb-hero-mobile{display:none}
.mb-stats-band{background:radial-gradient(120% 140% at 80% 0%,#163B30 0%,#0B1F1A 55%,#071410 100%);color:#fff;font-family:var(--sys)}
.mb-stats-inner{width:min(100% - 80px,1440px);margin:0 auto}
.mb-stats{border-top:1px solid rgba(255,255,255,.1);padding:28px 0 32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.mb-stats .num{display:block;font-size:1.7rem;font-weight:800;color:#fff;line-height:1.55}
.mb-stats .label{font-size:.76rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.05em}
/* ---------- 3. v3 components ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:999px;font-weight:800;font-size:15px;letter-spacing:-.01em;transition:transform .15s,box-shadow .15s,opacity .15s;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 14px 30px -12px rgba(30,110,75,.6)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 34px -12px rgba(30,110,75,.7)}
.btn-outline{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--g-300)}
.btn-light{background:#fff;color:var(--g-900)}
.btn-sm{height:40px;padding:0 18px;font-size:13.5px}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none;box-shadow:none}
.icon-btn{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;background:var(--tint);border:1px solid var(--line);position:relative;flex-shrink:0}
.icon-btn:hover{background:var(--tint-2)}
.icon-btn svg{width:18px;height:18px}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
section{position:relative}
.sec{padding:96px 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:36px}
.sec-head h2{font-size:clamp(40px,5vw,64px);margin-top:12px}
.sec-head p{color:var(--ink-2);max-width:440px;margin-top:14px}
/* Best sellers */
.bestsellers{background:linear-gradient(180deg,#fff 0%,var(--tint) 100%)}
.car-ctrl{display:flex;gap:10px;align-items:center}
.car-ctrl .icon-btn{background:#fff}
/* Best Sellers uses the same .pc card as the All Peptides grid; the track is
just a horizontal scroller around it. */
.track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 26px}
/* Scoped to #track, not .track: a later `.track` rule (repeat(3,1fr)) belongs to
a different component and was overriding this one, which is what left the
Best Sellers cards at mismatched widths. Flex so the basis resolves against
the row width and every card matches the All Peptides grid. */
#track{display:flex}
#track .pc{flex:0 0 calc((100% - 60px)/4);scroll-snap-align:start;min-width:0}
#track .pc > *{min-width:0}
.track::-webkit-scrollbar{display:none}
.bs{scroll-snap-align:start;border-radius:var(--r-lg);background:linear-gradient(170deg,#fff 0%,var(--tint-2) 100%);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:18px;transition:transform .25s,box-shadow .25s}
.bs:hover{transform:translateY(-4px);box-shadow:0 26px 44px -26px rgba(12,53,37,.4)}
/* Reserve two title lines so the image and the button line up across every card,
however long the product name is. */
.bs .top{display:flex;justify-content:space-between;align-items:start;gap:10px}
/* min-height reserves two lines, so the image and the button sit at the same
height on every card no matter how long the product name is. */
.bs h3{font-size:20px;letter-spacing:-.03em;line-height:1.1;font-weight:900;min-height:2em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bs .from{font-size:13px;font-weight:800;white-space:nowrap}
.bs .from small{font-weight:600;color:var(--muted);margin-right:3px}
.bs .pic{border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/5;background:#EDEDEB;display:block}
.bs .pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform .5s}
.bs:hover .pic img{transform:scale(1.14) rotate(-1.5deg)}
/* margin-top:auto pins the action row to the bottom edge of every card. */
.bs .act{display:flex;gap:8px;margin-top:auto}
.bs .act .icon-btn{background:#fff}
.bs .act .btn{flex:1;width:100%}
/* Statement band / page hero (molecule backgrounds) */
.statement{padding:24px 0}
.band{position:relative;overflow:hidden;border-radius:36px;background:radial-gradient(120% 140% at 80% 20%,#1E6A4A 0%,#0C3525 55%,#07241A 100%);color:#fff;padding:96px 56px;max-width:calc(var(--max) - 56px);margin:0 auto}
.mol{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.35) 35%,#000 62%);mask-image:linear-gradient(90deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.35) 35%,#000 62%)}
.mol .drift{animation:mol-drift 18s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.mol .d2{animation-duration:24s;animation-direction:alternate-reverse}
.mol .d3{animation-duration:30s}
@keyframes mol-drift{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(-14px,10px) rotate(2.5deg)}}
@media (prefers-reduced-motion:reduce){.mol .drift,.mb-ticker-track{animation:none}}
.band .inner{position:relative;max-width:640px}
.band .eyebrow,.page-hero .eyebrow{color:var(--g-300)}
.band h2{font-size:clamp(40px,6.4vw,92px);letter-spacing:-.05em;line-height:.9;margin:20px 0 26px;text-transform:uppercase}
.band h2 span{white-space:nowrap}
.solid{background:linear-gradient(100deg,#fff 0%,#BFE9D2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.outline{color:transparent;-webkit-text-stroke:1.5px rgba(191,233,210,.55)}
.band p{color:#BFD6CA;max-width:460px;font-size:17px;margin-bottom:30px}
.page-hero{padding:20px 0 0}
.page-hero .band{padding:72px 56px 76px}
.page-hero h1{font-size:clamp(44px,6vw,84px);letter-spacing:-.05em;line-height:.92;margin:18px 0 18px;text-transform:uppercase}
.page-hero p{margin-bottom:0}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);flex-wrap:wrap}
.crumbs a:hover{color:var(--g-600)}
.crumbs span[aria-hidden]{opacity:.5}
/* Catalog */
.search{display:flex;align-items:center;gap:10px;height:54px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:#fff;max-width:440px;box-shadow:0 8px 20px -16px rgba(12,53,37,.4)}
.search svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.search input{flex:1;border:0;outline:0;font:500 15px var(--sans);min-width:0;background:none}
.search:focus-within{border-color:var(--g-300)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.select{height:48px;padding:0 44px 0 18px;border-radius:999px;border:1px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236E7A74' stroke-width='1.8'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 18px center;appearance:none;font-size:14px;font-weight:700;cursor:pointer}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.pills button{height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.pills button:hover{border-color:var(--g-300)}
.pills button[aria-pressed=true]{background:var(--g-900);border-color:var(--g-900);color:#fff}
.pills button .n{font-family:var(--mono);font-size:11px;margin-left:6px;opacity:.7}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.empty{padding:48px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-md)}
.pc{position:relative;border-radius:var(--r-md);border:1px solid var(--line);background:#fff;padding:14px;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.pc:hover{transform:translateY(-3px);box-shadow:0 24px 40px -26px rgba(12,53,37,.4)}
.pc[hidden]{display:none}
/* Portrait tile: the product photos are square with wide empty margins, so a
4:5 crop trims the dead space at the sides and renders the vial ~25% larger
without clipping it. */
.pc .pic{border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:#EDEDEB;margin-bottom:16px;display:block}
.pc .pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.pure{position:absolute;top:24px;right:24px;padding:6px 11px;border-radius:999px;background:var(--grad);color:#fff;font-size:11.5px;font-weight:800;line-height:1.2;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(30,110,75,.8)}
.pc .cat{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--g-600);margin:0 4px 6px}
.pc h3{font-size:19px;letter-spacing:-.03em;line-height:1.15;margin:0 4px 10px;font-weight:900;min-height:2.3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc h3 a:hover{color:var(--g-600)}
.sizes{display:flex;gap:6px;flex-wrap:wrap;margin:0 4px 10px}
.sizes span{font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:999px;background:var(--tint-2);color:var(--g-700)}
.ruo{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin:0 4px 14px}
.ruo i{width:7px;height:7px;border-radius:50%;background:#34C27A;flex-shrink:0}
.pc .foot{margin-top:auto;padding:14px 4px 2px;border-top:1px solid var(--line)}
.pc .price{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}
.pc .price b{font-size:21px;letter-spacing:-.03em;color:var(--g-700);margin-left:4px}
.pc .act{display:flex;gap:8px}
.pc .act .btn{flex:1}
.pc .act .icon-btn{width:40px;height:40px}
/* Verified science */
.science{background:var(--tint)}
.science .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.science h2{font-size:clamp(40px,5vw,64px);margin:16px 0 18px}
.science h2 span{display:block}
.science h2 span:nth-child(2){color:var(--g-600)}
.science h2 span:nth-child(3){color:transparent;-webkit-text-stroke:1.5px var(--g-600)}
.science .lede{color:var(--ink-2);max-width:460px}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feat>div{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px}
.feat .ic{width:44px;height:44px;border-radius:14px;background:var(--grad);display:grid;place-items:center;color:#fff;margin-bottom:18px;box-shadow:0 10px 20px -10px rgba(30,110,75,.7)}
.feat .ic svg{width:20px;height:20px}
.feat h3{font-size:18px;letter-spacing:-.02em;margin-bottom:6px;line-height:1.2}
.feat p{font-size:14px;color:var(--muted)}
/* Footer */
footer.site{background:var(--tint);color:var(--ink-2);padding:72px 0 30px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.3fr);gap:40px;margin-bottom:56px}
.fgrid>*{min-width:0}
.news .btn{flex-shrink:0}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand img{width:auto;height:46px}
.brand .mb-logo-text .p{color:#0F2E26}.brand .mb-logo-text .s{color:#2E7D5B}
footer .about{margin-top:16px;max-width:340px;font-size:14px}
footer .about+.about{margin-top:10px;color:var(--muted);font-size:13px}
footer h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--g-600);margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:10px;font-size:14.5px}
footer ul a:hover,footer .mail:hover{color:var(--g-700)}
.news p{font-size:14px;margin-bottom:14px}
.news form{display:flex;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px}
.news input{flex:1;min-width:0;border:0;outline:0;background:none;padding:0 14px;color:var(--ink);font-size:14px}
.news input::placeholder{color:var(--muted)}
.news .btn{height:40px;padding:0 18px;font-size:13.5px}
.legal{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:32px;font-size:12.5px;color:var(--muted)}
.legal p{max-width:780px}
/* Toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,24px);opacity:0;background:var(--g-900);color:#fff;padding:14px 20px;border-radius:999px;font-weight:700;font-size:14px;display:flex;align-items:center;gap:10px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);transition:all .3s;z-index:100;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast i{width:20px;height:20px;border-radius:50%;background:#34C27A;display:grid;place-items:center;font-style:normal;font-size:12px}
/* ---------- 4. Page templates ---------- */
/* Product */
.pdp{padding:36px 0 80px}
.pdp .crumbs{margin-bottom:28px}
.pdp-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
.gallery{position:sticky;top:150px}
.gallery .main{border-radius:var(--r-lg);overflow:hidden;background:#EDEDEB;aspect-ratio:1/1;position:relative;border:1px solid var(--line)}
.gallery .main img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.gallery .pure{top:20px;right:20px;padding:9px 15px;font-size:14px}
.gallery .notes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.gallery .notes div{background:var(--tint);border:1px solid var(--line);border-radius:16px;padding:14px;font-size:12.5px;color:var(--ink-2)}
.gallery .notes strong{display:block;font-size:15px;color:var(--ink);letter-spacing:-.02em}
.buy .cat{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--g-600)}
.buy h1{font-size:clamp(38px,4.4vw,58px);margin:12px 0 14px}
.buy .short{color:var(--ink-2);font-size:16.5px;max-width:520px}
.buy .pricebox{display:flex;align-items:baseline;gap:14px;margin:24px 0 6px}
.buy .pricebox b{font-size:40px;font-weight:900;letter-spacing:-.04em;color:var(--g-700)}
.buy .sku{font-family:var(--mono);font-size:12px;color:var(--muted)}
.buy .ship{font-size:13.5px;color:var(--muted)}
.opt-label{display:flex;justify-content:space-between;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:28px 0 10px}
.opt-label span{font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.size-opts{display:flex;gap:8px;flex-wrap:wrap}
.size-opts button{min-width:84px;height:48px;padding:0 18px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-weight:800;font-size:15px}
.size-opts button:hover{border-color:var(--g-300)}
.size-opts button[aria-pressed=true]{border-color:var(--g-600);background:var(--tint);color:var(--g-700);box-shadow:inset 0 0 0 1px var(--g-600)}
.size-opts button small{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:-2px}
.addon{display:flex;align-items:center;gap:14px;margin-top:22px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;cursor:pointer;background:#fff}
.addon:hover{border-color:var(--g-300)}
.addon input{width:20px;height:20px;accent-color:var(--g-600)}
.addon img{width:52px;height:52px;border-radius:12px;object-fit:cover;background:#EDEDEB}
.addon div{flex:1;font-size:14px}
.addon strong{display:block;font-size:15px}
.addon span{color:var(--muted)}
.addon b{font-size:15px}
.cart-row{display:flex;gap:10px;margin-top:22px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;height:52px;background:#fff}
.qty button{width:44px;height:100%;font-size:20px;color:var(--ink-2)}
.qty input{width:40px;text-align:center;border:0;outline:0;font-weight:800;background:none}
.cart-row .btn{flex:1}
.secure{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:12px}
.coa-link{display:flex;align-items:center;gap:14px;margin-top:22px;padding:16px 18px;border-radius:18px;background:var(--tint);border:1px solid var(--line)}
.coa-link .ic{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;flex-shrink:0}
.coa-link .ic svg{width:18px;height:18px}
.coa-link div{flex:1;font-size:14px}
.coa-link strong{display:block;font-size:15px}
.coa-link span{color:var(--muted)}
.coa-link a{font-weight:800;font-size:14px;color:var(--g-700);white-space:nowrap}
.coa-link a:hover{text-decoration:underline}
.ruo-note{margin-top:18px;font-size:12.5px;color:var(--muted);line-height:1.5}
.tabs{margin-top:72px}
.tablist{display:flex;gap:6px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tablist button{padding:14px 18px;font-weight:800;font-size:15px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tablist button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--g-600)}
.tabpanel{padding:32px 0;max-width:820px;color:var(--ink-2)}
.tabpanel p+p{margin-top:12px}
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{text-align:left;padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:38%;font-weight:700;color:var(--ink)}
.spec td{font-family:var(--mono);font-size:13.5px}
/* COA library */
.coa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.coa{display:flex;gap:16px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;transition:box-shadow .2s,transform .2s}
.coa:hover{transform:translateY(-2px);box-shadow:0 20px 36px -26px rgba(12,53,37,.4)}
.coa[hidden]{display:none}
.coa img{width:76px;height:76px;border-radius:14px;object-fit:cover;background:#EDEDEB;flex-shrink:0}
.coa .body{flex:1;min-width:0}
.coa .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--g-600)}
.coa h3{font-size:17px;letter-spacing:-.02em;line-height:1.2;margin:4px 0 6px}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.status.ok{background:var(--tint-2);color:var(--g-700)}
.status.soon{background:#FBF3DF;color:#8A6412}
.status i{width:6px;height:6px;border-radius:50%;background:currentColor}
.coa .btn{height:40px;padding:0 16px;font-size:13px}
.coa-note{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-top:36px;padding:24px 28px;border-radius:var(--r-md);background:var(--tint);border:1px solid var(--line);flex-wrap:wrap}
.coa-note p{color:var(--ink-2);max-width:620px}
/* About */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split h2{font-size:clamp(36px,4.4vw,56px);margin:14px 0 18px}
.split p{color:var(--ink-2);font-size:16.5px}
.split p+p{margin-top:14px}
.photo-tile{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:0 40px 80px -30px rgba(12,53,37,.45)}
.photo-tile img{width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pillars>div{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:26px}
.pillars .ic{width:44px;height:44px;border-radius:14px;background:var(--grad);display:grid;place-items:center;color:#fff;margin-bottom:22px;box-shadow:0 10px 20px -10px rgba(30,110,75,.7)}
.pillars .ic svg{width:20px;height:20px}
.pillars h3{font-size:19px;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.pillars p{font-size:14.5px;color:var(--muted)}
.pillars small{display:block;margin-top:10px;font-size:12.5px;color:var(--muted);font-style:italic}
.cta-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:40px;border-radius:var(--r-lg);background:linear-gradient(170deg,#fff 0%,var(--tint-2) 100%);border:1px solid var(--line);flex-wrap:wrap}
.cta-card h2{font-size:clamp(28px,3.2vw,40px)}
.cta-card p{color:var(--ink-2);margin-top:8px}
.cta-card .btns{display:flex;gap:10px;flex-wrap:wrap}
/* FAQ */
.faq-layout{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start}
.faq-nav{position:sticky;top:150px;display:grid;gap:4px}
.faq-nav a{padding:10px 14px;border-radius:12px;font-weight:700;font-size:14.5px;color:var(--ink-2)}
.faq-nav a:hover{background:var(--tint)}
.faq-nav a.active{background:var(--g-900);color:#fff}
.faq-group{margin-bottom:48px;scroll-margin-top:150px}
.faq-group h2{font-size:clamp(26px,3vw,36px);margin-bottom:18px}
.faq-group details{border:1px solid var(--line);border-radius:18px;background:#fff;margin-bottom:10px;transition:border-color .2s}
.faq-group details[open]{border-color:var(--g-300);background:linear-gradient(170deg,#fff 0%,var(--tint) 100%)}
.faq-group summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px;font-weight:800;font-size:16.5px;letter-spacing:-.01em}
.faq-group summary::-webkit-details-marker{display:none}
.faq-group summary::after{content:"+";flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--tint-2);color:var(--g-700);display:grid;place-items:center;font-size:18px;font-weight:600;transition:transform .2s}
.faq-group details[open] summary::after{transform:rotate(45deg);background:var(--g-600);color:#fff}
.faq-group details p{padding:0 22px 22px;color:var(--ink-2);max-width:720px}
.faq-search{margin-bottom:32px}
/* Contact */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
.form-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:36px;background:#fff;box-shadow:0 30px 60px -40px rgba(12,53,37,.35)}
.form-card h2{font-size:32px;margin-bottom:8px}
.form-card>p{color:var(--muted);margin-bottom:26px}
.field{display:grid;gap:8px;margin-bottom:18px}
.field label{font-size:13px;font-weight:800;letter-spacing:.04em}
.field input,.field select,.field textarea{height:52px;padding:0 18px;border-radius:14px;border:1px solid var(--line);background:var(--tint);outline:0;font-size:15px;transition:border-color .15s,background .15s}
.field textarea{height:150px;padding:14px 18px;resize:vertical}
.field select{appearance:none;background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236E7A74' stroke-width='1.8'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 18px center}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--g-500);background:#fff}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.form-msg{margin-top:14px;font-size:14px;color:var(--g-700);font-weight:700;display:none}
.side-cards{display:grid;gap:16px}
.side-cards>div{border:1px solid var(--line);border-radius:var(--r-md);padding:24px;background:linear-gradient(170deg,#fff 0%,var(--tint) 100%)}
.side-cards .ic{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;margin-bottom:16px}
.side-cards .ic svg{width:18px;height:18px}
.side-cards h3{font-size:18px;letter-spacing:-.02em;margin-bottom:6px}
.side-cards p{font-size:14.5px;color:var(--muted)}
.side-cards a.link{display:inline-block;margin-top:10px;font-weight:800;color:var(--g-700)}
.side-cards a.link:hover{text-decoration:underline}
/* ---------- 5. Responsive ---------- */
@media (max-width:1080px){
.track{grid-auto-columns:calc((100% - 40px)/3)}
.grid{grid-template-columns:repeat(3,1fr)}
.coa-grid{grid-template-columns:repeat(2,1fr)}
.pillars{grid-template-columns:repeat(2,1fr)}
.fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:900px){
.mb-hero{min-height:560px}
.mb-hero-content{padding:88px 0 76px;width:min(620px,70vw);transform:translateX(48px)}
.mb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.pdp-grid,.split,.contact-grid{grid-template-columns:1fr;gap:36px}
.gallery{position:static}
.faq-layout{grid-template-columns:1fr;gap:24px}
.faq-nav{position:static;display:flex;overflow-x:auto;scrollbar-width:none}
.faq-nav a{white-space:nowrap}
}
@media (max-width:820px){
.wrap{padding:0 16px}
.sec{padding:64px 0}
.sec-head{flex-direction:column;align-items:start}
.track{grid-auto-columns:46%}
.grid{grid-template-columns:1fr 1fr;gap:12px}
.pc{padding:10px}
.pure{top:16px;right:16px;padding:4px 8px;font-size:10px}
.pc h3{font-size:16px}
.pc .act .icon-btn{display:none}
.band,.page-hero .band{padding:64px 24px;margin:0 16px;border-radius:28px}
.mol{opacity:.55;-webkit-mask-image:none;mask-image:none}
.pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.science .wrap{grid-template-columns:1fr;gap:44px}
.feat{grid-template-columns:1fr}
.coa-grid{grid-template-columns:1fr}
.legal{flex-direction:column}
.row2{grid-template-columns:minmax(0,1fr)}
.form-card{padding:24px}
}
@media (max-width:768px){
.mb-nav-links{display:none}
.mb-toggle{display:inline-flex}
.mb-logo{gap:8px}
.mb-logo img{width:40px;height:40px}
.mb-logo-text{font-size:.82rem}
.mb-nav-wrap{padding:0 18px}
.mb-header nav{position:absolute;top:calc(100% + 10px);left:12px;right:12px;z-index:99;padding:10px;border:1px solid #E3E8F0;border-radius:14px;background:#fff;box-shadow:0 16px 40px rgba(8,35,28,.16);display:none}
.mb-header nav.open{display:block}
.mb-header nav.open .mb-nav-links{display:grid;gap:2px}
.mb-header nav.open .mb-nav-links a{display:block;padding:12px 14px;border-radius:9px}
.mb-header nav.open .mb-nav-links a::after{display:none}
.mb-header nav.open .mb-nav-links a[aria-current=page]{background:#E1F5EA}
}
@media (max-width:600px){
.mb-header{padding:12px 0}
.mb-nav-wrap{height:64px}
.mb-nav-right{gap:4px}
.mb-icon{width:40px;height:40px}
.mb-logo img{width:34px;height:34px}
.mb-logo-text{font-size:.9rem;white-space:nowrap}
.mb-hero{display:block;min-height:0;background:#062D23;overflow:hidden}
.mb-hero-mobile{display:block;width:100%}
.mb-hero-mobile img{width:100%;height:auto}
.mb-hero-inner{position:absolute;top:0;left:0;right:0;z-index:2;padding:0}
.mb-hero-content{width:100%;max-width:390px;margin:0 auto;padding:24px 18px 0;transform:none;text-align:center}
.mb-hero h1{max-width:330px;margin:0 auto 11px;font-size:clamp(2.05rem,10vw,2.45rem);line-height:.96}
.mb-hero .mb-sub{max-width:340px;margin:0 auto 13px;font-size:.83rem;line-height:1.35}
.mb-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:350px;margin:0 auto}
.mb-btn{width:100%;min-height:44px;padding:11px 8px;font-size:.8rem;line-height:1.1}
.mb-stats-inner{width:100%;padding:0 14px}
.mb-stats{gap:10px 8px;padding:14px 0 16px}
.mb-stats .num{font-size:1.22rem;line-height:1.05}
.mb-stats .label{display:block;margin-top:5px;font-size:.58rem;line-height:1.2;letter-spacing:.035em}
.fgrid{grid-template-columns:minmax(0,1fr)}
.pillars{grid-template-columns:1fr}
.gallery .notes{grid-template-columns:1fr 1fr 1fr;gap:6px}
.gallery .notes div{padding:10px;font-size:11px}
.gallery .notes strong{font-size:13px}
.cta-card{padding:28px}
}
@media (max-width:560px){ .track{grid-auto-columns:78%} }
/* The Best Sellers row is #track, which is display:flex, so the responsive
`.track{grid-auto-columns:...}` rules above never reach it — its cards stayed
pinned at four-across on a phone, roughly 79px each. That truncated the
product names ("Retat rut…"), split prices mid-number ("$10 / 5.00") and cut
off the buttons. These mirror the breakpoints above in flex terms. */
/* A price must never break mid-number — "$105.00" was wrapping to "$10 / 5.00"
in the narrow cards. */
.pc .price b,.pc .price,.bs .from{white-space:nowrap}
.pc h3{overflow-wrap:anywhere}
@media (max-width:1080px){ #track .pc{flex:0 0 calc((100% - 40px)/3)} }
@media (max-width:820px){ #track .pc{flex:0 0 46%} }
@media (max-width:560px){ #track .pc{flex:0 0 78%} }
/* Mobile sticky buy bar (product page) */
.buybar{display:none}
@media (max-width:820px){
.buybar{display:flex;align-items:center;gap:12px;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:80;padding:10px 10px 10px 18px;border-radius:22px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 18px 40px -14px rgba(12,53,37,.45);transform:translateY(140%);transition:transform .3s}
.buybar.show{transform:none}
.buybar>div{flex:1;min-width:0;line-height:1.2}
.buybar .bb-name{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar b{font-size:19px;font-weight:900;letter-spacing:-.03em;color:var(--g-700)}
.buybar .btn{height:48px;padding:0 22px}
.toast{bottom:calc(92px + env(safe-area-inset-bottom))}
/* Product page on phones */
.pdp{padding:18px 0 56px}
.pdp .crumbs{margin-bottom:16px;font-size:12px}
.buy h1{font-size:34px}
.buy .pricebox b{font-size:34px}
.size-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.size-opts button{height:56px}
.tabs{margin-top:48px}
.tablist{margin-inline:-16px;padding-inline:16px}
.spec th{width:44%;font-size:14px}
.spec td{font-size:12.5px}
/* Bigger tap targets + tighter hero spacing */
.pills button{height:44px}
.btn-sm{height:44px}
.pc .act .btn{font-size:13px;padding:0 10px}
.page-hero{padding-top:12px}
.page-hero h1{font-size:clamp(40px,11vw,60px)}
.page-hero p{font-size:15px}
.band p{font-size:15.5px}
.sec-head h2{font-size:clamp(34px,9vw,48px)}
.science h2{font-size:clamp(34px,9vw,48px)}
.search{height:52px;max-width:none}
.toolbar .select{height:52px}
.coa{padding:12px;gap:12px}
.coa img{width:64px;height:64px}
.coa .btn{padding:0 14px}
.faq-group summary{padding:18px;font-size:15.5px}
.faq-group details p{padding:0 18px 18px;font-size:15px}
}
@media (max-width:420px){
.pc .price b{font-size:18px}
.pc .cat{font-size:9.5px;letter-spacing:.1em}
.sizes span{font-size:10px;padding:3px 8px}
.ruo{font-size:11px}
.coa{flex-wrap:wrap}
.coa .btn{width:100%}
}
/* ---------- v3 floating glass nav ---------- */
.nav-shell{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 24px -22px rgba(12,53,37,.5)}
.nav{position:relative;max-width:1320px;margin:0 auto;height:78px;display:flex;align-items:center;gap:20px;padding:0 28px;background:#fff;color:var(--ink)}
.nav .mb-logo{gap:8px}
.nav .mb-logo img{width:auto;height:48px}
.nav .mb-logo-text{font-size:1.1rem}
.nav nav{margin:0 auto}
.nav-links{display:flex;gap:2px;list-style:none}
.nav-links a{display:block;padding:10px 14px;border-radius:999px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transition:background .2s,color .2s}
.nav-links a:hover{background:rgba(46,125,91,.1)}
.nav-links a[aria-current=page]{background:var(--g-900);color:#fff}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-ic{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;background:var(--tint);border:1px solid var(--line);position:relative;color:inherit;transition:background .2s,border-color .2s}
.nav-ic:hover{background:var(--tint-2)}
.nav-ic svg{width:19px;height:19px}
.nav-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--g-600);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;border:2px solid #fff}
.nav-cta{margin-left:4px}
.nav-menu{display:none}
/* Over the dark hero, before scrolling: dark glass */
/* ---------- v3 cinematic hero ---------- */
.hx{position:relative;min-height:clamp(560px,42vw,760px);display:flex;align-items:center;background:#0B1F1A;color:#fff;overflow:hidden;padding:96px 0 160px}
.hx-media{position:absolute;inset:0}
.hx-media img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hx-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,22,16,.9) 0%,rgba(6,22,16,.62) 34%,rgba(6,22,16,0) 60%),linear-gradient(180deg,rgba(6,22,16,.35) 0%,rgba(6,22,16,0) 30%,rgba(6,22,16,0) 70%,rgba(6,22,16,.55) 100%)}
.hx .wrap{position:relative;width:100%;max-width:1320px}
.hx-copy{max-width:min(680px,92vw)}
/* Cap at 96px: the lines are nowrap, and above this "ELEVATE THE" outgrows the copy column. */
.hx h1{margin:22px 0 22px;font-size:clamp(52px,7vw,96px);font-weight:900;line-height:.88;letter-spacing:-.05em;text-transform:uppercase}
.hx h1 span{display:block;white-space:nowrap}
.hx h1 .outline{-webkit-text-stroke:1.6px rgba(191,233,210,.75)}
.hx-sub{max-width:500px;font-size:18px;line-height:1.6;color:rgba(255,255,255,.82);margin-bottom:32px}
.hx-ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn-glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.16)}
.hx-stats{position:relative;z-index:5;margin-top:-84px}
.hx-stats .card{display:grid;grid-template-columns:repeat(4,1fr);background:radial-gradient(120% 160% at 85% 0%,#1E6A4A 0%,#0C3525 50%,#07241A 100%);border:1px solid rgba(159,211,183,.18);border-radius:26px;box-shadow:0 30px 60px -30px rgba(7,36,26,.7);padding:8px}
.hx-stats .card>div{padding:22px 24px;border-right:1px solid rgba(159,211,183,.16)}
.hx-stats .card>div:last-child{border-right:0}
.hx-stats strong{display:block;font-size:30px;font-weight:900;letter-spacing:-.04em;line-height:1.05;color:#fff}
.hx-stats span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9FD3B7}
body.hero-dark .bestsellers{padding-top:72px}
@media (max-width:1080px){
.nav-cta{display:none}
.nav nav{margin:0}
.nav-actions{margin-left:auto}
.nav-menu{display:grid}
.nav #site-nav{position:absolute;top:calc(100% + 8px);left:12px;right:12px;padding:8px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 48px -20px rgba(12,53,37,.4);display:none;color:var(--ink)}
.nav.menu-open #site-nav{display:block}
.nav.menu-open .nav-links{display:grid;gap:2px}
.nav-links{display:none}
.nav.menu-open .nav-links a{padding:15px 16px;font-size:13.5px;border-radius:14px}
.hx-media img{object-position:86% 50%}
.hx-stats .card{grid-template-columns:repeat(2,1fr)}
.hx-stats .card>div:nth-child(2){border-right:0}
.hx-stats .card>div:nth-child(-n+2){border-bottom:1px solid rgba(159,211,183,.16)}
}
@media (max-width:760px){
.nav{height:66px;padding:0 12px 0 16px;gap:10px}
.nav .mb-logo{gap:8px}
.nav .mb-logo img{width:auto;height:42px}
.nav .mb-logo-text{font-size:.95rem}
.nav-ic{width:42px;height:42px}
.hide-sm{display:none}
.hx{display:block;min-height:0;padding:0 0 96px}
.hx-media{position:relative;height:auto}
.hx-media img{height:auto;aspect-ratio:4/3.4;object-position:80% 50%}
.hx-media::after{background:linear-gradient(180deg,rgba(6,22,16,.55) 0%,rgba(6,22,16,0) 28%,rgba(6,22,16,0) 55%,#0B1F1A 100%)}
.hx .wrap{margin-top:-64px}
.hx h1{font-size:clamp(44px,13.2vw,66px);margin:16px 0 16px}
.hx-sub{font-size:16px;margin-bottom:24px}
/* On a phone the hero copy sits over the busiest part of the photo — the
stone ledge runs straight behind the headline, and because the outlined
word is transparent that hard edge shows through the letters and reads as
a strikethrough. A scrim behind the copy restores contrast, and the stroke
goes fully opaque so the outline holds up at this size. */
.hx .wrap{position:relative}
.hx .hx-copy{position:relative;z-index:1}
.hx .hx-copy::before{content:"";position:absolute;inset:-24px -16px -16px;background:linear-gradient(180deg,rgba(7,26,19,0) 0%,rgba(7,26,19,.72) 22%,rgba(7,26,19,.88) 100%);z-index:-1;pointer-events:none}
.hx h1 .outline{-webkit-text-stroke-color:rgba(191,233,210,1)}
/* The display tracking (-.045em) is drawn for large screens. At phone size
the 1.6px outline strokes of neighbouring letters touch and merge, so
"STANDARD." reads as one tangled shape. Smaller type with looser tracking
separates the letterforms; line-height goes above 1 so the two lines stop
sitting on top of each other. */
/* Scoped to body.monarch-v3 to match the theme-guard rule further down
(body.monarch-v3 h1,h2,h3{letter-spacing:-.045em;line-height:.98}); a plain
`.hx h1` loses to it on specificity and only the font-size took effect. */
body.monarch-v3 .hx h1{font-size:43px;letter-spacing:-.015em;line-height:1.06;text-align:center}
/* The vials sit at ~68.6% across the 2000px-wide source. With object-fit:cover
the position needed to centre them depends on the box height, so shortening
the image (tried at 232px) shifted the required value and clipped GHK-Cu.
Height is left alone and 82% centres the trio across the 375-430px range
real phones use. The headline is centred to match; buttons stay left.
87% is measured, not guessed: sampling the source's column luminance puts
the vial trio at x=1209-1704 of 2000, i.e. centred on 72.8%. Solving
p = (0.728*W - Wwin/2) / (W - Wwin) for a 375px viewport gives 86.8%. */
body.monarch-v3 .hx img{object-position:87% 50%}
/* Sub-copy centred under the headline; the buttons below stay left-aligned. */
body.monarch-v3 .hx .hx-sub{text-align:center;margin-left:auto;margin-right:auto}
/* Hero crop left at the shared 80%. It looks like a desktop-only composition,
but the vials sit right-of-centre in the source image: 50% shows a single
vial and 72% clips GHK-Cu, while 80% frames all three centred on a phone. */
.hx-ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hx-ctas .btn{padding:0 12px;height:54px}
.hx-stats{margin-top:-64px}
.hx-stats .card{border-radius:22px;padding:4px}
.hx-stats .card>div{padding:16px}
.hx-stats strong{font-size:23px}
.hx-stats span{font-size:9.5px;letter-spacing:.1em}
body.hero-dark .bestsellers{padding-top:48px}
}
/* ---------- Promise cards (under Rise Above band) ---------- */
.promise{padding:24px 0 0}
.promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pr-card{position:relative;padding:36px;border-radius:28px;background:linear-gradient(170deg,#fff 0%,var(--tint) 100%);border:1px solid var(--line);box-shadow:0 30px 60px -44px rgba(12,53,37,.5);transition:transform .25s,box-shadow .25s}
.pr-card:hover{transform:translateY(-3px);box-shadow:0 34px 64px -40px rgba(12,53,37,.55)}
.pr-ic{width:56px;height:56px;border-radius:18px;background:var(--grad);display:grid;place-items:center;color:#fff;margin-bottom:22px;box-shadow:0 14px 28px -12px rgba(30,110,75,.7)}
.pr-ic svg{width:24px;height:24px}
.pr-card h3{font-size:clamp(22px,2.2vw,27px);letter-spacing:-.03em;line-height:1.15;margin-bottom:12px}
.pr-card p{color:var(--ink-2);font-size:16px;line-height:1.65;margin-bottom:20px}
.pr-card ul{list-style:none;display:grid;gap:10px}
.pr-card li{display:flex;align-items:flex-start;gap:10px;font-weight:700;font-size:15px;color:var(--ink)}
.pr-card li::before{content:"✓";flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--tint-2);border:1px solid var(--g-300);color:var(--g-700);display:grid;place-items:center;font-size:12px;font-weight:900;margin-top:1px}
@media (max-width:820px){
.promise{padding:16px 0 0}
.promise-grid{grid-template-columns:1fr;gap:14px}
.pr-card{padding:26px 22px;border-radius:24px}
.pr-card p{font-size:15px}
.pr-card li{font-size:14.5px}
}
/* ---------- Homepage FAQ ---------- */
.home-faq{padding:96px 0 72px;background:linear-gradient(180deg,#fff 0%,var(--tint) 100%)}
.hf-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.hf-intro{position:sticky;top:120px}
.hf-intro h2{font-size:clamp(38px,4.6vw,60px);margin:22px 0 18px}
.hf-sub{color:var(--ink-2);font-size:17px;max-width:460px}
.hf-note{margin:32px 0 26px;padding:22px 24px;border-radius:20px;border:1px solid var(--g-300);border-left:4px solid var(--g-600);background:linear-gradient(170deg,var(--tint) 0%,var(--tint-2) 100%);max-width:520px}
.hf-note strong{display:block;font-size:17px;margin-bottom:6px}
.hf-note p{font-size:14.5px;color:var(--ink-2)}
.hf-note a{color:var(--g-700);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.hf-list{display:grid;gap:14px}
.hf-item{background:#fff;border:1px solid var(--line);border-radius:22px;transition:border-color .2s,box-shadow .2s}
.hf-item[open]{border-color:var(--g-300);border-left:4px solid var(--g-600);box-shadow:0 24px 44px -30px rgba(12,53,37,.45)}
.hf-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:22px 24px}
.hf-item summary::-webkit-details-marker{display:none}
.hf-num{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:var(--tint-2);color:var(--g-700);border:1px solid var(--g-300);transition:background .2s,color .2s}
.hf-item[open] .hf-num{background:var(--g-600);color:#fff;border-color:var(--g-600)}
.hf-q{flex:1;font-weight:800;font-size:17px;letter-spacing:-.01em}
.hf-item[open] .hf-q{color:var(--g-700)}
.hf-ic{flex-shrink:0;position:relative;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--g-300);color:var(--g-700)}
.hf-ic::before,.hf-ic::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%)}
.hf-ic::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s}
.hf-item[open] .hf-ic{border-color:var(--g-600)}
.hf-item[open] .hf-ic::after{transform:translate(-50%,-50%) rotate(0deg)}
.hf-item p{padding:0 24px 24px 76px;color:var(--ink-2);font-size:15.5px;line-height:1.7}
@media (max-width:900px){
.hf-grid{grid-template-columns:1fr;gap:36px}
.hf-intro{position:static}
}
@media (max-width:760px){
.home-faq{padding:64px 0 48px}
.hf-item summary{padding:18px 16px;gap:12px}
.hf-num,.hf-ic{width:32px;height:32px}
.hf-q{font-size:15.5px}
.hf-item p{padding:0 18px 20px 18px;font-size:15px}
.hf-intro .btn{width:100%}
}
/* ---------- Final CTA (homepage bottom) ---------- */
.final-cta{padding:24px 0 96px;background:var(--tint)}
/* align-items:flex-end puts the buttons on the same baseline as the chips row
instead of floating them at the vertical centre of the card. */
.fc-card{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding:64px 64px;border-radius:32px;background:radial-gradient(120% 160% at 90% 0%,#1E6A4A 0%,#0C3525 50%,#07241A 100%);color:#fff;box-shadow:0 40px 80px -40px rgba(7,36,26,.6)}
.fc-card .mol{opacity:.5}
.fc-copy,.fc-btns{position:relative}
/* color must be explicit: the pill sits on a dark card on the homepage CTA and
on a light background in the FAQ section, and inherited text went black there. */
.fc-tag{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;border-radius:999px;background:var(--grad);color:#fff;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 10px 24px -10px rgba(46,138,97,.8)}
.fc-tag i{width:7px;height:7px;border-radius:50%;background:#fff}
.fc-card h2{font-size:clamp(32px,4vw,54px);letter-spacing:-.04em;line-height:1.02;margin:20px 0 22px}
.fc-card h2 span{background:linear-gradient(100deg,#fff 0%,#BFE9D2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* margin/padding 0: the theme indents every by 48px, which pushed the chip
row right of the headline and paragraph above it. */
.fc-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-left:0;padding-left:0}
.fc-copy .fc-chips{margin-bottom:0}
/* min-height, not height: on the shop header these chips are laid out in a
two-column grid, and at phone width "Free Shipping $200+" wraps to three
lines. A fixed height left that text hanging outside the pill. */
.fc-chips li{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);font-size:13.5px;font-weight:700;color:#E3F1EA}
.fc-chips li::before{content:"✓";color:#6FE3A0;font-weight:900}
.fc-btns{display:flex;gap:12px;flex-shrink:0}
@media (max-width:1080px){
.fc-card{flex-direction:column;align-items:flex-start;padding:48px 40px}
}
@media (max-width:760px){
.final-cta{padding:16px 0 64px}
.fc-card{padding:40px 22px;border-radius:26px;gap:28px}
.fc-card h2{font-size:clamp(28px,8.4vw,38px)}
.fc-chips li{min-height:34px;font-size:12.5px;padding:6px 12px}
.fc-btns{display:grid;grid-template-columns:1fr 1fr;width:100%}
.fc-btns .btn{padding:0 12px}
}
/* ---------- Checkout ---------- */
body.is-checkout{background:var(--tint)}
.co-header{background:#fff;border-bottom:1px solid var(--line)}
.co-header-in{max-width:1180px;margin:0 auto;height:76px;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.co-header .mb-logo img{width:auto;height:44px}
.co-header .mb-logo{gap:8px}
.co-secure{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;color:var(--g-700)}
.co-secure svg{width:17px;height:17px}
.co{padding:32px 0 80px}
.co-wrap{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:36px;align-items:start}
.co-wrap>*{min-width:0}
.co-steps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--muted);margin-bottom:18px}
.co-steps a{color:var(--g-700);font-weight:700}
.co-steps b{color:var(--ink)}
.co-block{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;margin-bottom:14px}
.co-block-h{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.co-block-h h2{font-size:22px;letter-spacing:-.03em}
.co-n{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13.5px;flex-shrink:0}
.row3{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:14px}
.field input,.field select,.field textarea{width:100%;min-width:0}
.row2>*,.row3>*{min-width:0}
.field .opt{font-weight:500;color:var(--muted);letter-spacing:0}
.field input.invalid,.field select.invalid{border-color:#D14343;background:#FFF6F6}
.co-check{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);cursor:pointer;line-height:1.5;border-radius:12px}
.co-check+.co-check{margin-top:14px}
.co-check input{width:20px;height:20px;margin-top:1px;accent-color:var(--g-600);flex-shrink:0}
.co-check a{color:var(--g-700);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.co-check.invalid{outline:2px solid #D14343;outline-offset:6px}
.co-ship{display:grid;gap:10px}
.co-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1.5px solid var(--line);border-radius:16px;cursor:pointer;transition:border-color .15s,background .15s}
.co-opt:hover{border-color:var(--g-300)}
.co-opt:has(input:checked){border-color:var(--g-600);background:var(--tint)}
.co-opt input{width:20px;height:20px;accent-color:var(--g-600)}
.co-opt-t{flex:1}
.co-opt-t b{display:block;font-size:15.5px}
.co-opt-t small{color:var(--muted);font-size:13px}
.co-opt-p{font-size:15.5px;color:var(--g-700)}
.co-fine{font-size:12.5px;color:var(--muted);margin-top:12px}
.co-pay{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:16px;border:1.5px dashed var(--g-300);background:var(--tint)}
.co-pay>svg{width:26px;height:26px;color:var(--g-600);flex-shrink:0;margin-top:2px}
.co-pay strong{display:block;font-size:16px;margin-bottom:4px}
.co-pay p{font-size:14px;color:var(--ink-2)}
.co-place{width:100%;height:58px;font-size:16.5px;margin-top:6px}
.co-place:disabled{opacity:.5;pointer-events:none}
.co-err{color:#B42323;font-weight:700;font-size:14px;margin-top:10px;min-height:1px}
.co-back{display:inline-block;margin-top:14px;font-weight:700;color:var(--ink-2)}
.co-back:hover{color:var(--g-700)}
.co-side{position:sticky;top:24px}
.co-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:0 30px 60px -44px rgba(12,53,37,.5)}
.co-card h2{font-size:22px;letter-spacing:-.03em;margin-bottom:16px}
.co-line{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.co-thumb{position:relative;flex-shrink:0}
.co-thumb img{width:60px;height:60px;border-radius:14px;object-fit:cover;background:#EDEDEB}
.co-thumb i{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--g-900);color:#fff;font-style:normal;font-size:11.5px;font-weight:800;display:grid;place-items:center;border:2px solid #fff}
.co-lt{flex:1;min-width:0}
.co-lt b{display:block;font-size:15px}
.co-lt small{color:var(--muted);font-size:12.5px}
.co-line>b{font-size:15px;white-space:nowrap}
.co-nudge{margin:14px 0 4px;padding:10px 14px;border-radius:12px;background:var(--tint);font-size:13.5px;color:var(--ink-2)}
.co-nudge b{color:var(--g-700)}
.co-sum{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:14.5px;color:var(--ink-2)}
.co-sum:first-of-type{margin-top:10px}
.co-sum b{color:var(--ink);font-weight:700;text-align:right}
.co-total{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;font-size:17px;color:var(--ink)}
.co-total b{font-size:24px;font-weight:900;letter-spacing:-.03em}
.co-ruo{font-size:12px;color:var(--muted);margin-top:12px}
.co-empty{padding:12px 0;color:var(--muted)}
.co-empty a{color:var(--g-700);font-weight:800}
.co-mini{display:none}
.co-main[hidden]{display:none}
.co-login h1{font-size:clamp(34px,4vw,46px);margin:12px 0 8px}
.co-login-sub{color:var(--ink-2);margin-bottom:22px}
.co-login-sub a,.co-have{color:var(--g-700);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.co-have{margin-left:auto;font-size:13.5px;white-space:nowrap}
.req{color:#D14343}
.pw{position:relative}
.pw input{width:100%;padding-right:56px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--ink-2)}
.pw-eye:hover{background:var(--tint-2)}
.pw-eye svg{width:20px;height:20px}
.co-login-links{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-weight:700;font-size:14.5px}
.co-login-links a{color:var(--g-700);text-decoration:underline;text-underline-offset:3px}
.co-coupon{display:flex;gap:8px;margin:14px 0 4px}
.co-coupon input{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--tint);outline:0}
.co-coupon input:focus{border-color:var(--g-500);background:#fff}
.co-nudge small{color:var(--muted)}
@media (max-width:900px){
.co-wrap{grid-template-columns:minmax(0,1fr);gap:0}
.co-block-h{flex-wrap:wrap}
.co-have{white-space:normal}
.co-side{display:none}
.co-mini{display:block;background:#fff;border:1px solid var(--line);border-radius:20px;margin-bottom:16px;overflow:hidden}
.co-mini summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;font-weight:800;color:var(--g-700);cursor:pointer}
.co-mini summary::-webkit-details-marker{display:none}
.co-mini summary span::after{content:" ▾"}
.co-mini[open] summary span::after{content:" ▴"}
.co-mini summary b{font-size:18px;color:var(--ink)}
.co-mini>div{padding:0 18px 16px}
}
@media (max-width:600px){
.co{padding:18px 0 56px}
.co-wrap,.co-header-in{padding:0 12px}
.co-header-in{height:64px}
.co-header .mb-logo img{height:38px}
.co-block{padding:20px 16px;border-radius:20px}
.row3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.row3 .field:first-child{grid-column:1/-1}
}
/* ---------- SMS consent box ---------- */
.sms-consent{margin:6px 0 14px;padding:14px 16px;border-radius:16px;border:1px solid var(--g-300);background:var(--tint);animation:sms-in .3s ease}
.sms-consent[hidden]{display:none}
.sms-consent .co-check{font-size:12.5px;line-height:1.55;color:var(--ink-2);margin:0}
.sms-consent b{color:var(--ink);font-size:14px}
.sms-consent a{color:var(--g-700);font-weight:700;text-decoration:underline}
@keyframes sms-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.wo-body .sms-consent{margin-top:10px}
.wo-opt{margin-top:6px;font-size:14px}
.co-mkt{margin:4px 0 6px;font-size:14px}
.co-mkt+.co-mkt{margin-top:10px}
.co-note{font-size:12px;line-height:1.5;color:var(--muted)}
.co-mkt em.opt{font-style:normal;color:var(--muted);font-weight:600}
.gate-opt.invalid{border-color:#D14343;background:#FFF6F6}
.wo-sms-fine{display:block;margin-top:8px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.wo-sms-fine[hidden]{display:none}
.wo-sms-fine a{color:var(--g-700);font-weight:700;text-decoration:underline}
/* ---------- Legal pages ---------- */
.legal-sec{padding-top:48px}
.legal-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;align-items:start}
.legal-toc{position:sticky;top:110px;display:grid;gap:2px;max-height:calc(100vh - 140px);overflow-y:auto}
.legal-toc h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 10px 12px}
.legal-toc a{padding:8px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink-2);border-left:2px solid transparent}
.legal-toc a:hover{background:var(--tint)}
.legal-toc a.active{color:var(--g-700);background:var(--tint);border-left-color:var(--g-600)}
.legal-toc a.is-new::after{content:"New";margin-left:6px;font-size:10px;font-weight:800;padding:2px 6px;border-radius:99px;background:var(--g-600);color:#fff;vertical-align:1px}
.legal-doc{max-width:760px;font-size:16px;line-height:1.75;color:var(--ink-2)}
.legal-doc h2{font-size:clamp(24px,2.6vw,30px);letter-spacing:-.03em;line-height:1.15;color:var(--ink);margin:40px 0 12px;scroll-margin-top:110px}
.legal-doc p{margin-bottom:12px}
.legal-doc ul{margin:4px 0 14px 20px;display:grid;gap:6px}
.legal-doc a{color:var(--g-700);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.legal-doc strong{color:var(--ink)}
.legal-date{font-family:var(--mono);font-size:13px;color:var(--muted)}
.legal-new{position:relative;margin:36px 0 8px;padding:6px 26px 16px;border-radius:22px;border:1.5px solid var(--g-300);background:linear-gradient(170deg,#fff 0%,var(--tint) 100%)}
.legal-new h2{margin-top:14px}
.legal-flag{position:absolute;top:-12px;left:22px;padding:3px 12px;border-radius:99px;background:var(--grad);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.legal-added{padding-left:12px;border-left:3px solid var(--g-500)}
@media (max-width:900px){
.legal-layout{grid-template-columns:1fr;gap:20px}
.legal-toc{position:static;max-height:none;display:flex;overflow-x:auto;scrollbar-width:none;gap:6px}
.legal-toc h4{display:none}
.legal-toc a{white-space:nowrap;border:1px solid var(--line);border-radius:999px;border-left-width:1px}
.legal-new{padding:4px 16px 12px}
}
/* ---------- Account portal ---------- */
.acct{background:var(--tint);min-height:60vh}
.acct-auth{padding:48px 16px 80px}
.acct-auth[hidden],.acct-app[hidden]{display:none}
.auth-card{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:30px;overflow:hidden;box-shadow:0 40px 80px -46px rgba(12,53,37,.5)}
.auth-top{position:relative;overflow:hidden;padding:32px 30px 28px;color:#fff;background:radial-gradient(120% 160% at 90% 0%,#1E6A4A 0%,#0C3525 55%,#07241A 100%)}
.auth-top>*:not(.mol){position:relative}
.auth-top .mol{opacity:.6}
.auth-top .eyebrow{color:var(--g-300)}
.auth-top h1{font-size:clamp(32px,5vw,42px);letter-spacing:-.04em;margin:12px 0 10px}
.auth-top p{color:#BFD6CA;font-size:15px;max-width:400px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;padding:6px;margin:20px 26px 0;background:var(--tint);border-radius:999px;border:1px solid var(--line)}
.auth-tabs[hidden]{display:none}
.auth-tabs button{height:44px;border-radius:999px;font-weight:800;font-size:14.5px;color:var(--ink-2)}
.auth-tabs button[aria-selected=true]{background:#fff;color:var(--g-700);box-shadow:0 6px 16px -10px rgba(12,53,37,.5)}
.auth-body{padding:22px 26px 28px}
.auth-body[hidden]{display:none}
.auth-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 6px;font-size:14px}
.auth-row a,.auth-back,.auth-fine a{color:var(--g-700);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.auth-btn{width:100%;height:54px;margin-top:10px}
.auth-fine{font-size:12.5px;color:var(--muted);text-align:center;margin-top:14px}
.auth-lead{color:var(--ink-2);margin-bottom:18px;font-size:15px}
.auth-done{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--tint);color:var(--g-700);font-weight:700;font-size:14px}
.auth-done[hidden]{display:none}
.auth-back{display:inline-block;margin-top:16px;font-size:14px}
.auth-body .co-check{margin-top:8px;font-size:14px}
.pw-meter{height:6px;border-radius:99px;background:var(--line);margin-top:8px;overflow:hidden}
.pw-meter i{display:block;height:100%;width:0;border-radius:99px;transition:width .25s,background .25s}
.pw-meter[data-s="1"] i{width:25%;background:#D14343}.pw-meter[data-s="2"] i{width:50%;background:#E0A030}.pw-meter[data-s="3"] i{width:75%;background:#3A9A6E}.pw-meter[data-s="4"] i{width:100%;background:#1B6446}
.pw-hint{font-size:12.5px;color:var(--muted)}
.acct-app{padding:36px 0 80px}
.acct-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}
.acct-grid>*{min-width:0}
.acct-side{position:sticky;top:110px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:14px}
.acct-me{display:flex;align-items:center;gap:12px;padding:8px 8px 16px;border-bottom:1px solid var(--line);margin-bottom:8px}
.acct-me b{display:block;font-size:15.5px}
.acct-me small{display:block;font-size:12.5px;color:var(--muted);word-break:break-all}
.acct-av{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:900;font-size:18px}
.acct-nav{display:grid;gap:2px}
.acct-nav a{padding:12px 14px;border-radius:14px;font-weight:700;font-size:15px;color:var(--ink-2)}
.acct-nav a:hover{background:var(--tint)}
.acct-nav a.active{background:var(--g-900);color:#fff}
.acct-nav .acct-out{color:#B42323}
.acct-head{margin-bottom:20px}
.acct-head h1{font-size:clamp(32px,4vw,46px);margin:10px 0 8px}
.acct-head p{color:var(--ink-2);max-width:620px}
.acct-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;margin-bottom:14px}
.acct-card[hidden]{display:none}
.ac-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.ac-h h2{font-size:21px;letter-spacing:-.03em}
.acct-sample{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:10px}
.acct-back{display:inline-block;margin-bottom:12px;font-weight:700;color:var(--g-700)}
.acct-help{font-size:14px;color:var(--ink-2)}
.acct-help a{color:var(--g-700);font-weight:700}
.dash-cards{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:12px;margin-bottom:14px}
.dash-card{display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:22px;background:#fff;border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.dash-card:hover{transform:translateY(-2px);box-shadow:0 20px 36px -26px rgba(12,53,37,.45)}
.dash-card b{font-size:17px}
.dash-card small{color:var(--muted);font-size:13px}
.dash-hero{background:radial-gradient(120% 160% at 90% 0%,#1E6A4A 0%,#0C3525 60%);color:#fff;border:0}
.dash-hero .eyebrow{color:var(--g-300)}
.dash-hero b{font-size:24px;font-family:var(--mono);letter-spacing:.02em}
.dash-hero small{color:#BFD6CA}
.dash-hero em{font-style:normal;font-weight:800;margin-top:6px;color:#fff}
.dash-hero .status{align-self:flex-start}
.dc-ic{width:40px;height:40px;border-radius:12px;background:var(--tint-2);color:var(--g-700);display:grid;place-items:center;margin-bottom:8px}
.dc-ic svg{width:19px;height:19px}
.status.st-ship{background:#E3EEFB;color:#1F5AA6}
.status.st-done{background:var(--tint-2);color:var(--g-700)}
.status.st-proc{background:#FBF3DF;color:#8A6412}
.status.st-off{background:#F4E4E4;color:#9A2B2B}
.again{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.again-item{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--line);border-radius:18px}
.again-item img{border-radius:12px;aspect-ratio:1/1;object-fit:cover;background:#EDEDEB;margin-bottom:6px}
.again-item b{font-size:15px}
.again-item small{color:var(--muted);font-size:12.5px;margin-bottom:8px}
.again-item .btn{margin-top:auto}
.order-list{display:grid;gap:10px}
.order-row{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:16px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:20px;transition:border-color .15s,box-shadow .15s}
.order-row:hover{border-color:var(--g-300);box-shadow:0 16px 30px -24px rgba(12,53,37,.45)}
.or-imgs{display:flex}
.or-imgs img{width:48px;height:48px;border-radius:12px;object-fit:cover;background:#EDEDEB;border:2px solid #fff}
.or-imgs img+img{margin-left:-14px}
.or-main b{display:block;font-family:var(--mono);font-size:15px}
.or-main small{color:var(--muted);font-size:13px}
.or-total{font-size:16px}
.or-go{font-size:22px;color:var(--muted)}
.track{display:grid;grid-template-columns:repeat(3,1fr);margin:4px 0 20px;position:relative}
.tk{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted)}
.tk::before{content:"";position:absolute;top:10px;left:-50%;right:50%;height:3px;background:var(--line)}
.tk:first-child::before{display:none}
.tk.on::before{background:var(--g-600)}
.tk i{position:relative;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--line)}
.tk.on i{background:var(--g-600);border-color:var(--g-600)}
.tk.on{color:var(--g-700)}
.track-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-top:16px;border-top:1px solid var(--line)}
.track-meta small{display:block;font-size:12px;color:var(--muted)}
.track-meta b{font-size:15px}
.track-meta .btn{margin-left:auto}
.mono-b{font-family:var(--mono);font-size:14px!important;letter-spacing:.02em}
.oi{display:grid;grid-template-columns:60px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.oi img{width:60px;height:60px;border-radius:14px;object-fit:cover;background:#EDEDEB}
.oi small{display:block;color:var(--muted);font-size:12.5px}
.oi-coa{font-size:13px;font-weight:700;color:var(--g-700);text-decoration:underline;text-underline-offset:2px}
.addr{line-height:1.7;color:var(--ink-2)}
.sub-top{display:grid;grid-template-columns:60px 1fr auto;gap:14px;align-items:center;margin-bottom:16px}
.sub-top img{width:60px;height:60px;border-radius:14px;object-fit:cover;background:#EDEDEB}
.sub-top b{display:block;font-size:16px}
.sub-top small{color:var(--muted);font-size:13px}
.sub-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sub-cancel{color:#B42323}
.det-h{font-size:18px;letter-spacing:-.02em;margin:22px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
@media (max-width:900px){
.acct-grid{grid-template-columns:1fr;gap:16px}
.acct-side{position:static;padding:12px}
.acct-nav{display:flex;overflow-x:auto;scrollbar-width:none;gap:6px;margin:0 -4px;padding:2px 4px}
.acct-nav a{white-space:nowrap;padding:10px 16px;border:1px solid var(--line);border-radius:999px;font-size:14px}
.dash-cards{grid-template-columns:1fr 1fr}
.dash-hero{grid-column:1/-1}
.again{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
.acct-auth{padding:20px 12px 56px}
.auth-top{padding:24px 20px 22px}
.auth-tabs{margin:16px 16px 0}
.auth-body{padding:18px 16px 22px}
.acct-app{padding:16px 0 56px}
.acct-card{padding:18px 16px;border-radius:20px}
.order-row{grid-template-columns:auto 1fr auto;gap:10px 12px;padding:14px}
.order-row .status{grid-column:2;justify-self:start}
.order-row .or-total{grid-column:3;grid-row:1}
.order-row .or-go{display:none}
.track-meta .btn{margin-left:0;width:100%}
.sub-top{grid-template-columns:52px 1fr}
.sub-top .status{grid-column:1/-1;justify-self:start}
.sub-acts .btn{flex:1}
}
/* ---------- Researcher verification gate ---------- */
body.gate-open,body.wo-open{overflow:hidden}
.gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(5,20,14,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:opacity .35s}
.gate.leaving{opacity:0}
.gate-card{width:min(520px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;border-radius:30px;background:#fff;box-shadow:0 50px 100px -30px rgba(0,0,0,.6);animation:pop-in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pop-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.gate-top{position:relative;overflow:hidden;padding:30px 30px 28px;color:#fff;background:radial-gradient(120% 160% at 90% 0%,#1E6A4A 0%,#0C3525 55%,#07241A 100%)}
.gate-top .mol{opacity:.6}
.gate-top>*:not(.mol){position:relative}
.gate-logo{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 20px;background:#fff;border-bottom:1px solid var(--line)}
.gate-logo img{height:44px;width:auto}
.gate-logo .mb-logo-text{font-size:1rem}
.gate-logo .mb-logo-text .p{color:#0F2E26}.gate-logo .mb-logo-text .s{color:#2E7D5B}
.gate-top h2{font-size:clamp(30px,5vw,38px);letter-spacing:-.04em;margin-bottom:10px}
.gate-top p{color:#BFD6CA;font-size:15px;line-height:1.55;max-width:420px}
.gate-body{padding:24px 30px 28px}
.gate-opt{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1.5px solid var(--line);border-radius:18px;cursor:pointer;font-size:15px;line-height:1.5;color:var(--ink);transition:border-color .15s,background .15s}
.gate-opt+.gate-opt{margin-top:10px}
.gate-opt:hover{border-color:var(--g-300)}
.gate-opt input{position:absolute;opacity:0;pointer-events:none}
.gate-box{flex-shrink:0;width:24px;height:24px;border-radius:8px;border:2px solid var(--g-300);background:#fff;display:grid;place-items:center;margin-top:1px;transition:all .15s}
.gate-opt:has(input:checked){border-color:var(--g-600);background:var(--tint)}
.gate-opt input:checked+.gate-box{background:var(--g-600);border-color:var(--g-600)}
.gate-opt input:checked+.gate-box::after{content:"✓";color:#fff;font-size:14px;font-weight:900}
.gate-opt input:focus-visible+.gate-box{box-shadow:0 0 0 4px rgba(46,125,91,.25)}
.gate-enter{width:100%;height:56px;margin-top:18px;font-size:16px}
.gate-enter:disabled{opacity:.4;box-shadow:none;cursor:not-allowed}
.gate-fine{font-size:12.5px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}
.gate-fine a{color:var(--g-700);font-weight:700;text-decoration:underline;text-underline-offset:2px}
/* ---------- Welcome offer ---------- */
.wo{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:20px;visibility:hidden}
.wo[aria-hidden=false]{visibility:visible}
.wo-scrim{position:absolute;inset:0;background:rgba(5,20,14,.55);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.wo[aria-hidden=false] .wo-scrim{opacity:1}
.wo-card{position:relative;width:min(860px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;display:grid;grid-template-columns:.9fr 1.1fr;border-radius:30px;background:#fff;box-shadow:0 50px 100px -30px rgba(0,0,0,.6);opacity:0;transform:translateY(20px) scale(.98);transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.wo[aria-hidden=false] .wo-card{opacity:1;transform:none}
.wo-x{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--line);font-size:24px;line-height:1;color:var(--ink-2);display:grid;place-items:center}
.wo-x:hover{background:#fff;color:var(--ink)}
.wo-art{position:relative;overflow:hidden;min-height:100%;background:radial-gradient(120% 140% at 80% 10%,#1E6A4A 0%,#0C3525 55%,#07241A 100%)}
.wo-art::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 50%,rgba(7,36,26,.55) 0%,rgba(7,36,26,0) 100%)}
.wo-art .mol{opacity:.85;-webkit-mask-image:none;mask-image:none}
.wo-badge{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;line-height:.82;text-align:center}
.wo-badge b{display:block;font-size:clamp(88px,11vw,124px);font-weight:900;letter-spacing:-.06em;background:linear-gradient(100deg,#fff,#BFE9D2);-webkit-background-clip:text;background-clip:text;color:transparent}
.wo-badge span{font-size:clamp(40px,5vw,56px);font-weight:900;letter-spacing:.04em;text-transform:uppercase;-webkit-text-stroke:1.2px rgba(191,233,210,.8);color:transparent}
.wo-body{padding:38px 36px 32px}
.wo-body[hidden]{display:none}
.wo-body h2{font-size:clamp(28px,3.4vw,38px);letter-spacing:-.04em;line-height:1.02;margin:12px 0 10px}
.wo-sub{color:var(--ink-2);font-size:15px;margin-bottom:20px}
.wo-body .field{margin-bottom:12px}
.wo-body .field input{height:48px}
.wo-body .field input.invalid{border-color:#D14343;background:#FFF6F6}
.wo-body .co-check{font-size:13px;margin-top:4px}
.wo-cta{width:100%;height:54px;margin-top:16px}
.wo-fine{font-size:12px;color:var(--muted);text-align:center;margin-top:12px}
.wo-done{display:flex;flex-direction:column;justify-content:center;text-align:center}
.wo-check{width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:900;margin:0 auto 6px;box-shadow:0 14px 28px -12px rgba(30,110,75,.7)}
.wo-code{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:16px 18px;border-radius:18px;border:2px dashed var(--g-500);background:var(--tint)}
.wo-code b{font-family:var(--mono);font-size:clamp(17px,4.6vw,24px);letter-spacing:.08em;color:var(--g-700);word-break:break-all;text-align:left}
.wo-sent{font-size:13.5px;color:var(--muted);margin-top:12px}
.wo-cta:disabled{opacity:.7;pointer-events:none}
.wo-code span{font-weight:800;font-size:13px;color:#fff;background:var(--g-700);padding:8px 14px;border-radius:999px}
@media (max-width:760px){
.gate{place-items:end center;padding:0}
.gate-card{width:100%;border-radius:28px 28px 0 0;max-height:94dvh;animation:sheet-up .45s cubic-bezier(.2,.8,.2,1)}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
.gate-top{padding:24px 20px 22px}
.gate-body{padding:18px 16px calc(20px + env(safe-area-inset-bottom))}
.gate-opt{padding:14px;font-size:14.5px}
.wo{place-items:end center;padding:0}
.wo-card{grid-template-columns:1fr;width:100%;border-radius:28px 28px 0 0;max-height:94dvh;transform:translateY(100%)}
.wo-art{min-height:170px;height:170px}
.wo-badge b{font-size:78px}
.wo-badge span{font-size:34px}
.wo-body{padding:22px 18px calc(22px + env(safe-area-inset-bottom))}
.wo-body h2{font-size:28px}
}
/* ---------- Cart drawer ---------- */
.cart-scrim,.search-scrim{position:fixed;inset:0;z-index:90;background:rgba(7,26,19,.45);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
body.cart-open .cart-scrim,body.search-open .search-scrim{opacity:1;pointer-events:auto}
body.cart-open,body.search-open{overflow:hidden}
/* The exclusions are essential. WooCommerce reuses the class "cart" on markup
that has nothing to do with this drawer: