/* ============================== TOKENS ============================== */
:root{
  --paper:#09090F;
  --mist:#101019;
  --mist-2:#15131F;
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.18);
  --ink:#EAF2F7;
  --navy:#F5F8FC;
  --navy-2:#0C0C16;
  --slate:#9CA7B9;
  --slate-light:#6C7686;
  --blue:#1FD3F0;
  --blue-deep:#15B7DA;
  --blue-tint:rgba(31,211,240,.14);
  --ok:#33D98E;
  --star:#F0B340;
  --surface:#14151F;
  --surface-2:#1C1D2B;
  --purple:#9A48F5;
  --purple-tint:rgba(154,72,245,.16);
  --brand-dark:#0B0B14;
  --grad:linear-gradient(135deg,#1FD3F0 0%,#9A48F5 100%);
  --radius:14px;
  --radius-sm:9px;
  --radius-btn:8px;
  --shadow-sm:0 1px 2px rgba(11,15,23,.04), 0 1px 1px rgba(11,15,23,.03);
  --shadow:0 10px 30px -14px rgba(14,27,51,.22), 0 4px 10px -6px rgba(14,27,51,.10);
  --shadow-lg:0 30px 70px -30px rgba(14,27,51,.34);
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  font-weight:400; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:450; line-height:1.08; letter-spacing:-.02em; color:var(--navy)}
p{margin:0}
ul{margin:0}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:4px}
::selection{background:var(--navy); color:#fff}

/* ============================== LAYOUT ============================== */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.section{padding:96px 0}
.section.tight{padding:64px 0}
.band{background:var(--mist)}
.band-navy{background:var(--navy); color:#fff}
.center{text-align:center}
.eyebrow{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin:0 0 16px}
.band-navy .eyebrow{color:#8FB0FF}
.shead{max-width:640px; margin:0 0 48px}
.shead.center{margin-left:auto; margin-right:auto}
.shead h2{font-size:clamp(30px,4.4vw,46px)}
.shead p{margin-top:16px; color:var(--slate); font-size:18px; line-height:1.55}
.band-navy .shead h2{color:#fff}
.band-navy .shead p{color:#B9C4D6}
.lede{font-size:18px; color:var(--slate); line-height:1.65}

/* ============================== BUTTONS ============================== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  padding:13px 24px; border-radius:var(--radius-btn); border:1px solid transparent;
  transition:transform .18s var(--ease), background .18s, color .18s, border-color .18s, box-shadow .18s;
  white-space:nowrap;}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy); color:#fff; border-color:var(--navy)}
.btn-primary:hover{background:var(--ink); box-shadow:var(--shadow)}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--navy); background:var(--surface)}
.btn-blue{background:var(--blue); color:#fff; border-color:var(--blue)}
.btn-blue:hover{background:var(--blue-deep)}
.btn-light{background:var(--surface); color:var(--navy); border-color:#fff}
.btn-light:hover{background:#EEF1F6}
.btn-block{width:100%}
.btn-lg{padding:16px 30px; font-size:15.5px}
.btn-sm{padding:10px 16px; font-size:13.5px}
.btn svg{width:17px; height:17px}

/* ============================== HEADER ============================== */
.topbar{background:var(--navy); color:#fff; font-family:var(--mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase}
.topbar .wrap{display:flex; align-items:center; justify-content:center; gap:28px; min-height:36px; text-align:center}
.topbar span{display:inline-flex; align-items:center; gap:7px; color:#C3D0E6}
.topbar .dot{width:4px; height:4px; border-radius:50%; background:#8FB0FF}
.topbar .hide-sm{display:inline-flex}
header.nav{position:sticky; top:0; z-index:80; background:rgba(11,11,20,.74); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line); transition:box-shadow .25s, background .25s}
header.nav.scrolled{box-shadow:0 6px 24px -16px rgba(14,27,51,.3)}
.navrow{display:flex; align-items:center; gap:22px; min-height:70px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--serif); font-size:22px; font-weight:500; letter-spacing:-.02em; color:var(--navy); margin-right:6px}
.brand .mark{width:30px; height:30px; border-radius:8px; background:var(--navy); color:#fff; display:grid; place-items:center; font-family:var(--serif); font-size:17px; flex:none}
.brand small{font-family:var(--mono); font-size:8.5px; letter-spacing:.22em; color:var(--slate-light); text-transform:uppercase; display:block; margin-top:2px}
.brand .stack{display:flex; flex-direction:column; line-height:1}
.mainnav{display:flex; align-items:center; gap:3px; margin-left:6px}
.mainnav a{padding:9px 13px; border-radius:7px; font-size:14.5px; font-weight:500; color:var(--ink); transition:background .15s, color .15s}
.mainnav a:hover,.mainnav a.active{background:var(--mist); color:var(--navy)}
.navactions{margin-left:auto; display:flex; align-items:center; gap:4px}
.iconbtn{width:42px; height:42px; border:none; background:transparent; border-radius:9px; display:grid; place-items:center; color:var(--navy); position:relative; transition:background .15s}
.iconbtn:hover{background:var(--mist)}
.iconbtn svg{width:20px; height:20px}
.count{position:absolute; top:5px; right:5px; min-width:17px; height:17px; padding:0 4px; background:var(--blue); color:#fff; border-radius:9px; font-family:var(--mono); font-size:10px; font-weight:500; display:grid; place-items:center; line-height:1}
.count:empty,.count[data-n="0"]{display:none}
.burger{display:none}
/* search bar */
.searchwrap{display:none; padding:14px 0; border-top:1px solid var(--line)}
.searchwrap.open{display:block}
.searchbar{display:flex; align-items:center; gap:10px; background:var(--mist); border:1px solid var(--line); border-radius:11px; padding:12px 16px}
.searchbar input{flex:1; border:none; background:transparent; font-family:var(--sans); font-size:16px; color:var(--ink); outline:none}
.searchbar svg{width:19px; height:19px; color:var(--slate)}

/* ============================== HERO ============================== */
.hero{position:relative; overflow:hidden; background:
   radial-gradient(70% 80% at 86% 0%, rgba(154,72,245,.26) 0%, rgba(154,72,245,0) 60%),
   radial-gradient(60% 70% at 8% 12%, rgba(31,211,240,.18) 0%, rgba(31,211,240,0) 58%),
   linear-gradient(180deg,rgba(12,12,22,.82) 0%,rgba(9,9,15,.9) 100%)}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding-top:74px; padding-bottom:74px}
.hero-tag{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--navy); background:var(--surface); border:1px solid var(--line-strong); padding:7px 13px; border-radius:999px; box-shadow:var(--shadow-sm)}
.hero-tag .pulse{width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(30,142,90,.4); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,142,90,.4)}70%{box-shadow:0 0 0 7px rgba(30,142,90,0)}100%{box-shadow:0 0 0 0 rgba(30,142,90,0)}}
.hero h1{font-size:clamp(40px,6.2vw,68px); font-weight:450; line-height:1.02; margin:22px 0 0; letter-spacing:-.03em}
.hero h1 em{font-style:italic; font-weight:450; color:var(--blue)}
.hero .lede{margin-top:22px; max-width:480px}
.hero-cta{margin-top:34px; display:flex; gap:12px; flex-wrap:wrap}
.hero-meta{margin-top:36px; display:flex; gap:30px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--line)}
.hero-meta .num{font-family:var(--serif); font-size:28px; color:var(--navy); line-height:1}
.hero-meta .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--slate); margin-top:6px}
.hero-visual{position:relative}
.hero-card{background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-lg); padding:26px; position:relative; overflow:hidden}
.hero-card .lab-strip{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-light); margin-bottom:14px}
.hero-float{position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); padding:11px 14px; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--navy)}
.hero-float .ic{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none}
.hero-float.f1{bottom:26px; left:-18px}
.hero-float.f2{top:30px; right:-14px}
.hero-float small{display:block; font-family:var(--mono); font-size:9.5px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); margin-top:1px}

/* ============================== TRUST STRIP ============================== */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface)}
.trust .wrap{display:grid; grid-template-columns:repeat(6,1fr); gap:0}
.trust .item{padding:26px 18px; text-align:center; border-right:1px solid var(--line)}
.trust .item:last-child{border-right:none}
.trust .item svg{width:24px; height:24px; margin:0 auto 11px; color:var(--blue)}
.trust .item .t{font-size:13.5px; font-weight:600; color:var(--navy)}
.trust .item .s{font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--slate-light); margin-top:4px}

/* ============================== CATEGORY GRID ============================== */
.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.cat{position:relative; border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:var(--surface); overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; min-height:172px; display:flex; flex-direction:column; justify-content:space-between}
.cat:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-strong)}
.cat .glyph{width:46px; height:46px; border-radius:11px; display:grid; place-items:center}
.cat .glyph svg{width:23px; height:23px}
.cat h3{font-size:19px; margin-top:auto}
.cat .meta{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--slate); margin-top:7px; display:flex; align-items:center; gap:7px}
.cat .arrow{position:absolute; top:22px; right:22px; color:var(--slate-light); transition:transform .25s var(--ease), color .2s}
.cat:hover .arrow{transform:translate(3px,-3px); color:var(--navy)}

/* ============================== PRODUCT CARDS ============================== */
.grid-products{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.grid-products.cols-3{grid-template-columns:repeat(3,1fr)}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; position:relative}
.pcard:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line-strong)}
.pcard .media{position:relative; aspect-ratio:1/1; cursor:pointer; overflow:hidden}
.pcard .media svg{width:100%; height:100%}
.pimg{width:100%; height:100%; object-fit:cover; background:var(--surface); display:block}
.pcard .ribbon{position:absolute; top:13px; left:13px; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; background:var(--navy); color:#fff; padding:5px 9px; border-radius:6px; z-index:2}
.pcard .ribbon.blue{background:var(--blue)}
.wishbtn{position:absolute; top:11px; right:11px; width:36px; height:36px; border-radius:50%; background:rgba(22,23,33,.92); border:1px solid var(--line); display:grid; place-items:center; z-index:2; color:var(--slate); transition:color .15s, transform .15s, background .15s}
.wishbtn:hover{transform:scale(1.08); color:var(--navy)}
.wishbtn.on{color:#D7443B; border-color:#F2C9C5; background:#FFF2F1}
.wishbtn svg{width:18px; height:18px}
.pcard .body{padding:18px 18px 20px; display:flex; flex-direction:column; flex:1}
.pcard .cattag{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:8px}
.pcard h3{font-size:18.5px; line-height:1.12; cursor:pointer}
.pcard .desc{font-size:13.5px; color:var(--slate); margin-top:8px; line-height:1.5}
.stars{display:inline-flex; align-items:center; gap:4px; margin-top:11px; font-size:12.5px; color:var(--slate)}
.stars .s{display:inline-flex; gap:1px; color:var(--star)}
.stars .s svg{width:14px; height:14px}
.pcard .priceline{margin-top:14px; display:flex; align-items:baseline; gap:9px}
.pcard .price{font-family:var(--serif); font-size:23px; color:var(--navy)}
.pcard .was{font-size:13px; color:var(--slate-light); text-decoration:line-through}
.pcard .per{font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--slate-light)}
.pcard .actions{margin-top:16px; display:grid; grid-template-columns:1fr auto; gap:8px}

/* ============================== WHY / FEATURE ROWS ============================== */
.why{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.why .cell{padding:30px 24px; border-right:1px solid var(--line)}
.why .cell:last-child{border-right:none}
.why .n{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--blue); margin-bottom:18px}
.why .cell h3{font-size:18px; margin-bottom:10px}
.why .cell p{font-size:14px; color:var(--slate); line-height:1.55}

/* split feature */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.checklist{margin-top:26px; display:flex; flex-direction:column; gap:16px}
.checklist li{list-style:none; display:flex; gap:13px; align-items:flex-start}
.checklist .ck{width:24px; height:24px; border-radius:7px; background:var(--blue-tint); color:var(--blue); display:grid; place-items:center; flex:none; margin-top:1px}
.checklist .ck svg{width:14px; height:14px}
.checklist b{display:block; font-size:15px; color:var(--navy); font-weight:600}
.checklist span{font-size:14px; color:var(--slate)}

/* ============================== REVIEWS ============================== */
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.rev{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column}
.band-navy .rev{background:var(--navy-2); border-color:rgba(255,255,255,.08)}
.rev .stars{margin-top:0; margin-bottom:14px}
.rev .quote{font-size:16px; line-height:1.6; color:var(--ink); flex:1}
.band-navy .rev .quote{color:#E8EDF6}
.rev .who{margin-top:20px; display:flex; align-items:center; gap:12px}
.rev .av{width:40px; height:40px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:600; font-size:15px; flex:none}
.rev .who b{font-size:14px; display:block; color:var(--navy)}
.band-navy .rev .who b{color:#fff}
.rev .who small{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--slate); text-transform:uppercase}
.band-navy .rev .who small{color:#9FB0CC}
.verified{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ok); margin-top:7px}

/* ============================== BLOG ============================== */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.post{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s; display:flex; flex-direction:column; cursor:pointer}
.post:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.post .cover{aspect-ratio:16/10}
.post .pbody{padding:22px}
.post .cat{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue)}
.post h3{font-size:20px; margin:11px 0 9px; line-height:1.18}
.post p{font-size:14px; color:var(--slate); line-height:1.55}
.post .read{margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); display:flex; gap:10px}

/* ============================== NEWSLETTER ============================== */
.news{background:var(--navy); border-radius:24px; padding:64px; text-align:center; position:relative; overflow:hidden; color:#fff}
.news::before{content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 50% -20%, rgba(43,84,224,.4), transparent 60%); pointer-events:none}
.news h2{color:#fff; font-size:clamp(28px,4vw,42px); position:relative}
.news p{color:#B9C4D6; max-width:480px; margin:16px auto 0; position:relative; font-size:17px}
.news form{position:relative; margin:30px auto 0; max-width:480px; display:flex; gap:10px}
.news input{flex:1; padding:15px 18px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); color:#fff; font-family:var(--sans); font-size:15px; outline:none}
.news input::placeholder{color:#8C9AB4}
.news input:focus{border-color:#8FB0FF}
.news .fineprint{position:relative; margin-top:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:#8C9AB4}

/* ============================== FOOTER ============================== */
footer{background:var(--navy); color:#C3CDDD; padding:72px 0 36px}
.fgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px}
footer .brand{color:#fff}
footer .brand .mark{background:var(--surface); color:var(--navy)}
footer .brand small{color:#7E8DA8}
footer .ftag{margin-top:18px; font-size:14px; color:#9FAAC0; max-width:280px; line-height:1.6}
footer h4{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#7E8DA8; margin-bottom:18px}
footer ul li{list-style:none; margin-bottom:11px}
footer ul a{font-size:14px; color:#C3CDDD; transition:color .15s}
footer ul a:hover{color:#fff}
.fsocial{display:flex; gap:10px; margin-top:20px}
.fsocial a{width:38px; height:38px; border-radius:9px; border:1px solid rgba(255,255,255,.12); display:grid; place-items:center; color:#C3CDDD; transition:background .15s, color .15s}
.fsocial a:hover{background:var(--surface); color:var(--navy)}
.fsocial svg{width:17px; height:17px}
.fbar{margin-top:52px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.fbar .legal{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#7E8DA8}
.pays{display:flex; gap:7px; align-items:center}
.pays .pay{height:24px; padding:0 9px; border-radius:5px; background:rgba(255,255,255,.1); display:grid; place-items:center; font-family:var(--mono); font-size:9px; letter-spacing:.04em; color:#C3CDDD; font-weight:500}

/* ============================== PAGE HEADER ============================== */
.pagehead{background:var(--mist); border-bottom:1px solid var(--line); padding:48px 0 44px}
.crumbs{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); display:flex; gap:9px; align-items:center; margin-bottom:18px}
.crumbs a:hover{color:var(--navy)}
.crumbs .sep{color:var(--slate-light)}
.pagehead h1{font-size:clamp(32px,4.6vw,50px)}
.pagehead p{margin-top:14px; color:var(--slate); font-size:18px; max-width:620px}

/* ============================== SHOP ============================== */
.shoplayout{display:grid; grid-template-columns:248px 1fr; gap:36px; align-items:start}
.filters{position:sticky; top:88px; border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:var(--surface)}
.fgroup{padding:18px 0; border-bottom:1px solid var(--line)}
.fgroup:first-child{padding-top:0}
.fgroup:last-child{border-bottom:none; padding-bottom:0}
.fgroup h4{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); margin-bottom:14px}
.fopt{display:flex; align-items:center; gap:10px; padding:6px 0; font-size:14px; color:var(--slate); cursor:pointer}
.fopt:hover{color:var(--navy)}
.fopt input{width:16px; height:16px; accent-color:var(--blue)}
.fopt.active{color:var(--navy); font-weight:600}
.fopt .ct{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--slate-light)}
.shoptop{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.shoptop .resn{font-size:14px; color:var(--slate)}
.shoptop .resn b{color:var(--navy)}
.sortsel{display:flex; align-items:center; gap:10px}
.sortsel select{font-family:var(--sans); font-size:14px; padding:9px 14px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--navy); outline:none; cursor:pointer}
.chiprow{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.chip{font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:7px 12px; border:1px solid var(--line-strong); border-radius:999px; color:var(--slate); background:var(--surface); transition:all .15s}
.chip:hover{border-color:var(--navy); color:var(--navy)}
.chip.active{background:var(--navy); color:#fff; border-color:var(--navy)}
.empty{text-align:center; padding:70px 20px; color:var(--slate)}
.empty svg{width:46px; height:46px; margin:0 auto 18px; color:var(--slate-light)}

/* ============================== PRODUCT DETAIL ============================== */
.pdp{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.gallery .main{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1; position:sticky; top:90px}
.gallery .main svg{width:100%; height:100%}
.thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px}
.thumb{border:1px solid var(--line); border-radius:10px; overflow:hidden; aspect-ratio:1/1; cursor:pointer; transition:border-color .15s}
.thumb.active{border-color:var(--navy); border-width:2px}
.pdp-info .cattag{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue)}
.pdp-info h1{font-size:clamp(30px,4vw,42px); margin:12px 0 14px; line-height:1.05}
.pdp-info .sub{font-size:17px; color:var(--slate); line-height:1.55}
.pdp-rating{display:flex; align-items:center; gap:12px; margin:18px 0 24px; padding-bottom:24px; border-bottom:1px solid var(--line)}
.priceblock{display:flex; align-items:baseline; gap:12px; margin-bottom:6px}
.priceblock .big{font-family:var(--serif); font-size:38px; color:var(--navy)}
.priceblock .was{font-size:18px; color:var(--slate-light); text-decoration:line-through}
.priceblock .save{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ok); background:#E8F5EE; padding:5px 9px; border-radius:6px}
.perserv{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--slate); margin-bottom:24px}
.purchase{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:22px}
.poption{display:flex; gap:14px; padding:18px; border-bottom:1px solid var(--line); cursor:pointer; align-items:flex-start; transition:background .15s}
.poption:last-child{border-bottom:none}
.poption:hover{background:var(--mist)}
.poption.active{background:var(--blue-tint)}
.poption .radio{width:20px; height:20px; border-radius:50%; border:2px solid var(--line-strong); flex:none; margin-top:2px; display:grid; place-items:center; transition:border-color .15s}
.poption.active .radio{border-color:var(--blue)}
.poption.active .radio::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--blue)}
.poption .ptitle{font-size:15px; font-weight:600; color:var(--navy); display:flex; align-items:center; gap:9px}
.poption .ptitle .tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; background:var(--blue); color:#fff; padding:3px 7px; border-radius:5px}
.poption .pdesc{font-size:13px; color:var(--slate); margin-top:4px}
.poption .pp{margin-left:auto; text-align:right; flex:none}
.poption .pp b{font-family:var(--serif); font-size:20px; color:var(--navy)}
.poption .pp small{display:block; font-family:var(--mono); font-size:10px; color:var(--slate-light)}
.staffel{border:1px solid var(--line); border-radius:var(--radius); padding:15px 18px; margin-bottom:22px; background:linear-gradient(180deg, var(--blue-tint), transparent)}
.staffel .st-h{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--navy); font-size:15px}
.staffel .st-h svg{width:16px; height:16px; color:var(--blue)}
.staffel .st-b{font-size:13.5px; color:var(--slate); margin-top:6px; line-height:1.5}
.staffel .st-note{font-family:var(--mono); font-size:12px; color:var(--ok); margin-top:9px; font-weight:600}
.staffel .st-note:empty{display:none}
.qtyrow{display:flex; gap:14px; margin-bottom:16px}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:9px; overflow:hidden}
.qty button{width:46px; height:50px; border:none; background:var(--surface); font-size:18px; color:var(--navy)}
.qty button:hover{background:var(--mist)}
.qty span{width:48px; text-align:center; font-family:var(--mono); font-size:15px; font-weight:500}
.pdp-trust{display:flex; gap:22px; margin-top:20px; flex-wrap:wrap}
.pdp-trust .pt{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--slate)}
.pdp-trust .pt svg{width:18px; height:18px; color:var(--blue)}

/* tabs / sections in pdp */
.pdp-sections{margin-top:80px}
.tabbar{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:36px; overflow-x:auto}
.tabbar button{padding:14px 18px; border:none; background:transparent; font-family:var(--sans); font-size:15px; font-weight:600; color:var(--slate); border-bottom:2px solid transparent; white-space:nowrap}
.tabbar button.active{color:var(--navy); border-bottom-color:var(--navy)}
.panel{display:none; animation:fade .3s var(--ease)}
.panel.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.prose{max-width:760px; font-size:16px; line-height:1.75; color:var(--ink)}
.prose p{margin-bottom:18px}
.prose h3{font-size:24px; margin:34px 0 14px}
.prose ul{margin:0 0 18px; padding-left:0}
.prose ul li{list-style:none; padding-left:28px; position:relative; margin-bottom:10px; color:var(--slate)}
.prose ul li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--blue)}

/* ingredient table */
.ingtable{width:100%; border-collapse:collapse; font-size:14px; max-width:760px}
.ingtable th{text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); padding:12px 16px; border-bottom:2px solid var(--navy); background:var(--mist)}
.ingtable td{padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top}
.ingtable td.name{font-weight:600; color:var(--navy)}
.ingtable td.amt{font-family:var(--mono); color:var(--navy); white-space:nowrap}
.ingtable td.note{color:var(--slate); font-size:13px}

/* SPECIFICATION PANEL */
.sfacts{max-width:380px; border:2px solid var(--ink); border-radius:6px; padding:14px 16px; font-family:var(--sans); background:var(--surface)}
.sfacts .sf-title{font-family:var(--serif); font-weight:600; font-size:30px; color:var(--ink); line-height:1; padding-bottom:6px; border-bottom:9px solid var(--ink)}
.sfacts .sf-row{display:flex; justify-content:space-between; font-size:13.5px; padding:5px 0; border-bottom:1px solid var(--ink)}
.sfacts .sf-row.thin{border-bottom:1px solid #BCC3CC}
.sfacts .sf-serv{font-size:13.5px; padding:6px 0; display:flex; justify-content:space-between}
.sfacts .sf-head{display:flex; justify-content:space-between; font-size:11px; font-weight:700; padding:4px 0; border-bottom:7px solid var(--ink)}
.sfacts .sf-head .dv{text-align:right}
.sfacts .sf-row b{font-weight:700}
.sfacts .sf-row .dv{font-weight:700; text-align:right}
.sfacts .sf-foot{font-size:10.5px; color:var(--slate); margin-top:8px; line-height:1.5}
.sfacts .sf-star{border-bottom:7px solid var(--ink); padding-bottom:4px; margin-bottom:6px}
.sf-wrap{display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:start}
.sf-side h3{font-size:22px; margin-bottom:12px}
.sf-side p{color:var(--slate); font-size:15px; line-height:1.65; margin-bottom:14px}
.sf-side .lotbox{font-family:var(--mono); font-size:11.5px; color:var(--slate); background:var(--mist); border:1px solid var(--line); border-radius:9px; padding:14px 16px; line-height:1.9}
.sf-side .lotbox b{color:var(--navy)}

/* review summary */
.revsum{display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:center; padding:30px; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:32px; background:var(--mist)}
.revsum .big{font-family:var(--serif); font-size:64px; color:var(--navy); line-height:1}
.revsum .bars{display:flex; flex-direction:column; gap:8px}
.revsum .bar{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--slate)}
.revsum .track{flex:1; height:7px; background:var(--line); border-radius:4px; overflow:hidden}
.revsum .fill{height:100%; background:var(--star); border-radius:4px}

/* ============================== CART DRAWER ============================== */
.scrim{position:fixed; inset:0; background:rgba(11,15,23,.45); z-index:100; opacity:0; visibility:hidden; transition:opacity .3s}
.scrim.open{opacity:1; visibility:visible}
.drawer{position:fixed; top:0; right:0; height:100%; width:420px; max-width:90vw; background:var(--surface); z-index:101; transform:translateX(100%); transition:transform .35s var(--ease); display:flex; flex-direction:column; box-shadow:var(--shadow-lg)}
.drawer.open{transform:none}
.drawer .dhead{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line)}
.drawer .dhead h3{font-size:20px}
.drawer .ditems{flex:1; overflow-y:auto; padding:8px 24px}
.citem{display:grid; grid-template-columns:74px 1fr auto; gap:14px; padding:18px 0; border-bottom:1px solid var(--line)}
.citem .cimg{border:1px solid var(--line); border-radius:10px; overflow:hidden; aspect-ratio:1/1}
.citem h4{font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--navy); line-height:1.25}
.citem .csub{font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--slate); margin-top:4px}
.citem .cqty{display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:7px; margin-top:10px; overflow:hidden}
.citem .cqty button{width:28px; height:28px; border:none; background:var(--surface); color:var(--navy); font-size:14px}
.citem .cqty button:hover{background:var(--mist)}
.citem .cqty span{width:30px; text-align:center; font-family:var(--mono); font-size:13px}
.citem .cprice{font-family:var(--serif); font-size:18px; color:var(--navy); text-align:right}
.citem .rm{margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--slate-light); background:none; border:none; padding:0}
.citem .rm:hover{color:#D7443B}
.drawer .dfoot{padding:22px 24px; border-top:1px solid var(--line); background:var(--mist)}
.drawer .drow{display:flex; justify-content:space-between; font-size:14px; color:var(--slate); margin-bottom:9px}
.drawer .drow.total{font-size:18px; color:var(--navy); font-weight:600; margin:14px 0 18px; padding-top:14px; border-top:1px solid var(--line)}
.drawer .drow.total b{font-family:var(--serif); font-size:24px; font-weight:500}
.cartempty{padding:60px 24px; text-align:center; color:var(--slate)}
.cartempty svg{width:52px; height:52px; color:var(--line-strong); margin:0 auto 18px}
.shipnudge{font-family:var(--mono); font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:var(--ok); background:#E8F5EE; padding:11px 14px; border-radius:9px; margin-bottom:14px; text-align:center}

/* ============================== CART PAGE / CHECKOUT ============================== */
.cartpage{display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start}
.cartlist{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden}
.cartline{display:grid; grid-template-columns:96px 1fr auto auto; gap:20px; align-items:center; padding:22px; border-bottom:1px solid var(--line)}
.cartline:last-child{border-bottom:none}
.cartline .climg{border:1px solid var(--line); border-radius:10px; overflow:hidden; aspect-ratio:1/1}
.cartline h4{font-family:var(--sans); font-size:16px; font-weight:600; color:var(--navy)}
.cartline .csub{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); margin-top:5px}
.summary{border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:var(--surface); position:sticky; top:90px}
.summary h3{font-size:20px; margin-bottom:20px}
.srow{display:flex; justify-content:space-between; font-size:14.5px; color:var(--slate); margin-bottom:13px}
.srow b{color:var(--navy)}
.srow.tot{font-size:19px; color:var(--navy); font-weight:600; padding-top:16px; margin-top:6px; border-top:1px solid var(--line)}
.srow.tot b{font-family:var(--serif); font-size:26px; font-weight:500}
.promo{display:flex; gap:8px; margin:18px 0}
.promo input{flex:1; padding:11px 14px; border:1px solid var(--line-strong); border-radius:8px; font-family:var(--sans); font-size:14px; outline:none}
.coflow{display:grid; grid-template-columns:1fr 400px; gap:48px; align-items:start}
.steps{display:flex; gap:8px; margin-bottom:34px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.steps .st{display:flex; align-items:center; gap:9px; color:var(--slate-light)}
.steps .st .b{width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line-strong); display:grid; place-items:center; font-size:11px}
.steps .st.done{color:var(--navy)}
.steps .st.done .b{background:var(--navy); color:#fff; border-color:var(--navy)}
.steps .sl{flex:1; height:1px; background:var(--line); align-self:center; min-width:18px}
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:4px}
.field.full{grid-column:1/-1}
.field label{font-size:13px; font-weight:600; color:var(--navy)}
.field input,.field select{padding:13px 15px; border:1px solid var(--line-strong); border-radius:9px; font-family:var(--sans); font-size:15px; background:var(--surface); outline:none; transition:border-color .15s, box-shadow .15s}
.field input:focus,.field select:focus{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint)}
.field.req label::after{content:' *'; color:#E5484D; font-weight:700}
.field input.err,.field textarea.err,.field select.err{border-color:#E5484D !important; box-shadow:0 0 0 3px rgba(229,72,77,.16) !important}
.hp{position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden}
.cosection{margin-bottom:36px}
.cosection h3{font-size:20px; margin-bottom:18px; display:flex; align-items:center; gap:11px}
.cosection h3 .nn{width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff; font-family:var(--mono); font-size:12px; display:grid; place-items:center}
.paybox{border:1px solid var(--line); border-radius:var(--radius); padding:18px; background:var(--mist)}
.banknote{border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; background:linear-gradient(180deg,var(--blue-tint),transparent); margin-bottom:16px}
.banknote .bn-h{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--navy); font-size:15px}
.banknote .bn-h svg{width:16px; height:16px; color:var(--blue)}
.banknote .bn-p{font-size:13.5px; color:var(--slate); margin:6px 0 0; line-height:1.55}
.bankbox{border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden}
.bk-row{display:flex; justify-content:space-between; gap:14px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); font-size:14px}
.bk-row:last-child{border-bottom:0}
.bk-row span{color:var(--slate); font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase}
.bk-row b{color:var(--navy); font-weight:600; text-align:right}
.bn-tip{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--slate); margin:14px 0 0; line-height:1.5}
.bn-tip svg{width:16px; height:16px; color:var(--blue); flex-shrink:0}
.confirm{text-align:center}
.confirm .cf-check{width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--ok); color:#fff; display:grid; place-items:center}
.confirm .cf-check svg{width:34px; height:34px}
.confirm h2{font-size:26px; margin-bottom:10px}
.confirm .cf-lead{color:var(--slate); font-size:15px; line-height:1.6; margin:0 auto 22px; max-width:520px}
.confirm .bankbox, .confirm .bn-tip{text-align:left}
.miniitem{display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line)}
.miniitem:last-child{border-bottom:none}
.miniitem .mi{width:54px; height:54px; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex:none}
.miniitem .mn{font-size:13.5px; font-weight:600; color:var(--navy)}
.miniitem .ms{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; color:var(--slate); margin-top:3px}
.miniitem .mp{margin-left:auto; font-family:var(--serif); font-size:16px; color:var(--navy)}

/* ============================== ACCOUNT ============================== */
.acctgrid{display:grid; grid-template-columns:240px 1fr; gap:36px; align-items:start}
.acctnav{border:1px solid var(--line); border-radius:var(--radius); padding:12px; background:var(--surface)}
.acctnav button{display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:12px 14px; border:none; background:transparent; border-radius:9px; font-family:var(--sans); font-size:14.5px; font-weight:500; color:var(--slate)}
.acctnav button svg{width:18px; height:18px}
.acctnav button:hover{background:var(--mist); color:var(--navy)}
.acctnav button.active{background:var(--navy); color:#fff}
.acctcard{border:1px solid var(--line); border-radius:var(--radius); padding:30px; background:var(--surface)}
.orderrow{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
.orderrow:last-child{border-bottom:none}
.statuspill{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:6px 11px; border-radius:999px}
.statuspill.delivered{background:#E8F5EE; color:var(--ok)}
.statuspill.transit{background:var(--blue-tint); color:var(--blue)}
.statuspill.processing{background:#FFF4E5; color:#B57A1A}
.tracker{display:flex; align-items:center; margin:20px 0 6px}
.tracker .node{display:flex; flex-direction:column; align-items:center; gap:8px; flex:none}
.tracker .dotn{width:30px; height:30px; border-radius:50%; border:2px solid var(--line-strong); display:grid; place-items:center; color:var(--slate-light); background:var(--surface)}
.tracker .dotn svg{width:15px; height:15px}
.tracker .node.done .dotn{background:var(--ok); border-color:var(--ok); color:#fff}
.tracker .node.cur .dotn{background:var(--blue); border-color:var(--blue); color:#fff}
.tracker .node small{font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--slate)}
.tracker .seg{flex:1; height:2px; background:var(--line); margin:0 4px; margin-bottom:24px}
.tracker .seg.done{background:var(--ok)}

/* ============================== FAQ / ACCORDION ============================== */
.acc{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item:last-child{border-bottom:none}
.acc-q{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:left; padding:22px 24px; border:none; background:transparent; font-family:var(--sans); font-size:16.5px; font-weight:600; color:var(--navy)}
.acc-q .ico{width:26px; height:26px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; flex:none; transition:transform .25s, background .2s, color .2s; color:var(--navy)}
.acc-item.open .acc-q .ico{background:var(--navy); color:#fff; transform:rotate(45deg)}
.acc-a{max-height:0; overflow:hidden; transition:max-height .3s var(--ease)}
.acc-a .inner{padding:0 24px 24px; color:var(--slate); font-size:15px; line-height:1.65; max-width:760px}
.acc-item.open .acc-a{max-height:680px}

/* ============================== MISC PAGES ============================== */
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.value{border:1px solid var(--line); border-radius:var(--radius); padding:30px; background:var(--surface)}
.value .ic{width:48px; height:48px; border-radius:12px; background:var(--blue-tint); color:var(--blue); display:grid; place-items:center; margin-bottom:18px}
.value .ic svg{width:24px; height:24px}
.value h3{font-size:20px; margin-bottom:10px}
.value p{font-size:14.5px; color:var(--slate); line-height:1.6}
.statband{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center}
.statband .num{font-family:var(--serif); font-size:clamp(38px,5vw,56px); color:var(--navy); line-height:1}
.band-navy .statband .num{color:#fff}
.statband .lab{font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--slate); margin-top:10px}
.band-navy .statband .lab{color:#9FB0CC}
.legal-doc{max-width:780px; font-size:15.5px; line-height:1.8; color:var(--ink)}
.legal-doc h2{font-size:24px; margin:38px 0 14px}
.legal-doc h3{font-size:18px; margin:26px 0 10px}
.legal-doc p{margin-bottom:16px; color:var(--slate)}
.legal-doc ul{margin:0 0 16px; padding-left:22px; color:var(--slate)}
.legal-doc li{margin-bottom:8px}
.legal-toc{font-family:var(--mono); font-size:12px; color:var(--slate); line-height:2; border-left:2px solid var(--blue); padding-left:18px; margin-bottom:34px}
.contactgrid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.contact-card{display:flex; gap:16px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:14px; background:var(--surface)}
.contact-card .ic{width:46px; height:46px; border-radius:11px; background:var(--blue-tint); color:var(--blue); display:grid; place-items:center; flex:none}
.contact-card h4{font-family:var(--sans); font-size:16px; font-weight:600; color:var(--navy); margin-bottom:5px}
.contact-card p{font-size:14px; color:var(--slate); line-height:1.5}
.contact-card .v{font-family:var(--mono); font-size:13px; color:var(--blue); margin-top:6px}

.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(120px); background:var(--navy); color:#fff; padding:14px 22px; border-radius:11px; font-size:14px; font-weight:500; z-index:200; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:11px; transition:transform .35s var(--ease)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast svg{width:18px; height:18px; color:#7BE3AA}

.related{margin-top:80px}
.ingredient-hero{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px}
.ing-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); transition:transform .2s var(--ease), box-shadow .2s}
.ing-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.ing-card .ih{aspect-ratio:4/3}
.ing-card .ib{padding:20px}
.ing-card .tag{font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--blue)}
.ing-card h3{font-size:18px; margin:8px 0 8px}
.ing-card p{font-size:13.5px; color:var(--slate); line-height:1.5}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1080px){
  .hero .wrap{grid-template-columns:1fr; gap:48px}
  .hero-visual{max-width:460px}
  .grid-products,.grid-products.cols-3{grid-template-columns:repeat(3,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  .why .cell:nth-child(2n){border-right:none}
  .why .cell{border-bottom:1px solid var(--line)}
  .ingredient-hero{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:920px){
  .mainnav{display:none}
  .burger{display:grid}
  .shoplayout{grid-template-columns:1fr}
  .filters{position:static; display:none}
  .filters.mobileopen{display:block}
  .pdp{grid-template-columns:1fr; gap:32px}
  .gallery .main{position:static}
  .split{grid-template-columns:1fr; gap:36px}
  .cartpage{grid-template-columns:1fr}
  .coflow{grid-template-columns:1fr}
  .contactgrid{grid-template-columns:1fr; gap:32px}
  .acctgrid{grid-template-columns:1fr}
  .sf-wrap{grid-template-columns:1fr; gap:32px}
  .revsum{grid-template-columns:1fr; gap:24px; text-align:center}
}
@media (max-width:720px){
  .section{padding:64px 0}
  .news{padding:40px 24px}
  .trust .wrap{grid-template-columns:repeat(3,1fr)}
  .trust .item:nth-child(3){border-right:none}
  .trust .item{border-bottom:1px solid var(--line)}
  .statband{grid-template-columns:repeat(2,1fr); gap:34px 20px}
  .values{grid-template-columns:1fr}
  .topbar .hide-sm{display:none}
  .news form{flex-direction:column}
}
@media (max-width:600px){
  .wrap{padding:0 18px}
  .grid-products,.grid-products.cols-3{grid-template-columns:repeat(2,1fr); gap:13px}
  .cats{grid-template-columns:1fr}
  .blog-grid,.rev-grid{grid-template-columns:1fr}
  .pcard .actions{grid-template-columns:1fr}
  .formgrid{grid-template-columns:1fr}
  .ingredient-hero{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr; gap:32px}
  .cartline{grid-template-columns:70px 1fr; row-gap:12px}
  .pcard h3{font-size:16px}
  .hero-meta{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ============================== DARK THEME — Zynova Peptides logo palette ============================== */
body{background:var(--paper); color:var(--ink)}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(55% 45% at 100% 0%, rgba(154,72,245,.10), transparent 60%),
             radial-gradient(50% 40% at 0% 100%, rgba(31,211,240,.07), transparent 60%)}

/* keep the real product box-shots on a clean light tile so they read well on dark cards */
.pimg{background:#F3F5FA}

/* brand-accent fills (cyan -> purple gradient) */
.brand .mark{background:var(--grad); color:#06121A}
.pcard .ribbon{background:var(--grad); color:#06121A}
.pcard .ribbon.blue{background:var(--blue); color:#06121A}
.chip.active{background:var(--grad); color:#06121A; border-color:transparent}
.steps .st.done .b{background:var(--grad); color:#06121A; border-color:transparent}
.cosection h3 .nn{background:var(--grad); color:#06121A}
.acctnav button.active{background:var(--grad); color:#06121A}
.acc-item.open .acc-q .ico{background:var(--grad); color:#06121A; border-color:transparent}
.count{background:var(--blue); color:#06121A}
.rev .av{background:var(--grad); color:#06121A}
.poption .ptitle .tag{background:var(--grad); color:#06121A}
.poption.active{background:var(--blue-tint)}
.poption.active .radio{border-color:var(--blue)}
.poption.active .radio::after{background:var(--blue)}
.tracker .node.cur .dotn{background:var(--blue); border-color:var(--blue); color:#06121A}
.tracker .node.done .dotn{background:var(--ok); border-color:var(--ok); color:#06121A}
::selection{background:var(--purple); color:#fff}

/* dark surface fills (were navy) */
.topbar{background:var(--brand-dark); color:var(--ink)}
.topbar .dot{background:var(--blue)}
.band-navy{background:#070710; color:var(--ink)}
.news{background:radial-gradient(80% 130% at 100% 0, var(--purple-tint), transparent 60%), var(--surface-2); color:var(--ink); border:1px solid var(--line)}
.news h2{color:#fff}
.toast{background:var(--surface-2); color:#fff; border:1px solid var(--line-strong)}
footer{background:#000; color:var(--slate)}
footer .ftag, footer ul a, footer .legal{color:var(--slate)}
footer ul a:hover{color:var(--blue)}

/* buttons */
.btn-primary{background:var(--grad); color:#06121A; border-color:transparent; box-shadow:0 8px 24px -12px rgba(31,211,240,.45)}
.btn-primary:hover{filter:brightness(1.07); box-shadow:0 12px 32px -10px rgba(154,72,245,.5)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--blue); background:rgba(31,211,240,.08); color:#fff}
.btn-blue{background:var(--blue); color:#06121A; border-color:transparent}
.btn-blue:hover{background:var(--blue-deep)}
.btn-light{background:var(--surface); color:var(--ink); border-color:var(--line-strong)}
.btn-light:hover{background:var(--surface-2)}

/* form fields -> light text on dark */
.field input,.field select,.field textarea,.sortsel select,.news input,.promo input,.searchbar input,textarea{color:var(--ink) !important; background:var(--surface) !important; border-color:var(--line-strong)}
.field input::placeholder,.promo input::placeholder,.searchbar input::placeholder,textarea::placeholder,.news input::placeholder{color:var(--slate-light)}
.searchbar input{background:transparent !important}
.brand2 .bmark-logo{ background:transparent; border:none; box-shadow:none; width:auto; height:46px; border-radius:0; overflow:visible }
.brand2 .bmark-logo img{ height:46px; width:auto; display:block; filter:drop-shadow(0 0 7px rgba(154,72,245,.55)) drop-shadow(0 0 3px rgba(43,230,255,.4)) }

/* ===== Cyber-peptide-lab header ===== */
.promobar{ background:linear-gradient(90deg,#7a4bff 0%,#9b5cff 45%,#36e0ff 100%); color:#0b0b13; text-align:center; font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:8px 14px; line-height:1.3 }
.promonote{ font-size:12px; font-weight:600; color:#7a4bff; background:rgba(122,75,255,.08); border:1px solid rgba(122,75,255,.22); border-radius:9px; padding:9px 12px; margin-bottom:14px; text-align:center; line-height:1.45 }
.promonote.ok{ color:var(--ok); background:rgba(28,180,120,.09); border-color:rgba(28,180,120,.28) }
.topbar2{ background:rgba(11,11,19,.55); backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%); border-bottom:1px solid rgba(255,255,255,.06) }
.topbar2 .tb-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; min-height:44px; font-family:var(--sans); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#C7D2E2 }
.topbar2 .tb-left{ justify-self:start; display:inline-flex; align-items:center; gap:9px; text-shadow:0 0 10px rgba(255,255,255,.12) }
.topbar2 .tb-right{ justify-self:end; display:inline-flex; align-items:center; gap:26px }
.topbar2 .tb-feat{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; text-shadow:0 0 10px rgba(255,255,255,.1) }
.topbar2 .tb-center{ justify-self:center; display:inline-flex; line-height:0 }
.tb-shield-svg{ width:24px; height:24px; filter:drop-shadow(0 0 5px rgba(164,91,255,.6)) drop-shadow(0 0 11px rgba(54,224,255,.32)) }
.topbar2 .tb-center .tb-shield-svg{ width:27px; height:27px }
.topbar2 .tb-dot{ width:7px; height:7px; border-radius:50%; background:#33F0A0; box-shadow:0 0 8px 1px rgba(51,240,160,.85), 0 0 15px rgba(51,240,160,.5); animation:pulse 2.4s infinite }
.neon-ico{ display:inline-flex; color:#36E0FF; filter:drop-shadow(0 0 4px rgba(164,91,255,.6)) }
.neon-ico svg{ width:14px; height:14px }

.nav2{ position:sticky; top:0; z-index:80; background:rgba(9,9,16,.72); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); border-bottom:1px solid rgba(255,255,255,.07); transition:box-shadow .25s, background .25s, border-color .25s }
.nav2.scrolled{ background:rgba(8,8,13,.9); box-shadow:0 12px 34px -20px rgba(0,0,0,.85); border-color:rgba(154,72,245,.16) }
.navrow2{ display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:72px }

/* brand */
.brand2{ display:inline-flex; align-items:center; gap:12px }
.brand2 .bmark{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:linear-gradient(150deg, rgba(154,72,245,.20), rgba(31,211,240,.10)); border:1px solid rgba(154,72,245,.34); box-shadow:0 0 18px -5px rgba(154,72,245,.55), inset 0 0 12px -6px rgba(31,211,240,.6) }
.brand2 .bmark .tb-shield-svg{ width:23px; height:23px }
.brand2 .btxt{ display:flex; flex-direction:column; line-height:1 }
.brand2 .bname{ font-family:var(--sans); font-weight:700; font-size:21px; letter-spacing:-.01em; color:#fff; text-shadow:0 0 7px rgba(154,72,245,.55), 0 0 20px rgba(154,72,245,.42), 0 0 34px rgba(124,60,220,.25) }
.brand2 small{ font-family:var(--mono); font-size:9px; letter-spacing:.32em; color:var(--slate); margin-top:5px }

/* menu */
.mainnav2{ display:flex; align-items:center; gap:2px }
.mainnav2 a{ position:relative; padding:9px 15px; border-radius:999px; font-family:var(--sans); font-size:14px; font-weight:500; color:var(--slate); border:1px solid transparent; transition:color .2s, text-shadow .2s, background .2s, border-color .2s }
.mainnav2 a::after{ content:""; position:absolute; left:15px; right:15px; bottom:5px; height:1.5px; border-radius:2px; background:linear-gradient(90deg,#36E0FF,#A45BFF); transform:scaleX(0); transform-origin:center; transition:transform .25s var(--ease); box-shadow:0 0 8px rgba(164,91,255,.7) }
.mainnav2 a:hover{ color:#fff; text-shadow:0 0 12px rgba(164,91,255,.6) }
.mainnav2 a:hover::after{ transform:scaleX(1) }
.mainnav2 a.active{ color:#fff; background:rgba(154,72,245,.10); border-color:rgba(154,72,245,.5); box-shadow:0 0 0 1px rgba(154,72,245,.18), 0 0 16px -3px rgba(154,72,245,.55); text-shadow:0 0 12px rgba(164,91,255,.55) }
.mainnav2 a.active::after{ display:none }

/* actions */
.navactions2{ display:inline-flex; align-items:center; gap:4px }
.iconbtn2{ position:relative; width:42px; height:42px; border:none; background:transparent; border-radius:11px; display:grid; place-items:center; color:var(--slate); cursor:pointer; transition:color .18s, background .18s, box-shadow .18s }
.iconbtn2 svg{ width:20px; height:20px }
.iconbtn2:hover{ color:#fff; background:rgba(154,72,245,.12); box-shadow:0 0 14px -4px rgba(154,72,245,.6) }
.navactions2 .count{ position:absolute; top:5px; right:5px; min-width:17px; height:17px; padding:0 4px; background:linear-gradient(135deg,#36E0FF,#A45BFF); color:#06121A; border-radius:9px; font-family:var(--mono); font-size:10px; font-weight:600; display:grid; place-items:center; line-height:1; box-shadow:0 0 10px -2px rgba(164,91,255,.8) }
.navactions2 .count:empty{ display:none }
.nav2 .burger{ display:none }

/* language switcher */
.langsel{ position:relative; margin-right:2px }
.langbtn{ display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 9px; border-radius:10px; border:1px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer; transition:border-color .18s, background .18s }
.langbtn:hover{ border-color:var(--blue); background:rgba(31,211,240,.08) }
.langbtn .lcode{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; font-weight:600 }
.langbtn .chev{ width:13px; height:13px; opacity:.7 }
.flag{ width:22px; height:14.6px; border-radius:3px; display:block; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.12) }
.langmenu{ position:absolute; top:46px; right:0; min-width:178px; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:12px; padding:6px; box-shadow:0 18px 40px -16px rgba(0,0,0,.7); display:none; z-index:90 }
.langmenu.open{ display:block }
.langmenu button{ display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px; border:none; background:transparent; border-radius:8px; color:var(--ink); font-family:var(--sans); font-size:14px; cursor:pointer; text-align:left; transition:background .15s }
.langmenu button:hover{ background:rgba(154,72,245,.12) }
.langmenu button.active{ background:rgba(31,211,240,.12); color:#fff; font-weight:600 }
@media (max-width:520px){ .langbtn .lcode{ display:none } }

@media (max-width:1040px){
  .mainnav2{ display:none }
  .nav2 .burger{ display:grid }
}
@media (max-width:760px){
  .topbar2 .tb-row{ grid-template-columns:1fr auto }
  .topbar2 .tb-right{ display:none }
  .topbar2 .tb-center{ justify-self:end }
}
@media (max-width:520px){
  .topbar2 .tb-left{ letter-spacing:.1em; font-size:9.5px }
  .brand2 small{ letter-spacing:.26em }
}

/* ===== Neon DNA background ===== */
#dna-bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; opacity:.72 }
#dna-bg svg.helix{ position:absolute; inset:0; width:100%; height:100% }
#dna-bg path{ fill:none; stroke-linecap:round; stroke-linejoin:round }
#dna-bg .dna-strands{ filter:drop-shadow(0 0 3px rgba(43,230,255,.6)) drop-shadow(0 0 7px rgba(255,69,217,.5)) drop-shadow(0 0 14px rgba(162,75,255,.4)) }
#dna-bg .dna-stars{ filter:drop-shadow(0 0 3px rgba(120,180,255,.7)) }
@media (max-width:760px){ #dna-bg{ opacity:.5 } }

/* ===== Molecular infographics on the Science page ===== */
.ing-card .ih.ihm{ position:relative; background:#fff; cursor:zoom-in }
.ing-card .ih.ihm img{ width:100%; height:100%; object-fit:cover; object-position:left center; display:block; transition:object-position .3s var(--ease) }
.ing-card:hover .ih.ihm img{ object-position:center center }
.ing-card .ih.ihm .ih-zoom{ position:absolute; right:10px; bottom:10px; width:30px; height:30px; border-radius:8px; background:rgba(11,11,20,.72); color:#fff; display:grid; place-items:center; opacity:0; transition:opacity .2s }
.ing-card .ih.ihm:hover .ih-zoom{ opacity:1 }
.ing-card .ih.ihm .ih-zoom svg{ width:15px; height:15px }

/* ===== Zynova footer wordmark ===== */
.zynova-foot{ display:inline-flex; flex-direction:column; line-height:.86; text-decoration:none }
.zynova-foot .zf-name{ font-family:"Anton",Impact,"Arial Narrow",sans-serif; font-size:46px; letter-spacing:.015em; color:#fff; text-transform:uppercase; text-shadow:0 0 8px rgba(154,72,245,.6), 0 0 22px rgba(154,72,245,.45), 0 0 44px rgba(124,60,220,.32) }
.zynova-foot .zf-sub{ font-family:var(--mono); font-size:13px; letter-spacing:.52em; color:var(--blue); margin-top:9px; padding-left:3px; text-shadow:0 0 12px rgba(31,211,240,.5) }

/* ===== COA gallery slides (product page) ===== */
.gallery .main{ cursor:zoom-in; background:#fff }
.gallery .main img.coaimg{ width:100%; height:100%; object-fit:contain; background:#fff }
.gallery .main .coa-flag{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:rgba(11,11,20,.8); color:#fff; font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase }
.gallery .main .coa-flag svg{ width:13px; height:13px; color:var(--blue) }
.gallery .main .zoom-hint{ position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:rgba(11,11,20,.72); color:#fff; font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; opacity:0; transition:opacity .2s }
.gallery .main:hover .zoom-hint{ opacity:1 }
.gallery .main .zoom-hint svg{ width:13px; height:13px }
.gallery .thumb{ position:relative }
.gallery .thumb img.coaimg{ width:100%; height:100%; object-fit:cover; object-position:top center; background:#fff }
.gallery .thumb-coa .tcoa{ position:absolute; bottom:4px; left:4px; font-family:var(--mono); font-size:8px; letter-spacing:.05em; background:var(--grad); color:#06121A; padding:2px 5px; border-radius:5px; font-weight:700 }

/* ===== COA Janoshik page ===== */
.coa-intro{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:34px }
.coa-stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; text-align:center }
.coa-stat b{ display:block; font-family:var(--serif); font-size:23px; color:var(--ink) }
.coa-stat span{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate) }
.coa-dategroup{ margin-bottom:34px }
.coa-datehead{ display:flex; align-items:center; gap:16px; margin-bottom:18px }
.coa-datehead .d{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); font-weight:500 }
.coa-datehead .ln{ flex:1; height:1px; background:var(--line) }
.coa-datehead .n{ font-family:var(--mono); font-size:11px; color:var(--slate) }
.coa-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.coa-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, box-shadow .2s }
.coa-card:hover{ border-color:rgba(31,211,240,.4); box-shadow:0 16px 36px -22px rgba(31,211,240,.3) }
.coa-thumb{ position:relative; aspect-ratio:1.4/1; overflow:hidden; cursor:zoom-in; background:#fff; border-bottom:1px solid var(--line) }
.coa-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center }
.coa-thumb .coa-zoom{ position:absolute; right:10px; bottom:10px; width:30px; height:30px; border-radius:8px; background:rgba(11,11,20,.72); color:#fff; display:grid; place-items:center; opacity:0; transition:opacity .2s }
.coa-thumb:hover .coa-zoom{ opacity:1 }
.coa-thumb .coa-zoom svg{ width:15px; height:15px }
.coa-body{ padding:16px 17px 17px; display:flex; flex-direction:column; gap:7px; flex:1 }
.coa-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px }
.coa-compound{ font-family:var(--serif); font-size:18px; color:var(--ink); font-weight:600; line-height:1.15 }
.coa-task{ font-family:var(--mono); font-size:11px; color:var(--slate-light); flex:none }
.coa-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--slate) }
.coa-purity{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ok); font-weight:600 }
.coa-purity svg{ width:15px; height:15px }
.coa-note{ font-size:12.5px; color:var(--slate); line-height:1.5 }
.coa-actions{ display:flex; gap:8px; margin-top:auto; padding-top:11px }

/* ===== Lightbox ===== */
.lightbox{ position:fixed; inset:0; z-index:120; display:none; background:rgba(4,4,8,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
.lightbox.open{ display:block }
.lightbox .lb-scroll{ position:absolute; inset:0; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:42px 16px 32px }
.lightbox img{ width:min(840px,94vw); height:auto; border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.6); background:#fff }
.lightbox .lb-close{ position:fixed; top:18px; right:18px; z-index:2; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-strong); background:var(--surface); color:#fff; display:grid; place-items:center; cursor:pointer }
.lightbox .lb-close:hover{ background:var(--surface-2); border-color:var(--blue) }
.lightbox .lb-close svg{ width:20px; height:20px }

@media (max-width:860px){ .coa-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .coa-grid{ grid-template-columns:1fr } .coa-intro{ grid-template-columns:1fr 1fr } }

/* ===== Neon hero headline ===== */
.hero h1.neon{ font-size:clamp(25px,3.5vw,40px); line-height:1.18; letter-spacing:-.005em; font-weight:500; color:#efe2ff;
  text-shadow:0 0 4px rgba(255,255,255,.75), 0 0 12px var(--purple), 0 0 24px var(--purple), 0 0 44px #B14CFF; }
.neon-brand{
  display:block; font-family:"Anton", Impact, "Haettenschweiler", "Arial Narrow", sans-serif; font-weight:400;
  font-size:2.35em; line-height:.96; margin-bottom:.16em; color:#fff; letter-spacing:.012em; text-transform:uppercase;
  text-shadow:0 0 6px #fff, 0 0 16px var(--purple), 0 0 34px #B14CFF, 0 0 62px #B14CFF, 0 0 96px var(--purple);
  animation:neonFlicker 5s infinite;
}
.neon-brand .nb2{ display:block; font-size:.62em; letter-spacing:.18em; margin-top:.04em }
@keyframes neonFlicker{
  0%,17%,21%,24%,54%,58%,100%{opacity:1}
  19%,23%,56%{opacity:.74}
}
@media (prefers-reduced-motion: reduce){ .neon-brand{animation:none} }

/* center the hero copy so ZYNOVA PEPTIDES!! sits centred above the tagline */
.hero-copy{ text-align:center }
.hero-copy .hero-tag{ margin:0 auto }
.hero-copy h1.neon{ text-align:center }
.hero-copy .lede{ margin-left:auto; margin-right:auto }
.hero-copy .hero-cta{ justify-content:center }
.hero-copy .hero-meta{ justify-content:center }

/* spec / facts label -> elevated dark card */
.sfacts{background:var(--surface-2); border-color:var(--line-strong)}

/* glow on hover */
.pcard:hover{border-color:rgba(31,211,240,.4); box-shadow:0 18px 42px -22px rgba(31,211,240,.32)}
.cat:hover{border-color:rgba(154,72,245,.45); box-shadow:0 18px 42px -22px rgba(154,72,245,.28)}
.post:hover{border-color:rgba(154,72,245,.4); box-shadow:0 18px 42px -22px rgba(154,72,245,.28)}
.ing-card:hover{border-color:rgba(31,211,240,.4)}

/* hero + social + pay chips */
.hero-card{background:var(--surface-2); border-color:var(--line-strong)}
.hero-tag{background:var(--surface-2)}
.hero-float{background:var(--surface-2); border-color:var(--line-strong)}
.fsocial a{border-color:var(--line-strong); color:var(--slate)}
.fsocial a:hover{background:var(--grad); color:#06121A; border-color:transparent}
.pays .pay{background:rgba(255,255,255,.06); color:var(--slate)}


.calc-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start }
.calc-inputs{ display:grid; gap:15px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:22px }
.calc-inputs input, .calc-inputs select{ width:100%; padding:11px 13px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:10px; color:#fff; font-family:var(--sans); font-size:15px }
.calc-inputs label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate,#8a94a8); margin-bottom:6px }
.calc-dose{ display:flex; gap:8px } .calc-dose input{ flex:1 } .calc-dose select{ width:auto; min-width:78px }
.calc-outwrap{ background:linear-gradient(160deg,rgba(122,75,255,.13),rgba(54,224,255,.06)); border:1px solid rgba(122,75,255,.28); border-radius:16px; padding:24px; min-height:240px }
.calc-grid{ display:flex; gap:26px; margin-bottom:16px; flex-wrap:wrap }
.calc-stat{ display:flex; flex-direction:column; gap:3px } .calc-stat span{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--slate,#8a94a8) } .calc-stat b{ font-size:19px; color:#fff }
.cr-main{ display:flex; align-items:baseline; gap:9px } .cr-units{ font-family:var(--sans); font-size:54px; font-weight:800; line-height:1; background:linear-gradient(90deg,#36e0ff,#7a4bff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent } .cr-unitlab{ font-size:21px; font-weight:600; color:#cdd6e6 }
.cr-sub{ font-size:16px; color:#dde4f0; margin-top:7px } .cr-sub b{ color:#fff }
.cr-meta{ font-size:13px; color:var(--slate,#8a94a8); margin-top:12px } .cr-warn{ color:#ff8a8a; font-weight:600 }
.calc-result.warn .cr-units{ background:linear-gradient(90deg,#ffb15c,#ff5c7a); -webkit-background-clip:text; background-clip:text }
.calc-syringe{ width:100%; height:auto; margin:16px 0 4px } .calc-msg{ color:var(--slate,#8a94a8); font-size:14px; padding:16px 0 }
.calc-note{ margin-top:22px; font-size:13.5px; line-height:1.65; color:var(--slate,#8a94a8); max-width:780px } .calc-note b{ color:#cdd6e6 }
@media(max-width:760px){ .calc-wrap{ grid-template-columns:1fr } }