*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,sans-serif;background:#080808;color:#fff;line-height:1.6;overflow-x:hidden;}
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:#0f0f0f;}::-webkit-scrollbar-thumb{background:#222;}
:root{
  --bg:#080808;--bg2:#0f0f0f;--bg3:#161616;--bg4:#1e1e1e;
  --brd:rgba(255,255,255,.07);--brd2:rgba(255,255,255,.14);
  --g:#00D4A0;--gh:#00B888;--gd:rgba(0,212,160,.1);--gl:rgba(0,212,160,.2);
  --bl:#4A9FE0;--bld:rgba(74,159,224,.1);
  --rd:#E53E3E;--rdd:rgba(229,62,62,.12);
  --gld:#F5C842;--ydd:rgba(245,200,66,.08);
  --t1:#fff;--t2:#9CA3AF;--t3:#6B7280;--t4:#374151;
  --mono:'DM Mono',monospace;--disp:'Barlow Condensed',sans-serif;
  --r:6px;--rl:10px;
}
.page{display:none;}.page.active{display:block;}

/* ANN */
.ann{background:var(--g);color:#000;padding:9px 0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;font-weight:500;overflow:hidden;white-space:nowrap;}
.ann-track{display:inline-block;animation:marquee-right 28s linear infinite;}
.ann-track:hover{animation-play-state:paused;}
@keyframes marquee-right{0%{transform:translateX(-50%);}100%{transform:translateX(0%);}}

/* NAV */
.nav{background:rgba(8,8,8,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--brd);position:sticky;top:0;z-index:300;overflow:visible;}
.nav-i{max-width:1280px;margin:0 auto;padding:0 28px;height:60px;display:flex;align-items:center;gap:20px;overflow:visible;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;flex-shrink:0;line-height:1;cursor:pointer;}
.logo:hover .nav-links{display:flex;gap:2px;flex:1;overflow:visible;}
.nl{background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--t2);padding:7px 12px;border-radius:var(--r);transition:all .15s;white-space:nowrap;}
.nl:hover{color:#fff;background:var(--bg4);}
.nl.active{color:var(--g);background:var(--gd);}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto;}
/* FIXED CART BUTTON */
.cart-btn{display:flex;align-items:center;gap:8px;background:var(--bg3);color:#fff;border:1px solid var(--brd2);font-family:var(--mono);font-size:11px;font-weight:500;padding:9px 16px;border-radius:var(--r);cursor:pointer;letter-spacing:.04em;transition:all .15s;flex-shrink:0;}
.cart-btn:hover{border-color:var(--g);background:var(--gd);}
/* FIXED CART COUNT — red badge, white text, always visible */
.c-cnt{background:var(--rd);color:#fff;border-radius:50%;width:20px;height:20px;min-width:20px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;line-height:1;}

/* HERO */
.hero{background:var(--bg);min-height:88vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:80px 32px;}
.hero::before{content:'';position:absolute;top:-20%;right:-5%;width:55%;height:140%;background:radial-gradient(ellipse,rgba(0,212,160,.055) 0%,transparent 65%);pointer-events:none;}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--g),transparent);}
.hero-i{max-width:1280px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 540px;gap:56px;align-items:start;}
.h-ey{font-family:var(--mono);font-size:10px;color:var(--g);letter-spacing:.15em;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.h-ey::before{content:'';width:24px;height:1px;background:var(--g);}
.h-h1{font-family:var(--disp);font-size:80px;font-weight:900;line-height:.92;letter-spacing:-.01em;margin-bottom:22px;text-transform:uppercase;}
.h-h1 em{display:block;font-style:italic;color:var(--g);}
.h-sub{font-size:16px;color:var(--t2);line-height:1.65;margin-bottom:36px;max-width:460px;}
.h-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px;}
.btn-p{background:var(--g);color:#000;font-family:var(--mono);font-size:12px;font-weight:500;padding:14px 32px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.06em;transition:all .15s;text-transform:uppercase;}
.btn-p:hover{background:var(--gh);transform:translateY(-1px);}
.btn-o{background:transparent;color:#fff;font-family:var(--mono);font-size:12px;padding:13px 28px;border:1px solid var(--brd2);border-radius:var(--r);cursor:pointer;letter-spacing:.06em;transition:all .15s;text-transform:uppercase;}
.btn-o:hover{border-color:var(--g);color:var(--g);}
.h-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--brd);border-radius:var(--rl);overflow:hidden;}
.hs{background:var(--bg3);padding:18px 16px;text-align:center;border-right:1px solid var(--brd);}
.hs:last-child{border-right:none;}
.hs-v{font-family:var(--disp);font-size:34px;font-weight:900;color:var(--g);}
.hs-l{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.1em;margin-top:2px;}
.hero-panel{background:var(--bg3);border:1px solid rgba(0,212,160,.22);border-radius:var(--rl);padding:34px 32px;position:relative;overflow:hidden;box-shadow:0 0 40px rgba(0,212,160,.06);margin-top:30px;}
.hero-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--g),var(--bl));}
.hp-lbl{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.15em;margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.hp-lbl::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--g);box-shadow:0 0 8px var(--g);animation:blink 2s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.hp-rows{display:flex;flex-direction:column;gap:2px;background:var(--brd);border-radius:var(--r);overflow:hidden;margin-bottom:22px;}
.hp-r{background:var(--bg2);display:flex;justify-content:space-between;align-items:center;padding:13px 18px;}
.hp-r:hover{background:rgba(255,255,255,.03);}
.hp-k{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.04em;}
.hp-v{font-family:var(--mono);font-size:10px;color:#fff;text-align:right;}
.hp-v.ok{color:var(--g);font-weight:500;}
.hp-tags{display:flex;flex-wrap:wrap;gap:8px;}
.hp-tag{font-family:var(--mono);font-size:9px;color:var(--g);background:var(--gd);border:1px solid var(--gl);padding:6px 12px;border-radius:3px;letter-spacing:.07em;}

/* TRUST */
.trust{background:var(--bg2);border-bottom:1px solid var(--brd);padding:16px 32px;}
.trust-i{max-width:1280px;margin:0 auto;display:flex;justify-content:center;gap:36px;flex-wrap:wrap;}
.ti{display:flex;align-items:center;gap:10px;}
.ti-ic{width:34px;height:34px;background:var(--gd);border:1px solid var(--gl);border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--g);}
.ti-ttl{font-size:12px;font-weight:600;color:#fff;}
.ti-sub{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.04em;}

/* PRODUCTS */
.prod-sec{padding:60px 32px;}
.prod-i{max-width:1280px;margin:0 auto;}
.prod-hdr{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px;}
.prod-title{font-family:var(--disp);font-size:40px;font-weight:900;color:#fff;text-transform:uppercase;}
.prod-count{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.08em;}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.pcard{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);display:flex;flex-direction:column;transition:border-color .2s,transform .2s;position:relative;overflow:hidden;}
.pcard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--brd);transition:background .2s;}
.pcard:hover{border-color:rgba(0,212,160,.35);transform:translateY(-2px);}
.pcard:hover::before,.pcard.best::before{background:linear-gradient(90deg,var(--g),var(--bl));}
.pcard.best{border-color:rgba(0,212,160,.4);}
.pcard.on-sale{border-color:rgba(var(--sale-rgb),.55);box-shadow:0 0 18px 2px rgba(var(--sale-rgb),.18),0 0 6px 0 rgba(var(--sale-rgb),.22);}
.pcard.on-sale::before{background:linear-gradient(90deg,rgba(var(--sale-rgb),1),rgba(var(--sale-rgb),.5));}
.pcard.on-sale:hover{border-color:rgba(var(--sale-rgb),.85);box-shadow:0 0 28px 4px rgba(var(--sale-rgb),.3),0 0 10px 0 rgba(var(--sale-rgb),.32);}
.pc-top{padding:18px 18px 0;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.pc-bdgs{display:none;}
.b-sale{font-family:var(--mono);font-size:8px;background:var(--rd);color:#fff;padding:3px 7px;border-radius:3px;letter-spacing:.05em;}
.b-best{font-family:var(--mono);font-size:8px;background:var(--g);color:#000;padding:3px 7px;border-radius:3px;letter-spacing:.05em;}
.b-bundle{font-family:var(--mono);font-size:8px;background:var(--gld);color:#000;padding:3px 7px;border-radius:3px;letter-spacing:.05em;}
.b-new{font-family:var(--mono);font-size:8px;background:var(--bl);color:#fff;padding:3px 7px;border-radius:3px;letter-spacing:.05em;}
.pc-cat{font-family:var(--mono);font-size:9px;letter-spacing:.1em;}
.cc-h{color:var(--g);}.cc-g{color:var(--bl);}.cc-c{color:#A78BFA;}.cc-m{color:var(--gld);}.cc-a{color:#F472B6;}.cc-s{color:var(--t3);}.cc-st{color:#FF8C42;}
.pc-body{padding:0 18px 18px;flex:1;display:flex;flex-direction:column;}
.pc-name{font-family:var(--disp);font-size:26px;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin-bottom:3px;}
.pc-full{font-size:11px;color:var(--t3);margin-bottom:8px;line-height:1.35;}
.pc-formula{font-family:var(--mono);font-size:10px;color:var(--t4);letter-spacing:.04em;margin-bottom:8px;padding:5px 8px;background:var(--bg2);border-radius:4px;display:inline-block;}
.pc-cas{font-family:var(--mono);font-size:8px;color:#333;letter-spacing:.04em;margin-bottom:8px;}
.purity-w{margin-bottom:12px;}
.purity-r{display:flex;justify-content:space-between;margin-bottom:3px;}
.purity-l{font-family:var(--mono);font-size:8px;color:var(--t3);}
.purity-v{font-family:var(--mono);font-size:8px;color:var(--g);}
.purity-bg{height:2px;background:var(--bg4);border-radius:1px;}
.purity-fill{height:2px;background:var(--g);border-radius:1px;}
.pc-pr{display:flex;align-items:baseline;gap:7px;margin-top:auto;padding-top:8px;margin-bottom:12px;}
.pc-price{font-family:var(--disp);font-size:26px;font-weight:900;color:#fff;}
.pc-orig{font-size:13px;color:#E57373;text-decoration:line-through;font-weight:500;opacity:.9;}
.pc-discount{font-family:var(--mono);font-size:10px;font-weight:500;background:rgba(229,62,62,.15);color:#E57373;border:1px solid rgba(229,62,62,.3);padding:2px 7px;border-radius:3px;letter-spacing:.04em;white-space:nowrap;}
.pc-range{font-size:12px;color:var(--t3);}
.btn-sel{width:100%;background:var(--g);color:#000;font-family:var(--mono);font-size:10px;font-weight:500;padding:11px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.07em;text-transform:uppercase;transition:background .15s;}
.btn-sel:hover{background:var(--gh);}
.size-panel{display:none;padding:12px;background:var(--bg2);border-top:1px solid var(--brd);}
.size-panel.open{display:block;}
.sp-lbl{font-family:var(--mono);font-size:8px;color:var(--t3);letter-spacing:.1em;margin-bottom:7px;}
.sp-opts{display:grid;gap:6px;}
.so{display:flex;justify-content:space-between;align-items:center;background:var(--bg3);border:1px solid var(--brd);border-radius:var(--r);padding:10px 12px;cursor:pointer;transition:all .15s;}
.so:hover{border-color:var(--g);}
.so.sel{background:var(--gd);border-color:var(--g);}
.so-l{font-family:var(--mono);font-size:11px;font-weight:500;color:#fff;}
.so-p{font-family:var(--disp);font-size:18px;font-weight:800;color:var(--g);}
.so-orig{font-size:10px;color:#E57373;text-decoration:line-through;margin-right:5px;font-weight:500;}
.btn-add-c{width:100%;background:var(--g);color:#000;font-family:var(--mono);font-size:10px;font-weight:500;padding:10px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.07em;text-transform:uppercase;margin-top:8px;display:none;}
.btn-add-c.show{display:block;}
.btn-add-c:hover{background:var(--gh);}

/* CALCULATOR */
.calc-sec{background:var(--bg3);border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);padding:64px 32px;}
.calc-i{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.sec-ey{font-family:var(--mono);font-size:10px;color:var(--g);letter-spacing:.14em;margin-bottom:8px;}
.sec-t{font-family:var(--disp);font-size:44px;font-weight:900;text-transform:uppercase;margin-bottom:12px;}
.sec-p{font-size:14px;color:var(--t2);line-height:1.65;}
.calc-box{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--rl);padding:26px;}
.c-row{margin-bottom:18px;}
.c-lbl{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.1em;margin-bottom:8px;}
.c-inp-wrap{position:relative;}
.c-inp{background:var(--bg3);border:1px solid var(--brd);color:#fff;font-family:var(--mono);font-size:14px;padding:11px 44px 11px 14px;border-radius:var(--r);width:100%;outline:none;transition:border-color .15s;-moz-appearance:textfield;}
.c-inp::-webkit-outer-spin-button,.c-inp::-webkit-inner-spin-button{-webkit-appearance:none;}
.c-inp:focus{border-color:var(--g);}
.c-unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;color:var(--t3);pointer-events:none;}
.c-presets{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap;}
.c-pre{font-family:var(--mono);font-size:9px;background:var(--bg4);border:1px solid var(--brd);color:var(--t3);padding:4px 9px;border-radius:3px;cursor:pointer;transition:all .15s;}
.c-pre:hover{border-color:var(--g);color:var(--g);}
.c-res{background:var(--gd);border:1px solid var(--gl);border-radius:var(--r);padding:20px;margin-top:6px;text-align:center;min-height:80px;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.c-res-v{font-family:var(--disp);font-size:36px;font-weight:900;color:var(--g);}
.c-res-s{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.06em;margin-top:4px;}
.c-formula-display{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--r);padding:12px 16px;margin-top:14px;display:none;}
.c-fr{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--brd);font-family:var(--mono);font-size:11px;}
.c-fr:last-child{border-bottom:none;}
.c-fk{color:var(--t3);}.c-fv{color:var(--g);}

/* COMMUNITY */
.comm-sec{padding:72px 32px;text-align:center;background:var(--bg);}
.comm-socials{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:8px;}
.comm-soc-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:28px 36px;text-decoration:none;transition:all .2s;width:180px;height:180px;box-sizing:border-box;flex-shrink:0;}
.comm-soc-card:hover{border-color:var(--brd2);transform:translateY(-3px);}
.csc-icon{width:60px;height:60px;border-radius:var(--rl);border:1px solid transparent;display:flex;align-items:center;justify-content:center;}
.csc-label{font-family:var(--disp);font-size:18px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.02em;}
.csc-sub{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.06em;}
.comm-i{max-width:680px;margin:0 auto;}
.comm-h{font-family:var(--disp);font-size:56px;font-weight:900;text-transform:uppercase;margin-bottom:14px;line-height:1.05;}
.comm-h span{color:var(--g);}
.comm-p{font-size:15px;color:var(--t2);line-height:1.7;margin-bottom:32px;}
.comm-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.btn-tg{background:#229ED9;color:#fff;font-family:var(--mono);font-size:11px;padding:13px 26px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.06em;text-transform:uppercase;}
.btn-ig{background:#C13584;color:#fff;font-family:var(--mono);font-size:11px;padding:13px 26px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.06em;text-transform:uppercase;}

/* DISC + FOOTER */
.disc-bar{background:var(--ydd);border-top:1px solid rgba(245,200,66,.2);border-bottom:1px solid rgba(245,200,66,.2);padding:12px 0;overflow:hidden;white-space:nowrap;}
.disc-track{display:inline-block;animation:marquee-right 40s linear infinite;}
.disc-track:hover{animation-play-state:paused;}
.disc-i{max-width:1280px;margin:0 auto;font-family:var(--mono);font-size:9px;color:rgba(245,200,66,.6);line-height:1.65;letter-spacing:.04em;text-align:center;}
footer{background:var(--bg2);border-top:1px solid var(--brd);padding:52px 32px 28px;}
.ft-i{max-width:1280px;margin:0 auto;}
.ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;}
.ft-logo{font-family:var(--disp);font-size:22px;font-weight:900;color:#fff;margin-bottom:8px;}
.ft-logo span{color:var(--g);}
.ft-tag{font-size:12px;color:var(--t3);line-height:1.65;margin-bottom:16px;}
.ft-socs{display:flex;gap:8px;}
.ft-soc{width:32px;height:32px;background:var(--bg3);border:1px solid var(--brd);border-radius:var(--r);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:600;color:var(--t3);text-decoration:none;transition:all .15s;}
.ft-soc:hover{border-color:var(--g);color:var(--g);}
.ft-col h4{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.12em;margin-bottom:14px;}
.ft-lnk{display:block;font-size:12px;color:var(--t3);text-decoration:none;margin-bottom:9px;cursor:pointer;transition:color .15s;}
.ft-lnk:hover{color:#fff;}
.ft-admin-lnk{font-family:var(--mono);font-size:8px;color:var(--t4);cursor:pointer;letter-spacing:.06em;}
.ft-admin-lnk:hover{color:var(--t3);}
.ft-bot{border-top:1px solid var(--brd);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.ft-disc{font-family:var(--mono);font-size:9px;color:#333;line-height:1.6;max-width:640px;}
.ft-copy{font-family:var(--mono);font-size:9px;color:#333;}

/* AFFILIATE LANDING */
.aff-hero{background:var(--bg);padding:80px 32px;position:relative;overflow:hidden;}
.aff-hero::before{content:'';position:absolute;top:0;right:0;width:50%;height:100%;background:radial-gradient(ellipse,rgba(0,212,160,.05) 0%,transparent 65%);pointer-events:none;}
.aff-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--g),transparent);}
.aff-hero-i{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center;}
.aff-h1{font-family:var(--disp);font-size:72px;font-weight:900;line-height:.92;text-transform:uppercase;margin-bottom:20px;}
.aff-h1 em{display:block;font-style:italic;color:var(--g);}
.comm-structure{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:24px;position:relative;overflow:hidden;}
.comm-structure::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--g),var(--bl));}
.cs-title{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.12em;margin-bottom:16px;}
.cs-rows{display:flex;flex-direction:column;gap:1px;background:var(--brd);border-radius:var(--r);overflow:hidden;margin-bottom:14px;}
.cs-r{background:var(--bg2);display:flex;justify-content:space-between;align-items:center;padding:10px 14px;}
.cs-k{font-size:13px;color:var(--t2);}
.cs-v{font-family:var(--mono);font-size:12px;color:var(--g);}
.cs-note{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.03em;line-height:1.6;}
.aff-login-btn{width:100%;background:transparent;color:var(--g);font-family:var(--mono);font-size:11px;padding:10px;border:1px solid var(--g);border-radius:var(--r);cursor:pointer;letter-spacing:.06em;text-transform:uppercase;margin-top:12px;transition:all .15s;}
.aff-login-btn:hover{background:var(--gd);}
.how-sec{background:var(--bg3);border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);padding:64px 32px;}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--brd);border-radius:var(--rl);overflow:hidden;margin-top:36px;}
.how-card{background:var(--bg2);padding:32px 28px;}
.how-n{font-family:var(--disp);font-size:72px;font-weight:900;color:var(--bg4);line-height:1;margin-bottom:12px;}
.how-t{font-family:var(--disp);font-size:22px;font-weight:700;color:#fff;text-transform:uppercase;margin-bottom:10px;}
.how-p{font-size:13px;color:var(--t2);line-height:1.65;}
.signup-sec{padding:64px 32px;background:var(--bg);}
.signup-i{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.form-box{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:32px;position:relative;overflow:hidden;}
.form-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--g),var(--bl));}
.form-title{font-family:var(--disp);font-size:28px;font-weight:900;color:#fff;text-transform:uppercase;margin-bottom:6px;}
.form-sub{font-size:13px;color:var(--t3);margin-bottom:24px;}
.f-row{margin-bottom:16px;}
.f-lbl{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.1em;margin-bottom:7px;display:block;}
.f-inp,.f-sel,.f-textarea{background:var(--bg2);border:1px solid var(--brd);color:#fff;font-family:'Inter',sans-serif;font-size:13px;padding:11px 14px;border-radius:var(--r);width:100%;outline:none;transition:border-color .15s;}
.f-inp:focus,.f-sel:focus,.f-textarea:focus{border-color:var(--g);}
.f-inp::placeholder,.f-textarea::placeholder{color:var(--t4);}
.f-sel{appearance:none;cursor:pointer;}
.f-sel option{background:var(--bg3);color:#fff;}
.f-textarea{resize:vertical;min-height:90px;line-height:1.5;}
.f-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;}
.f-check input[type=checkbox]{width:16px;height:16px;margin-top:3px;accent-color:var(--g);flex-shrink:0;}
.f-check-lbl{font-size:12px;color:var(--t2);line-height:1.5;}
.f-check-lbl a{color:var(--g);text-decoration:none;cursor:pointer;}
.f-check-lbl a:hover{text-decoration:underline;}
.btn-submit{width:100%;background:var(--g);color:#000;font-family:var(--mono);font-size:12px;font-weight:500;padding:14px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.08em;text-transform:uppercase;transition:background .15s;}
.btn-submit:hover{background:var(--gh);}
.f-err{font-family:var(--mono);font-size:10px;color:var(--rd);margin-bottom:12px;display:none;padding:8px 12px;background:var(--rdd);border-radius:var(--r);}
.form-success{display:none;text-align:center;padding:32px 20px;}
.fs-icon{width:56px;height:56px;background:var(--gd);border:1px solid var(--gl);border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;}
.fs-h{font-family:var(--disp);font-size:28px;font-weight:900;color:#fff;text-transform:uppercase;margin-bottom:8px;}
.fs-p{font-size:13px;color:var(--t2);line-height:1.65;margin-bottom:20px;}
.ref-box{background:var(--bg2);border:1px solid var(--gl);border-radius:var(--r);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.ref-url{font-family:var(--mono);font-size:11px;color:var(--g);}
.btn-copy{background:var(--g);color:#000;font-family:var(--mono);font-size:10px;padding:7px 14px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.04em;}
.aff-faq{display:flex;flex-direction:column;gap:10px;}
.faq-item{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);overflow:hidden;}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;cursor:pointer;font-size:14px;font-weight:600;color:#fff;user-select:none;}
.faq-q:hover{background:var(--bg4);}
.faq-arrow{font-size:20px;color:var(--t3);transition:transform .2s;line-height:1;}
.faq-a{display:none;padding:14px 18px;font-size:13px;color:var(--t2);line-height:1.65;border-top:1px solid var(--brd);}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-arrow{transform:rotate(45deg);}

/* AFFILIATE TERMS PAGE */
.terms-page{padding:60px 32px;background:var(--bg);}
.terms-i{max-width:800px;margin:0 auto;}
.terms-back{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;color:var(--t3);cursor:pointer;letter-spacing:.08em;margin-bottom:32px;transition:color .15s;}
.terms-back:hover{color:var(--g);}
.terms-hdr{margin-bottom:40px;}
.terms-kicker{font-family:var(--mono);font-size:10px;color:var(--g);letter-spacing:.14em;margin-bottom:10px;}
.terms-h1{font-family:var(--disp);font-size:52px;font-weight:900;text-transform:uppercase;margin-bottom:12px;}
.terms-meta{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.06em;}
.terms-body{color:var(--t2);font-size:14px;line-height:1.8;}
.terms-body h2{font-family:var(--disp);font-size:22px;font-weight:700;color:#fff;text-transform:uppercase;margin:32px 0 12px;padding-top:24px;border-top:1px solid var(--brd);}
.terms-body h2:first-of-type{border-top:none;padding-top:0;}
.terms-body p{margin-bottom:14px;}
.terms-body ul{padding-left:20px;margin-bottom:14px;}
.terms-body li{margin-bottom:6px;}
.terms-body strong{color:#fff;font-weight:600;}
.terms-body a{color:var(--g);text-decoration:none;}

/* DASHBOARD SHARED */
.dash-wrap{min-height:calc(100vh - 66px);background:var(--bg);}
.dash-hdr{background:var(--bg2);border-bottom:1px solid var(--brd);padding:18px 32px;display:flex;justify-content:space-between;align-items:center;}
.dash-logo{font-family:var(--disp);font-size:20px;font-weight:900;color:#fff;}
.dash-logo span{color:var(--g);}
.dash-badge{font-family:var(--mono);font-size:9px;color:var(--g);background:var(--gd);border:1px solid var(--gl);padding:4px 10px;border-radius:3px;letter-spacing:.08em;margin-left:10px;}
.dash-right{display:flex;align-items:center;gap:12px;}
.dash-user{font-family:var(--mono);font-size:11px;color:var(--t2);}
.btn-logout{background:transparent;color:var(--t3);font-family:var(--mono);font-size:10px;padding:7px 14px;border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;letter-spacing:.05em;transition:all .15s;}
.btn-logout:hover{border-color:var(--rd);color:var(--rd);}
.dash-body{max-width:1280px;margin:0 auto;padding:32px;}
.dash-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:32px;}
.ds-card{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:20px;position:relative;overflow:hidden;}
.ds-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--brd);}
.ds-card.green::before{background:var(--g);}
.ds-card.blue::before{background:var(--bl);}
.ds-card.amber::before{background:var(--gld);}
.ds-card.red::before{background:var(--rd);}
.ds-lbl{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.1em;margin-bottom:6px;}
.ds-val{font-family:var(--disp);font-size:32px;font-weight:900;color:#fff;}
.ds-sub{font-family:var(--mono);font-size:9px;color:var(--t3);margin-top:3px;letter-spacing:.04em;}
/* OWNER DASHBOARD TABLE */
.dash-section{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);overflow:hidden;margin-bottom:24px;}
.dash-sec-hdr{padding:16px 20px;border-bottom:1px solid var(--brd);display:flex;justify-content:space-between;align-items:center;}
.dash-sec-title{font-family:var(--disp);font-size:18px;font-weight:700;color:#fff;text-transform:uppercase;}
.dash-filters{display:flex;gap:6px;}
.df{font-family:var(--mono);font-size:9px;padding:5px 12px;border-radius:20px;border:1px solid var(--brd);background:transparent;color:var(--t3);cursor:pointer;letter-spacing:.05em;transition:all .15s;}
.df:hover{border-color:var(--g);color:#fff;}
.df.active{background:var(--gd);border-color:var(--g);color:var(--g);}
.aff-table{width:100%;border-collapse:collapse;}
.aff-table th{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.1em;padding:10px 16px;text-align:left;border-bottom:1px solid var(--brd);background:var(--bg2);}
.aff-table td{font-size:13px;color:var(--t2);padding:13px 16px;border-bottom:1px solid var(--brd);vertical-align:middle;}
.aff-table tr:last-child td{border-bottom:none;}
.aff-table tr:hover td{background:rgba(255,255,255,.02);}
.status-badge{font-family:var(--mono);font-size:9px;padding:3px 8px;border-radius:3px;letter-spacing:.05em;}
.st-approved{background:var(--gd);color:var(--g);border:1px solid var(--gl);}
.st-pending{background:var(--ydd);color:var(--gld);border:1px solid rgba(245,200,66,.2);}
.st-rejected{background:var(--rdd);color:var(--rd);border:1px solid rgba(229,62,62,.2);}
.btn-approve{font-family:var(--mono);font-size:9px;background:var(--gd);color:var(--g);border:1px solid var(--gl);padding:5px 10px;border-radius:3px;cursor:pointer;letter-spacing:.04em;transition:all .15s;}
.btn-approve:hover{background:var(--g);color:#000;}
.btn-reject{font-family:var(--mono);font-size:9px;background:var(--rdd);color:var(--rd);border:1px solid rgba(229,62,62,.2);padding:5px 10px;border-radius:3px;cursor:pointer;letter-spacing:.04em;margin-left:5px;}
.btn-reject:hover{background:var(--rd);color:#fff;}
/* AFFILIATE SELF-DASHBOARD */
.ref-link-box{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:20px;margin-bottom:28px;position:relative;overflow:hidden;}
.ref-link-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--g),var(--bl));}
.rlb-lbl{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.12em;margin-bottom:10px;}
.rlb-url-row{display:flex;gap:10px;align-items:center;}
.rlb-url{flex:1;background:var(--bg2);border:1px solid var(--brd);border-radius:var(--r);padding:11px 14px;font-family:var(--mono);font-size:12px;color:var(--g);word-break:break-all;}
.conv-table{width:100%;border-collapse:collapse;}
.conv-table th{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.1em;padding:10px 16px;text-align:left;border-bottom:1px solid var(--brd);background:var(--bg2);}
.conv-table td{font-size:13px;color:var(--t2);padding:12px 16px;border-bottom:1px solid var(--brd);}
.conv-table tr:last-child td{border-bottom:none;}
/* LOGIN PAGES */
.login-page{min-height:calc(100vh - 66px);background:var(--bg);display:flex;align-items:center;justify-content:center;padding:32px;}
.login-box{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:40px;width:100%;max-width:420px;position:relative;overflow:hidden;}
.login-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--g),var(--bl));}
.login-logo{font-family:var(--disp);font-size:22px;font-weight:900;color:#fff;margin-bottom:4px;}
.login-logo span{color:var(--g);}
.login-sub{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.1em;margin-bottom:28px;}
.login-h{font-family:var(--disp);font-size:24px;font-weight:900;text-transform:uppercase;color:#fff;margin-bottom:20px;}
.f-pw{background:var(--bg2);border:1px solid var(--brd);color:#fff;font-family:'Inter',sans-serif;font-size:13px;padding:12px 14px;border-radius:var(--r);width:100%;outline:none;transition:border-color .15s;margin-bottom:10px;}
.f-pw:focus{border-color:var(--g);}
.f-pw::placeholder{color:var(--t4);}
.login-err{font-family:var(--mono);font-size:10px;color:var(--rd);padding:8px 12px;background:var(--rdd);border-radius:var(--r);margin-bottom:12px;display:none;}
.btn-login{width:100%;background:var(--g);color:#000;font-family:var(--mono);font-size:12px;font-weight:500;padding:13px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.08em;text-transform:uppercase;transition:background .15s;}
.btn-login:hover{background:var(--gh);}
.login-hint{font-family:var(--mono);font-size:9px;color:var(--t3);text-align:center;margin-top:14px;letter-spacing:.04em;}

/* MODAL */
.pm-ov{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.82);z-index:5000;display:none;align-items:center;justify-content:center;padding:20px;}
.pm-ov.open{display:flex;}
.pm-m{background:var(--bg3);border:1px solid var(--brd2);border-radius:var(--rl);width:100%;max-width:500px;overflow:hidden;max-height:90vh;overflow-y:auto;position:relative;}
.pm-m::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--g),var(--bl));}
.pm-hdr{padding:22px 24px;border-bottom:1px solid var(--brd);display:flex;justify-content:space-between;align-items:flex-start;position:sticky;top:0;background:var(--bg3);z-index:2;} @media(max-width:480px){.pm-hdr{padding:16px 16px;}}
.pm-title{font-family:var(--disp);font-size:28px;font-weight:900;color:#fff;text-transform:uppercase;}
.pm-sub{font-size:11px;color:var(--t3);margin-top:2px;}
.pm-cls{background:none;border:none;font-size:24px;cursor:pointer;color:var(--t3);line-height:1;padding:2px 6px;}
.pm-cls:hover{color:#fff;}
.pm-body{padding:20px 24px;} @media(max-width:480px){.pm-body{padding:16px 16px;} .pm-m{border-radius:12px;}}
.pm-cas,.pm-pur{font-family:var(--mono);font-size:10px;margin-bottom:4px;}
.pm-cas{color:var(--t3);letter-spacing:.04em;}
.pm-pur{color:var(--g);}
.pm-desc{font-size:13px;color:var(--t2);line-height:1.65;margin-bottom:20px;margin-top:10px;}
.pm-slbl{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.1em;margin-bottom:10px;}
.pm-sizes{display:grid;gap:8px;margin-bottom:4px;}
.mso{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--r);padding:13px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .15s;}
.mso:hover{border-color:var(--g);}
.mso.sel{background:var(--gd);border-color:var(--g);}
.mso-l{font-family:var(--mono);font-size:13px;font-weight:500;color:#fff;}
.mso-p{font-family:var(--disp);font-size:22px;font-weight:800;color:var(--g);}
.mso-orig{font-size:11px;color:#E57373;text-decoration:line-through;margin-right:6px;font-weight:500;}
.pm-disc{font-family:var(--mono);font-size:8px;color:var(--t3);padding:0 24px;margin-bottom:8px;line-height:1.6;letter-spacing:.03em;}
.pm-ft{padding:12px 24px 22px;display:flex;gap:10px;border-top:1px solid var(--brd);margin-top:8px;}
.btn-pa{flex:1;background:var(--g);color:#000;font-family:var(--mono);font-size:11px;font-weight:500;padding:13px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.07em;text-transform:uppercase;transition:background .15s;}
.btn-pa:hover:not(:disabled){background:var(--gh);}
.btn-pa:disabled{background:var(--bg4);color:var(--t3);cursor:not-allowed;}
.btn-pc{background:transparent;color:var(--t2);font-family:var(--mono);font-size:11px;padding:12px 16px;border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;}

/* CART */
.co-bg{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:4000;display:none;}
.co-bg.open{display:block;}
.cart-sb{position:fixed;right:0;top:0;bottom:0;width:400px;background:var(--bg2);border-left:1px solid var(--brd);z-index:4001;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;}
.cart-sb.open{transform:translateX(0);}
.cart-hdr{padding:20px 24px;border-bottom:1px solid var(--brd);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.cart-ttl{font-family:var(--disp);font-size:22px;font-weight:900;color:#fff;text-transform:uppercase;}
.cart-cls{background:none;border:none;font-size:26px;cursor:pointer;color:var(--t3);line-height:1;}
.cart-cls:hover{color:#fff;}
.cart-body{flex:1;overflow-y:auto;padding:16px 24px;}
.ce{text-align:center;padding:60px 20px;}
.ce-ic{width:52px;height:52px;background:var(--bg3);border:1px solid var(--brd);border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;}
.ce-t{font-size:14px;color:var(--t3);}
.ci{display:flex;align-items:center;padding:14px 0;border-bottom:1px solid var(--brd);}
.ci:last-child{border-bottom:none;}
.ci-info{flex:1;}
.ci-name{font-family:var(--disp);font-size:16px;font-weight:800;color:#fff;text-transform:uppercase;}
.ci-size{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.04em;margin-top:2px;}
.ci-qty{display:flex;align-items:center;gap:8px;margin-top:6px;}
.qb{width:22px;height:22px;background:var(--bg4);border:1px solid var(--brd);border-radius:4px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--t2);}
.qb:hover{border-color:var(--g);color:var(--g);}
.qn{font-family:var(--mono);font-size:12px;color:#fff;min-width:16px;text-align:center;}
.ci-p{font-family:var(--disp);font-size:18px;font-weight:900;color:#fff;margin-left:16px;}
.ci-rm{background:none;border:none;color:var(--t3);cursor:pointer;font-size:17px;padding:4px 6px;margin-left:4px;}
.ci-rm:hover{color:var(--rd);}
.cart-ft{padding:16px 24px;border-top:1px solid var(--brd);flex-shrink:0;}
.c-sub{display:flex;justify-content:space-between;margin-bottom:6px;}
.c-sub-l{font-size:13px;color:var(--t2);}
.c-sub-v{font-family:var(--disp);font-size:24px;font-weight:900;color:#fff;}
.c-ship{font-family:var(--mono);font-size:9px;color:var(--t3);margin-bottom:14px;letter-spacing:.04em;}
.c-warn{font-family:var(--mono);font-size:9px;color:rgba(245,200,66,.7);background:var(--ydd);border:1px solid rgba(245,200,66,.2);padding:9px 12px;border-radius:var(--r);margin-bottom:14px;line-height:1.55;}
.btn-co{width:100%;background:var(--g);color:#000;font-family:var(--mono);font-size:12px;font-weight:500;padding:14px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.08em;margin-bottom:8px;text-transform:uppercase;transition:background .15s;}
.btn-co:hover{background:var(--gh);}
.btn-vc{width:100%;background:transparent;color:var(--t2);font-family:var(--mono);font-size:10px;padding:10px;border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;text-transform:uppercase;letter-spacing:.06em;}

/* ENTRY GATE */
.entry-ov{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.96);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.entry-m{background:var(--bg3);border:1px solid var(--brd2);border-radius:var(--rl);padding:40px;max-width:520px;width:100%;position:relative;overflow:hidden;-webkit-overflow-scrolling:touch;}
.entry-m::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--g),var(--bl));}
.em-logo{font-family:var(--disp);font-size:26px;font-weight:900;color:#fff;margin-bottom:3px;}
.em-logo span{color:var(--g);}
.em-ey{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.13em;margin-bottom:22px;}
.em-h{font-family:var(--disp);font-size:26px;font-weight:900;color:#fff;text-transform:uppercase;margin-bottom:10px;}
.em-p{font-size:13px;color:var(--t2);line-height:1.65;margin-bottom:20px;}
.em-chks{list-style:none;margin-bottom:20px;}
.em-chk{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--t2);margin-bottom:9px;line-height:1.5;}
.chk-ic{width:16px;height:16px;background:var(--gd);border:1px solid var(--gl);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.chk-tk{width:7px;height:5px;border-left:1.5px solid var(--g);border-bottom:1.5px solid var(--g);transform:rotate(-45deg) translate(1px,-1px);}
.em-warn{font-family:var(--mono);font-size:9px;color:rgba(245,200,66,.8);background:var(--ydd);border:1px solid rgba(245,200,66,.2);padding:11px 14px;border-radius:var(--r);margin-bottom:20px;line-height:1.6;letter-spacing:.03em;}
.btn-ent{width:100%;background:var(--g);color:#000;font-family:var(--mono);font-size:12px;font-weight:500;padding:14px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.08em;margin-bottom:8px;text-transform:uppercase;transition:background .15s;}
.btn-ent:hover{background:var(--gh);}
.btn-ext{width:100%;background:transparent;color:var(--t3);font-family:var(--mono);font-size:10px;padding:10px;border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;letter-spacing:.06em;}

/* TOAST */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--bg3);border:1px solid var(--g);color:#fff;font-family:var(--mono);font-size:11px;padding:12px 22px;border-radius:var(--r);z-index:9999;transition:transform .25s ease;letter-spacing:.05em;white-space:nowrap;pointer-events:none;}
.toast.show{transform:translateX(-50%) translateY(0);}

/* RESPONSIVE */
@media(max-width:1024px){
  .hero-i,.aff-hero-i{grid-template-columns:1fr;}
  .hero-panel{display:block;}
  .calc-i,.signup-i{grid-template-columns:1fr;}
  .ft-top{grid-template-columns:1fr 1fr;gap:24px;}
  .how-grid{grid-template-columns:1fr;}
  .dash-stat-grid{grid-template-columns:repeat(2,1fr);}
  .about-hero-i,.co-layout{grid-template-columns:1fr;}
  .about-img-placeholder{height:240px;}
  .conf-cards{grid-template-columns:1fr 1fr;}
  .co-sidebar{position:static;}
  .about-values{grid-template-columns:1fr 1fr;}
  .nl-hide{display:none;}
}
/* legacy 768 block replaced by mobile CSS above */
/* legacy 480 block replaced by mobile CSS above */

/* ── STATIC CONTENT PAGES ── */
.content-page{padding:64px 32px;background:var(--bg);min-height:80vh;}
.cp-i{max-width:860px;margin:0 auto;}
.cp-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;color:var(--t3);cursor:pointer;letter-spacing:.08em;margin-bottom:36px;transition:color .15s;background:none;border:none;}
.cp-back:hover{color:var(--g);}
.cp-kicker{font-family:var(--mono);font-size:10px;color:var(--g);letter-spacing:.14em;margin-bottom:10px;}
.cp-h1{font-family:var(--disp);font-size:56px;font-weight:900;text-transform:uppercase;line-height:1;margin-bottom:14px;}
.cp-meta{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.06em;margin-bottom:48px;padding-bottom:24px;border-bottom:1px solid var(--brd);}
.cp-body{color:var(--t2);font-size:15px;line-height:1.85;}
.cp-body h2{font-family:var(--disp);font-size:24px;font-weight:700;color:#fff;text-transform:uppercase;margin:40px 0 14px;padding-top:32px;border-top:1px solid var(--brd);}
.cp-body h3{font-size:16px;font-weight:600;color:#fff;margin:24px 0 10px;}
.cp-body p{margin-bottom:16px;}
.cp-body ul,.cp-body ol{padding-left:22px;margin-bottom:16px;}
.cp-body li{margin-bottom:8px;}
.cp-body strong{color:#fff;font-weight:600;}
.cp-body a{color:var(--g);text-decoration:none;}
.cp-body a:hover{text-decoration:underline;}
.cp-body .highlight-box{background:var(--bg3);border:1px solid var(--brd);border-left:3px solid var(--g);border-radius:var(--r);padding:18px 20px;margin:20px 0;font-size:14px;}
.cp-body .warn-box{background:var(--ydd);border:1px solid rgba(245,200,66,.2);border-left:3px solid var(--gld);border-radius:var(--r);padding:18px 20px;margin:20px 0;font-size:14px;color:rgba(245,200,66,.8);font-family:var(--mono);}
/* ABOUT PAGE */
.about-hero{background:var(--bg);padding:80px 32px 0;position:relative;overflow:hidden;}
.about-hero::before{content:'';position:absolute;top:0;right:0;width:50%;height:100%;background:radial-gradient(ellipse,rgba(0,212,160,.04) 0%,transparent 65%);pointer-events:none;}
.about-hero-i{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:end;padding-bottom:0;}
.about-img-placeholder{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl) var(--rl) 0 0;height:360px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.about-img-placeholder::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--g),var(--bl));}
.aip-inner{text-align:center;}
.aip-logo{font-family:var(--disp);font-size:42px;font-weight:900;color:var(--g);opacity:.3;line-height:1;}
.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:40px 0;}
.av-card{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:22px;position:relative;overflow:hidden;}
.av-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--brd);}
.av-card.green::before{background:var(--g);}
.av-card.blue::before{background:var(--bl);}
.av-card.amber::before{background:var(--gld);}
.av-n{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.1em;margin-bottom:8px;}
.av-t{font-family:var(--disp);font-size:18px;font-weight:700;color:#fff;text-transform:uppercase;margin-bottom:8px;}
.av-p{font-size:12px;color:var(--t2);line-height:1.6;}
/* FAQ */
.faq-sec{padding:64px 32px;background:var(--bg);}
.faq-i{max-width:860px;margin:0 auto;}
.faq-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px;}
.fq-cat{font-family:var(--mono);font-size:10px;padding:7px 16px;border-radius:20px;border:1px solid var(--brd);background:transparent;color:var(--t3);cursor:pointer;transition:all .15s;letter-spacing:.05em;}
.fq-cat:hover{border-color:var(--g);color:#fff;}
.fq-cat.active{background:var(--gd);border-color:var(--g);color:var(--g);}
.faq-group{margin-bottom:36px;}
.faq-group-title{font-family:var(--mono);font-size:10px;color:var(--g);letter-spacing:.12em;margin-bottom:14px;}
.faq-list{display:flex;flex-direction:column;gap:8px;}
.fq{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);overflow:hidden;}
.fq-q{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;cursor:pointer;font-size:14px;font-weight:600;color:#fff;user-select:none;gap:16px;}
.fq-q:hover{background:var(--bg4);}
.fq-arr{width:20px;height:20px;flex-shrink:0;border:1px solid var(--brd);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--t3);transition:all .2s;line-height:1;}
.fq.open .fq-arr{background:var(--gd);border-color:var(--g);color:var(--g);transform:rotate(45deg);}
.fq-a{display:none;padding:14px 20px 18px;font-size:13px;color:var(--t2);line-height:1.7;border-top:1px solid var(--brd);}
.fq.open .fq-a{display:block;}
/* CHECKOUT FLOW */
.checkout-page{min-height:calc(100vh - 66px);background:var(--bg);padding:40px 32px;}
.co-i{max-width:1100px;margin:0 auto;}
.co-progress{display:flex;align-items:center;margin-bottom:40px;gap:0;}
.co-step{display:flex;align-items:center;gap:8px;}
.co-step-num{width:28px;height:28px;border-radius:50%;border:2px solid var(--brd);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--t3);flex-shrink:0;transition:all .3s;}
.co-step-lbl{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.08em;white-space:nowrap;}
.co-step.done .co-step-num{background:var(--g);border-color:var(--g);color:#000;}
.co-step.done .co-step-lbl{color:var(--g);}
.co-step.active .co-step-num{background:transparent;border-color:var(--g);color:var(--g);}
.co-step.active .co-step-lbl{color:#fff;}
.co-sep{flex:1;height:1px;background:var(--brd);margin:0 12px;min-width:20px;}
.co-sep.done{background:var(--g);}
.co-layout{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start;}
.co-main{display:flex;flex-direction:column;gap:20px;}
.co-section{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);overflow:hidden;}
.co-sec-hdr{padding:16px 22px;border-bottom:1px solid var(--brd);font-family:var(--disp);font-size:18px;font-weight:700;color:#fff;text-transform:uppercase;display:flex;align-items:center;gap:10px;}
.co-sec-num{width:24px;height:24px;border-radius:50%;background:var(--gd);border:1px solid var(--gl);font-family:var(--mono);font-size:10px;color:var(--g);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.co-sec-body{padding:22px;}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.f-full{grid-column:1/-1;}
.co-cart-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--brd);}
.co-cart-item:last-child{border-bottom:none;}
.co-ci-info{flex:1;}
.co-ci-name{font-family:var(--disp);font-size:16px;font-weight:800;color:#fff;text-transform:uppercase;}
.co-ci-size{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.04em;}
.co-ci-qty{display:flex;align-items:center;gap:8px;margin-top:6px;}
.co-ci-price{font-family:var(--disp);font-size:18px;font-weight:900;color:#fff;text-align:right;}
.co-ci-unit{font-family:var(--mono);font-size:9px;color:var(--t3);}
/* ORDER SUMMARY SIDEBAR */
.co-sidebar{position:sticky;top:80px;}
.co-summary{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);overflow:hidden;margin-bottom:14px;}
.co-sum-hdr{padding:14px 18px;border-bottom:1px solid var(--brd);font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.12em;}
.co-sum-items{padding:14px 18px;}
.co-sum-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px;}
.co-sum-name{color:var(--t2);}
.co-sum-price{font-family:var(--mono);color:#fff;}
.co-sum-divider{border:none;border-top:1px solid var(--brd);margin:12px 0;}
.co-sum-total{display:flex;justify-content:space-between;align-items:baseline;}
.co-sum-total-lbl{font-weight:600;color:#fff;}
.co-sum-total-val{font-family:var(--disp);font-size:24px;font-weight:900;color:#fff;}
.co-promo{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--brd);}
.co-promo-inp{flex:1;background:var(--bg2);border:1px solid var(--brd);color:#fff;font-family:var(--mono);font-size:12px;padding:9px 12px;border-radius:var(--r);outline:none;transition:border-color .15s;}
.co-promo-inp:focus{border-color:var(--g);}
.co-promo-inp::placeholder{color:var(--t4);}
.co-promo-btn{background:var(--bg4);color:var(--t2);font-family:var(--mono);font-size:10px;padding:9px 14px;border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;transition:all .15s;white-space:nowrap;}
.co-promo-btn:hover{border-color:var(--g);color:var(--g);}
/* SHIPPING OPTIONS */
.ship-opts{display:flex;flex-direction:column;gap:10px;}
.ship-opt{display:flex;align-items:center;gap:14px;background:var(--bg2);border:2px solid var(--brd);border-radius:var(--r);padding:14px 16px;cursor:pointer;transition:all .15s;}
.ship-opt:hover{border-color:var(--brd2);}
.ship-opt.sel{border-color:var(--g);background:var(--gd);}
.ship-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--brd);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.ship-opt.sel .ship-radio{border-color:var(--g);background:var(--g);}
.ship-radio-dot{width:6px;height:6px;border-radius:50%;background:#000;display:none;}
.ship-opt.sel .ship-radio-dot{display:block;}
.ship-opt-info{flex:1;}
.ship-opt-name{font-size:14px;font-weight:600;color:#fff;}
.ship-opt-sub{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.04em;margin-top:2px;}
.ship-opt-price{font-family:var(--disp);font-size:20px;font-weight:800;color:var(--g);}
.ship-opt.sel .ship-opt-price{color:var(--g);}
/* PAYMENT METHODS */
.pay-tabs{display:flex;gap:10px;margin-bottom:20px;}
.pay-tab{flex:1;background:var(--bg2);border:2px solid var(--brd);border-radius:var(--r);padding:14px;cursor:pointer;text-align:center;transition:all .15s;}
.pay-tab:hover{border-color:var(--brd2);}
.pay-tab.sel{border-color:var(--g);background:var(--gd);}
.pay-tab-icon{font-size:22px;margin-bottom:6px;}
.pay-tab-lbl{font-family:var(--mono);font-size:10px;color:var(--t2);letter-spacing:.06em;}
.pay-tab.sel .pay-tab-lbl{color:var(--g);}
.card-fields{display:flex;flex-direction:column;gap:12px;}
/* crypto styles removed */
.co-nav-btns{display:flex;gap:12px;justify-content:space-between;margin-top:8px;}
.btn-co-back{background:transparent;color:var(--t2);font-family:var(--mono);font-size:11px;padding:12px 22px;border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;transition:all .15s;letter-spacing:.06em;text-transform:uppercase;}
.btn-co-back:hover{border-color:var(--brd2);color:#fff;}
.btn-co-next{background:var(--g);color:#000;font-family:var(--mono);font-size:12px;font-weight:500;padding:13px 28px;border:none;border-radius:var(--r);cursor:pointer;transition:background .15s;letter-spacing:.07em;text-transform:uppercase;}
.btn-co-next:hover{background:var(--gh);}
.btn-co-next:disabled{background:var(--bg4);color:var(--t3);cursor:not-allowed;}
/* CONFIRMATION */
.conf-hero{text-align:center;padding:60px 32px 40px;}
.conf-icon{width:72px;height:72px;background:var(--gd);border:2px solid var(--g);border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;}
.conf-h{font-family:var(--disp);font-size:52px;font-weight:900;text-transform:uppercase;margin-bottom:10px;}
.conf-order-num{font-family:var(--mono);font-size:12px;color:var(--g);letter-spacing:.12em;margin-bottom:8px;}
.conf-sub{font-size:15px;color:var(--t2);line-height:1.7;max-width:560px;margin:0 auto 36px;}
.conf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:860px;margin:0 auto 40px;text-align:left;}
.conf-card{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:20px;position:relative;overflow:hidden;}
.conf-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.conf-card.g::before{background:var(--g);}
.conf-card.b::before{background:var(--bl);}
.conf-card.a::before{background:var(--gld);}
.cc-icon{margin-bottom:10px;color:var(--g);}
.cc-t{font-family:var(--disp);font-size:15px;font-weight:700;color:#fff;text-transform:uppercase;margin-bottom:6px;}
.cc-p{font-size:12px;color:var(--t2);line-height:1.6;}
.conf-research-warn{max-width:680px;margin:0 auto;background:var(--ydd);border:1px solid rgba(245,200,66,.2);border-radius:var(--rl);padding:18px 22px;font-family:var(--mono);font-size:10px;color:rgba(245,200,66,.7);line-height:1.65;letter-spacing:.04em;}
@media(max-width:1024px){
  .about-hero-i,.co-layout{grid-template-columns:1fr;}
  .about-img-placeholder{height:240px;}
  .conf-cards{grid-template-columns:1fr 1fr;}
  .co-sidebar{position:static;}
  .about-values{grid-template-columns:1fr 1fr;}
}

/* ═══ MOBILE HAMBURGER ═══ */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;border-radius:var(--r);}
.hamburger span{display:block;width:22px;height:2px;background:var(--t2);border-radius:2px;transition:all .25s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none;position:fixed;top:56px;left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--brd);z-index:299;padding:12px 16px;flex-direction:column;gap:2px;max-height:calc(100vh - 56px);overflow-y:auto;}
.mobile-menu.open{display:flex;}
.mob-nl{background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:var(--t2);padding:11px 14px;border-radius:var(--r);text-align:left;width:100%;transition:all .15s;}
.mob-nl:hover{color:#fff;background:var(--bg4);}
.mob-nl.active{color:var(--g);background:var(--gd);}
.mob-divider{height:1px;background:var(--brd);margin:6px 0;}
.mob-cat{display:flex;align-items:center;gap:10px;}
.mob-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;}
@media(max-width:480px){.hamburger{display:flex;}}

/* ═══ NAV DROPDOWN ═══ */
.nl-drop{position:relative;display:inline-flex;}
.nl-drop-btn{display:flex;align-items:center;gap:5px;}
.nl-caret{font-size:9px;opacity:.6;transition:transform .2s;pointer-events:none;}
.nl-menu{
  position:absolute;top:calc(100% + 8px);left:0;
  background:var(--bg2);border:1px solid var(--brd2);
  border-radius:var(--rl);padding:6px;min-width:200px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  display:none;flex-direction:column;gap:2px;z-index:9000;
  overflow:visible;
}
.nl-menu.open{display:flex;}
.nl-item{background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--t2);padding:9px 12px;border-radius:var(--r);text-align:left;width:100%;transition:all .13s;display:flex;align-items:center;gap:9px;}
.nl-item:hover{color:#fff;background:var(--bg4);}
.nl-item-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.nl-divider{height:1px;background:var(--brd);margin:4px 0;}

/* ═══════════════════════════════════════
   THEME TOGGLE BUTTON
═══════════════════════════════════════ */
.nav-social{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);color:var(--t3);text-decoration:none;transition:all .15s;flex-shrink:0;}
.nav-social:hover{color:#fff;background:var(--bg4);}
/* ═══════════════════════════════════════
   LIGHT MODE — FULL COLOUR PALETTE
   A clean, lab-grade clinical aesthetic.
   Navy text on off-white. Teal accents.
═══════════════════════════════════════ */
  /* Backgrounds — layered white/grey */
  --bg:#F0F4F8;
  --bg2:#FFFFFF;
  --bg3:#E4ECF4;
  --bg4:#D3E0EE;
  /* Borders */
  --brd:rgba(15,50,100,.12);
  --brd2:rgba(15,50,100,.22);
  /* Typography — navy scale */
  --t2:#1D3557;
  --t3:#4A7098;
  --t4:#849FC0;
  /* Green teal accent (slightly deeper for light bg) */
  --g:#009E76;
  --gh:#007D5E;
  --gd:rgba(0,158,118,.1);
  --gl:rgba(0,158,118,.25);
  /* Blue */
  --bl:#1565C0;
  --bld:rgba(21,101,192,.1);
  /* Red / warning */
  --rd:#C62828;
  --rdd:rgba(198,40,40,.1);
  --gld:#7A4B00;
  --ydd:rgba(122,75,0,.07);
}

/* ── Body ── */

/* ── Announcement bar ── */

/* ── Navigation ── */

/* ── Hero — keep dark for drama, only soften overlay ── */
/* Hero text stays white — hero background is dark in both modes */

/* ── Trust bar ── */

/* ── Product catalogue ── */

/* ── Calculator ── */

/* ── Community section ── */

/* ── Disclaimer bar ── */

/* ── Footer ── */

/* ── Modals ── */

/* ── Cart sidebar ── */

/* ── Entry gate ── */

/* ── Affiliate landing page ── */

/* ── Content pages (FAQ, legal, about) ── */

/* ── About page ── */

/* ── FAQ page ── */

/* ── Checkout ── */

/* ── Confirmation ── */

/* ── Login pages ── */

/* ── Admin / Affiliate dashboards ── */

/* ── All form inputs in light mode ── */
  background:var(--bg3);color:#0D2137;border-color:var(--brd);
}


/* ═══ COOKIE CONSENT ═══ */
.cookie-bar{position:fixed;bottom:0;left:0;right:0;background:#111;border-top:1px solid var(--brd);padding:16px 24px;display:none;align-items:center;justify-content:space-between;gap:16px;z-index:10001;flex-wrap:wrap;}
.cookie-bar.show{display:flex;}
.cookie-text{font-size:13px;color:var(--t2);line-height:1.5;flex:1;min-width:260px;}
.cookie-text a{color:var(--g);text-decoration:none;}
.cookie-btns{display:flex;gap:8px;flex-shrink:0;}
.btn-ca{background:var(--g);color:#000;font-family:var(--mono);font-size:11px;font-weight:500;padding:9px 20px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.05em;text-transform:uppercase;transition:background .15s;}
.btn-ca:hover{background:var(--gh);}
.btn-cr{background:transparent;color:var(--t2);font-family:var(--mono);font-size:11px;padding:8px 16px;border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;letter-spacing:.04em;text-transform:uppercase;}
/* ═══ NEWSLETTER ═══ */
.newsletter-sec{background:var(--bg3);border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);padding:48px 32px;}
.newsletter-i{max-width:640px;margin:0 auto;text-align:center;}
.nl-h{font-family:var(--disp);font-size:36px;font-weight:900;text-transform:uppercase;color:var(--t1);margin-bottom:10px;}
.nl-p{font-size:14px;color:var(--t2);margin-bottom:24px;line-height:1.65;}
.nl-row{display:flex;gap:10px;max-width:440px;margin:0 auto;}
.nl-inp{flex:1;background:var(--bg2);border:1px solid var(--brd);color:var(--t1);font-family:var(--mono);font-size:13px;padding:11px 16px;border-radius:var(--r);outline:none;transition:border-color .15s;}
.nl-inp:focus{border-color:var(--g);}
.nl-inp::placeholder{color:var(--t3);}
.nl-btn{background:var(--g);color:#000;font-family:var(--mono);font-size:11px;font-weight:500;padding:11px 20px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .15s;}
.nl-btn:hover{background:var(--gh);}
.nl-disc{font-family:var(--mono);font-size:9px;color:var(--t3);margin-top:12px;letter-spacing:.04em;}
/* ═══ TRUST SECTION ═══ */
.trust2-sec{padding:52px 32px;background:var(--bg);}
.trust2-i{max-width:1280px;margin:0 auto;}
.trust2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:24px;}
.t2-card{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:22px;}
.t2-icon{width:40px;height:40px;background:var(--gd);border:1px solid var(--gl);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--g);margin-bottom:12px;}
.t2-title{font-family:var(--disp);font-size:16px;font-weight:700;text-transform:uppercase;color:var(--t1);margin-bottom:6px;}
.t2-desc{font-size:12px;color:var(--t2);line-height:1.65;}
/* LIGHT MODE for new sections */
/* mobile covered by main media queries above */


/* ═══ ADMIN TABS ═══ */
.admin-tab{background:none;border:none;border-bottom:2px solid transparent;padding:14px 20px;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--t3);cursor:pointer;letter-spacing:.07em;text-transform:uppercase;transition:all .15s;white-space:nowrap;}
.admin-tab:hover{color:var(--t1);}
.admin-tab.active{color:var(--g);border-bottom-color:var(--g);}
.admin-tab-panel{display:block;}
/* ═══ PRODUCT TABLE ═══ */


/* ═══ CATEGORY SECTIONS ═══ */
.cat-sec{margin-bottom:48px;}
.cat-sec:last-child{margin-bottom:0;}
.cat-hdr{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--brd);}
.cat-hdr-line{width:3px;height:20px;border-radius:2px;flex-shrink:0;}
.cat-hdr-name{font-family:var(--disp);font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--t1);}
.cat-hdr-count{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.1em;margin-left:auto;}

/* ════════════════════════════════════════════════════════
   MOBILE OPTIMISATIONS — full rewrite of responsive layer
   ════════════════════════════════════════════════════════ */

/* ── Shared touch targets ── */
button, .btn-p, .btn-o, .btn-sel, .btn-pa, .btn-co, .btn-ent,
.nl, .so, .mso, .ship-opt, .pay-tab, .fq-q, .faq-q {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── Base mobile (<= 767px) ── */
@media (max-width: 767px) {

  /* Prevent overflow */
  body { overflow-x: hidden; }

  /* ── Announcement bar ── */
  .ann { font-size: 9px; padding: 7px 0; }

  /* ── Nav ── */
  .nav-links { display: none !important; }
  .hamburger { display: flex !important; }
  .nav-i { padding: 0 16px; height: 54px; gap: 12px; }
  .cart-btn { padding: 8px 12px; font-size: 10px; gap: 6px; }
  .logo img { height: 34px !important; }

  /* ── Mobile menu ── */
  .mobile-menu {
    top: 54px;
    max-height: calc(100vh - 54px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 32px;
  }
  .mob-nl { min-height: 48px; font-size: 13px; padding: 12px 20px; }

  /* ── Hero ── */
  .hero { padding: 40px 16px 36px; min-height: auto; }
  .hero-i { grid-template-columns: 1fr; gap: 32px; }
  .hero-panel { display: none; } /* hide on small phones — shown on tablet */
  .h-ey { font-size: 9px; margin-bottom: 12px; }
  .h-h1 { font-size: 46px; margin-bottom: 16px; }
  .h-sub { font-size: 14px; margin-bottom: 24px; }
  .h-btns { gap: 10px; margin-bottom: 32px; }
  .btn-p, .btn-o { 
    width: 100%; text-align: center; justify-content: center;
    padding: 14px 20px; font-size: 11px; min-height: 48px;
  }
  .h-stats { grid-template-columns: repeat(3,1fr); }
  .hs { padding: 14px 10px; }
  .hs-v { font-size: 22px; }
  .hs-l { font-size: 7px; }

  /* ── Trust bar ── */
  .trust { padding: 12px 16px; overflow-x: auto; }
  .trust-i { gap: 12px; flex-wrap: nowrap; justify-content: flex-start; }
  .ti { flex-shrink: 0; }
  .ti-sub { display: none; }
  .ti-ttl { font-size: 11px; }

  /* ── Products section ── */
  .prod-sec { padding: 32px 16px; }
  .prod-hdr { margin-bottom: 16px; }
  .prod-title { font-size: 28px; }
  .pgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pc-name { font-size: 20px; }
  .pc-price { font-size: 20px; }
  .pc-body { padding: 0 14px 14px; }
  .pc-top { padding: 14px 14px 0; }
  .pc-formula { font-size: 9px; }
  .btn-sel { font-size: 10px; padding: 10px 8px; min-height: 44px; }
  .so { padding: 10px; }
  .so-l { font-size: 10px; }
  .so-p { font-size: 15px; }
  .btn-add-c { font-size: 10px; padding: 10px; min-height: 44px; }
  .cat-hdr-name { font-size: 16px; }
  .cat-sec { margin-bottom: 36px; }

  /* ── Calculator ── */
  .calc-sec { padding: 40px 16px; }
  .calc-i { grid-template-columns: 1fr; gap: 28px; }
  .sec-t { font-size: 32px; }
  .c-inp { font-size: 16px; padding: 13px 44px 13px 14px; } /* 16px prevents iOS zoom */
  .c-res-v { font-size: 28px; }

  /* ── Newsletter ── */
  .newsletter-sec { padding: 40px 16px; }
  .nl-h { font-size: 26px; }
  .nl-row { flex-direction: column; }
  .nl-inp { font-size: 16px; padding: 13px 16px; min-height: 48px; }
  .nl-btn { width: 100%; padding: 14px; min-height: 48px; }

  /* ── Trust2 section ── */
  .trust2-sec { padding: 40px 16px; }
  .trust2-grid { grid-template-columns: 1fr; gap: 12px; }

  /* ── Community section ── */
  .comm-sec { padding: 40px 16px; }
  .comm-h { font-size: 32px; }
  .comm-socials { flex-direction: column; align-items: stretch; gap: 10px; }
  .comm-soc-card { width: 100%; height: auto; flex-direction: row; padding: 16px 18px; gap: 14px; }
  .csc-icon { width: 40px; height: 40px; flex-shrink: 0; }

  /* ── Cart sidebar — full screen on mobile ── */
  .cart-sb { width: 100%; border-left: none; border-top: 1px solid var(--brd); }
  .co-bg { display: none !important; } /* tap outside via close button */

  /* ── Modal — full screen on mobile ── */
  .pm-ov { padding: 0; align-items: flex-end; }
  .pm-m {
    max-width: 100%;
    border-radius: var(--rl) var(--rl) 0 0;
    max-height: 90vh;
  }
  .pm-title { font-size: 22px; }
  .mso { padding: 10px 11px; min-height: 44px; }
  .mso-l { font-size: 11px; }
  .mso-p { font-size: 16px; }
  .btn-pa, .btn-pc { min-height: 48px; }

  /* ── Checkout ── */
  .checkout-page { padding: 24px 16px; }
  .co-layout { grid-template-columns: 1fr; }
  .co-sidebar { position: static; margin-top: 20px; }
  .co-progress { overflow-x: auto; padding-bottom: 8px; gap: 0; }
  .co-step-lbl { font-size: 8px; white-space: nowrap; }
  .f-grid { grid-template-columns: 1fr; }
  .f-full { grid-column: 1; }
  .f-inp, .f-sel, .f-textarea { font-size: 16px; min-height: 48px; }
  .ship-opt { padding: 12px 14px; }
  .ship-opt-name { font-size: 13px; }
  .btn-co-next, .btn-co-back { padding: 13px 16px; font-size: 11px; }
  .co-nav-btns { flex-wrap: wrap; gap: 8px; }
  .btn-co-next { flex: 1; min-height: 48px; }

  /* ── Confirmation ── */
  .conf-hero { padding: 40px 16px 28px; }
  .conf-h { font-size: 36px; }
  .conf-cards { grid-template-columns: 1fr; gap: 12px; max-width: 100%; }

  /* ── Footer ── */
  footer { padding: 36px 16px 20px; }
  .ft-top { grid-template-columns: 1fr; gap: 24px; }
  .ft-brand { max-width: 100%; }
  .ft-bot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ft-disc { font-size: 8px; }
  .ft-copy { font-size: 8px; }

  /* ── Content pages ── */
  .content-page { padding: 32px 16px; }
  .cp-h1 { font-size: 36px; }
  .cp-body { font-size: 14px; }

  /* ── About page ── */
  .about-hero { padding: 36px 16px 0; }
  .about-hero-i { grid-template-columns: 1fr; }
  .about-img-placeholder { height: 180px; }
  .about-values { grid-template-columns: 1fr; gap: 10px; }

  /* ── FAQ ── */
  .faq-sec { padding: 36px 16px; }
  .faq-cats { gap: 6px; }
  .fq-cat { font-size: 9px; padding: 6px 12px; min-height: 36px; }
  .fq-q { font-size: 13px; padding: 14px 16px; }

  /* ── Affiliate ── */
  .aff-hero { padding: 40px 16px 0; }
  .aff-hero-i { grid-template-columns: 1fr; }
  .aff-h1 { font-size: 40px; }
  .how-sec, .signup-sec { padding: 40px 16px; }
  .how-grid { grid-template-columns: 1fr; }
  .signup-i { grid-template-columns: 1fr; }
  .form-box { padding: 24px 18px; }

  /* ── Disc bar ── */
  .disc-bar { font-size: 8px; padding: 10px 0; }

  /* ── Cookie bar ── */
  .cookie-bar { padding: 14px 16px; }
  .cookie-text { font-size: 12px; }
  .cookie-btns { width: 100%; }
  .btn-ca, .btn-cr { flex: 1; min-height: 44px; }

  /* ── Entry gate ── */
  .entry-m { padding: 28px 20px; }
  .em-h { font-size: 22px; }

  /* ── Dashboard ── */
  .dash-body { padding: 16px; }
  .dash-stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ds-val { font-size: 24px; }

  /* ── Pay tabs (card only now) ── */
  .pay-tabs { gap: 0; }
  .pay-tab { padding: 12px; min-height: 60px; }

  /* ── About page ── */
  .about-hero { padding: 36px 16px 0; }
  .about-hero-i { grid-template-columns: 1fr; gap: 28px; }
  .about-hero-i h1 { font-size: 38px !important; margin-bottom: 14px; }
  .about-hero-i .h-sub { font-size: 13px; margin-bottom: 20px; }
  .about-hero-i > div:last-child { border-radius: var(--r); padding: 18px; }
  .about-hero-i > div:last-child > div:last-child > div { padding: 11px 12px; }
  .about-hero-i > div:last-child > div:last-child > div > div:first-child { font-size: 26px; min-width: 46px; }
  .about-values { grid-template-columns: 1fr; gap: 10px; margin: 24px 0; }
  .about-story-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .about-story-grid h2 { font-size: 26px !important; margin-bottom: 12px !important; }
  .about-story-grid p { font-size: 13px; }
  .about-story-grid > div:last-child > div { border-radius: var(--r); }
  .about-story-grid > div:last-child > div > div { padding: 12px 14px; }
  .about-cta { padding: 24px 18px !important; margin-top: 28px !important; }
  .about-cta h2 { font-size: 26px !important; }
  .about-cta > div { flex-direction: column; gap: 10px; }
  .about-cta a, .about-cta button { width: 100%; justify-content: center; min-height: 48px; }


  /* ── Research Library ── */
  .lib-card { padding: 16px !important; }
  #libArticles .cat-sec > div:last-child { grid-template-columns: 1fr !important; }
  #libArticles .cat-hdr-name { font-size: 16px; }


  /* ── Contact page ── */
  .contact-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .cp-meta { margin-bottom: 24px; padding-bottom: 16px; font-size: 9px; }
  .cp-h1 { font-size: 32px; }


  /* ── View Research button (new) ── */
  .btn-lib-link { font-size: 10px; padding: 10px 8px; min-height: 44px; letter-spacing:.02em; }
  .btn-card-row { gap: 6px; }

  /* ── Library article Add to Cart (new) ── */
  .lib-cart-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .btn-lib-cart { width: 100%; min-height: 48px; font-size: 12px; text-align: center; }

  /* ── Bank transfer detail rows — prevent overflow on narrow screens ── */
  #pay-bank-fields [style*="display:flex;justify-content:space-between"] {
    flex-wrap: wrap; gap: 6px;
  }
  #pay-bank-fields span[style*="font-size:13px"] { font-size: 12px; word-break: break-all; }

  /* ── Confirmation bank transfer card ── */
  .conf-cards > div[style*="grid-column"] { margin-bottom: 0; }
  .conf-cards > div[style*="grid-column"] [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Calculator preset chips — bigger touch targets ── */
  .c-pre { font-size: 10px; padding: 7px 11px; min-height: 36px; display:inline-flex; align-items:center; }

  /* ── Calculator bullet list ── */
  .calc-sec ul.sec-p { padding-left: 16px; font-size: 13px; }

  /* ── Pay tab bank transfer ── */
  .pay-tab { min-height: 64px; flex-direction: row; gap: 10px; align-items: center; }
  .pay-tab-icon { font-size: 20px !important; }
  .pay-tab-lbl { font-size: 11px; }

  /* ── Entry gate on small phones ── */
  .entry-m { border-radius: var(--rl) var(--rl) 0 0; margin: 0; max-height: 92vh; overflow-y: auto; }


  /* ── Product card with 2 buttons — don't let it get too squished ── */
  .pcard .btn-card-row { gap: 5px; }
  .pcard .btn-lib-link { padding: 8px 6px; line-height: 1.3; word-break: break-word; }

  /* ── Mobile nav dropdown items ── */
  .nl-item { min-height: 44px; width: 100%; padding: 11px 18px; }

  /* ── Checkout: bank transfer detail grid ── */
  #pay-bank-fields > div > div:nth-child(2) { grid-template-columns: 1fr !important; }

  /* ── Size selector panel on mobile ── */
  .size-panel { padding: 10px; }
  .sp-opts { gap: 6px; }
  /* Force single column for all products on mobile */
  .sp-opts { grid-template-columns: 1fr !important; }
  #pmSizes { grid-template-columns: 1fr !important; }

  /* ── Research library grid on mobile ── */
  #libArticles > div > div:last-child { grid-template-columns: 1fr !important; gap: 12px !important; }
  .lib-card { border-radius: var(--r) !important; }


  /* ── Size option mobile ── */
  .so { padding: 12px 13px; min-height: 48px; }
  .so-l { font-size: 11px; }
  .so-p { font-size: 13px; }
  .so-add-icon { font-size: 16px; }
  .sp-opts { gap: 8px; }

}

/* ── Tablet (768px – 1023px) — keep panel visible, tighten grid ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero { padding: 60px 24px; }
  .hero-i { grid-template-columns: 1fr 360px; gap: 32px; }
  .hero-panel { display: block; padding: 24px; }
  .h-h1 { font-size: 60px; }
  .prod-sec { padding: 48px 24px; }
  .pgrid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .calc-i { grid-template-columns: 1fr; gap: 32px; }
  .trust2-grid { grid-template-columns: 1fr 1fr; }
  footer { padding: 40px 24px 24px; }
  .ft-top { grid-template-columns: 1fr 1fr; gap: 20px; }
  .co-layout { grid-template-columns: 1fr; }
  .co-sidebar { position: static; }
  .nav-i { padding: 0 20px; }
}

/* ── Very small phones (< 380px) ── */
@media (max-width: 379px) {
  .pgrid { grid-template-columns: 1fr; }
  .h-h1 { font-size: 38px; }
  .h-stats { grid-template-columns: 1fr 1fr 1fr; }
  .hs-v { font-size: 18px; }

  .btn-lib-link { font-size: 9px; }
  .conf-cards > div[style*="grid-column"] [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .c-pre { padding: 6px 9px; }

}

/* ── Inputs: prevent iOS auto-zoom (min font-size 16px on focus) ── */
@media (max-width: 767px) {

  /* ── Entry gate mobile ── */
  .entry-m { padding: 28px 20px; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .em-logo img { height: 32px !important; }
  .em-h { font-size: 22px; }
  .em-chks { gap: 10px; }
  .em-chk { font-size: 13px; padding: 10px 12px; min-height: 44px; }
  .btn-ent, .btn-ext { min-height: 48px; font-size: 12px; }

  /* ── Cart/checkout mobile ── */
  .cart-panel { width: 100vw; right: -100vw; border-radius: 0; }
  .cart-panel.open { right: 0; }

  /* ── Footer mobile ── */
  .ft-logo img { height: 28px !important; }
  .ft-top { grid-template-columns: 1fr; gap: 32px; }
  .ft-socs { gap: 8px; }

  /* ── Size options mobile ── */
  .size-panel { padding: 8px; }
  .so { padding: 8px 10px; min-height: 44px; }
  .so-l { font-size: 10px; }
  .so-p { font-size: 13px; }
  .so-add-icon { display: none; }
  .sp-opts { gap: 5px; grid-template-columns: 1fr !important; }
  #pmSizes { grid-template-columns: 1fr !important; }

  /* ── Product card mobile ── */
  .pc-formula { display: none; }
  .pc-cas { display: none; }
  .purity-w { margin-bottom: 10px; }

  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], select, textarea {
    font-size: 16px !important;
  }
}


/* ── Research link button on product cards ── */
.btn-card-row{display:flex;flex-direction:column;gap:7px;}
.btn-lib-link{width:100%;padding:9px 14px;background:transparent;border:1px solid var(--brd);border-radius:var(--r);color:var(--t2);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;cursor:pointer;transition:all .15s;text-align:center;}
.btn-lib-link:hover{border-color:var(--g);color:var(--g);}
/* ── Add to Cart on library articles ── */
.lib-cart-row{margin-top:18px;padding-top:18px;border-top:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.lib-art-highlight{outline:2px solid var(--g) !important;outline-offset:4px;}
.btn-lib-cart{padding:10px 20px;background:var(--g);border:none;border-radius:var(--r);color:#000;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:opacity .15s;white-space:nowrap;}
.btn-lib-cart:hover{opacity:.85;}


/* ── Touch optimisations (all devices) ── */
button, a, input, select, textarea, [onclick] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;  /* removes 300ms iOS tap delay */
}
input, select, textarea { -webkit-text-size-adjust: 100%; }

/* ── Safe area insets for notched iPhones ── */
.nav-i { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
footer { padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px)); }
.mobile-menu { padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px)); }
.cookie-bar { padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px)); }

/* ── Prevent text inflation on landscape ── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── Smooth momentum scrolling on iOS ── */
.mobile-menu, .cart-sb, .checkout-page, .content-page {
  -webkit-overflow-scrolling: touch;
}


/* ── Size panel redesign: option = self-contained add button ── */
.size-panel { padding: 10px; background: var(--bg2); border-top: 1px solid var(--brd); }
.size-panel.open { display: block; }
.sp-lbl { font-family: var(--mono); font-size: 8px; color: var(--t3); letter-spacing: .1em; margin-bottom: 8px; text-transform: uppercase; }
.sp-opts { display: grid; gap: 7px; }

.so {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg3);
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 11px 13px;
  cursor: pointer;
  transition: background .13s, border-color .13s, transform .1s;
  gap: 8px;
  user-select: none;
}
.so:hover {
  background: var(--gd);
  border-color: var(--gl);
}
.so:active { transform: scale(.98); }
.so-l {
  font-family: var(--mono);
  font-size: 12px;
  color: #fff;
  font-weight: 600;
  letter-spacing: .03em;
  flex: 1;
}
.so-price-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.so-orig {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--t3);
  text-decoration: line-through;
}
.so-p {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--g);
}
.so-add-icon {
  font-size: 14px;
  color: var(--t3);
  transition: color .13s, transform .13s;
  line-height: 1;
}
.so:hover .so-add-icon { color: var(--g); transform: translateX(2px); }
.so:hover .so-p { color: var(--g); }
.so:hover .so-l { color: #fff; }
/* Stack size option: align top so multi-line label sits flush */
.so.so-stack { align-items: flex-start; padding: 10px 12px; }
.so-l-multi { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.so-l-item { font-family: var(--mono); font-size: 11px; font-weight: 500; color: #fff; letter-spacing: .03em; line-height: 1.4; }
.so.so-stack .so-price-wrap { padding-top: 2px; align-self: flex-start; }
.so.so-stack .so-add-icon { align-self: center; }
.so.so-stack:hover .so-l-item { color: #fff; }

/* Hide old "Add to Order" button if it somehow still renders */
.btn-add-c { display: none !important; }

/* ══════════════════════════════════════════════════
   COMPREHENSIVE OPTIMISATION BLOCK
   ══════════════════════════════════════════════════ */

/* ── Desktop baseline fixes ── */
.pgrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pcard { min-width: 0; }
.pc-name { font-size: clamp(16px, 2vw, 20px); }
.co-layout { gap: 32px; }
.co-sidebar { max-width: 360px; }
.prod-sec { padding: 64px 40px; }
.sec-i { max-width: 1280px; margin: 0 auto; }

/* ── Modal: max-height on short screens ── */
.pm-m { max-height: 94vh; }
@media (max-height: 700px) {
  .pm-m { max-height: 98vh; }
  .pm-hdr { padding: 14px 20px; }
  .pm-body { padding: 14px 20px; }
}

/* ── Checkout layout desktop ── */
@media (min-width: 1024px) {
  .co-layout { grid-template-columns: 1fr 340px; }
  .co-sidebar { position: sticky; top: 80px; }
  .f-grid { grid-template-columns: 1fr 1fr; }
  .conf-cards { grid-template-columns: repeat(3,1fr); }
}

/* ── Tablet (768–1023px) — already partially covered, fill gaps ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .pcard .pc-name { font-size: 16px; }
  .co-layout { grid-template-columns: 1fr; }
  .co-sidebar { position: static; max-width: 100%; }
  .conf-cards { grid-template-columns: 1fr 1fr; }
  .checkout-page { padding: 32px 20px; }
  .co-i { padding: 0; }
  .size-panel { padding: 10px 12px; }
}

/* ── Mobile (≤767px) — consolidate all tweaks ── */
@media (max-width: 767px) {
  /* Product grid */
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .prod-sec { padding: 28px 14px 36px; }
  .cat-hdr { margin-bottom: 10px; }

  /* Product card */
  .pcard { border-radius: 10px; }
  .pc-top { padding: 10px 12px 0; }
  .pc-body { padding: 10px 12px 12px; }
  .pc-name { font-size: 15px; line-height: 1.2; }
  .pc-full { font-size: 10px; margin-bottom: 4px; }
  .pc-pr { margin: 6px 0 8px; }
  .pc-price { font-size: 20px; }
  .pc-range { font-size: 13px; }
  .btn-sel { font-size: 10px; padding: 10px 8px; }
  .btn-lib-link { font-size: 9px; padding: 8px; }
  .sp-lbl { font-size: 7px; }

  /* Checkout */
  .checkout-page { padding: 20px 14px; }
  .co-progress { margin-bottom: 24px; }
  .co-step-lbl { display: none; }
  .co-sec-body { padding: 16px 14px; }
  .co-sec-hdr { padding: 12px 14px; font-size: 15px; }
  .f-grid { grid-template-columns: 1fr; gap: 10px; }
  .co-layout { gap: 16px; }
  .co-sum-hdr { padding: 12px 14px; }
  .co-sum-items { padding: 12px 14px; }
  .co-sum-total-val { font-size: 20px; }
  .btn-co-next { width: 100%; padding: 14px; font-size: 11px; }
  .btn-co-back { font-size: 10px; padding: 10px 16px; }
  .co-nav-btns { flex-direction: column-reverse; gap: 8px; }

  /* Confirmation */
  .conf-hero { padding: 36px 16px 28px; }
  .conf-h { font-size: 36px; }
  .conf-cards { grid-template-columns: 1fr; gap: 10px; max-width: 100%; }
  .conf-card { padding: 16px; }

  /* Hero section */
  .h-stats { gap: 6px; }

  /* Category filters */
  .nl { font-size: 10px; padding: 7px 12px; }

  /* Research library */
  .lib-sec { padding: 28px 14px; }
  .lib-art { padding: 18px 14px; }
  .lib-i { max-width: 100%; }

  /* FAQ */
  .faq-sec { padding: 40px 14px; }
  .faq-i { max-width: 100%; }
  .fq-q { font-size: 13px; padding: 14px 14px; }
  .faq-cats { gap: 6px; }
  .fq-cat { font-size: 9px; padding: 6px 12px; }

  /* Community page */
  .comm-socials { flex-direction: column; }
  .comm-soc-card { width: 100%; flex-direction: row; height: auto; padding: 14px 16px; gap: 14px; }

  /* About */
  .about-hero { padding: 40px 14px 0; }
  .about-sec { padding: 40px 14px; }
  .about-values { grid-template-columns: 1fr; gap: 10px; }
  .av-card { padding: 16px; }

  /* Contact */
  .contact-sec { padding: 40px 14px; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Promo panel */
  #promoPanel { padding: 0 14px 14px; }
  .co-promo { padding: 10px 0 0; }

  /* Trust / shipping */
  .trust2-grid { grid-template-columns: 1fr; gap: 10px; }
  .ship-opts { gap: 8px; }
  .ship-opt { padding: 12px 14px; }
  .ship-opt-name { font-size: 13px; }

  /* Bank transfer detail */
  .bt-grid { grid-template-columns: 1fr !important; }
  .bt-row { flex-wrap: wrap; gap: 4px; }
}

/* ── Very small phones (< 380px) ── */
@media (max-width: 379px) {
  .pgrid { grid-template-columns: 1fr; }
  .h-h1 { font-size: 36px; }
  .pc-name { font-size: 14px; }
  .co-sum-total-val { font-size: 18px; }
}


/* =======================================================================
   VELOX MULTIPAGE — CSS EXTENSIONS
   Appended by generator setup. Do not modify rules above this line.
======================================================================= */

/* Accessibility */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px;word-break:break-all;}

/* Site header */
.site-header{background:rgba(3,4,7,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--brd);position:sticky;top:0;z-index:300;}
.site-header .nav{max-width:1280px;margin:0 auto;padding:0 28px;height:60px;display:flex;align-items:center;gap:20px;}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.nav-logo-svg{flex-shrink:0;}
.nav-logo-wordmark{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:#fff;letter-spacing:.02em;}
.site-header .nav-links{display:flex;gap:2px;flex:1;}
.nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto;}
.nav-cart{display:flex;align-items:center;gap:6px;color:var(--t2);text-decoration:none;padding:7px 12px;border-radius:var(--r);transition:all .15s;position:relative;}
.nav-cart:hover{color:#fff;background:var(--bg4);}
.nav-cart-count{font-family:var(--mono);font-size:10px;background:var(--g);color:#000;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-weight:700;line-height:1;}
.site-header .hamburger{display:none;}
.mob-menu{display:none;position:fixed;top:60px;left:0;right:0;background:rgba(3,4,7,.98);border-bottom:1px solid var(--brd);z-index:299;padding:8px 0 20px;flex-direction:column;gap:2px;max-height:calc(100vh - 60px);overflow-y:auto;}
.mob-menu a{display:block;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:var(--t2);padding:11px 20px;text-decoration:none;transition:color .15s;}
.mob-menu a:hover{color:#fff;background:rgba(255,255,255,.04);}
.mob-nl-sub{padding-left:36px !important;font-size:13px !important;color:var(--t3) !important;}
.mob-nl-sub:hover{color:var(--g) !important;}

/* Site footer */
.site-footer{background:var(--bg2);border-top:1px solid var(--brd);padding:52px 32px 28px;}
.site-footer .ft-i{max-width:1280px;margin:0 auto;}
.site-footer .ft-top{display:grid;grid-template-columns:280px 1fr;gap:48px;margin-bottom:40px;}
.ft-brand{display:flex;flex-direction:column;gap:10px;}
.ft-logo-wordmark{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:#fff;}
.site-footer .ft-tag{font-size:12px;color:var(--t3);line-height:1.7;}
.ft-address{font-style:normal;font-size:12px;color:var(--t3);line-height:1.7;}
.ft-address a{color:var(--t3);text-decoration:none;transition:color .15s;}
.ft-address a:hover{color:var(--g);}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.ft-col{display:flex;flex-direction:column;gap:0;}
.ft-col-h{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.12em;margin-bottom:12px;}
.ft-col a{font-size:12px;color:var(--t3);text-decoration:none;padding:3px 0;display:block;transition:color .15s;}
.ft-col a:hover{color:#fff;}
.site-footer .ft-bot{border-top:1px solid var(--brd);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.ft-cr{font-family:var(--mono);font-size:9px;color:var(--t4);}
.ft-disc{font-family:var(--mono);font-size:9px;color:var(--t4);line-height:1.55;}

/* Compliance block */
.compliance-block{background:rgba(245,200,66,.05);border-top:1px solid rgba(245,200,66,.15);border-bottom:1px solid rgba(245,200,66,.15);padding:14px 32px;}
.cb-i{max-width:1280px;margin:0 auto;font-family:var(--mono);font-size:9px;color:rgba(245,200,66,.6);line-height:1.65;letter-spacing:.03em;}
.cb-i a{color:rgba(245,200,66,.7);text-decoration:none;}
.cb-i a:hover{text-decoration:underline;}

/* Entry gate */
.entry-gate{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(3,4,7,.97);z-index:10000;display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto;}
.eg-i{background:var(--bg3);border:1px solid var(--brd2);border-radius:var(--rl);padding:40px;max-width:540px;width:100%;position:relative;overflow:hidden;}
.eg-i::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#01D3A0,#4A9FE0);}
.eg-top{text-align:center;margin-bottom:20px;}
.eg-eyebrow{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.15em;margin-top:10px;margin-bottom:8px;}
.eg-title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:#fff;}
.eg-body{font-size:13px;color:var(--t2);line-height:1.7;margin-bottom:20px;}
.eg-body p{margin-bottom:10px;}
.eg-body ul{padding-left:18px;}
.eg-body li{margin-bottom:6px;}
.eg-body a{color:var(--g);text-decoration:none;}
.eg-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.eg-btn{font-family:var(--mono);font-size:12px;font-weight:500;padding:14px;border-radius:var(--r);cursor:pointer;letter-spacing:.06em;text-transform:uppercase;text-align:center;text-decoration:none;display:block;transition:all .15s;}
.eg-btn-p{background:var(--g);color:#000;border:none;}
.eg-btn-p:hover{background:var(--gh);}
.eg-btn-o{background:transparent;color:var(--t2);border:1px solid var(--brd);}
.eg-btn-o:hover{border-color:var(--brd2);color:#fff;}
.eg-foot{font-family:var(--mono);font-size:9px;color:var(--t4);text-align:center;letter-spacing:.04em;}

/* Breadcrumb */
.breadcrumb{padding:14px 32px 0;max-width:1280px;margin:0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-family:var(--mono);font-size:10px;}
.bc-link{color:var(--t3);text-decoration:none;transition:color .15s;}
.bc-link:hover{color:var(--g);}
.bc-sep{color:var(--t4);margin:0 2px;}
.bc-current{color:var(--t2);}

/* Section layout */
.sec-i{max-width:1280px;margin:0 auto;padding:0 32px;}
.sec-hdr{margin-bottom:28px;}
.sec-sub{font-size:15px;color:var(--t2);line-height:1.65;margin-top:8px;}
.sec-ft{text-align:center;margin-top:28px;}
.sec-link{font-family:var(--mono);font-size:11px;color:var(--g);text-decoration:none;letter-spacing:.06em;}
.sec-link:hover{text-decoration:underline;}
.sec-t-sm{font-size:14px;font-weight:600;color:#fff;margin-bottom:10px;}
.site-main{min-height:60vh;}

/* Page intro */
.page-intro{padding:40px 0 28px;}
.page-eyebrow{font-family:var(--mono);font-size:10px;color:var(--g);letter-spacing:.14em;margin-bottom:10px;}
.page-h1{font-family:'Space Grotesk',sans-serif;font-size:44px;font-weight:800;color:#fff;line-height:1.05;margin-bottom:14px;}
.page-lede{font-size:16px;color:var(--t2);line-height:1.7;margin-bottom:12px;max-width:800px;}
.page-compliance{font-family:var(--mono);font-size:10px;color:rgba(245,200,66,.65);letter-spacing:.03em;line-height:1.6;}
.h-compliance{font-family:var(--mono);font-size:10px;color:rgba(245,200,66,.65);letter-spacing:.04em;margin-bottom:24px;}

/* Product grid */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:8px;}

/* Compound card */
.cc{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);overflow:hidden;transition:border-color .2s,transform .2s;position:relative;}
.cc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--brd);transition:background .2s;}
.cc:hover{border-color:rgba(1,211,160,.35);transform:translateY(-2px);}
.cc:hover::before{background:linear-gradient(90deg,#01D3A0,#4A9FE0);}
.cc-link{display:flex;flex-direction:column;padding:20px;text-decoration:none;height:100%;}
.cc-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.cc-cat{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.1em;}
.cc-tag{font-family:var(--mono);font-size:8px;padding:2px 8px;border-radius:3px;letter-spacing:.05em;}
.cc-tag-new{background:var(--bld);color:var(--bl);border:1px solid rgba(74,159,224,.2);}
.cc-name{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:#fff;margin-bottom:3px;}
.cc-full{font-size:11px;color:var(--t3);margin-bottom:6px;}
.cc-meta{font-family:var(--mono);font-size:9px;color:var(--t4);letter-spacing:.04em;margin-bottom:8px;}
.cc-desc{font-size:13px;color:var(--t2);line-height:1.55;margin-bottom:16px;flex:1;}
.cc-ft{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;border-top:1px solid var(--brd);}
.cc-price{font-family:var(--mono);font-size:14px;color:var(--g);font-weight:600;}
.cc-action{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.05em;}
.cc:hover .cc-action{color:var(--g);}

/* Category tile */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.cat-tile{display:flex;flex-direction:column;background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:24px;text-decoration:none;transition:border-color .2s,transform .2s;position:relative;overflow:hidden;}
.cat-tile::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--brd);transition:background .2s;}
.cat-tile:hover{border-color:rgba(1,211,160,.35);transform:translateY(-2px);}
.cat-tile:hover::before{background:linear-gradient(90deg,#01D3A0,#4A9FE0);}
.cat-tile-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.cat-tile-eyebrow{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.1em;}
.cat-tile-count{font-family:var(--mono);font-size:9px;color:var(--t4);letter-spacing:.06em;}
.cat-tile-name{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:#fff;margin-bottom:6px;}
.cat-tile-desc{font-size:13px;color:var(--t2);line-height:1.5;flex:1;margin-bottom:14px;}
.cat-tile-action{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.06em;}
.cat-tile:hover .cat-tile-action{color:var(--g);}
.cat-grid-sec{padding:48px 0;}
.cat-group{padding:40px 0 0;}
.cat-compounds{padding:28px 0;}
.cat-stacks{padding:28px 0;}

/* Compound page hero */
.cp-hero{display:grid;grid-template-columns:1fr 380px;gap:40px;padding:32px;max-width:1280px;margin:0 auto;}
.cp-hero-main{display:flex;flex-direction:column;gap:12px;}
.cp-eyebrow{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.14em;}
.cp-lede{font-size:15px;color:var(--t2);line-height:1.65;max-width:600px;}
.cp-spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--brd);border:1px solid var(--brd);border-radius:var(--r);overflow:hidden;font-size:12px;}
.cp-spec div{background:var(--bg3);padding:10px 14px;}
.cp-spec dt{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.08em;margin-bottom:3px;}
.cp-spec dd{color:#fff;font-size:13px;}
.cp-order{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:24px;position:sticky;top:80px;position:relative;overflow:hidden;}
.cp-order::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#01D3A0,#4A9FE0);}
.cp-order-hdr{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.12em;margin-bottom:16px;}
.cp-size-label{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.1em;margin-bottom:8px;}
.cp-sizes{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.cp-size-opt{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--brd);border-radius:var(--r);padding:12px 14px;cursor:pointer;transition:all .15s;}
.cp-size-opt:hover{border-color:var(--brd2);}
.cp-size-opt:has(input:checked){background:var(--gd);border-color:var(--g);}
.cp-size-opt input{accent-color:var(--g);flex-shrink:0;}
.cp-size-l{font-family:var(--mono);font-size:13px;font-weight:500;color:#fff;flex:1;}
.cp-size-p{font-family:var(--mono);font-size:14px;color:var(--g);font-weight:700;}
.cp-size-note{font-family:var(--mono);font-size:9px;color:var(--t3);display:block;margin-top:3px;}
.cp-ack{display:flex;align-items:flex-start;gap:10px;background:rgba(245,200,66,.05);border:1px solid rgba(245,200,66,.15);border-radius:var(--r);padding:12px;margin-bottom:14px;cursor:pointer;font-size:12px;color:var(--t2);line-height:1.5;}
.cp-ack input{accent-color:var(--g);flex-shrink:0;margin-top:2px;}
.cp-order-btn{width:100%;background:var(--g);color:#000;font-family:var(--mono);font-size:12px;font-weight:500;padding:14px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.07em;text-transform:uppercase;transition:background .15s;margin-bottom:14px;}
.cp-order-btn:hover{background:var(--gh);}
.cp-order-meta{list-style:none;display:flex;flex-direction:column;gap:6px;}
.cp-order-meta li{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.04em;display:flex;align-items:center;gap:8px;}
.cpom-ic{color:var(--g);}
.cp-section{max-width:1280px;margin:0 auto;padding:32px 32px 0;}
.cp-section p{font-size:14px;color:var(--t2);line-height:1.75;margin-bottom:12px;}
.cp-source-note{font-family:var(--mono);font-size:10px;color:var(--t4);letter-spacing:.04em;line-height:1.6;}
.cp-source-note a{color:var(--g);text-decoration:none;}
.cp-table-wrap{overflow-x:auto;margin-top:16px;}
.cp-spec-table{width:100%;border-collapse:collapse;font-size:13px;}
.cp-spec-table th{text-align:left;font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.08em;padding:11px 16px;background:var(--bg3);border:1px solid var(--brd);width:200px;}
.cp-spec-table td{color:#fff;padding:11px 16px;border:1px solid var(--brd);}
.cp-spec-table tr:nth-child(even) td{background:var(--bg3);}
.cp-compliance{max-width:1280px;margin:28px auto;padding:20px 32px;background:rgba(245,200,66,.04);border-top:1px solid rgba(245,200,66,.12);border-bottom:1px solid rgba(245,200,66,.12);}
.cp-compliance p{font-family:var(--mono);font-size:10px;color:rgba(245,200,66,.55);letter-spacing:.03em;line-height:1.7;}
.disc-inline{display:flex;align-items:flex-start;gap:8px;background:rgba(245,200,66,.05);border:1px solid rgba(245,200,66,.15);border-radius:var(--r);padding:10px 14px;font-size:12px;color:rgba(245,200,66,.7);line-height:1.55;margin-bottom:4px;}
.disc-inline svg{flex-shrink:0;margin-top:1px;}

/* Stack cards */
.stack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.stack-grid-sec{padding:40px 0;}
.stack-card{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);overflow:hidden;transition:border-color .2s,transform .2s;}
.stack-card:hover{border-color:rgba(1,211,160,.35);transform:translateY(-2px);}
.stack-card-link{display:flex;flex-direction:column;padding:20px;text-decoration:none;height:100%;}
.stack-card-eyebrow{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.12em;margin-bottom:8px;}
.stack-card-name{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:3px;}
.stack-card-full{font-size:11px;color:var(--t3);margin-bottom:8px;}
.stack-card-desc{font-size:13px;color:var(--t2);line-height:1.55;flex:1;margin-bottom:14px;}
.stack-card-ft{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--brd);}
.stack-card-price{font-family:var(--mono);font-size:13px;color:var(--g);font-weight:600;}
.stack-card-action{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.05em;}
.stack-card:hover .stack-card-action{color:var(--g);}
.stack-comps{display:flex;flex-direction:column;gap:14px;}
.stack-comp{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--r);padding:18px;}
.stack-comp-h{margin-bottom:6px;}
.stack-comp-name{font-size:15px;font-weight:600;color:#fff;margin-bottom:2px;}
.stack-comp-name a{color:#fff;text-decoration:none;}
.stack-comp-name a:hover{color:var(--g);}
.stack-comp-full{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.04em;}
.stack-comp-desc{font-size:13px;color:var(--t2);line-height:1.55;margin-bottom:10px;}
.stack-comp-meta{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;color:var(--t3);flex-wrap:wrap;}
.stack-comp-link{color:var(--g);text-decoration:none;font-size:10px;}

/* Homepage sections */
.featured-sec{padding:48px 0;}
.rp-sec{padding:48px 0;}
.rp-empty{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:32px;margin-top:16px;}
.rp-empty p{font-size:14px;color:var(--t2);line-height:1.7;margin-bottom:14px;}
.cta-sec{padding:40px 0;}
.cta-card{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:32px;display:flex;justify-content:space-between;align-items:center;gap:24px;}
.cta-eyebrow{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.14em;margin-bottom:8px;}
.cta-t{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;color:#fff;margin-bottom:8px;}
.cta-card p{font-size:14px;color:var(--t2);line-height:1.6;}

/* FAQ — native details element */
details.faq-item{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);overflow:hidden;margin-bottom:0;}
details.faq-item summary.faq-q{list-style:none;padding:16px 20px;cursor:pointer;font-size:14px;font-weight:600;color:#fff;user-select:none;display:flex;justify-content:space-between;align-items:center;}
details.faq-item summary.faq-q::after{content:'+';font-size:18px;color:var(--t3);line-height:1;flex-shrink:0;}
details.faq-item[open] summary.faq-q::after{content:'\00d7';}
details.faq-item summary.faq-q:hover{background:var(--bg4);}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item .faq-a{display:block;padding:14px 20px 18px;font-size:13px;color:var(--t2);line-height:1.7;border-top:1px solid var(--brd);}
details.faq-item .faq-a a{color:var(--g);text-decoration:none;}
.faq-sec{padding:48px 0;}
.faq-list{display:flex;flex-direction:column;gap:8px;}
.faq-page-sec{padding:0 0 64px;}

/* Legal pages */
.legal-sec{padding:28px 0 64px;}
.legal-i{max-width:820px;margin:0 auto;padding:0 32px;}
.legal-i h2{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:#fff;margin:32px 0 10px;padding-top:24px;border-top:1px solid var(--brd);}
.legal-i h2:first-of-type{border-top:none;padding-top:0;}
.legal-i h3{font-size:15px;font-weight:600;color:#fff;margin:20px 0 8px;}
.legal-i p{font-size:14px;color:var(--t2);line-height:1.8;margin-bottom:12px;}
.legal-i ul,.legal-i ol{padding-left:22px;margin-bottom:12px;}
.legal-i li{font-size:14px;color:var(--t2);line-height:1.7;margin-bottom:6px;}
.legal-i strong{color:#fff;font-weight:600;}
.legal-i a{color:var(--g);text-decoration:none;}
.legal-i code{font-family:var(--mono);font-size:12px;background:var(--bg3);padding:2px 6px;border-radius:3px;color:var(--g);}
.legal-effective{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.06em;margin-bottom:20px;}

/* About */
.about-section{padding:32px 0 0;}
.about-section h2{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:#fff;margin:28px 0 10px;}
.about-section p{font-size:14px;color:var(--t2);line-height:1.75;margin-bottom:10px;}
.about-section a{color:var(--g);text-decoration:none;}
.about-compliance{padding:32px 0 64px;}
.ab-comp-card{background:rgba(245,200,66,.04);border:1px solid rgba(245,200,66,.15);border-radius:var(--rl);padding:24px;}
.ab-comp-eyebrow{font-family:var(--mono);font-size:9px;color:rgba(245,200,66,.6);letter-spacing:.14em;margin-bottom:10px;}
.ab-comp-card p{font-family:var(--mono);font-size:10px;color:rgba(245,200,66,.55);line-height:1.7;letter-spacing:.03em;}
.ab-comp-card a{color:rgba(245,200,66,.7);}

/* Contact */
.contact-section{padding:28px 0 64px;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.contact-grid h2{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:#fff;margin:24px 0 8px;}
.contact-grid h2:first-child{margin-top:0;}
.contact-grid p{font-size:14px;color:var(--t2);line-height:1.7;margin-bottom:10px;}
.contact-email{font-family:var(--mono);font-size:16px;color:var(--g);text-decoration:none;word-break:break-all;}
.contact-address{font-style:normal;font-size:14px;color:var(--t2);line-height:1.7;}
.contact-panel{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:24px;}
.contact-panel-hdr{font-family:var(--mono);font-size:10px;color:var(--g);letter-spacing:.1em;margin-bottom:12px;}
.contact-panel ul{padding-left:18px;}
.contact-panel li{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:6px;}

/* Shipping */
.policy-section{padding:28px 0 64px;}
.policy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.policy-card{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:24px;}
.policy-card h2{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:10px;}
.policy-card p{font-size:13px;color:var(--t2);line-height:1.65;margin-bottom:8px;}
.policy-card a{color:var(--g);text-decoration:none;}

/* Research hub */
.research-placeholder{padding:28px 0;}
.rp-card{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:32px;}
.rp-card-eyebrow{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.14em;margin-bottom:10px;}
.rp-card-t{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:#fff;margin-bottom:12px;}
.rp-card p{font-size:14px;color:var(--t2);line-height:1.7;margin-bottom:12px;}
.rp-list{padding-left:20px;margin-bottom:14px;}
.rp-list li{font-size:14px;color:var(--t2);line-height:1.65;margin-bottom:8px;}
.rp-list strong{color:#fff;}
.research-cta{padding:0 0 64px;}

/* Cart page */
.cart-sec{padding:32px 0 64px;}
.cart-grid{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start;}
.cart-items-col{display:flex;flex-direction:column;gap:8px;}
.cart-item{display:flex;align-items:center;gap:16px;background:var(--bg3);border:1px solid var(--brd);border-radius:var(--r);padding:16px 18px;}
.cart-item-info{flex:1;}
.cart-item-name{font-size:15px;font-weight:600;color:#fff;text-decoration:none;display:block;margin-bottom:3px;}
.cart-item-name:hover{color:var(--g);}
.cart-item-size{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.06em;}
.cart-item-price{font-family:var(--mono);font-size:14px;color:#fff;font-weight:600;white-space:nowrap;}
.cart-item-qty{display:flex;align-items:center;gap:8px;}
.cart-qty-btn{min-width:44px;min-height:44px;background:var(--bg4);border:1px solid var(--brd);border-radius:4px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--t2);font-family:var(--mono);transition:all .15s;}
.cart-qty-btn:hover{border-color:var(--g);color:var(--g);}
.cart-qty-val{font-family:var(--mono);font-size:12px;color:#fff;min-width:20px;text-align:center;}
.cart-remove{background:none;border:none;color:var(--t3);cursor:pointer;font-size:16px;padding:6px;transition:color .15s;margin-left:4px;min-width:44px;min-height:44px;}
.cart-remove:hover{color:var(--rd);}
.cart-summary{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:24px;position:sticky;top:80px;}
.cart-sum-hdr{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.12em;margin-bottom:16px;}
.cart-sum-row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px;color:var(--t2);}
.cart-sum-row span:last-child{color:#fff;font-family:var(--mono);}
.cart-sum-total{display:flex;justify-content:space-between;font-size:15px;font-weight:600;color:#fff;padding-top:10px;border-top:1px solid var(--brd);margin-top:4px;margin-bottom:10px;}
.cart-sum-total span:last-child{font-family:var(--mono);font-size:18px;color:var(--g);}
.cart-sum-note{font-family:var(--mono);font-size:9px;color:var(--t4);letter-spacing:.04em;margin-bottom:14px;}
.cart-proceed{display:block;width:100%;text-align:center;margin-bottom:8px;}
.cart-continue{display:block;width:100%;text-align:center;}
.cart-sum-pay{margin-top:16px;padding-top:14px;border-top:1px solid var(--brd);}
.cart-sum-pay-hdr{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.1em;margin-bottom:6px;}
.cart-sum-pay p{font-size:11px;color:var(--t4);line-height:1.6;}
.cart-empty{text-align:center;padding:60px 20px;}
.cart-empty-ic{color:var(--t4);margin-bottom:16px;}
.cart-empty h2{font-size:18px;font-weight:600;color:#fff;margin-bottom:8px;}
.cart-empty p{font-size:14px;color:var(--t2);margin-bottom:20px;}
.co-cart-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.co-cart-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;}
.co-cart-name{color:var(--t2);}
.co-cart-size{font-family:var(--mono);font-size:10px;color:var(--t4);margin-left:6px;}
.co-cart-price{font-family:var(--mono);font-size:12px;color:#fff;white-space:nowrap;}

/* Checkout */
.checkout-steps{padding:16px 0 0;}
.co-steps{list-style:none;display:flex;gap:12px;font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.08em;}
.co-steps .co-step{padding:4px 0;}
.co-step-active{color:#fff !important;font-weight:600;}
.co-step-done{color:var(--g) !important;}
.checkout-sec{padding:24px 0 64px;}
.co-grid{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start;}
.co-form{display:flex;flex-direction:column;gap:14px;}
.f-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.co-ack{display:flex;align-items:flex-start;gap:10px;background:rgba(245,200,66,.05);border:1px solid rgba(245,200,66,.15);border-radius:var(--r);padding:12px;cursor:pointer;font-size:13px;color:var(--t2);line-height:1.55;}
.co-ack input{accent-color:var(--g);flex-shrink:0;margin-top:2px;}
.co-ack a{color:var(--g);text-decoration:none;}
.co-err{font-family:var(--mono);font-size:10px;color:var(--rd);padding:8px 12px;background:var(--rdd);border-radius:var(--r);display:none;}
.co-err:not(:empty){display:block;}
.co-submit{width:100%;background:var(--g);color:#000;font-family:var(--mono);font-size:12px;font-weight:500;padding:14px;border:none;border-radius:var(--r);cursor:pointer;letter-spacing:.08em;text-transform:uppercase;transition:background .15s;min-height:48px;}
.co-submit:hover{background:var(--gh);}
.co-back{display:inline-block;font-family:var(--mono);font-size:10px;color:var(--t3);text-decoration:none;letter-spacing:.06em;margin-top:8px;text-align:center;width:100%;}
.co-back:hover{color:#fff;}
.co-sum-rows{margin-top:12px;}
.co-deliver-to{margin-top:16px;padding-top:14px;border-top:1px solid var(--brd);}
.co-deliver-hdr{font-family:var(--mono);font-size:9px;color:var(--t3);letter-spacing:.1em;margin-bottom:8px;}
.co-deliver-addr{font-size:13px;color:var(--t2);line-height:1.65;}
.pay-method{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--r);padding:18px;margin-bottom:14px;}
.pay-method-hdr{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--g);letter-spacing:.08em;margin-bottom:10px;}
.pay-method p{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:8px;}
.pay-method ul{padding-left:18px;font-size:13px;color:var(--t2);line-height:1.6;}
.pay-method li{margin-bottom:4px;}
.f-checkbox{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--t2);line-height:1.5;cursor:pointer;margin-bottom:14px;}
.f-checkbox input{accent-color:var(--g);flex-shrink:0;margin-top:2px;}

/* Confirmation */
.confirm-sec{padding:28px 0 64px;}
.confirm-card{max-width:680px;margin:0 auto;background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:40px;overflow:hidden;position:relative;}
.confirm-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#01D3A0,#4A9FE0);}
.confirm-ic{width:56px;height:56px;background:var(--gd);border:2px solid var(--g);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--g);margin-bottom:16px;}
.confirm-t{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;color:#fff;margin-bottom:8px;}
.confirm-sub{font-size:14px;color:var(--t2);line-height:1.65;margin-bottom:24px;}
.confirm-ref{background:var(--gd);border:1px solid var(--gl);border-radius:var(--r);padding:16px 20px;margin-bottom:20px;text-align:center;}
.confirm-ref-lbl{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.12em;margin-bottom:6px;}
.confirm-ref-v{font-family:var(--mono);font-size:22px;color:var(--g);font-weight:700;word-break:break-all;}
.confirm-ref-note{font-family:var(--mono);font-size:9px;color:var(--t3);margin-top:6px;letter-spacing:.04em;}
.confirm-bank{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--r);padding:20px;margin-bottom:20px;}
.confirm-bank-hdr{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.12em;margin-bottom:12px;}
.confirm-bank-dl{display:grid;grid-template-columns:1fr;gap:1px;background:var(--brd);border-radius:4px;overflow:hidden;}
.confirm-bank-dl div{background:var(--bg3);display:flex;justify-content:space-between;padding:10px 14px;font-size:13px;}
.confirm-bank-dl dt{color:var(--t3);font-family:var(--mono);font-size:10px;}
.confirm-bank-dl dd{color:#fff;font-family:var(--mono);font-size:13px;}
.confirm-bank-note{font-size:12px;color:var(--t2);line-height:1.6;margin-top:12px;}
.confirm-bank-note strong{color:#fff;}
.confirm-next{margin-bottom:20px;}
.confirm-next-list{padding-left:20px;display:flex;flex-direction:column;gap:6px;}
.confirm-next-list li{font-size:13px;color:var(--t2);line-height:1.6;}
.confirm-summary{margin-bottom:20px;}
.confirm-cta{display:flex;gap:10px;flex-wrap:wrap;}

/* Calculator new layout */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:24px;align-items:start;}
.calc-form{display:flex;flex-direction:column;gap:16px;}
.calc-row{display:flex;flex-direction:column;gap:6px;}
.calc-lbl{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.1em;}
.calc-inp{background:var(--bg3);border:1px solid var(--brd);color:#fff;font-family:var(--mono);font-size:16px;padding:12px 16px;border-radius:var(--r);width:100%;outline:none;transition:border-color .15s;-moz-appearance:textfield;}
.calc-inp::-webkit-outer-spin-button,.calc-inp::-webkit-inner-spin-button{-webkit-appearance:none;}
.calc-inp:focus{border-color:var(--g);}
.calc-hint{font-family:var(--mono);font-size:9px;color:var(--t4);letter-spacing:.04em;}
.calc-results{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:24px;display:flex;flex-direction:column;gap:4px;}
.calc-res-hdr{font-family:var(--mono);font-size:9px;color:var(--g);letter-spacing:.12em;margin-bottom:12px;}
.calc-res{background:var(--bg2);border-radius:var(--r);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;}
.calc-res-k{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.06em;}
.calc-res-v{font-family:var(--mono);font-size:16px;color:var(--g);font-weight:600;}
.calc-notes{margin-top:28px;background:var(--bg3);border:1px solid var(--brd);border-radius:var(--r);padding:20px;}
.calc-notes ul{padding-left:18px;display:flex;flex-direction:column;gap:8px;}
.calc-notes li{font-size:13px;color:var(--t2);line-height:1.65;}

/* Responsive — multipage additions */
@media (max-width:1024px){
  .cp-hero{grid-template-columns:1fr;}
  .co-grid{grid-template-columns:1fr;}
  .cart-grid{grid-template-columns:1fr;}
  .calc-grid{grid-template-columns:1fr;}
  .site-footer .ft-top{grid-template-columns:1fr;}
  .ft-cols{grid-template-columns:1fr 1fr;}
  .cta-card{flex-direction:column;text-align:center;}
  .contact-grid{grid-template-columns:1fr;}
  .confirm-cta{flex-direction:column;}
}
@media (max-width:767px){
  .site-header .hamburger{display:flex;}
  .site-header .nav-links{display:none !important;}
  .breadcrumb{padding-left:16px;padding-right:16px;}
  .sec-i{padding:0 16px;}
  .page-h1{font-size:30px;}
  .cp-hero{padding:16px;}
  .cp-spec{grid-template-columns:1fr;}
  .cat-grid{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:1fr;}
  .stack-grid{grid-template-columns:1fr;}
  .ft-cols{grid-template-columns:1fr 1fr;}
  .f-grid-2{grid-template-columns:1fr;}
  .policy-grid{grid-template-columns:1fr;}
  .confirm-card{padding:24px 16px;}
  .legal-i{padding:0 16px;}
}


/* =======================================================================
   MULTIPAGE RESPONSIVE � COMPREHENSIVE POLISH
   Appended after initial extensions. These rules override earlier ones
   where needed (same or later specificity wins in cascade).
======================================================================= */

/* -- Safe area insets � site header & footer -- */
.site-header .nav {
  padding-left:  max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
}
.mob-menu {
  padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px));
}
.site-footer {
  padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
}

/* -- Desktop large (=1280px) � generous padding -- */
@media (min-width: 1280px) {
  .cp-hero    { padding: 40px; }
  .cp-section { padding: 40px 40px 0; }
}

/* -- Tablet (768�1023px) � fill the gap left by auto-fill grids -- */
@media (min-width: 768px) and (max-width: 1023px) {
  .sec-i      { padding: 0 24px; }
  .breadcrumb { padding-left: 24px; padding-right: 24px; }

  /* Grids: auto-fill at tablet is ~2 cols; make explicit for consistency */
  .prod-grid  { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cat-grid   { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stack-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Compound hero: stack on tablet too */
  .cp-hero    { grid-template-columns: 1fr; padding: 24px; }
  .cp-order   { position: static; }
  .cp-section { padding: 24px 24px 0; }

  /* Cart & checkout sidebars: static (not sticky) on tablet */
  .cart-summary { position: static; }
  .co-summary   { position: static; }

  /* Form: keep 2-col at tablet */
  .f-grid-2   { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .site-footer  { padding: 40px 24px 28px; }
  .ft-cols      { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* Typography */
  .page-h1    { font-size: 38px; }

  /* Compliance bar */
  .compliance-block { padding: 12px 24px; }
}

/* -- Mobile (=767px) � comprehensive -- */
@media (max-width: 767px) {

  /* -- Header & nav -- */
  .site-header .nav { height: 54px; padding: 0 16px; }
  .mob-menu { top: 54px; max-height: calc(100vh - 54px); }
  /* Ensure 44px min touch target on mobile nav links */
  .mob-menu a { padding-top: 13px; padding-bottom: 13px; min-height: 44px; display: flex; align-items: center; }
  .mob-nl-sub { padding-top: 10px !important; padding-bottom: 10px !important; }

  /* -- Typography -- */
  .page-h1 { font-size: 32px; }          /* overrides 30px in extensions */
  .cp-h1   { font-size: 32px !important; } /* old .cp-h1 is 56px */
  .cta-t   { font-size: 20px; }

  /* -- Page intro -- */
  .page-intro { padding: 20px 0 14px; }

  /* -- Product & category grids --
     cat-grid uses 2-col (tiles are compact enough at ~160px width).
     prod-grid & stack-grid stay 1-col (compound cards have dense content). */
  .cat-grid   { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .prod-grid  { grid-template-columns: 1fr;              gap: 10px; }
  .stack-grid { grid-template-columns: 1fr;              gap: 10px; }

  /* Section padding */
  .cat-grid-sec  { padding: 32px 0; }
  .featured-sec  { padding: 32px 0; }
  .faq-sec       { padding: 32px 0; }
  .rp-sec        { padding: 32px 0; }
  .stack-grid-sec{ padding: 28px 0; }
  .cat-group     { padding: 28px 0 0; }

  /* -- Compound page -- */
  .cp-section    { padding: 20px 16px 0; }
  .cp-compliance { padding: 14px 16px; margin: 16px; }
  .cp-spec-table th { width: 100px; font-size: 9px; padding: 8px 10px; }
  .cp-spec-table td { padding: 8px 10px; font-size: 12px; }
  .cp-order      { padding: 18px; }
  .cp-order-btn  { font-size: 11px; }

  /* -- Cart -- */
  .cart-sec      { padding: 16px 0 48px; }
  .cart-summary  { position: static; }
  .cart-item     { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .cart-item-qty { order: 3; width: 100%; justify-content: flex-start; }

  /* -- Checkout -- */
  .checkout-sec  { padding: 16px 0 48px; }
  .co-summary    { position: static; }
  .co-steps      { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; gap: 8px; }
  .co-steps .co-step { white-space: nowrap; }
  .co-form-col   { min-width: 0; }

  /* -- Confirmation -- */
  .confirm-sec   { padding: 16px 0 48px; }
  .confirm-card  { max-width: 100%; padding: 20px 16px; }
  .confirm-t     { font-size: 24px; }
  .confirm-bank-dl div { flex-direction: column; gap: 2px; }
  .confirm-bank-dl dt  { margin-bottom: 2px; }
  .confirm-bank-dl dd  { font-size: 12px; }
  .confirm-cta .btn-p,
  .confirm-cta .btn-o  { width: 100%; text-align: center; justify-content: center; }

  /* -- CTA card -- */
  .cta-card      { padding: 20px 18px; gap: 16px; }
  .cta-card .btn-p,
  .cta-card .btn-o { width: 100%; text-align: center; justify-content: center; }

  /* -- Research hub -- */
  .rp-card       { padding: 20px 16px; }
  .rp-card-t     { font-size: 18px; }
  .research-cta  { padding: 0 0 48px; }

  /* -- FAQ -- */
  details.faq-item summary.faq-q { padding: 14px 16px; font-size: 13px; }
  details.faq-item .faq-a        { padding: 12px 16px 16px; }

  /* -- Footer -- */
  .site-footer   { padding: 36px 16px 24px; }
  .site-footer .ft-top   { margin-bottom: 24px; gap: 20px; }
  .ft-cols       { grid-template-columns: 1fr 1fr; gap: 20px; }
  .ft-cr, .ft-disc { font-size: 9px; }  /* floor at 9px, not 8px */
  .site-footer .ft-bot { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* -- Compliance bar -- */
  .compliance-block { padding: 10px 16px; }

  /* -- Contact -- */
  .contact-section { padding: 20px 0 48px; }

  /* -- Policy / Shipping -- */
  .policy-section { padding: 16px 0 48px; }

  /* -- Legal -- */
  .legal-sec  { padding: 16px 0 48px; }
  .legal-i h2 { font-size: 16px; margin: 24px 0 8px; }

  /* -- About -- */
  .about-section  { padding: 20px 0 0; }
  .about-compliance { padding: 20px 0 48px; }
  .ab-comp-card   { padding: 16px; }
}

/* -- Very small phones (<380px) -- */
@media (max-width: 379px) {
  .cat-grid   { grid-template-columns: 1fr !important; }
  .prod-grid  { grid-template-columns: 1fr; }
  .stack-grid { grid-template-columns: 1fr; }
  .page-h1    { font-size: 27px; }
  .cp-h1      { font-size: 26px !important; }
  .sec-i      { padding: 0 12px; }
  .breadcrumb { padding-left: 12px; padding-right: 12px; }
  .cp-hero    { padding: 12px; }
  .cp-section { padding: 16px 12px 0; }
  .confirm-card { padding: 16px 12px; }
}

/* =======================================================================
   DESIGN UPGRADE — Standards, Newsletter, Community + Typography overrides
======================================================================= */

/* -- Typography overrides: use display font for all major headings -- */
.page-h1{font-family:var(--disp);font-size:52px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;}
.cc-name,.cc .cc-name{font-family:var(--disp);font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;}
.cat-tile-name{font-family:var(--disp);font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;}
.cta-t{font-family:var(--disp);font-size:40px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;}
.stack-card-name{font-family:var(--disp);font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;}
.cp-h1{font-family:var(--disp) !important;font-weight:900 !important;text-transform:uppercase !important;}

/* -- Standards section -- */
.stds-sec{padding:72px 0;}
.stds-sec .sec-i{display:flex;flex-direction:column;align-items:stretch;}
.stds-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:8px;}
.std-card{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:28px 20px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s;}
.std-card:hover{border-color:var(--g);}
.std-ic{width:40px;height:40px;border-radius:50%;background:rgba(1,211,160,.1);border:1px solid rgba(1,211,160,.25);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.std-t{font-family:var(--disp);font-size:17px;font-weight:800;text-transform:uppercase;color:#fff;line-height:1.2;letter-spacing:.02em;}
.std-p{font-size:12px;color:var(--t2);line-height:1.65;}

/* -- Newsletter section -- */
.nl-sec{padding:72px 0;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);border-top:1px solid var(--brd);}
.nl-inner{max-width:640px;margin:0 auto;text-align:center;}
.nl-eyebrow{font-family:var(--mono);font-size:10px;color:var(--g);letter-spacing:.15em;margin-bottom:12px;}
.nl-t{font-family:var(--disp);font-size:40px;font-weight:900;text-transform:uppercase;color:#fff;margin-bottom:10px;}
.nl-sub{font-size:15px;color:var(--t2);line-height:1.65;margin-bottom:28px;}
.nl-row{display:flex;gap:10px;max-width:480px;margin:0 auto 12px;}
.nl-inp{flex:1;background:var(--bg3);border:1px solid var(--brd);border-radius:var(--r);padding:0 16px;height:46px;font-family:'Inter',sans-serif;font-size:14px;color:#fff;outline:none;transition:border-color .15s;}
.nl-inp::placeholder{color:var(--t3);}
.nl-inp:focus{border-color:var(--g);}
.nl-btn{background:var(--g);color:#000;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:0 22px;height:46px;border:none;border-radius:var(--r);cursor:pointer;white-space:nowrap;transition:background .15s;}
.nl-btn:hover{background:var(--gh);}
.nl-disc{font-family:var(--mono);font-size:9px;color:var(--t4);letter-spacing:.03em;}

/* -- Community section -- */
.comm-sec{padding:72px 0;border-top:1px solid var(--brd);}
.comm-h{font-family:var(--disp);font-size:44px;font-weight:900;text-transform:uppercase;color:#fff;margin-bottom:8px;}
.comm-sub{font-size:15px;color:var(--t2);line-height:1.65;margin-bottom:36px;}
.comm-soc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.comm-soc-card{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:32px 28px;display:flex;flex-direction:column;gap:14px;text-decoration:none;transition:border-color .2s,transform .15s;}
.comm-soc-card:hover{border-color:var(--g);transform:translateY(-3px);}
.csc-icon{font-size:28px;width:52px;height:52px;background:rgba(1,211,160,.08);border:1px solid rgba(1,211,160,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.csc-label{font-family:var(--disp);font-size:20px;font-weight:800;text-transform:uppercase;color:#fff;letter-spacing:.04em;}
.csc-desc{font-size:13px;color:var(--t2);line-height:1.6;}
.csc-cta{font-family:var(--mono);font-size:10px;color:var(--g);letter-spacing:.08em;margin-top:auto;}

/* -- Responsive: Standards & Newsletter -- */
@media(max-width:1023px){
  .stds-grid{grid-template-columns:repeat(3,1fr);}
  .comm-soc-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:767px){
  .stds-grid{grid-template-columns:repeat(2,1fr);}
  .stds-sec{padding:48px 0;}
  .nl-sec{padding:48px 0;}
  .comm-sec{padding:48px 0;}
  .nl-t{font-size:30px;}
  .nl-row{flex-direction:column;}
  .nl-btn{height:46px;width:100%;}
  .comm-h{font-size:30px;}
  .comm-soc-grid{grid-template-columns:1fr;}
  .page-h1{font-size:36px;}
}
@media(max-width:479px){
  .stds-grid{grid-template-columns:1fr;}
}

/* =======================================================================
   ENTRY GATE v2 — Age verification modal with checkboxes
======================================================================= */

/* Reset old eg-* rules that conflict */
.eg-eyebrow{font-family:var(--mono);font-size:10px;color:var(--g);letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px;text-align:center;}
.eg-av-title{font-family:var(--disp);font-size:30px;font-weight:900;text-transform:uppercase;color:#fff;text-align:center;margin-bottom:8px;letter-spacing:-.01em;}
.eg-sub{font-size:13px;color:var(--t2);line-height:1.65;text-align:center;margin-bottom:24px;max-width:380px;margin-left:auto;margin-right:auto;}

/* Logo inside entry gate */
.eg-logo-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:20px;}
.eg-logo-svg{flex-shrink:0;}
.eg-logo-name{font-family:var(--disp);font-size:18px;font-weight:900;color:#fff;letter-spacing:.12em;text-transform:uppercase;}

/* Checkboxes */
.eg-checks{display:flex;flex-direction:column;gap:0;margin-bottom:20px;}
.eg-check-row{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:10px 0;border-bottom:1px solid var(--brd);}
.eg-check-row:last-child{border-bottom:none;}
.eg-check-row input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.eg-check-box{width:20px;height:20px;min-width:20px;border:2px solid var(--brd2);border-radius:4px;background:var(--bg2);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;margin-top:1px;flex-shrink:0;}
.eg-check-row input[type="checkbox"]:checked ~ .eg-check-box{background:var(--g);border-color:var(--g);}
.eg-check-row input[type="checkbox"]:checked ~ .eg-check-box::after{content:'';display:block;width:5px;height:9px;border:2px solid #000;border-top:none;border-left:none;transform:rotate(45deg) translate(-1px,-1px);}
.eg-check-label{font-size:13px;color:var(--t1);line-height:1.55;user-select:none;}
.eg-check-label a{color:var(--g);text-decoration:none;}
.eg-check-label a:hover{text-decoration:underline;}

/* Gold disclaimer */
.eg-disclaimer{font-family:var(--mono);font-size:10px;color:rgba(245,200,66,.75);letter-spacing:.04em;line-height:1.6;text-align:center;padding:14px 0;border-top:1px solid rgba(245,200,66,.15);border-bottom:1px solid rgba(245,200,66,.15);margin-bottom:20px;}

/* Actions */
.eg-actions{display:flex;flex-direction:column;align-items:center;gap:12px;}
.eg-btn-p{background:var(--g);color:#000;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:15px 32px;border:none;border-radius:var(--r);cursor:pointer;width:100%;transition:background .15s;line-height:1;}
.eg-btn-p:hover{background:var(--gh);}
.eg-btn-p:disabled{background:var(--bg4);color:var(--t3);cursor:not-allowed;}
.eg-exit-link{font-family:var(--mono);font-size:11px;color:var(--t3);text-decoration:none;letter-spacing:.08em;transition:color .15s;}
.eg-exit-link:hover{color:var(--t1);}

/* =======================================================================
   HEADER v2 — teal-underline nav links, Instagram icon, VP wordmark
======================================================================= */

/* VP prefix in wordmark */
.nav-logo-wordmark{font-family:var(--disp);font-size:15px;font-weight:900;color:#fff;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.nlw-vp{color:#01D3A0;}

/* Nav links — teal underline on hover/active */
.site-header .nl{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--t2);padding:7px 14px;background:none;border:none;border-radius:0;text-decoration:none;position:relative;transition:color .15s;display:inline-flex;align-items:center;}
.site-header .nl::after{content:'';position:absolute;bottom:-1px;left:14px;right:14px;height:2px;background:var(--g);transform:scaleX(0);transform-origin:center;transition:transform .2s ease;}
.site-header .nl:hover{color:#fff;background:none;}
.site-header .nl:hover::after{transform:scaleX(1);}
.site-header .nl.active{color:#fff;}
.site-header .nl.active::after{transform:scaleX(1);}

/* Instagram icon */
.nav-ig{display:flex;align-items:center;justify-content:center;color:var(--t2);text-decoration:none;padding:7px 9px;border-radius:var(--r);transition:color .15s;}
.nav-ig:hover{color:#fff;}

/* =======================================================================
   ANNOUNCEMENT BANNER — teal text, dark bg, continuous scroll
======================================================================= */

.ann-bar{background:#0d0f12;border-bottom:1px solid rgba(1,211,160,.12);padding:9px 0;overflow:hidden;white-space:nowrap;}
.ann-track{display:inline-block;font-family:var(--mono);font-size:10px;color:#01D3A0;letter-spacing:.1em;animation:ann-scroll 35s linear infinite;}
.ann-bar:hover .ann-track{animation-play-state:paused;}
@keyframes ann-scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* Hide old disc-bar if still rendered anywhere */
.disc-bar{display:none !important;}

/* Responsive */
@media(max-width:767px){
  .nav-logo-wordmark{font-size:13px;}
  .nav-ig{padding:7px 6px;}
  .ann-track{font-size:9px;}
}

/* =======================================================================
   HEADER v3 + TEAL BANNER FIX
======================================================================= */

/* -- Teal announcement banner (VERY TOP of page) -- */
.ann-bar{background:#01D3A0;border-bottom:none;padding:0;overflow:hidden;white-space:nowrap;line-height:1;}
.ann-track-wrap{display:flex;width:max-content;}
.ann-track{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;color:#030407;letter-spacing:.1em;padding:10px 0;animation:ann-scroll 30s linear infinite;white-space:nowrap;}
.ann-bar:hover .ann-track{animation-play-state:paused;}
@keyframes ann-scroll{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}

/* -- Logo: white SVG + VP VELOX white + PEPTIDES teal -- */
.nav-logo-wordmark{font-family:var(--disp);font-size:15px;font-weight:900;color:#ffffff;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.nlw-peptides{color:#01D3A0;}

/* -- Nav links: grey default, teal on hover -- */
.site-header .nav-links{display:flex;gap:0;flex:1;justify-content:center;}
.site-header .nl{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#8a8f9a;padding:8px 13px;background:none;border:none;border-radius:0;text-decoration:none;position:relative;transition:color .15s;display:inline-flex;align-items:center;white-space:nowrap;}
.site-header .nl::after{content:'';position:absolute;bottom:0;left:13px;right:13px;height:2px;background:#01D3A0;transform:scaleX(0);transform-origin:center;transition:transform .2s ease;}
.site-header .nl:hover{color:#01D3A0;background:none;}
.site-header .nl:hover::after{transform:scaleX(1);}
.site-header .nl.active{color:#fff;}
.site-header .nl.active::after{transform:scaleX(1);}

/* -- Cart: orange/red badge -- */
.nav-cart{display:flex;align-items:center;gap:6px;color:#8a8f9a;text-decoration:none;padding:6px 10px;border-radius:var(--r);transition:color .15s;position:relative;}
.nav-cart:hover{color:#fff;}
.nav-cart-label{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:inherit;}
.nav-cart-count{font-family:var(--mono);font-size:10px;background:#e8492a;color:#fff;border-radius:50%;min-width:18px;height:18px;padding:0 3px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;line-height:1;}

/* -- Instagram icon -- */
.nav-ig{display:flex;align-items:center;justify-content:center;color:#8a8f9a;text-decoration:none;padding:7px 9px;border-radius:var(--r);transition:color .15s;}
.nav-ig:hover{color:#01D3A0;}

/* -- Sticky header accounts for teal banner height -- */
.site-header{top:0;}

/* -- Responsive -- */
@media(max-width:1100px){
  .site-header .nl{font-size:12px;padding:8px 9px;}
}
@media(max-width:767px){
  .ann-track{font-size:9px;}
  .nav-logo-wordmark{font-size:13px;}
  .nav-cart-label{display:none;}
}

/* =======================================================================
   GEOMETRIC VP MARK + STACKED WORDMARK
======================================================================= */

/* Nav logo: VP SVG + stacked VELOX / PEPTIDES */
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.nav-logo-svg{flex-shrink:0;display:block;}
.nav-logo-wordmark{
  display:flex;
  flex-direction:column;
  gap:0;
  line-height:1;
  font-family:var(--disp);
  font-weight:900;
  text-transform:uppercase;
}
/* "VELOX" — outline/ghost style (stroke, transparent fill) */
.nlw-velox{
  font-size:11px;
  letter-spacing:.18em;
  -webkit-text-stroke:1px rgba(255,255,255,0.45);
  color:transparent;
}
/* "PEPTIDES" — solid bold teal */
.nlw-peptides{
  font-size:19px;
  letter-spacing:.06em;
  color:#01D3A0;
  -webkit-text-stroke:0;
}

/* Entry gate geometric logo */
.eg-logo-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:20px;}
.eg-logo-name-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  line-height:1;
  font-family:var(--disp);
  font-weight:900;
  text-transform:uppercase;
}
.eg-logo-velox{
  font-size:13px;
  letter-spacing:.2em;
  -webkit-text-stroke:1px rgba(255,255,255,0.4);
  color:transparent;
}
.eg-logo-peptides{
  font-size:24px;
  letter-spacing:.08em;
  color:#01D3A0;
}

/* Responsive */
@media(max-width:767px){
  .nlw-velox{font-size:9px;letter-spacing:.14em;}
  .nlw-peptides{font-size:15px;}
}

/* =======================================================================
   LOGO IMAGE — header + entry gate
======================================================================= */

/* Header full-width background (no gaps) */
.site-header{width:100%;box-sizing:border-box;}
.site-header .nav{padding-left:24px;padding-right:24px;}

/* Header logo image */
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.nav-logo-img{width:150px;height:auto;display:block;object-fit:contain;}

/* Entry gate logo image */
.eg-logo-wrap{display:flex;justify-content:center;margin-bottom:20px;}
.eg-logo-img{width:190px;height:auto;display:block;object-fit:contain;}

@media(max-width:767px){
  .nav-logo-img{width:120px;}
  .eg-logo-img{width:160px;}
}

/* =======================================================================
   COMPOUND PAGE v2 — 3-col hero + image placeholder + block cards
======================================================================= */

/* -- 3-column hero: [image] [info] [order] -- */
.cp-hero{grid-template-columns:390px 1fr 360px;gap:28px;align-items:start;}

/* -- Image column -- */
.cp-img-col{display:flex;flex-direction:column;gap:12px;}

/* -- Image placeholder -- */
.cp-img-placeholder{
  width:100%;
  background:#1e2024;
  border:2px dashed #01D3A0;
  border-radius:8px;
  display:block;
  padding:0;
  box-sizing:border-box;
  overflow:visible;
  position:static;
}
.cp-prod-img{
  position:static;
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
}
.cp-img-label{
  font-family:var(--disp);
  font-size:18px;
  font-weight:900;
  text-transform:uppercase;
  color:#fff;
  letter-spacing:.05em;
  text-align:center;
}
.cp-img-sub{
  font-family:var(--mono);
  font-size:9px;
  color:#01D3A0;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* -- Purity/quality badges below placeholder -- */
.cp-img-badges{display:flex;flex-wrap:wrap;gap:6px;}
.cp-badge{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.1em;
  color:var(--t3);
  background:#181a1e;
  border:1px solid #2a2d33;
  border-radius:3px;
  padding:5px 9px;
}
.cp-badge-purity{color:#01D3A0;border-color:rgba(1,211,160,.3);}

/* -- Section block cards (applies to ALL cp-section elements) -- */
.cp-section{
  background:#16181c;
  border:1px solid #242730;
  border-top:3px solid #01D3A0;
  border-radius:6px;
  padding:28px 28px 24px;
  margin:20px auto;
  max-width:1280px;
  box-sizing:border-box;
}
/* Give the section headings a little room */
.cp-section .sec-t{margin-bottom:18px;}
/* Tighten paragraph spacing inside blocks */
.cp-section p{margin-bottom:10px;}

/* Give CoA section an amber top accent instead */
.cp-section#coa{border-top-color:rgba(245,200,66,.7);}

/* Compliance block — keep amber styling */
.cp-compliance{
  background:rgba(245,200,66,.03);
  border:1px solid rgba(245,200,66,.12);
  border-top:3px solid rgba(245,200,66,.5);
  border-radius:6px;
  max-width:1280px;
  margin:20px auto;
  padding:22px 28px;
  box-sizing:border-box;
}

/* Order panel: also get a block treatment */
.cp-order{
  border-top:3px solid #01D3A0;
  background:#16181c;
  border-color:#242730;
  border-top-color:#01D3A0;
}
.cp-order::before{display:none;}/* remove old gradient stripe */

/* -- Responsive -- */
@media(max-width:1200px){
  .cp-hero{grid-template-columns:320px 1fr 320px;gap:20px;}
}
@media(max-width:1024px){
  .cp-hero{grid-template-columns:1fr 320px;}
  .cp-img-col{grid-column:1/-1;}
}
@media(max-width:767px){
  .cp-hero{grid-template-columns:1fr;}
  .cp-section{padding:20px 18px 18px;margin:14px auto;}
  .cp-compliance{padding:16px 18px;margin:14px auto;}
}

/* =======================================================================
   FULL-WIDTH FIX — header and announcement banner, no side gaps
======================================================================= */

/* Ensure html/body have zero margin/padding so no browser defaults bleed */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  overflow-x: hidden;
}

/* Announcement banner — true 100vw, no side padding on the outer element */
.ann-bar {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* The scrolling text lives inside a flex wrapper — no margin needed there either */
.ann-track-wrap {
  margin: 0 !important;
  padding: 0 !important;
}

/* Site header — true 100% width, zero outer padding/margin */
.site-header {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;           /* outer wrapper has no padding */
  box-sizing: border-box !important;
}

/* Inner nav row keeps its own padding for content alignment */
.site-header .nav {
  padding-left: 28px !important;
  padding-right: 28px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;      /* remove the 1280px constraint on the bar itself */
  box-sizing: border-box !important;
}

/* =======================================================================
   BUTTON SYSTEM v2 — definitive overrides, applied site-wide
======================================================================= */

/* ── Shared base for all <a> buttons (removes link underline / color) ── */
a.btn-p, a.btn-o,
a.cp-order-btn,
a.eg-btn-p {
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── PRIMARY button — teal fill, white bold text ── */
.btn-p {
  background: #01D3A0 !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  padding: 14px 28px !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .15s, transform .1s !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.btn-p:hover,
.btn-p:focus-visible {
  background: #00b388 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* ── SECONDARY button — transparent, teal border + text ── */
.btn-o {
  background: transparent !important;
  color: #01D3A0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  padding: 12px 24px !important;
  border: 2px solid #01D3A0 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .15s, color .15s, transform .1s !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.btn-o:hover,
.btn-o:focus-visible {
  background: #01D3A0 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* ── Compound order button — matches primary ── */
.cp-order-btn {
  background: #01D3A0 !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.cp-order-btn:hover { background: #00b388 !important; }

/* ── Entry gate confirm button — matches primary ── */
.eg-btn-p {
  background: #01D3A0 !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.eg-btn-p:hover { background: #00b388 !important; }
.eg-btn-p:disabled {
  background: #2a2d33 !important;
  color: #6B7280 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ── Hero button row: never go full-width on desktop ── */
.h-btns .btn-p,
.h-btns .btn-o {
  width: auto !important;
}

/* ── Mobile: full-width buttons in hero and CTA blocks ── */
@media (max-width: 767px) {
  .h-btns .btn-p,
  .h-btns .btn-o,
  .sec-ft .btn-p,
  .sec-ft .btn-o,
  .cta-card .btn-p,
  .cta-card .btn-o,
  .confirm-cta .btn-p,
  .confirm-cta .btn-o {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* =======================================================================
   HOMEPAGE v2 — teal-bordered block cards for every section
======================================================================= */

/* ── Shared block card (used across all HP sections) ── */
.hp-block {
  background: #16181c;
  border: 1px solid #242730;
  border-top: 3px solid #01D3A0;
  border-radius: 6px;
  padding: 32px 36px;
  box-sizing: border-box;
}

/* ── Section wrapper: max-width + horizontal spacing ── */
.hp-sec {
  padding: 0 32px;
  margin: 20px 0;
}
.hp-sec .sec-i {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

/* Sub-elements inside hp-block */
.hp-block-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  color: #01D3A0;
  letter-spacing: .16em;
  margin-bottom: 10px;
}
.hp-block-hdr {
  margin-bottom: 24px;
}
.hp-block-ft {
  margin-top: 24px;
  text-align: center;
}

/* ── Hero: content + panel side by side ── */
.hero-content { display: flex; flex-direction: column; gap: 16px; }
.hero-panel.hp-block {
  border-top-color: #01D3A0;
  padding: 24px 28px;
  align-self: start;
}

/* ── 2. Stats block ── */
.hp-stats-block { padding: 28px 36px; }
.hp-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.hp-stat {
  padding: 20px 24px;
  text-align: center;
}
.hp-stat-mid {
  border-left: 1px solid #242730;
  border-right: 1px solid #242730;
}
.hp-stat-v {
  font-family: var(--disp);
  font-size: 52px;
  font-weight: 900;
  color: #01D3A0;
  line-height: 1;
  margin-bottom: 6px;
}
.hp-stat-l {
  font-family: var(--mono);
  font-size: 10px;
  color: #fff;
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.hp-stat-d {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.5;
}

/* ── 5. Standards cards nested inside outer block ── */
.hp-sec-stds .stds-grid { margin-top: 0; gap: 14px; }
.hp-sec-stds .std-card.hp-block {
  padding: 22px 20px;
  border-top-width: 3px;
}
.hp-sec-stds > .sec-i > .hp-block { padding: 28px 32px 32px; }

/* ── 6. Calculator block ── */
.hp-calc-block { padding: 36px; }
.hp-calc-content {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}
.hp-calc-text { display: flex; flex-direction: column; gap: 16px; }
.hp-calc-desc { font-size: 14px; color: #9CA3AF; line-height: 1.7; }
.hp-calc-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hp-calc-features li {
  font-family: var(--mono);
  font-size: 11px;
  color: #9CA3AF;
  letter-spacing: .04em;
}
.hp-calc-features li::before { color: #01D3A0; margin-right: 6px; }
.hp-calc-preview { align-self: start; }
.hp-calc-demo {
  background: #0f1114;
  border: 1px solid #242730;
  border-radius: 6px;
  overflow: hidden;
}
.hcd-label {
  font-family: var(--mono);
  font-size: 9px;
  color: #01D3A0;
  letter-spacing: .14em;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #242730;
}
.hcd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #1a1d22;
  font-size: 12px;
}
.hcd-row:last-child { border-bottom: none; }
.hcd-k { font-family: var(--mono); font-size: 10px; color: #6B7280; letter-spacing: .04em; }
.hcd-v { color: #fff; }
.hcd-result { color: #01D3A0; font-weight: 700; }

/* ── 7. Newsletter block ── */
.hp-nl-block { text-align: center; }
.hp-nl-block .nl-inner { max-width: 560px; margin: 0 auto; }
.hp-nl-block .nl-t { font-size: 34px; }
.hp-nl-block .nl-row { max-width: 460px; margin: 0 auto 12px; }
.hp-nl-block .nl-btn { padding: 0 24px; height: 46px; font-size: 13px; font-weight: 700; }

/* ── 8. Community cards nested inside outer block ── */
.hp-sec-comm .comm-soc-card.hp-block {
  padding: 24px 22px;
  border-top-width: 3px;
  border-top-color: #01D3A0;
  text-decoration: none;
}
.hp-sec-comm > .sec-i > .hp-block { padding: 28px 32px 32px; }

/* ── 9. Affiliate block ── */
.hp-aff-block { padding: 36px; }
.hp-aff-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.hp-aff-text { display: flex; flex-direction: column; gap: 16px; }
.hp-aff-desc { font-size: 14px; color: #9CA3AF; line-height: 1.7; max-width: 600px; }
.hp-aff-points { display: flex; flex-direction: column; gap: 10px; }
.hp-aff-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #9CA3AF;
}
.hp-aff-ic { color: #01D3A0; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.hp-aff-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #0f1114;
  border: 1px solid #242730;
  border-radius: 6px;
  padding: 28px 32px;
  min-width: 200px;
}
.hp-aff-stat { text-align: center; padding: 12px 0; border-bottom: 1px solid #1a1d22; }
.hp-aff-stat:last-child { border-bottom: none; }
.hp-aff-stat-v {
  font-family: var(--disp);
  font-size: 36px;
  font-weight: 900;
  color: #01D3A0;
  line-height: 1;
  margin-bottom: 4px;
}
.hp-aff-stat-l {
  font-family: var(--mono);
  font-size: 9px;
  color: #6B7280;
  letter-spacing: .1em;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hp-calc-content { grid-template-columns: 1fr; }
  .hp-calc-preview { display: none; }
  .hp-aff-content { grid-template-columns: 1fr; }
  .hp-aff-stats { flex-direction: row; min-width: 0; }
  .hp-aff-stat { flex: 1; border-bottom: none; border-right: 1px solid #1a1d22; }
  .hp-aff-stat:last-child { border-right: none; }
}
@media (max-width: 767px) {
  .hp-sec { padding: 0 16px; margin: 14px 0; }
  .hp-block { padding: 20px 18px; }
  .hp-stats-grid { grid-template-columns: 1fr; }
  .hp-stat-mid { border-left: none; border-right: none; border-top: 1px solid #242730; border-bottom: 1px solid #242730; }
  .hp-stat-v { font-size: 40px; }
  .hp-aff-stats { flex-direction: column; }
  .hp-aff-stat { border-right: none; border-bottom: 1px solid #1a1d22; }
}

/* =======================================================================
   COMMUNITY SECTION v2 — clean rewrite, no legacy class conflicts
======================================================================= */

/* Outer block */
.hp-comm-block {
  padding: 32px 36px;
}

/* Header */
.hp-comm-hdr {
  margin-bottom: 28px;
  text-align: left;
}
.hp-comm-title {
  font-family: var(--disp);
  font-size: 36px;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: .03em;
  margin-bottom: 8px;
}
.hp-comm-sub {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.6;
}

/* 3-column card row */
.hp-soc-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Individual social card */
.hp-soc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 16px;
  background: #0a0a0a;
  border: 1px solid #01D3A0;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  transition: background .2s, border-color .2s, transform .15s;
  box-sizing: border-box;
}
.hp-soc-card:hover {
  background: #0f1f1a;
  border-color: #00ffbe;
  transform: translateY(-3px);
  text-decoration: none;
}

/* Icon circle */
.hp-soc-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(1, 211, 160, 0.1);
  border: 1px solid rgba(1, 211, 160, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #01D3A0;
  flex-shrink: 0;
}

/* Platform name */
.hp-soc-name {
  font-family: var(--disp);
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #ffffff;
  line-height: 1;
}

/* Handle / CTA */
.hp-soc-handle {
  font-family: var(--mono);
  font-size: 11px;
  color: #01D3A0;
  letter-spacing: .08em;
}

/* Responsive */
@media (max-width: 767px) {
  .hp-soc-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .hp-soc-card {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 18px 20px;
    gap: 16px;
  }
  .hp-soc-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  .hp-soc-name { font-size: 17px; }
  .hp-comm-block { padding: 20px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPOUND CARD v3 — image placeholder + ADD TO CART button
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card shell */
.cc {
  background: #0d1014 !important;
  border: 1px solid #242730 !important;
  border-top: 3px solid #01D3A0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.cc:hover {
  border-color: #01D3A0 !important;
  box-shadow: 0 0 0 1px rgba(1,211,160,.18), 0 6px 28px rgba(1,211,160,.09) !important;
}

/* Image area */
.cc-img-link {
  display: block !important;
  text-decoration: none !important;
}
.cc-img-wrap {
  background: #13171c !important;
  border-bottom: 1px solid #1e2228 !important;
  display: block !important;
  overflow: visible !important;
  transition: background .2s ease !important;
}
.cc-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
.cc:hover .cc-img-wrap {
  background: #161b21 !important;
}
.cc-img-wrap svg {
  opacity: .45;
  transition: opacity .2s ease;
}
.cc:hover .cc-img-wrap svg {
  opacity: .75;
}
.cc-img-name {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  color: #4a5568 !important;
  text-transform: uppercase !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* Card body */
.cc-body {
  padding: 18px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.cc-hdr {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.cc-cat {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  color: #01D3A0 !important;
  text-transform: uppercase !important;
}
.cc-tag {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
}
.cc-tag-new {
  background: rgba(1,211,160,.15) !important;
  color: #01D3A0 !important;
}

/* Name link */
.cc-name-link {
  text-decoration: none !important;
  display: block !important;
}
.cc-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 3px !important;
  line-height: 1.2 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  transition: color .15s ease !important;
}
.cc-name-link:hover .cc-name {
  color: #01D3A0 !important;
}

/* Full name + meta */
.cc-full {
  font-size: 11px !important;
  color: #4a5568 !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}
.cc-meta {
  font-size: 11px !important;
  color: #5a6272 !important;
  margin-bottom: 10px !important;
  font-family: 'DM Mono', monospace !important;
}

/* Description */
.cc-desc {
  font-size: 13px !important;
  color: #8a8f9a !important;
  line-height: 1.55 !important;
  margin: 0 0 16px !important;
  flex: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Footer row: price + button */
.cc-ft {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px solid #1e2228 !important;
}
.cc-price {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: .02em !important;
  line-height: 1 !important;
}

/* ADD TO CART button */
.cc-atc {
  background: #01D3A0 !important;
  color: #030407 !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 9px 13px !important;
  cursor: pointer !important;
  transition: background .15s ease, transform .1s ease !important;
  white-space: nowrap !important;
  font-family: 'Space Grotesk', sans-serif !important;
  line-height: 1 !important;
}
.cc-atc:hover {
  background: #00b88a !important;
  transform: translateY(-1px) !important;
}
.cc-atc:active {
  transform: translateY(0) !important;
  background: #009e78 !important;
}

/* Hide old action link if present */
.cc-action { display: none !important; }
/* Hide old cc-link if nothing inside it now */
.cc-link { display: none !important; }

/* ─── 4-column featured grid ──────────────────────────────────────────────── */
.prod-grid-4 {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}
@media (max-width: 1100px) {
  .prod-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .prod-grid-4 { grid-template-columns: 1fr !important; }
}

/* ─── Featured section enhanced header ───────────────────────────────────── */
.hp-feat-block {
  border-top-width: 4px !important;
}
.hp-feat-hdr {
  display: flex !important;
  align-items: flex-start !important;
  gap: 22px !important;
  margin-bottom: 36px !important;
}
.hp-feat-accent-bar {
  flex-shrink: 0 !important;
  width: 5px !important;
  height: 90px !important;
  background: linear-gradient(180deg, #01D3A0 0%, rgba(1,211,160,.2) 100%) !important;
  border-radius: 3px !important;
  margin-top: 4px !important;
}
.hp-feat-titles {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.hp-feat-titles .hp-block-eyebrow {
  margin-bottom: 6px !important;
}
.hp-feat-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(26px, 3.8vw, 44px) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.0 !important;
  margin: 0 !important;
}
.hp-feat-sub {
  font-size: 15px !important;
  color: #8a8f9a !important;
  margin: 8px 0 0 !important;
  font-weight: 400 !important;
}

/* =======================================================================
   MOBILE OPTIMISATION — Phase 1 & 2 final fixes
   Must stay at end of file so cascade overrides work correctly.
======================================================================= */

/* ── 1. Nav bar: reduce to 16px side-padding on mobile ── */
@media (max-width: 767px) {
  .site-header .nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── 2. Section container: tighter padding on mobile ── */
@media (max-width: 767px) {
  /* Inner content wrapper — goes from 32px to 16px */
  .sec-i {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* hp-sec provides its own 16px wrapper — zero the inner padding to avoid doubling */
  .hp-sec .sec-i {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Breadcrumb: match tighter padding */
  .breadcrumb {
    padding: 10px 16px 0;
  }
  /* Page intro section */
  .page-intro {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ── 3. Homepage feature section footer button: full-width on mobile ── */
@media (max-width: 767px) {
  .hp-block-ft .btn-p,
  .hp-block-ft .btn-o {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
  }
}

/* ── 4. CTA card (e.g. "View research stacks"): stack on mobile ── */
@media (max-width: 767px) {
  .cta-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  .cta-card .btn-p,
  .cta-card .btn-o {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ── 5. Standards grid inside hp-sec: single column on mobile ── */
@media (max-width: 767px) {
  .hp-sec-stds .stds-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ── 6. Featured section accent bar: hide on very small screens ── */
@media (max-width: 479px) {
  .hp-feat-accent-bar {
    display: none !important;
  }
  .hp-feat-hdr {
    gap: 0 !important;
  }
}

/* ── 7. Featured section sub-heading: smaller on mobile ── */
@media (max-width: 767px) {
  .hp-feat-sub {
    font-size: 13px !important;
    margin-top: 6px !important;
  }
  .hp-feat-hdr {
    margin-bottom: 24px !important;
  }
}

/* ── 8. Category grid: 2 cols on mobile (was auto-fill/220px) ── */
@media (max-width: 767px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .cat-tile {
    padding: 16px !important;
  }
  .cat-tile-name {
    font-size: 16px !important;
  }
  .cat-tile-desc {
    font-size: 12px !important;
  }
}
@media (max-width: 379px) {
  .cat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 9. Compound card grid: explicit single-column override on mobile ── */
@media (max-width: 559px) {
  .prod-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 10. Stack grid: single column on mobile ── */
@media (max-width: 767px) {
  .stack-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 11. Compound page hero: full column width on mobile ── */
@media (max-width: 767px) {
  .cp-hero {
    padding: 20px 16px !important;
    gap: 20px !important;
  }
  .cp-section {
    padding: 18px 16px !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    max-width: calc(100% - 32px) !important;
  }
  .cp-compliance {
    margin-left: 16px !important;
    margin-right: 16px !important;
    max-width: calc(100% - 32px) !important;
    padding: 14px 16px !important;
  }
  .cp-lede {
    font-size: 14px !important;
  }
  .cp-size-l {
    font-size: 12px !important;
  }
}

/* ── 12. Footer columns: 2-col on tablet, 1-col on mobile ── */
@media (max-width: 767px) {
  .ft-cols {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .site-footer {
    padding: 36px 16px 24px !important;
  }
  .site-footer .ft-top {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 28px !important;
  }
}
@media (max-width: 379px) {
  .ft-cols {
    grid-template-columns: 1fr !important;
  }
}

/* ── 13. Stats block: keep horizontal on mobile ── */
@media (max-width: 767px) {
  .hp-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .hp-stat {
    padding: 16px 20px !important;
  }
  .hp-stat-v {
    font-size: 36px !important;
  }
  .hp-stat-mid {
    border-top: 1px solid #242730 !important;
    border-bottom: 1px solid #242730 !important;
    border-left: none !important;
    border-right: none !important;
  }
}

/* ── 14. Newsletter row: stack on mobile ── */
@media (max-width: 767px) {
  .hp-nl-block .nl-row {
    flex-direction: column !important;
    max-width: 100% !important;
  }
  .hp-nl-block .nl-inp {
    font-size: 16px !important;
    min-height: 48px !important;
  }
  .hp-nl-block .nl-btn {
    width: 100% !important;
    height: 48px !important;
  }
  .hp-nl-block .nl-t {
    font-size: 26px !important;
  }
}

/* ── 15. Community section: single column cards on mobile ── */
@media (max-width: 767px) {
  .hp-comm-block {
    padding: 20px 18px !important;
  }
  .hp-comm-title {
    font-size: 26px !important;
  }
}

/* ── 16. Affiliate block: stack on mobile ── */
@media (max-width: 767px) {
  .hp-aff-block {
    padding: 20px 18px !important;
  }
  .hp-aff-content {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .hp-aff-stats {
    flex-direction: row !important;
    min-width: 0 !important;
    padding: 16px !important;
  }
  .hp-aff-stat {
    flex: 1 !important;
    border-bottom: none !important;
    border-right: 1px solid #1a1d22 !important;
    padding: 8px 0 !important;
  }
  .hp-aff-stat:last-child {
    border-right: none !important;
  }
  .hp-aff-stat-v {
    font-size: 26px !important;
  }
}

/* ── 17. Calculator block: stack on mobile ── */
@media (max-width: 767px) {
  .hp-calc-block {
    padding: 20px 18px !important;
  }
  .hp-calc-preview {
    display: none !important;
  }
  .hp-calc-content {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ── 18. Prevent horizontal scroll from wide elements ── */
.prod-grid,
.prod-grid-4,
.cat-grid,
.stack-grid,
.hp-stats-grid,
.hp-soc-row,
.stds-grid,
.ft-cols {
  width: 100%;
  min-width: 0;
}

/* ── 19. Images: never exceed container ── */
img {
  max-width: 100%;
  height: auto;
}

/* ── 20. Touch targets: ensure min 44px on all interactive elements ── */
.nl,
.mob-nl,
.cat-tile,
.bc-link,
.ft-col a,
.sec-link,
.nav-ig,
.nav-cart {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.cat-tile {
  display: flex;
}
.ft-col a {
  padding: 6px 0;
  min-height: 36px;
}

/* =======================================================================
   HERO INLINE STATS ROW
   Replaces the old hp-sec-stats block section.
   Sits between the H1 and the sub-paragraph inside the hero.
======================================================================= */

.h-stats-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 26px;
  flex-wrap: nowrap;
}

/* Each "value + label" pair */
.h-stat-item {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-shrink: 0;
}

/* Numerical value — slightly brighter than the label, but far below hero headline */
.hsi-v {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #c8c8c8;
  line-height: 1;
  letter-spacing: .01em;
}

/* Label text — very subdued */
.hsi-l {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 400;
  color: #505050;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Thin vertical divider between items */
.hsi-div {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* Tablet: shrink slightly */
@media (min-width: 768px) and (max-width: 1023px) {
  .hsi-v { font-size: 20px; }
}

/* Mobile: stack vertically */
@media (max-width: 767px) {
  .h-stats-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
  }
  .hsi-div {
    display: none;
  }
  .hsi-v { font-size: 19px; }
  .hsi-l { font-size: 9px; }
}

/* =======================================================================
   COMPOUND CARD PRICING — was/rrp strikethrough + badge
======================================================================= */

/* Wrapper that holds struck-out price + live price + badge in a column */
.cc-price-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  line-height: 1 !important;
}

/* Struck-out price — greyed out, smaller */
.cc-was {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #555 !important;
  text-decoration: line-through !important;
  letter-spacing: .02em !important;
  line-height: 1 !important;
}

/* Shared badge pill */
.cc-badge {
  font-family: 'DM Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 3px 7px !important;
  border-radius: 3px !important;
  line-height: 1 !important;
  margin-top: 3px !important;
  display: inline-block !important;
}

/* SAVE X% — teal */
.cc-badge-save {
  background: rgba(1, 211, 160, 0.15) !important;
  color: #01D3A0 !important;
  border: 1px solid rgba(1, 211, 160, 0.3) !important;
}

/* BEST PRICE — teal (same palette, different label) */
.cc-badge-best {
  background: rgba(1, 211, 160, 0.15) !important;
  color: #01D3A0 !important;
  border: 1px solid rgba(1, 211, 160, 0.3) !important;
}

/* Live price in the card — keep existing .cc-price size but make it pop on discounted cards */
.cc-price-block .cc-price {
  font-size: 22px !important;
  color: #01D3A0 !important;
}

/* ── Price alignment: pin footer to card bottom across all breakpoints ──────
   .cc already has display:flex/flex-direction:column.
   .cc-body already has flex:1.
   .cc-ft already has margin-top:auto.
   Reserve the was-price line height on cards that have no strikethrough so
   the main price sits at the same y-position in every card in a row.        */
.cc-price-block:not(:has(.cc-was)) {
  padding-top: 1.15em;   /* matches approx height of one .cc-was line */
}

/* =======================================================================
   COMPOUND PAGE ORDER PANEL — per-size discount display
======================================================================= */

/* Wrapper inside a size label row that holds was + live + badge */
.cp-size-price-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Struck-out price in order panel */
.cp-size-was {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #4a4a4a;
  text-decoration: line-through;
  letter-spacing: .02em;
}

/* Badge inside order panel */
.cp-size-badge {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  line-height: 1;
}
.cp-badge-save {
  background: rgba(1, 211, 160, 0.15);
  color: #01D3A0;
  border: 1px solid rgba(1, 211, 160, 0.28);
}
.cp-badge-best {
  background: rgba(1, 211, 160, 0.15);
  color: #01D3A0;
  border: 1px solid rgba(1, 211, 160, 0.28);
}

/* Make the live price teal in the order panel when there's a discount */
.cp-size-price-wrap .cp-size-p {
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: #01D3A0;
}

/* Ensure the order panel size option aligns was/live/badge in a row */
.cp-size-opt {
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Mobile: wrap price info neatly */
@media (max-width: 767px) {
  .cp-size-price-wrap {
    gap: 6px;
  }
  .cp-size-was { font-size: 10px; }
  .cp-size-badge { font-size: 8px; padding: 2px 5px; }
  .cc-was { font-size: 11px !important; }
  .cc-badge { font-size: 8px !important; padding: 2px 6px !important; }
  .cc-price-block .cc-price { font-size: 20px !important; }
}

/* =======================================================================
   STACK CARD PRICING — strikethrough orig + discounted price + badge
   ======================================================================= */

/* Price block: column layout (was → price → badge) */
.sc-price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
}

/* Struck-out original (sum of individual prices) */
.sc-was {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  color: #555;
  text-decoration: line-through;
  letter-spacing: .02em;
  line-height: 1;
}

/* Live stack price */
.sc-price {
  font-family: 'DM Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: #01D3A0;
  line-height: 1;
}

/* SAVE X% badge pill */
.sc-badge {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  line-height: 1;
  margin-top: 3px;
  display: inline-block;
  background: rgba(1, 211, 160, 0.15);
  color: #01D3A0;
  border: 1px solid rgba(1, 211, 160, 0.3);
}

/* "Save X% vs buying individually" line inside the order panel */
.cp-stack-saving {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: #01D3A0;
  letter-spacing: .04em;
  margin: 6px 0 10px;
  opacity: .85;
}

/* Mobile: slightly smaller stack price */
@media (max-width: 767px) {
  .sc-price   { font-size: 18px; }
  .sc-was     { font-size: 11px; }
  .sc-badge   { font-size: 8px; padding: 2px 6px; }
}

/* =======================================================================
   STACK CONTENTS PILLS — "WHAT'S IN THIS STACK"
   Used in the order panel on stack pages and in stack cards on /stacks/
   ======================================================================= */

/* ── Order panel: full pill section ──────────────────────────────────────── */
.cp-stack-contents {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* "WHAT'S IN THIS STACK" label */
.cp-stack-contents-lbl {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  color: #01D3A0;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Pill row — wraps on overflow */
.cp-stack-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Individual pill */
.csp-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #111217;
  border: 1px solid rgba(1, 211, 160, 0.35);
  border-radius: 4px;
  padding: 7px 11px;
  line-height: 1;
}

/* Product name inside pill */
.csp-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* Separator dot */
.csp-dot {
  font-size: 10px;
  color: rgba(1, 211, 160, 0.4);
}

/* Size text */
.csp-size {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  color: #01D3A0;
  white-space: nowrap;
}

/* Individual price */
.csp-price {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  color: #666;
  white-space: nowrap;
}

/* ── Stack card pills on /stacks/ index ──────────────────────────────────── */
.sc-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

/* Individual card pill — slightly more compact than order panel pills */
.sc-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #111217;
  border: 1px solid rgba(1, 211, 160, 0.28);
  border-radius: 4px;
  padding: 5px 9px;
  line-height: 1;
  text-decoration: none !important;
}

/* Product name in card pill */
.sc-cp-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #e8e8e8;
  white-space: nowrap;
}

/* Size text in card pill */
.sc-cp-size {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: #01D3A0;
  white-space: nowrap;
}
.sc-cp-size::before { content: '·'; color: rgba(1,211,160,.35); margin-right: 4px; }

/* Price in card pill */
.sc-cp-price {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: #555;
  white-space: nowrap;
}
.sc-cp-price::before { content: '·'; color: rgba(255,255,255,.12); margin-right: 4px; }

/* Mobile: pills still wrap, slightly tighter padding */
@media (max-width: 767px) {
  .csp-pill    { padding: 6px 9px; }
  .csp-name    { font-size: 11px; }
  .csp-size,
  .csp-price   { font-size: 9px; }
  .sc-card-pill { padding: 4px 7px; }
  .sc-cp-name  { font-size: 10px; }
}

/* =======================================================================
   CATALOGUE & CATEGORY PAGE OVERHAUL
   Scoped to body.page-catalogue (/compounds/) and body.page-category
   (/compounds/{cat}/) so nothing else is affected.
   ======================================================================= */

/* ── Page intro: tighter top/bottom spacing ─────────────────────────────── */
.page-catalogue .page-intro,
.page-category  .page-intro {
  padding: 24px 0 14px !important;
}

/* ── Page H1: scaled down — informative, not heroic ─────────────────────── */
.page-catalogue .page-h1,
.page-category  .page-h1 {
  font-size: 32px !important;
  letter-spacing: 0 !important;
  margin-bottom: 10px !important;
}

/* ── Section title: compact teal label with left-border accent ───────────── */
.page-catalogue .sec-t,
.page-category  .sec-t {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #01D3A0 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  line-height: 1.2 !important;
  margin-bottom: 14px !important;
  padding-left: 10px !important;
  border-left: 2px solid #01D3A0 !important;
  /* Override the 44px display-font size from base rules */
  font-size: 13px !important;
}

/* When sec-t lives inside a .sec-hdr flex row, the row handles bottom spacing */
.page-catalogue .sec-hdr .sec-t,
.page-category  .sec-hdr .sec-t {
  margin-bottom: 0 !important;
}

/* ── Section header: flex row so title sits left and "View hub →" sits right */
.page-catalogue .sec-hdr,
.page-category  .sec-hdr {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

/* ── Section sub-text ───────────────────────────────────────────────────── */
.page-catalogue .sec-sub,
.page-category  .sec-sub {
  font-size: 13px !important;
  margin-top: 5px !important;
  margin-left: 12px !important; /* indent to align with border-left offset */
}

/* ── Category sections: compact, label-style, not banner-style ──────────── */
/* Top-level category browse grid */
.page-catalogue .cat-grid-sec {
  padding: 16px 0 20px !important;
}

/* Each compound category group */
.page-catalogue .cat-group {
  padding: 28px 0 0 !important;
}

/* Subtle divider between adjacent groups */
.page-catalogue .cat-group + .cat-group {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Bottom CTA (research stacks link) */
.page-catalogue .cta-sec {
  padding: 28px 0 !important;
}

/* Category hub compound/stacks sections */
.page-category .cat-compounds,
.page-category .cat-stacks {
  padding: 24px 0 !important;
}

/* ── Product grid: explicit 4-column desktop layout ─────────────────────── */
.page-catalogue .prod-grid,
.page-category  .prod-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-top: 0 !important;
}

/* ── 2 columns at tablet (≤1100px) ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .page-catalogue .prod-grid,
  .page-category  .prod-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .page-catalogue .cat-group {
    padding: 22px 0 0 !important;
  }
  .page-catalogue .page-h1,
  .page-category  .page-h1 {
    font-size: 28px !important;
  }
}

/* ── 1 column at mobile (≤640px) ────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-catalogue .prod-grid,
  .page-category  .prod-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .page-catalogue .cat-group {
    padding: 18px 0 0 !important;
  }
  .page-catalogue .cat-grid-sec {
    padding: 12px 0 16px !important;
  }
  .page-catalogue .page-h1,
  .page-category  .page-h1 {
    font-size: 24px !important;
  }
  .page-catalogue .sec-t,
  .page-category  .sec-t {
    font-size: 12px !important;
  }
}

/* =======================================================================
   MOBILE OPTIMISATION — Phase 3: comprehensive 375–430 px pass
   All rules appended at end-of-file so cascade order guarantees override.
   ======================================================================= */

/* ── 0. Global guards ─────────────────────────────────────────────────── */

/* Flex/grid children can shrink below their content size */
*, *::before, *::after { min-width: 0; }

/* All images respect their container */
img { max-width: 100%; height: auto; display: block; }
/* Exception: inline SVG icons keep natural size */
svg { max-width: none; }

/* Long chemical names / sequences / CAS numbers break safely */
.cp-h1, .cc-name, .stack-card-name,
.cp-spec td, .cp-spec dd,
.cp-spec-table td, .cp-spec-table th,
.legal-i p, .legal-i li,
.cp-section p, .cp-section li { overflow-wrap: break-word; word-break: break-word; }
.mono { word-break: break-all; }

/* Page lede: remove desktop max-width on mobile */
@media (max-width: 767px) {
  .page-lede { max-width: 100%; }
}


/* ── 1. Nav ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Guarantee hamburger always visible — belt & suspenders override */
  .hamburger,
  .site-header .hamburger { display: flex !important; }
  .nav-links,
  .site-header .nav-links  { display: none !important; }

  /* Logo: compact but readable */
  .nav-logo-img { width: 110px !important; }

  /* Announcement bar: ensure single-line scroll, no page overflow */
  .ann-bar { overflow: hidden !important; }
}


/* ── 2. Hero heading: step down below 480 px ─────────────────────────── */

@media (max-width: 479px) {
  .h-h1 { font-size: 38px !important; line-height: .95 !important; }
}
@media (max-width: 375px) {
  .h-h1 { font-size: 32px !important; }
}


/* ── 3. Compound page detail ─────────────────────────────────────────── */

@media (max-width: 767px) {

  /* Order panel: full-width, comfortable padding */
  .cp-order {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px !important;
  }

  /* Size option row: wrap price details onto a second line on narrow screens */
  .cp-size-opt {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }
  .cp-size-price-wrap {
    flex-basis: 100% !important;
    margin-left: 0 !important;
    margin-top: 2px !important;
    justify-content: flex-start !important;
  }

  /* Spec grid: already 1-col at 767 (line 1798) — reinforce */
  .cp-spec { grid-template-columns: 1fr !important; }

  /* Disclaimer notice: comfortable on small screen */
  .disc-inline { font-size: 12px !important; padding: 10px 12px !important; }
}


/* ── 4. Checkout ─────────────────────────────────────────────────────── */

@media (max-width: 767px) {

  /* Submit always full-width */
  .co-submit {
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Back link: tappable */
  .co-back {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    font-size: 13px !important;
    margin-top: 8px !important;
  }

  /* Error message */
  .co-err { font-size: 13px !important; line-height: 1.5 !important; padding: 8px 0 !important; }

  /* Order summary sidebar: always static on mobile */
  .co-summary, .cart-summary {
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 20px !important;
  }
}

@media (max-width: 479px) {
  /* Checkout steps text: tighten */
  .co-steps { gap: 4px !important; }
  .co-step  { font-size: 11px !important; padding: 7px 10px !important; white-space: nowrap !important; }
}


/* ── 5. Confirmation page ────────────────────────────────────────────── */

@media (max-width: 479px) {
  .confirm-t       { font-size: 22px !important; }
  .confirm-bank-dl { font-size: 13px !important; }
  .confirm-bank-dl dt { font-size: 11px !important; }
  .confirm-bank-dl dd { font-size: 13px !important; word-break: break-all !important; }
}


/* ── 6. Footer: 44 px touch targets on mobile ────────────────────────── */

@media (max-width: 767px) {
  .ft-col a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 2px 0 !important;
  }
  .ft-col-h { margin-bottom: 6px !important; }

  /* Bottom bar: smaller text already set; ensure it wraps */
  .ft-bot { flex-wrap: wrap !important; gap: 6px !important; }
}


/* ── 7. Entry gate: compact padding on small phones ─────────────────── */

@media (max-width: 479px) {
  .eg-i { padding: 24px 18px !important; }
  .eg-title { font-size: 19px !important; }
  .eg-i .eg-eyebrow { font-size: 9px !important; }
}


/* ── 8. Catalogue / category pages ──────────────────────────────────── */

@media (max-width: 479px) {
  /* sec-hdr: wrap "View X hub →" link below title if space is tight */
  .page-catalogue .sec-hdr,
  .page-category  .sec-hdr {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .page-catalogue .sec-link,
  .page-category  .sec-link { font-size: 11px !important; }
}


/* ── 9. Stack content pills: allow wrap on narrow screens ────────────── */

@media (max-width: 479px) {
  /* Allow pill names to wrap rather than force wide pill */
  .csp-name    { white-space: normal !important; }
  .sc-cp-name  { white-space: normal !important; }
  .csp-pill    { padding: 5px 8px !important; }
  .sc-card-pill{ padding: 4px 7px !important; }
}


/* ── 10. Typography: clamp page headings on mobile ───────────────────── */

@media (max-width: 767px) {
  /* Catalogue / legal / about h1 */
  .page-h1 { font-size: clamp(22px, 7vw, 36px) !important; }

  /* Compound product name heading */
  .cp-h1 { font-size: clamp(22px, 7vw, 32px) !important; }
}


/* ── 11. General overflow prevention ─────────────────────────────────── */

/* All grid containers stay within viewport */
.prod-grid, .prod-grid-4, .cat-grid, .stack-grid,
.hp-stats-grid, .stds-grid, .ft-cols, .hp-soc-row,
.f-grid-2, .co-grid, .cp-hero { width: 100%; box-sizing: border-box; }

/* Scroll containers */
.cp-table-wrap, .co-steps, .trust-i {
  -webkit-overflow-scrolling: touch;
}

/* Breadcrumb: wrap gracefully */
.breadcrumb { flex-wrap: wrap !important; }

/* Prevent any fixed-width element from causing page scroll */
@media (max-width: 767px) {
  .hp-block, .cp-section, .cp-compliance, .compliance-block {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
}


/* ── 12. Input focus: prevent iOS auto-zoom everywhere ───────────────── */

@media (max-width: 767px) {
  input, select, textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"] {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
}


/* ── 13. Buttons: white-space relax on very small screens ────────────── */

@media (max-width: 375px) {
  /* Allow label text to wrap rather than overflow the button */
  .btn-p, .btn-o, .cp-order-btn, .eg-btn-p, .eg-btn-o {
    white-space: normal !important;
    line-height: 1.3 !important;
    min-height: 48px !important;
  }
}

/* =======================================================================
   IMAGE NATURAL SIZING — universal (all breakpoints)
   Images define their own container size. No fixed heights, no object-fit,
   no aspect-ratio constraints. Container grows to wrap the image cleanly.
   ======================================================================= */

/* Viewport-level overflow guard */
html { overflow-x: hidden !important; }

/* ── Product grid cards ──────────────────────────────────────────────────── */

/* Wrap: no height cap — image drives the height */
.cc-img-wrap {
  height: auto !important;
  min-height: unset !important;
  overflow: visible !important;
  width: 100% !important;
  background: #13171c !important;
  display: block !important;
  position: static !important;
  box-sizing: border-box !important;
}

/* Image: full width, natural height, no object-fit */
.cc-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: unset !important;
}

/* Hide the text label inside the wrap (image makes it redundant) */
.cc-img-name {
  display: none !important;
}

/* Card grid: single column on mobile, no min-width blowout */
@media (max-width: 768px) {
  .prod-grid,
  .prod-grid-4 {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .cc {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Product detail hero ─────────────────────────────────────────────────── */

/* Container: no aspect-ratio, no fixed height — wraps the image */
.cp-img-placeholder {
  aspect-ratio: unset !important;
  min-height: unset !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #1e2024 !important;
  position: static !important;
}

/* Image: in normal flow, full width, natural height, no object-fit */
.cp-prod-img {
  position: static !important;
  inset: unset !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: unset !important;
  border-radius: 6px !important;
}

/* Hide redundant text labels — image replaces them */
.cp-img-label,
.cp-img-sub {
  display: none !important;
}

/* =======================================================================
   MOBILE: Product detail hero — reorder to name → pricing → description
   Technique: display:contents on cp-hero-main surfaces its children as
   direct flex children of cp-hero, enabling order: control without
   touching HTML. Desktop grid layout is completely unaffected.
   ======================================================================= */

@media (max-width: 768px) {

  /* Switch hero from CSS grid to flex column */
  .cp-hero {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Dissolve the wrapper div — its children become direct flex children */
  .cp-hero .cp-hero-main {
    display: contents !important;
  }

  /* Stacking order: image → eyebrow → title → order panel → rest */
  .cp-hero .cp-img-col  { order: 1 !important; }
  .cp-hero .cp-eyebrow  { order: 2 !important; }
  .cp-hero .cp-h1       { order: 3 !important; }
  .cp-hero .cp-order    { order: 4 !important; }
  .cp-hero .disc-inline { order: 5 !important; }
  .cp-hero .cp-lede     { order: 6 !important; }
  .cp-hero .cp-spec     { order: 7 !important; }

}

/* =======================================================================
   STACKS PROMINENCE — nav highlight, stack-card image placeholders,
   homepage stacks section, category CTA banner
   ======================================================================= */

/* ── 1. Nav: Stacks link teal highlight ─────────────────────────────────── */

.nav-links a.nl-stacks {
  color: #FF6B00 !important;
  font-weight: 600 !important;
}
.nav-links a.nl-stacks:hover {
  color: #ffffff !important;
}

/* Mobile menu: Stacks as top-level orange item */
.mob-menu a.mob-nl-stacks {
  color: #FF6B00 !important;
  font-weight: 700 !important;
  padding-left: 0 !important;        /* full-width, not indented like sub-items */
  border-top: 1px solid rgba(255,107,0,.18) !important;
  border-bottom: 1px solid rgba(255,107,0,.18) !important;
  margin: 4px 0 !important;
}

/* ── 2. Stack card image placeholder ────────────────────────────────────── */

.sc-img-placeholder {
  width: 100%;
  background: #1e2024;
  border: 2px dashed #01D3A0;
  border-radius: 8px;
  display: block;
  padding: 0;
  box-sizing: border-box;
  margin-bottom: 16px;
  overflow: hidden;
}

/* Hide broken-image icon when src is empty */
.sc-prod-img[src=""] {
  display: none !important;
}

/* Image fills container at natural aspect ratio */
.sc-prod-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

/* Label: only visible when no image is loaded (src="") */
.sc-img-label {
  display: none !important;
}

/* ── 3. Homepage stacks section ─────────────────────────────────────────── */

.hp-stacks-block {
  border-top-color: #FF6B00 !important;
}

.hp-stacks-inner {
  display: flex;
  gap: 36px;
  align-items: flex-start;
}

.hp-stacks-text {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hp-stacks-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.05;
  margin: 0;
}

.hp-stacks-sub {
  font-size: 14px;
  color: #8a8f9a;
  line-height: 1.65;
  margin: 0;
}

.hp-stacks-cta {
  align-self: flex-start;
  margin-top: 4px;
}

.hp-stacks-pills {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.hp-stack-pill {
  background: #13171c;
  border: 1px solid #1e2228;
  border-left: 3px solid #01D3A0;
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.hp-stack-pill:hover {
  border-color: #01D3A0;
  background: #161b21;
}

.hp-stack-pill-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .01em;
}

.hp-stack-pill-cmpds {
  font-size: 11px;
  color: #01D3A0;
  font-family: 'DM Mono', monospace;
  letter-spacing: .04em;
}

@media (max-width: 900px) {
  .hp-stacks-inner {
    flex-direction: column;
    gap: 24px;
  }
  .hp-stacks-text {
    flex: none;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .hp-stacks-pills {
    grid-template-columns: 1fr;
  }
}

/* ── 4. Category hub: "View all stacks" CTA banner ──────────────────────── */

.cat-stacks-cta-sec {
  margin-top: 0 !important;
}

.cat-stacks-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #0d1014;
  border: 1px solid #1e2228;
  border-left: 3px solid #01D3A0;
  border-radius: 6px;
  padding: 18px 24px;
}

.cat-stacks-cta-label {
  font-size: 14px;
  color: #8a8f9a;
}

.cat-stacks-cta-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .cat-stacks-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .cat-stacks-cta-btn {
    width: 100%;
    text-align: center;
  }
}

/* =======================================================================
   STACK TILE REDESIGN — full-width flush image, clean text layout below
   ======================================================================= */

/* Card: ensure overflow clips image to rounded corners */
.stack-card {
  overflow: hidden !important;
}

/* Link wrapper: remove padding — image fills edge to edge */
.stack-card-link {
  padding: 0 !important;
}

/* Image container: no border, no padding, no margin — flush with card */
.sc-img-placeholder {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: block !important;
}

/* Image: full width, natural height, no gaps */
.sc-prod-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

/* sc-img-label: only visible when no image (src="") — give it padding */
.sc-img-label {
  display: block !important;
  text-align: center !important;
  padding: 48px 16px !important;
}

/* Hide label when image is present */
.sc-img-placeholder:has(img:not([src=""])) .sc-img-label {
  display: none !important;
}

/* Text content block below image: restore padding */
.stack-card-eyebrow {
  padding: 14px 16px 0 !important;
}

.stack-card-name {
  padding: 4px 16px 0 !important;
}

.stack-card-full {
  padding: 0 16px !important;
}

.sc-card-pills {
  padding: 8px 16px 0 !important;
}

.stack-card-ft {
  padding: 12px 16px 16px !important;
  margin-top: auto !important;
}

/* ============================================================
   LAYOUT AUDIT FIXES — order panel wrapping, image clipping,
   3-column min-width guards, mobile safety
   ============================================================ */

/* 1. Order panel compound-label word wrap
   Root cause: .cp-size-l { flex: 1 1 0% } + wide price block (~160px)
   squeezes label to ~40-80px → one word per line.
   Fix: give label a real flex-basis so when price block is wide it
   wraps to its own row rather than crushing the label.               */
.cp-size-opt {
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  row-gap: 4px !important;
  column-gap: 8px !important;
}
.cp-size-opt input[type="radio"] {
  flex-shrink: 0 !important;
  margin-top: 3px !important;
}
.cp-size-l {
  flex: 1 1 120px !important;
  min-width: 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
.cp-size-price-wrap {
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  margin-left: auto !important;
}

/* At ≤1100px panel gets narrower — move price to its own line */
@media (max-width: 1100px) {
  .cp-size-price-wrap {
    flex-basis: 100% !important;
    margin-left: 28px !important;
  }
}

/* 2. Hero image not clipped at top
   Ensure image column and placeholder never hide overflow              */
.cp-img-col {
  min-width: 0 !important;
  overflow: visible !important;
}
.cp-img-placeholder {
  overflow: visible !important;
}

/* 3. 3-column grid children: prevent any child causing overflow       */
.cp-hero > * {
  min-width: 0;
}
.cp-hero-main {
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}
.cp-order {
  min-width: 0 !important;
}

/* 4. Mobile safety — all hero columns full-width, no overflow         */
@media (max-width: 768px) {
  .cp-order,
  .cp-img-col,
  .cp-hero-main {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .cp-size-price-wrap {
    flex-basis: 100% !important;
    margin-left: 28px !important;
  }
}

/* ============================================================
   ORDER PANEL TOP-ALIGNMENT + STICKY
   Problem: base rule has position:sticky then position:relative
   which kills sticky. Hero needs align-items:start so the order
   panel doesn't stretch or drift downward.
   ============================================================ */

/* Ensure hero grid top-aligns all columns */
.cp-hero {
  align-items: start !important;
}

/* Order panel: fix broken sticky (relative was overriding it),
   top-align with no margin pushing it down                     */
.cp-order {
  position: sticky !important;
  top: 20px !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
}

/* Tablet / single-column: sticky causes scroll issues — revert */
@media (max-width: 1024px) {
  .cp-order {
    position: static !important;
    align-self: auto !important;
  }
}

/* ============================================================
   PRODUCT CARD REFINEMENT
   Uniform height, fixed image area, consistent spacing,
   badge lock, hover glow
   ============================================================ */

/* 1. Card shell — flex column so body grows and price always hits bottom.
      height:100% fills the CSS Grid row (grid default is stretch).        */
.cc {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  cursor: pointer !important;
  /* 6. Border: locked 3px teal top, 1px sides/bottom */
  border-top: 3px solid #01D3A0 !important;
  border-right: 1px solid #242730 !important;
  border-bottom: 1px solid #242730 !important;
  border-left: 1px solid #242730 !important;
}

/* 7. Hover: teal glow + lift */
.cc:hover {
  border-color: #01D3A0 !important;
  box-shadow: 0 0 12px rgba(1,211,160,0.20), 0 4px 20px rgba(1,211,160,0.08) !important;
  transform: translateY(-2px) !important;
}

/* 2. Image area — container height driven by image's natural aspect ratio.
      No fixed height, no object-fit — image fills full width, height auto. */
.cc-img-wrap {
  height: auto !important;
  min-height: unset !important;
  max-height: unset !important;
  overflow: hidden !important;
  display: block !important;
  padding: 0 !important;
  background: #13171c !important;
  position: static !important;
}
.cc-img {
  width: 100% !important;
  height: auto !important;
  max-height: unset !important;
  object-fit: unset !important;
  display: block !important;
}

/* 3. Consistent body padding: 16px all sides */
.cc-body {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* 3. Consistent internal spacing */
.cc-hdr {
  margin-bottom: 10px !important;
}
.cc-name {
  margin: 0 0 4px !important;
}
.cc-full {
  margin-bottom: 6px !important;
}
.cc-meta {
  margin-bottom: 10px !important;
}

/* 4. Category badge — locked to same size, teal, mono */
.cc-cat {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  color: #01D3A0 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* 5. Price block stays at the bottom of the card */
.cc-ft {
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid #1e2228 !important;
}

/* 2. Mobile: image area remains natural — no fixed heights */

/* ============================================================
   FULL MOBILE OPTIMISATION PASS — 375 / 390 / 430px (iPhone)
   Only fills gaps not covered by earlier mobile rules.
   Desktop layouts are completely unaffected.
   ============================================================ */

/* ── 0. Global overflow guard ────────────────────────────────── */
body {
  overflow-x: hidden !important;
}

/* ── 1. Homepage hero buttons: full-width stacked on mobile ──── */
@media (max-width: 767px) {
  .h-btns {
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
  }
  .h-btns .btn-p,
  .h-btns .btn-o {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  /* Compliance note: bump from 10px to at least 12px */
  .h-compliance {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
}

/* ── 2. Product cards: price row safe at 375px ───────────────── */
@media (max-width: 767px) {
  /* Allow price block to grow and push ATC button right */
  .cc-price-block {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .cc-atc {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .cc-ft {
    gap: 8px !important;
  }
  /* Body text floor: 14px */
  .cc-body {
    font-size: 14px !important;
  }
}

/* ── 3. Product / stack detail: spec grid 2 columns on mobile ── */
/*    User requirement: "wraps to 2 columns" — override the
      current 1-col rule set earlier in the cascade.             */
@media (max-width: 767px) {
  .cp-spec {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 4. Order panel: button full-width + min tap height ─────── */
@media (max-width: 767px) {
  .cp-order-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ── 5. Nav: hide cart label at narrow widths to reclaim space ── */
@media (max-width: 430px) {
  .nav-cart-label {
    display: none !important;
  }
  .nav-logo-img {
    width: 100px !important;
  }
}

/* ── 6. Footer: single column at 479px and below ────────────── */
@media (max-width: 479px) {
  .ft-cols {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── 7. Universal container guard: every layout box must stay
        within viewport width on any screen in the 375–430 range */
@media (max-width: 767px) {
  .hp-sec,
  .hp-block,
  .sec-i,
  .cp-hero,
  .cp-section,
  .cp-compliance,
  .cp-order,
  .cp-img-col,
  .stack-card,
  .cc,
  .cat-tile,
  .hp-stacks-block,
  .breadcrumb,
  .compliance-block,
  .cta-card,
  .nl-sec,
  .stds-sec,
  .rp-card,
  .legal-i {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Prevent long compound/stack names from overflowing */
  .cc-name,
  .cp-h1,
  .stack-card-name,
  .cat-tile-name,
  .page-h1 {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  /* Body text: floor at 14px */
  body {
    font-size: 14px;
  }
  p, li, td, th {
    font-size: max(14px, 1em);
  }
}

/* ── 8. 375px micro-fixes ─────────────────────────────────────── */
@media (max-width: 375px) {
  .cp-hero {
    padding: 12px !important;
    gap: 14px !important;
  }
  .cc-body {
    padding: 12px !important;
  }
  .cp-order {
    padding: 14px !important;
  }
  /* Section inner padding: minimum 12px each side */
  .sec-i {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .hp-sec {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Cards: remove any residual min-width */
  .cc, .stack-card, .cat-tile {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CATEGORY COLOUR SYSTEM
   Cognitive #9B6DFF · Metabolic #FFE500 · Healing #4FC3F7 · Growth #69D98C · Anti-Ageing #FF6B9D
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Remove flavour-text paragraph from category tiles ── */
.cat-tile-desc { display: none !important; }

/* ── Category tiles — top border + name colour + action link colour ── */
a.cat-tile[href*="/cognitive/"]      { border-top: 4px solid #9B6DFF !important; }
a.cat-tile[href*="/metabolic/"]      { border-top: 4px solid #FFE500 !important; }
a.cat-tile[href*="/healing-and-repair/"] { border-top: 4px solid #4FC3F7 !important; }
a.cat-tile[href*="/growth/"]         { border-top: 4px solid #69D98C !important; }
a.cat-tile[href*="/anti-ageing/"]    { border-top: 4px solid #FF6B9D !important; }

a.cat-tile[href*="/cognitive/"]      .cat-tile-name, a.cat-tile[href*="/cognitive/"]      .cat-tile-action { color: #9B6DFF !important; }
a.cat-tile[href*="/metabolic/"]      .cat-tile-name, a.cat-tile[href*="/metabolic/"]      .cat-tile-action { color: #FFE500 !important; }
a.cat-tile[href*="/healing-and-repair/"] .cat-tile-name, a.cat-tile[href*="/healing-and-repair/"] .cat-tile-action { color: #4FC3F7 !important; }
a.cat-tile[href*="/growth/"]         .cat-tile-name, a.cat-tile[href*="/growth/"]         .cat-tile-action { color: #69D98C !important; }
a.cat-tile[href*="/anti-ageing/"]    .cat-tile-name, a.cat-tile[href*="/anti-ageing/"]    .cat-tile-action { color: #FF6B9D !important; }

/* ── Product cards — top border, badge label colour, hover glow ── */
.cc.cc-cognitive  { border-top-color: #9B6DFF !important; }
.cc.cc-metabolic  { border-top-color: #FFE500 !important; }
.cc.cc-healing    { border-top-color: #4FC3F7 !important; }
.cc.cc-growth     { border-top-color: #69D98C !important; }
.cc.cc-antiageing { border-top-color: #FF6B9D !important; }

.cc.cc-cognitive  .cc-cat { color: #9B6DFF !important; }
.cc.cc-metabolic  .cc-cat { color: #FFE500 !important; }
.cc.cc-healing    .cc-cat { color: #4FC3F7 !important; }
.cc.cc-growth     .cc-cat { color: #69D98C !important; }
.cc.cc-antiageing .cc-cat { color: #FF6B9D !important; }

.cc.cc-cognitive:hover  { border-color: #9B6DFF !important; box-shadow: 0 0 14px rgba(155,109,255,0.35), 0 4px 20px rgba(155,109,255,0.10) !important; }
.cc.cc-metabolic:hover  { border-color: #FFE500 !important; box-shadow: 0 0 14px rgba(255,229,0,0.35),  0 4px 20px rgba(255,229,0,0.10)  !important; }
.cc.cc-healing:hover    { border-color: #4FC3F7 !important; box-shadow: 0 0 14px rgba(79,195,247,0.35),  0 4px 20px rgba(79,195,247,0.10)  !important; }
.cc.cc-growth:hover     { border-color: #69D98C !important; box-shadow: 0 0 14px rgba(105,217,140,0.35), 0 4px 20px rgba(105,217,140,0.10) !important; }
.cc.cc-antiageing:hover { border-color: #FF6B9D !important; box-shadow: 0 0 14px rgba(255,107,157,0.35), 0 4px 20px rgba(255,107,157,0.10) !important; }

/* ── Product detail pages — eyebrow text colour ── */
body.page-cat-cognitive  .cp-eyebrow { color: #9B6DFF !important; }
body.page-cat-metabolic  .cp-eyebrow { color: #FFE500 !important; }
body.page-cat-healing    .cp-eyebrow { color: #4FC3F7 !important; }
body.page-cat-growth     .cp-eyebrow { color: #69D98C !important; }
body.page-cat-antiageing .cp-eyebrow { color: #FF6B9D !important; }

/* ── Breadcrumb — category link colour on hub and detail pages ── */
a.bc-link[href*="/compounds/cognitive/"]          { color: #9B6DFF !important; }
a.bc-link[href*="/compounds/metabolic/"]          { color: #FFE500 !important; }
a.bc-link[href*="/compounds/healing-and-repair/"] { color: #4FC3F7 !important; }
a.bc-link[href*="/compounds/growth/"]             { color: #69D98C !important; }
a.bc-link[href*="/compounds/anti-ageing/"]        { color: #FF6B9D !important; }

/* Hub page current breadcrumb (the <span.bc-current>) */
body.page-cat-cognitive  .bc-current { color: #9B6DFF !important; }
body.page-cat-metabolic  .bc-current { color: #FFE500 !important; }
body.page-cat-healing    .bc-current { color: #4FC3F7 !important; }
body.page-cat-growth     .bc-current { color: #69D98C !important; }
body.page-cat-antiageing .bc-current { color: #FF6B9D !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   STACK CATEGORY COLOUR SYSTEM
   Cognitive #9B6DFF · Metabolic #FFE500 · Healing #4FC3F7 · Growth #69D98C · Anti-Ageing #FF6B9D
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stack tiles — top border ── */
article.stack-card:has(a[href*="/stacks/cognitive/"]),
article.stack-card:has(a[href*="/stacks/cognitive-and-sleep/"]),
article.stack-card:has(a[href*="/stacks/advanced-cognitive/"]) { border-top: 4px solid #9B6DFF !important; }

article.stack-card:has(a[href*="/stacks/metabolic/"]),
article.stack-card:has(a[href*="/stacks/gh-and-metabolic/"]) { border-top: 4px solid #FFE500 !important; }

article.stack-card:has(a[href*="/stacks/repair-and-metabolic/"]),
article.stack-card:has(a[href*="/stacks/ultimate-repair/"]) { border-top: 4px solid #4FC3F7 !important; }

article.stack-card:has(a[href*="/stacks/gh-peptide/"]) { border-top: 4px solid #69D98C !important; }

article.stack-card:has(a[href*="/stacks/skin-and-aesthetic/"]),
article.stack-card:has(a[href*="/stacks/anti-ageing/"]) { border-top: 4px solid #FF6B9D !important; }

/* ── Stack tiles — eyebrow badge text colour ── */
article.stack-card:has(a[href*="/stacks/cognitive/"]) .stack-card-eyebrow,
article.stack-card:has(a[href*="/stacks/cognitive-and-sleep/"]) .stack-card-eyebrow,
article.stack-card:has(a[href*="/stacks/advanced-cognitive/"]) .stack-card-eyebrow { color: #9B6DFF !important; }

article.stack-card:has(a[href*="/stacks/metabolic/"]) .stack-card-eyebrow,
article.stack-card:has(a[href*="/stacks/gh-and-metabolic/"]) .stack-card-eyebrow { color: #FFE500 !important; }

article.stack-card:has(a[href*="/stacks/repair-and-metabolic/"]) .stack-card-eyebrow,
article.stack-card:has(a[href*="/stacks/ultimate-repair/"]) .stack-card-eyebrow { color: #4FC3F7 !important; }

article.stack-card:has(a[href*="/stacks/gh-peptide/"]) .stack-card-eyebrow { color: #69D98C !important; }

article.stack-card:has(a[href*="/stacks/skin-and-aesthetic/"]) .stack-card-eyebrow,
article.stack-card:has(a[href*="/stacks/anti-ageing/"]) .stack-card-eyebrow { color: #FF6B9D !important; }

/* ── Stack tiles — "View stack →" action link colour ── */
article.stack-card:has(a[href*="/stacks/cognitive/"]) .stack-card-action,
article.stack-card:has(a[href*="/stacks/cognitive-and-sleep/"]) .stack-card-action,
article.stack-card:has(a[href*="/stacks/advanced-cognitive/"]) .stack-card-action { color: #9B6DFF !important; }

article.stack-card:has(a[href*="/stacks/metabolic/"]) .stack-card-action,
article.stack-card:has(a[href*="/stacks/gh-and-metabolic/"]) .stack-card-action { color: #FFE500 !important; }

article.stack-card:has(a[href*="/stacks/repair-and-metabolic/"]) .stack-card-action,
article.stack-card:has(a[href*="/stacks/ultimate-repair/"]) .stack-card-action { color: #4FC3F7 !important; }

article.stack-card:has(a[href*="/stacks/gh-peptide/"]) .stack-card-action { color: #69D98C !important; }

article.stack-card:has(a[href*="/stacks/skin-and-aesthetic/"]) .stack-card-action,
article.stack-card:has(a[href*="/stacks/anti-ageing/"]) .stack-card-action { color: #FF6B9D !important; }

/* ── Stack tiles — hover glow ── */
article.stack-card:has(a[href*="/stacks/cognitive/"]):hover,
article.stack-card:has(a[href*="/stacks/cognitive-and-sleep/"]):hover,
article.stack-card:has(a[href*="/stacks/advanced-cognitive/"]):hover { border-color: #9B6DFF !important; box-shadow: 0 0 14px rgba(155,109,255,0.35), 0 4px 20px rgba(155,109,255,0.10) !important; transform: translateY(-2px) !important; }

article.stack-card:has(a[href*="/stacks/metabolic/"]):hover,
article.stack-card:has(a[href*="/stacks/gh-and-metabolic/"]):hover { border-color: #FFE500 !important; box-shadow: 0 0 14px rgba(255,229,0,0.35), 0 4px 20px rgba(255,229,0,0.10) !important; transform: translateY(-2px) !important; }

article.stack-card:has(a[href*="/stacks/repair-and-metabolic/"]):hover,
article.stack-card:has(a[href*="/stacks/ultimate-repair/"]):hover { border-color: #4FC3F7 !important; box-shadow: 0 0 14px rgba(79,195,247,0.35), 0 4px 20px rgba(79,195,247,0.10) !important; transform: translateY(-2px) !important; }

article.stack-card:has(a[href*="/stacks/gh-peptide/"]):hover { border-color: #69D98C !important; box-shadow: 0 0 14px rgba(105,217,140,0.35), 0 4px 20px rgba(105,217,140,0.10) !important; transform: translateY(-2px) !important; }

article.stack-card:has(a[href*="/stacks/skin-and-aesthetic/"]):hover,
article.stack-card:has(a[href*="/stacks/anti-ageing/"]):hover { border-color: #FF6B9D !important; box-shadow: 0 0 14px rgba(255,107,157,0.35), 0 4px 20px rgba(255,107,157,0.10) !important; transform: translateY(-2px) !important; }

/* ── Stack detail pages — section accents (stack-comp-link, order meta icons) ── */
body.page-cat-cognitive  .stack-comp-link,
body.page-cat-cognitive  .cpom-ic { color: #9B6DFF !important; }

body.page-cat-metabolic  .stack-comp-link,
body.page-cat-metabolic  .cpom-ic { color: #FFE500 !important; }

body.page-cat-healing    .stack-comp-link,
body.page-cat-healing    .cpom-ic { color: #4FC3F7 !important; }

body.page-cat-growth     .stack-comp-link,
body.page-cat-growth     .cpom-ic { color: #69D98C !important; }

body.page-cat-antiageing .stack-comp-link,
body.page-cat-antiageing .cpom-ic { color: #FF6B9D !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   STACKS ORANGE CTA COLOUR SYSTEM  #FF6B00
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stacks category tile (in cat-grid on homepage + catalogue) ── */
a.cat-tile[href="/stacks/"]               { border-top: 4px solid #FF6B00 !important; }
a.cat-tile[href="/stacks/"] .cat-tile-eyebrow,
a.cat-tile[href="/stacks/"] .cat-tile-count,
a.cat-tile[href="/stacks/"] .cat-tile-name,
a.cat-tile[href="/stacks/"] .cat-tile-action { color: #FF6B00 !important; }

/* ── Homepage stacks section — eyebrow label + primary CTA button + outline CTA ── */
.hp-sec-stacks .hp-block-eyebrow { color: #FF6B00 !important; }
.hp-stacks-cta.btn-p { background: #FF6B00 !important; border-color: #FF6B00 !important; color: #000 !important; }
.hp-stacks-cta.btn-p:hover { background: #e05f00 !important; border-color: #e05f00 !important; }
.hp-block-ft a.btn-o[href*="/stacks/"] { color: #FF6B00 !important; border-color: #FF6B00 !important; }
.hp-block-ft a.btn-o[href*="/stacks/"]:hover { background: rgba(255,107,0,.08) !important; color: #FF6B00 !important; }

/* ── Stacks hub page — breadcrumb accent + "View stack →" links + hover glow ──
   These must appear after the per-category rules above to win via source order   */
body.page-stacks-root .bc-current { color: #FF6B00 !important; }
body.page-stacks-root article.stack-card .stack-card-action { color: #FF6B00 !important; }
body.page-stacks-root article.stack-card:hover { border-color: #FF6B00 !important; box-shadow: 0 0 14px rgba(255,107,0,0.35), 0 4px 20px rgba(255,107,0,0.10) !important; transform: translateY(-2px) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   CAT-GRID 6-COLUMN LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

/* Desktop default: all 6 cards in a single row */
.cat-grid {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 12px !important;
}
.cat-tile {
  padding: 16px 14px !important;
}
.cat-tile-name {
  font-size: 18px !important;
}

/* Tablet 768–1023px: 3×2 */
@media (min-width: 768px) and (max-width: 1023px) {
  .cat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
  .cat-tile {
    padding: 18px 16px !important;
  }
  .cat-tile-name {
    font-size: 20px !important;
  }
}

/* Mobile ≤767px: 2×3 */
@media (max-width: 767px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .cat-tile {
    padding: 14px 12px !important;
  }
  .cat-tile-name {
    font-size: 15px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2-COLUMN PRODUCT GRID ON MOBILE (≤768px)
   Overrides all previous 1-col mobile rules for prod-grid / prod-grid-4
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Grid: 2 columns — generic + page-specific selectors to beat higher-specificity
     rules on .page-catalogue and .page-category bodies */
  .prod-grid,
  .prod-grid-4,
  .page-catalogue .prod-grid,
  .page-category  .prod-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Card: ensure flex-column so body can grow and price sticks to bottom */
  .cc {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Card body: 12px all sides, grow to fill card */
  .cc-body {
    padding: 12px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Header row: category badge + optional tag */
  .cc-hdr {
    gap: 5px !important;
    margin-bottom: 6px !important;
  }

  /* Category badge: keep small, breathe below it */
  .cc-cat {
    font-size: 0.65rem !important;
    letter-spacing: .05em !important;
  }
  .cc-tag {
    font-size: 7px !important;
    padding: 2px 5px !important;
  }

  /* Product name: readable at half-width, no truncation */
  .cc-name {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    margin-bottom: 4px !important;
  }

  /* Scientific full name */
  .cc-full {
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }

  /* Meta (purity/CAS) */
  .cc-meta {
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }

  /* Description: 2-line clamp */
  .cc-desc {
    font-size: 11px !important;
    -webkit-line-clamp: 2 !important;
    margin-bottom: 0 !important;
  }

  /* Footer row: push to bottom of card */
  .cc-ft {
    margin-top: auto !important;
    padding-top: 10px !important;
    gap: 8px !important;
    align-items: flex-end !important;
  }

  /* Price block: column-stacked, separated from name above */
  .cc-price-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin-top: 8px !important;
  }

  /* Struck-out original price: own line, muted, small */
  .cc-was {
    font-size: 0.75rem !important;
    color: #555 !important;
    line-height: 1.2 !important;
  }

  /* Main price: own line, bold, teal, larger */
  .cc-price,
  .cc-price-block .cc-price {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #01D3A0 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
  }

  /* Save / Best Price badge: own line below price */
  .cc-badge {
    font-size: 7px !important;
    padding: 2px 5px !important;
    margin-top: 3px !important;
    display: inline-block !important;
  }

  /* Add-to-cart button: compact, flex-shrink so price gets space */
  .cc-atc {
    flex-shrink: 0 !important;
    padding: 8px 9px !important;
    font-size: 9px !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
    align-self: flex-end !important;
  }
}

/* Very small phones ≤380px: single column */
@media (max-width: 380px) {
  .cat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Category cards: larger name on mobile ── */
@media (max-width: 768px) {
  .cat-tile-name {
    font-size: 1.4rem !important;
    line-height: 1.1 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT CARD DIVIDER — follows name, not floating at footer
   Move border from .cc-ft (bottom of card) to .cc-name-link (below name text)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Divider attached to name: appears immediately below name text at every height */
.cc-name-link {
  border-bottom: 1px solid #1e2228 !important;
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
}

/* Remove the old floating divider from the footer row */
.cc-ft {
  border-top: none !important;
  padding-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT CARD — centre all text content
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card body: centre all inline/text content */
.cc-body {
  text-align: center !important;
}

/* Header row (category badge): centre horizontally */
.cc-hdr {
  justify-content: center !important;
}

/* Name link / divider: full width so border spans card, text centred via inheritance */
.cc-name-link {
  width: 100% !important;
}

/* Price block: stack centred */
.cc-price-block {
  align-items: center !important;
}

/* Footer row (price + ATC): centre both items */
.cc-ft {
  justify-content: center !important;
}

/* ── Category cards: centre name both axes (cards now contain only h3) ── */
.cat-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 80px !important;
}
.cat-tile-name {
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CATALOGUE PAGE — category section dividers
   Inserted before each .cat-group section in output/compounds/index.html
   ═══════════════════════════════════════════════════════════════════════════ */

.cat-divider {
  padding-top: 48px;
  margin-bottom: 48px;
}

/* Label above the line */
.cat-divider::before {
  content: attr(data-label);
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* The line itself */
.cat-divider::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
}

/* ── Cognitive — #9B6DFF ── */
.cat-divider-cognitive::before {
  color: #9B6DFF;
}
.cat-divider-cognitive::after {
  background: rgba(155, 109, 255, 0.3);
  box-shadow: 0 0 8px 1px rgba(155, 109, 255, 0.35);
}

/* ── Metabolic — #FFE500 ── */
.cat-divider-metabolic::before {
  color: #FFE500;
}
.cat-divider-metabolic::after {
  background: rgba(255, 229, 0, 0.3);
  box-shadow: 0 0 8px 1px rgba(255, 229, 0, 0.35);
}

/* ── Healing & Repair — #4FC3F7 ── */
.cat-divider-healing::before {
  color: #4FC3F7;
}
.cat-divider-healing::after {
  background: rgba(79, 195, 247, 0.3);
  box-shadow: 0 0 8px 1px rgba(79, 195, 247, 0.35);
}

/* ── Growth — #69D98C ── */
.cat-divider-growth::before {
  color: #69D98C;
}
.cat-divider-growth::after {
  background: rgba(105, 217, 140, 0.3);
  box-shadow: 0 0 8px 1px rgba(105, 217, 140, 0.35);
}

/* ── Anti-Ageing — #FF6B9D ── */
.cat-divider-antiageing::before {
  color: #FF6B9D;
}
.cat-divider-antiageing::after {
  background: rgba(255, 107, 157, 0.3);
  box-shadow: 0 0 8px 1px rgba(255, 107, 157, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT — discount code section (payment page sidebar)
   ═══════════════════════════════════════════════════════════════════════════ */

.co-discount-wrap {
  padding: 12px 0 14px;
  border-bottom: 1px solid #1a1d24;
  margin-bottom: 4px;
}

.co-discount-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.co-discount-inp {
  flex: 1;
  font-size: 13px !important;
  padding: 9px 12px !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #0d1017 !important;
  border-color: #2a2f3a !important;
}

.co-discount-inp::placeholder {
  text-transform: none;
  letter-spacing: 0;
  color: #4b5563;
}

.co-discount-inp:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.co-discount-btn {
  flex-shrink: 0;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid #2a2f3a;
  color: #9CA3AF;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.co-discount-btn:hover:not(:disabled) {
  border-color: #01D3A0;
  color: #01D3A0;
}

.co-discount-btn:disabled {
  border-color: #01D3A0;
  color: #01D3A0;
  cursor: default;
  opacity: 0.85;
}

.co-discount-msg {
  margin-top: 8px;
  font-size: 12px;
  min-height: 18px;
}

.dc-ok {
  color: #01D3A0;
  font-weight: 500;
}

.dc-err {
  color: #f87171;
}

/* Discount saving row in totals */
.co-discount-line {
  font-size: 13px;
}

.co-discount-saving {
  color: #01D3A0;
  font-weight: 600;
}