/* Spartan Peptides: shared site styles (extracted from home.html). Page components are appended at the end. */
:root{
  /* Client brand, dark monochrome: navy, black, white and neutral greys */
  --ink:#050E1F;          /* footer, dark cards */
  --navy:#0A1F44;         /* headings, primary text */
  --blue:#0A1F44;         /* accent: brand navy (monochrome palette) */
  --blue-h:#050E1F;
  --violet:#1C2A44;
  --sky:#C9CED8;
  --ice:#FFFFFF;          /* soft neutral panel */
  --text:#3C4A63;
  --muted:#7A879C;
  --line:#E3E9F3;
  --err:#B42318;          /* form error state */
  --grad:linear-gradient(120deg,#0A1F44 0%,#050E1F 100%);
  --ease:cubic-bezier(.22,1,.36,1);
  --r-panel:56px;
  --container:1140px;
  --display:"Rubik",system-ui,sans-serif;
  --body:"Roboto",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--body);color:var(--text);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
/* WordPress prints width/height attributes on every image. Without this the
   intrinsic height wins over the design's fluid widths and images stretch. */
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
svg:has(> use[href="#helm"]){fill:currentColor}
.container{width:min(var(--container),100% - 40px);margin-inline:auto}

/* Display type: client font (Rubik) set light + uppercase for the reference's thin editorial look */
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.035em;line-height:.92;color:var(--navy)}
.h2{font-size:clamp(34px,4.6vw,58px)}
/* Headings that open their block need no top offset (eyebrow labels were removed) */
.display.display:first-child{margin-top:0}
.sec-title{text-align:center;margin-bottom:48px}
.sec-title .display{margin-top:18px}
.sec-title p{max-width:520px;margin:22px auto 0}
.split-line{overflow:hidden}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;height:56px;padding:0 24px 0 28px;border-radius:50px;font:500 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.btn i{font-size:15px;transition:transform .45s var(--ease)}
.btn:hover i{transform:translateX(4px)}
.btn-accent{background:var(--blue);color:#fff;min-width:210px;box-shadow:0 14px 30px -10px rgba(5,14,31,.45)}
.btn-accent:hover{background:var(--blue-h);box-shadow:0 20px 40px -12px rgba(5,14,31,.55)}
.btn-line{border:1.5px solid var(--navy);color:var(--navy);padding:0 30px}
.btn-line:hover{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--navy);padding:0 30px}
.btn-white:hover{background:var(--navy);color:#fff}
.btn-line-w{border:1.5px solid rgba(255,255,255,.55);color:#fff;padding:0 30px}
.btn-line-w:hover{background:#fff;color:var(--navy)}

/* Rounded stacked panels (reference signature) */
.panel{position:relative;border-radius:var(--rad,var(--r-panel)) var(--rad,var(--r-panel)) 0 0;margin-top:calc(var(--r-panel) * -1);z-index:1}
.pad{padding:96px 0 110px}

/* ============ Age gate ============ */
.gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(5,14,31,.6);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.gate.open{opacity:1;visibility:visible}
.gate-card{position:relative;overflow:hidden;width:min(460px,100%);background:#fff;border-radius:28px;padding:50px 40px 38px;text-align:center;box-shadow:0 40px 80px -20px rgba(5,14,31,.5);transform:translateY(20px) scale(.97);transition:transform .6s var(--ease)}
.gate.open .gate-card{transform:none}
.gate-card .helm{width:58px;margin:0 auto 22px;color:var(--blue)}
.gate-card h3{font:400 30px/1 var(--display);text-transform:uppercase;letter-spacing:-.02em;color:var(--navy);margin-bottom:14px}
.gate-card p{font-size:14.5px;margin-bottom:28px}
.gate-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.gate-actions .btn{min-width:0;height:52px}
.gate-small{margin-top:18px;font-size:12px;color:var(--muted)}
.gate-bg{position:absolute;right:-70px;bottom:-70px;width:250px;color:var(--ice);z-index:-1}

/* ============ Header ============ */
.header{position:fixed;left:0;right:0;top:18px;z-index:100;pointer-events:none}
.bar{pointer-events:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;padding:0 10px;border-radius:40px;background:rgba(255,255,255,.55);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 40px -20px rgba(10,31,68,.25);transition:background .4s,box-shadow .4s}
.header.solid .bar{background:rgba(255,255,255,.9);box-shadow:0 14px 40px -18px rgba(10,31,68,.3)}
.nav{display:flex;gap:24px;padding-left:18px;font:500 12.5px/1 var(--display);letter-spacing:.05em;white-space:nowrap;text-transform:uppercase;color:var(--navy)}
.nav a{position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.logo{display:flex;align-items:center;justify-content:center}
.logo img{height:38px;width:auto;display:block}
.h-right{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.circle{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;position:relative;transition:background .3s}
.circle:hover{background:var(--blue)}
.circle i{font-size:15px}
.cart-n{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;border-radius:10px;background:var(--blue);border:2px solid #fff;font:500 10px/15px var(--display);text-align:center;padding:0 4px}
.shop-now{height:44px;padding:0 24px;border-radius:30px;background:var(--navy);color:#fff;display:inline-flex;align-items:center;font:500 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;transition:background .3s}
.shop-now:hover{background:var(--blue)}
.burger{display:none}

/* ============ Hero ============ */
.hero{position:relative;padding:140px 0 130px;overflow:hidden;background:#fff}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;min-height:640px}
.hero-left{display:flex;flex-direction:column;justify-content:space-between;padding:40px 0 20px;position:relative;z-index:3}
.hero-title{font-size:clamp(56px,7.4vw,104px)}
.hero-left .btn{margin-top:40px}
.checks{list-style:none;display:grid;gap:16px;margin-top:80px;font:400 14px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--navy)}
.checks li{display:flex;align-items:center;gap:12px}
.checks b{font-weight:600}
.checks i{font-size:20px;color:var(--blue);flex:none}
.hero-right{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;text-align:right;padding:40px 0 20px;position:relative;z-index:3}
.hero-right .intro{max-width:265px;text-align:left;font-size:15.5px;line-height:1.65;color:var(--navy)}
.hero-right .btn{margin-top:36px}
.hero-center{position:relative;z-index:2}
.hero-stage{position:absolute;left:-30%;right:-30%;top:-6%;bottom:-6%;pointer-events:none}
.center-abs{position:absolute;inset:0;margin:auto}
.hero-helm{width:96%;height:96%;color:#D6D9DF}
.hero-helm svg{width:100%;height:100%}
.hero-ring{width:78%;aspect-ratio:1;height:auto;border-radius:50%;border:1px solid rgba(10,31,68,.1)}
.hero-ring.r2{width:58%;border-style:dashed;border-color:rgba(10,31,68,.14)}
.vial-wrap{display:grid;place-items:center}
.vial-float{width:96%}
.vial-float img{width:100%;filter:drop-shadow(0 50px 60px rgba(10,31,68,.28))}
.vial-float img.fallback{border-radius:28px;background:#fff;transform:rotate(-6deg)}
.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.98) 0 18%,rgba(214,218,226,.6) 48%,rgba(10,31,68,.28) 100%);box-shadow:inset -4px -6px 12px rgba(10,31,68,.18),0 10px 20px -6px rgba(10,31,68,.25)}

/* ============ Compound ribbon + proof stats ============ */
.proof{position:relative;background:#fff}
.c-ribbon{background:var(--ink);overflow:hidden;border-block:1px solid rgba(255,255,255,.06)}
.c-track{display:flex;align-items:center;gap:34px;width:max-content;padding:20px 0;animation:c-roll 38s linear infinite}
.c-ribbon:hover .c-track{animation-play-state:paused}
.c-track span{font:500 14px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap}
.sp-star{width:14px;height:14px;flex:none;fill:#fff}
@keyframes c-roll{to{transform:translateX(calc(-50% - 17px))}}
.proof-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:64px 0 70px;border-bottom:1px solid var(--line)}
.p-stat b{display:flex;align-items:baseline;font:500 clamp(38px,4vw,54px)/1 var(--display);letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums}
.p-stat b small{font-size:.5em;margin-left:4px;letter-spacing:0}
.p-stat>span{display:block;margin-top:12px;font-size:14px;color:var(--muted)}

/* ============ Why we exist ============ */
.exist{position:relative;background:#fff;padding-top:80px}
.exist-in{max-width:980px}
.exist-h{margin:18px 0 44px;font:500 clamp(28px,3.4vw,44px)/1.18 var(--display);letter-spacing:-.02em;color:var(--navy)}
.exist-h em{font-style:normal;background:linear-gradient(transparent 62%,#DCE2EC 62%)}
.exist-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:start}
.exist-grid>p{font-size:15.5px;line-height:1.75;max-width:470px}
.exist-pitch{font:500 20px/1.35 var(--display);letter-spacing:-.01em;color:var(--navy);margin-bottom:24px}
.trust-bar{list-style:none;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:20px;margin-top:90px;background:var(--ink);color:#fff;padding:24px max(20px,calc((100% - var(--container)) / 2)) calc(var(--r-panel) + 24px)}
.trust-bar li{display:flex;align-items:center;gap:10px;font:500 12.5px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase}
.trust-bar i{font-size:15px;color:#C9CED8}
@media (max-width:900px){
  .proof-stats{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .exist-grid{grid-template-columns:1fr;gap:34px}
  .trust-bar{grid-template-columns:repeat(2,1fr);row-gap:18px;margin-top:64px}
}
@media (max-width:480px){
  .c-track span{font-size:12.5px}
  .proof-stats{padding-top:46px}
  .trust-bar{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.c-track{animation:none}}

/* ============ Best sellers ============ */
.sellers{background:#fff}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.card-media{position:relative;aspect-ratio:1/1.08;border-radius:22px;overflow:hidden;background:radial-gradient(60% 50% at 50% 55%,#FFFFFF 0%,rgba(255,255,255,0) 100%),linear-gradient(180deg,#F6F7F9 0%,#E4E7EC 100%)}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform 1.1s var(--ease)}
.card-media img.cut{inset:10% 8% 8%;width:84%;height:82%;object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 22px 22px rgba(10,31,68,.18))}
.card:hover .card-media img{transform:scale(1.06)}
.card:hover .card-media img.cut{transform:translateY(-6px) scale(1.03)}
.coa{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);border-radius:20px;padding:6px 11px;font:500 10.5px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);transform:translateY(-6px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.card:hover .coa{transform:none;opacity:1}
.coa i{width:6px;height:6px;border-radius:50%;background:var(--navy)}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}
.card-name{font:400 17px/1.2 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--navy)}
.card-price{font:400 16px/1 var(--body);color:var(--muted);margin-top:8px}
.card-size{display:flex;gap:6px;margin-top:10px}
.card-size button{font:500 11px/1 var(--display);letter-spacing:.06em;padding:6px 9px;border-radius:14px;border:1px solid var(--line);color:var(--muted);transition:border-color .3s,color .3s}
.card-size button.on{border-color:var(--navy);color:var(--navy)}
.add,.card-go{width:50px;height:50px;flex:none;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:0 10px 22px -8px rgba(5,14,31,.5);transition:background .3s,transform .45s var(--ease)}
.add:hover,.card-go:hover{background:var(--blue-h);transform:scale(1.08)}
.add i,.card-go i{font-size:17px}
.add.ok{background:#000}
.sellers-more{text-align:center;margin-top:70px}

/* ============ Marquee ============ */
.marquee{position:relative;z-index:2;background:#fff;overflow:hidden;padding:44px 0;margin-block:-10px}
.m-band{position:relative;width:110%;margin-left:-5%;overflow:hidden}
.m-back{background:#EEF1F5;transform:rotate(2.2deg);border-block:1px solid var(--line)}
.m-front{background:var(--ink);color:#fff;transform:rotate(-2.4deg);margin-top:-58px;box-shadow:0 30px 60px -30px rgba(5,14,31,.55)}
.m-front::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0,transparent 8%,transparent 92%,var(--ink) 100%);z-index:1;pointer-events:none}
.m-track{display:flex;align-items:center;width:max-content;will-change:transform;backface-visibility:hidden}
.m-item{display:flex;align-items:center;gap:14px;padding:22px 26px;font:500 13px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.m-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05)}
.m-ic i{font-size:15px}
.m-sep{width:22px;flex:none;color:rgba(255,255,255,.28)}
.m-word{display:flex;align-items:center;gap:40px;padding:26px 20px 78px;font:600 clamp(40px,6vw,76px)/1 var(--display);letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1.4px #9AA6B8}
.m-word.fill{color:var(--navy);-webkit-text-stroke:0}
.m-word .dot{width:14px;height:14px;border-radius:50%;background:var(--navy);flex:none}
@media (max-width:700px){
  .marquee{padding:32px 0}
  .m-item{padding:18px 18px;font-size:12px;letter-spacing:.16em}
  .m-ic{width:34px;height:34px}
  .m-word{padding:20px 14px 60px;gap:26px}
  .m-front{margin-top:-46px}
}

/* ============ Lab (dark stage) ============ */
.lab{position:relative;overflow:hidden;color:var(--text);padding:100px 0 120px;background:#fff}
.lab-beam{position:absolute;top:-30%;right:12%;width:34%;height:160%;background:linear-gradient(90deg,rgba(10,31,68,0) 0%,rgba(10,31,68,.045) 50%,rgba(10,31,68,0) 100%);transform:rotate(28deg);filter:blur(30px);pointer-events:none}
.lab-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}
.lab h2{margin:24px 0 26px;color:var(--navy)}
.lab .lead{max-width:520px;font-size:15.5px;line-height:1.8;color:var(--text)}
.stats3{display:flex;gap:56px;margin:40px 0 8px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.stat b{font:400 46px/1 var(--display);letter-spacing:-.03em;color:var(--navy);display:flex;align-items:baseline;font-variant-numeric:tabular-nums}
.lab .stat b{color:var(--navy)}
/* Odometer digits: each digit is a vertical strip that rolls into place */
.odo{display:inline-block;height:1em;overflow:hidden;vertical-align:top;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.odo-strip{display:flex;flex-direction:column;will-change:transform}
.odo-strip span{height:1em;line-height:1em;text-align:center}
.stat>span{display:block;margin-top:12px;font:500 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.lab .stat>span{color:var(--navy)}
.checks-grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:34px;margin:0 0 44px;max-width:600px}
.checks-grid li{display:flex;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--navy)}
.checks-grid .tk{width:30px;height:30px;flex:none;border-radius:8px;border:1px solid var(--navy);display:grid;place-items:center;font-size:11px;color:#fff;background:var(--navy)}
.lab-btns{display:flex;gap:14px;flex-wrap:wrap}
.lab .btn-white{padding:0 26px 0 30px;gap:22px}
.lab-art{position:relative;height:640px}
.lab-art .helm-bg{position:absolute;right:-18%;top:-4%;width:100%;color:#F0F2F5}
.vial-lab{position:absolute;inset:0;display:grid;place-items:center}
.vial-lab img{width:78%;max-height:88%;object-fit:contain;filter:drop-shadow(0 40px 50px rgba(10,31,68,.22))}
.vial-lab img.fallback{width:62%;border-radius:26px}

/* ============ Browse by research area (bento) ============ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,auto);gap:20px}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:26px;padding:28px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);color:#9FB0CC;transition:border-color .45s var(--ease),background-color .45s var(--ease)}
.tile:hover{border-color:rgba(255,255,255,.32);background-color:rgba(255,255,255,.06)}
.tile-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2}
.tile .idx{font:500 12px/1 var(--display);letter-spacing:.22em;color:#6F7F99;padding-top:6px}
.tile .go{width:46px;height:46px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:#fff;transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s}
.tile .go i{font-size:15px;transform:rotate(-45deg);transition:transform .55s var(--ease)}
.tile:hover .go{background-color:#fff;border-color:#fff;color:var(--navy)}
.tile:hover .go i{transform:rotate(0)}
.tile-body{position:relative;z-index:2;margin-top:auto;padding-top:34px}
.tile h3{font:400 23px/1.1 var(--display);letter-spacing:-.01em;color:#fff}
.tile-body>p{font-size:14.5px;line-height:1.65;color:#AEBAD0;margin-top:12px;max-width:340px}
.tile .n{display:block;margin-top:18px;font:500 11px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:#7A879C}
.tile .n b{color:#fff;font-weight:500}
/* featured + wide tiles carry product shots */
.tile.lead{grid-column:span 2;grid-row:span 2;padding:38px;background:radial-gradient(420px 380px at 78% 62%,rgba(120,150,210,.28),transparent 70%),linear-gradient(160deg,#132A52 0%,#0A1733 100%);border-color:rgba(255,255,255,.14)}
.tile.lead h3{font-size:clamp(34px,3.4vw,46px);line-height:.98;text-transform:uppercase;letter-spacing:-.03em}
.tile.lead .tile-body,.tile.wide .tile-body{max-width:52%}
.tile.wide{grid-column:span 2;background:radial-gradient(360px 260px at 82% 70%,rgba(120,150,210,.18),transparent 70%),rgba(255,255,255,.035)}
.shots{position:absolute;z-index:1;pointer-events:none;display:flex;align-items:flex-end;justify-content:center}
.shots img{height:100%;width:auto;filter:drop-shadow(0 30px 34px rgba(0,0,0,.45));transition:transform 1s var(--ease)}
.tile.lead .shots{right:2%;bottom:-2%;width:46%;height:86%}
.tile.lead:hover .shots img{transform:translateY(-12px) rotate(-3deg)}
.tile.wide .shots{right:90px;bottom:-26%;width:34%;height:100%}
.tile.wide .shots img+img{margin-left:-22%;height:88%}
.tile.wide:hover .shots img{transform:translateY(-10px) rotate(-4deg)}
.tile.wide:hover .shots img+img{transform:translateY(-6px) rotate(5deg)}
/* view all */
.tile.all{background:#fff;border-color:#fff;color:var(--muted)}
.tile.all:hover{background-color:#fff;border-color:#fff}
.tile.all .idx{color:var(--muted)}
.tile.all .go{background:var(--navy);border-color:var(--navy);color:#fff}
.tile.all:hover .go{background:var(--ink)}
.tile.all .big{font:400 64px/.9 var(--display);letter-spacing:-.04em;color:var(--navy)}
.tile.all h3{color:var(--navy);font-size:19px;margin-top:10px}

/* ============ How it works ============ */
.how{background:#fff}
.how-head{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:end;margin-bottom:76px}
.how-head .display{margin-top:18px}
.how-head p{font-size:16px;line-height:1.7;max-width:380px}
.how-head .btn{margin-top:26px}
.flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rail{position:absolute;top:21px;left:22px;width:calc((100% - 48px) / 3 * 2 + 48px);height:2px;background:var(--line)}
.rail i{position:absolute;inset:0;background:var(--navy);transform-origin:left center}
.node{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid #D3D8E1;font:500 12px/1 var(--display);letter-spacing:.06em;color:var(--muted);transition:background-color .5s var(--ease),border-color .5s,color .5s}
.node.on{background:var(--navy);border-color:var(--navy);color:#fff}
.stp{display:flex;flex-direction:column}
.stp-card{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;margin-top:28px;min-height:300px;padding:34px 30px 28px;border-radius:26px;background:#F4F6F9;border:1px solid var(--line);transition:background-color .5s var(--ease),border-color .5s}
.stp-card .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:0 14px 26px -12px rgba(5,14,31,.55);transition:background .5s,color .5s}
.stp-card .ic i{font-size:20px}
.stp-card h4{font:400 24px/1.15 var(--display);letter-spacing:-.01em;color:var(--navy);margin:30px 0 12px;transition:color .5s}
.stp-card p{font-size:14.5px;line-height:1.7;transition:color .5s}
.stp-card .meta{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:22px;border-top:1px solid #DDE3EC;font:500 11px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy);transition:color .5s,border-color .5s}
.stp-card .meta i{font-size:13px}
.stp-card .ghost{position:absolute;right:26px;top:22px;font:300 96px/1 var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px #DCE1E8;pointer-events:none;transition:-webkit-text-stroke-color .5s}
.stp-card>*:not(.ghost){position:relative}
.stp-card:hover{background-color:var(--ink);border-color:var(--ink)}
.stp-card:hover h4,.stp-card:hover .meta{color:#fff}
.stp-card:hover p{color:#AEBAD0}
.stp-card:hover .meta{border-top-color:rgba(255,255,255,.14)}
.stp-card:hover .ic{background:#fff;color:var(--navy)}
.stp-card:hover .ghost{-webkit-text-stroke-color:rgba(255,255,255,.14)}

/* ============ Reviews ============ */
.reviews{background:var(--ice)}
.rev-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:50px}
.rev-head .display{margin-top:16px}
.rating{display:flex;align-items:center;gap:18px}
.rev-side{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.rev-nav{display:flex;gap:12px}
.rev-btn{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);color:var(--navy);display:grid;place-items:center;font-size:16px;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s,transform .35s var(--ease)}
.rev-btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.rev-btn:active{transform:scale(.92)}
.rev-btn i{transition:transform .35s var(--ease)}
#rev-prev:hover i{transform:translateX(-3px)}
#rev-next:hover i{transform:translateX(3px)}
.dark .rev-btn{border-color:rgba(255,255,255,.22);color:#fff}
.dark .rev-btn:hover{background:#fff;border-color:#fff;color:var(--navy)}
.rev-track{touch-action:pan-y}
.rating b{font:500 64px/1 var(--display);letter-spacing:-.04em;color:var(--navy)}
.stars{color:var(--blue);letter-spacing:4px;font-size:15px}
.rating small{display:block;margin-top:6px;font:500 11px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.rev-view{overflow:hidden;padding:10px 0 30px;margin:-10px 0 -30px}
.rev-track{display:flex;gap:24px;transition:transform .9s var(--ease)}
.rev{flex:0 0 calc((100% - 48px)/3);background:#fff;border-radius:22px;padding:34px 30px 28px;box-shadow:0 24px 50px -32px rgba(10,31,68,.25)}
.rev q{display:block;quotes:none;font-size:15.5px;line-height:1.65;color:var(--navy);margin:18px 0 26px;min-height:104px}
.rev .who{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--line)}
.rev .av{width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font:500 12px var(--display)}
.rev .who b{display:block;font:500 13px/1.2 var(--display);text-transform:uppercase;color:var(--navy)}
.rev .who small{font:500 10.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.dots{display:flex;justify-content:center;gap:10px;margin-top:36px}
.dots button{width:8px;height:8px;border-radius:5px;background:#C9CDD5;transition:width .4s var(--ease),background .4s}
.dots button.on{width:26px;background:var(--navy)}
.ph-note{font-size:12px;color:var(--muted);text-align:center;margin-top:18px}

/* ============ Why choose + support ============ */
.why{background:#fff}
.why-head{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:end;margin-bottom:56px}
.why-head .display{margin-top:18px}
.why-head p{max-width:400px;justify-self:end;padding-bottom:6px}
.why-cards{display:grid;grid-template-columns:1.05fr 1fr 1fr;grid-template-rows:auto auto;gap:20px}
.why-card{position:relative;overflow:hidden;display:flex;flex-direction:column;background:#F4F6FA;border:1px solid var(--line);border-radius:26px;padding:34px 32px;transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s}
.why-card:hover{transform:translateY(-8px);border-color:transparent;box-shadow:0 30px 60px -30px rgba(10,31,68,.28)}
.why-card .top{display:flex;align-items:center;justify-content:space-between}
.why-card .num{font:500 12px/1 var(--display);letter-spacing:.2em;color:var(--muted)}
.why-card .ic{width:46px;height:46px;border-radius:13px;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 12px 24px -10px rgba(5,14,31,.5)}
.why-card .ic i{font-size:18px}
.why-card h4{font:400 24px/1.1 var(--display);text-transform:uppercase;letter-spacing:-.02em;color:var(--navy);margin:auto 0 12px;padding-top:44px}
.why-card p{font-size:14px;line-height:1.7;max-width:340px}
/* Feature card: dark, tall, carries the purity figure */
.why-card.feature{grid-row:1 / 3;background:var(--ink);border-color:transparent;color:#C9CED8;padding:40px 36px}
.why-card.feature::before{content:"";position:absolute;inset:0;background:radial-gradient(460px 320px at 100% 0%,rgba(22,58,125,.6),transparent 70%);pointer-events:none}
.why-card.feature > *{position:relative}
.why-card.feature .num{color:rgba(255,255,255,.5)}
.why-card.feature .ic{background:#fff;color:var(--navy);box-shadow:none}
.why-card.feature .helm-w{position:absolute;right:-70px;bottom:-50px;width:300px;color:rgba(255,255,255,.04)}
.why-card .big{font:300 clamp(72px,8vw,112px)/.9 var(--display);letter-spacing:-.05em;color:#fff;margin-top:56px}
.why-card .big small{font-size:.42em;letter-spacing:-.02em;vertical-align:top;margin-right:4px}
.why-card .big-cap{font:500 11px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:14px}
.why-card.feature h4{color:#fff;padding-top:60px}
/* Wide card: traceability, with a lot-to-COA ticket */
.why-card.wide{grid-column:2 / 4;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}
.why-card.wide .copy{display:flex;flex-direction:column}
.ticket{align-self:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:0 24px 40px -30px rgba(10,31,68,.35)}
.ticket .t-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:13px}
.ticket .t-row:last-child{border-bottom:0;padding-bottom:0}
.ticket .t-row:first-child{padding-top:0}
.ticket .t-row span{font:500 10.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ticket .t-row b{font:500 14px/1 var(--display);color:var(--navy)}
.ticket .ok{font-style:normal;display:inline-flex;align-items:center;gap:7px;font:500 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:#EEF1F6;border-radius:30px;padding:7px 11px}
.support{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-top:80px}
.support .display{margin:18px 0 34px}
.feat{display:flex;gap:18px;align-items:flex-start;margin-bottom:22px}
.feat .ic{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid #D6DAE1;display:grid;place-items:center;color:var(--blue)}
.feat .ic i{font-size:16px}
.feat h5{font:400 17px/1.3 var(--display);color:var(--navy)}
.feat p{font-size:13.5px;color:var(--muted)}
.support .btn{margin-top:18px}
.talk{position:relative;overflow:hidden;background:var(--ink);border-radius:26px;padding:44px 38px;color:#fff}
.talk::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 260px at 90% 0%,rgba(22,58,125,.55),transparent 70%);pointer-events:none}
.talk .helm-t{position:absolute;right:-60px;bottom:-60px;width:260px;color:rgba(255,255,255,.045)}
.talk h3{font:400 30px/1 var(--display);text-transform:uppercase;letter-spacing:-.02em;position:relative}
.talk>p{color:#9FB0CC;font-size:15px;margin:14px 0 28px;position:relative}
.talk-row{position:relative;display:flex;gap:16px;align-items:center;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 20px;margin-top:12px;transition:border-color .35s,background .35s}
.talk-row:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.04)}
.talk-row i{font-size:19px;width:22px;text-align:center;color:var(--sky);flex:none}
.talk-row b{display:block;font:400 16px/1.2 var(--display)}
.talk-row small{color:#8E9DB7;font-size:12.5px}

/* ============ FAQ ============ */
.faq{background:var(--ice)}
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}
.faq-side .display{margin:18px 0 26px}
.faq-side p{font-size:17px;color:var(--navy);max-width:360px;margin-bottom:30px}
.acc-item{border-bottom:1px solid #DCDFE5}
.acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;text-align:left;font:400 18px/1.35 var(--display);color:var(--navy)}
.pm{position:relative;width:14px;height:14px;flex:none}
.pm::before,.pm::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1.5px;background:var(--navy);transition:transform .5s var(--ease)}
.pm::after{transform:rotate(90deg)}
.acc-item.open .pm::after{transform:rotate(0)}
.acc-a{height:0;overflow:hidden}
.acc-a p{padding:0 50px 26px 0;font-size:14.5px;line-height:1.75}

/* ============ CTA ============ */
.cta{background:#fff;padding:120px 0 100px}
.cta-box{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;background:var(--grad);border-radius:30px;min-height:380px;color:#fff}
.cta-box::before{content:"";position:absolute;inset:0;border-radius:30px;background:radial-gradient(520px 320px at 20% 100%,rgba(255,255,255,.12),transparent 70%)}
.cta-art{position:relative;align-self:stretch}
.cta-art img{position:absolute;left:14%;bottom:0;width:62%;height:122%;object-fit:contain;object-position:bottom center}
.cta-art img.fallback{width:54%;left:22%;bottom:50px;border-radius:24px;box-shadow:0 40px 70px -20px rgba(5,14,31,.55)}
.cta-art .helm-cta{position:absolute;left:-40px;bottom:-30px;width:340px;color:rgba(255,255,255,.12);overflow:visible}
.cta-copy{position:relative;padding:60px 60px 60px 10px}
.cta-copy h2{font:400 clamp(34px,4vw,52px)/.98 var(--display);text-transform:uppercase;letter-spacing:-.03em}
.cta-copy p{font-size:18px;color:rgba(255,255,255,.88);margin:24px 0 34px;max-width:430px}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ============ Footer ============ */
.footer{background:var(--ink);color:#A7B4CA;padding-top:100px;overflow:hidden}
.footer .helm-f{position:absolute;right:-120px;top:40px;width:520px;color:rgba(255,255,255,.03)}
.f-grid{position:relative;display:grid;grid-template-columns:1.4fr .7fr .8fr .8fr 1.2fr;gap:40px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.08)}
.f-logo{height:44px;width:auto;filter:brightness(0) invert(1);margin-bottom:22px}
.f-grid>div>p{font-size:14px;max-width:300px}
.f-grid h5{font:500 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:22px}
.f-grid ul{list-style:none;display:grid;gap:13px;font-size:14.5px}
.f-grid a{transition:color .3s}
.f-grid a:hover{color:#fff}
.vet{display:inline-flex;align-items:center;gap:10px;margin-top:24px;border:1px solid rgba(255,255,255,.14);border-radius:30px;padding:7px 16px 7px 7px;font:500 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.vet span{width:28px;height:28px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:11px}
.f-news p{font-size:14px;margin-bottom:18px}
.f-form{display:flex;align-items:center;border:1px solid rgba(255,255,255,.16);border-radius:30px;padding:5px 5px 5px 18px}
.f-form input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:400 14px var(--body)}
.f-form input::placeholder{color:#6F7F99}
.f-form button{height:36px;padding:0 18px;border-radius:20px;background:#fff;color:var(--navy);font:500 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.f-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:28px 0;font-size:13px;color:#6F7F99}
.f-bot div{display:flex;gap:26px}
.f-disc{background:#030914;padding:22px 0;font-size:12px;line-height:1.7;color:#6F7F99}

/* ============ Dark sections (section separation) ============ */
.dark{background:radial-gradient(760px 460px at 88% 0%,rgba(22,58,125,.5) 0%,rgba(22,58,125,0) 70%),radial-gradient(620px 420px at 0% 100%,rgba(22,58,125,.22) 0%,rgba(22,58,125,0) 70%),var(--ink);color:#9FB0CC}
.dark .display,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .sec-title p,.dark .faq-side p{color:#AEBAD0}
.dark .btn-line{border-color:rgba(255,255,255,.55);color:#fff}
.dark .btn-line:hover{background:#fff;color:var(--navy)}
/* reviews */
.dark .rating b,.dark .rating small,.dark .stars{color:#fff}
.dark .rev{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);box-shadow:none}
.dark .rev q{color:#E4E9F2}
.dark .rev .who{border-top-color:rgba(255,255,255,.1)}
.dark .rev .who b{color:#fff}
.dark .rev .who small{color:#9FB0CC}
.dark .rev .av{background:#fff;color:var(--navy)}
.dark .dots button{background:rgba(255,255,255,.25)}
.dark .dots button.on{background:#fff}
.dark .ph-note{color:#6F7F99}
/* faq */
.dark .acc-item{border-bottom-color:rgba(255,255,255,.12)}
.dark .acc-q{color:#fff}
.dark .pm::before,.dark .pm::after{background:#fff}
.dark .acc-a p{color:#AEBAD0}

/* Toast */
.toast{position:fixed;left:50%;bottom:30px;z-index:150;transform:translate(-50%,calc(100% + 60px));display:flex;align-items:center;gap:12px;background:var(--navy);color:#fff;border-radius:40px;padding:12px 22px 12px 12px;font:500 13px var(--display);box-shadow:0 24px 50px -16px rgba(5,14,31,.6);transition:transform .6s var(--ease)}
.toast.show{transform:translate(-50%,0)}
.toast i{width:28px;height:28px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;font-size:12px}

/* JS-driven initial state */
.motion [data-up]{opacity:0;transform:translateY(40px)}

/* ============ Responsive ============ */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:grid}
  .bar{grid-template-columns:auto 1fr;padding-left:20px}
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-center{height:520px;order:2}
  .hero-right{order:3;align-items:flex-start;text-align:left;gap:44px}
  .checks{margin-top:40px}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile.lead{grid-row:span 1;min-height:420px}
  .how-head{grid-template-columns:1fr;gap:24px;margin-bottom:56px}
  .why-head{grid-template-columns:1fr;gap:22px}
  .why-head p{justify-self:start}
  .why-cards{grid-template-columns:1fr 1fr}
  .why-card.feature{grid-row:auto;grid-column:1 / 3}
  .why-card.feature h4{padding-top:40px}
  .why-card.wide{grid-column:1 / 3}
  .lab-grid,.support,.faq-grid{grid-template-columns:1fr}
  .lab-art{height:480px}
  .rev{flex-basis:calc((100% - 24px)/2)}
  .cta-box{grid-template-columns:1fr}
  .cta-art{height:320px}
  .cta-copy{padding:10px 36px 50px}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .flow{grid-template-columns:1fr;gap:18px}
  .rail{display:none}
  .stp-card{margin-top:14px;min-height:0}
}
@media (max-width:640px){
  :root{--r-panel:34px}
  .pad{padding:72px 0 84px}
  .header{top:10px}
  .shop-now,.h-right .search{display:none}
  .hero{padding:110px 0 120px}
  .hero-center{height:400px}
  .hero-stage{left:-10%;right:-10%}
  .grid4{gap:16px}
  .add,.card-go{width:42px;height:42px}
  .card-name{font-size:15px}
  .why-cards{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr;gap:14px}
  .tile{min-height:0;padding:24px}
  .tile.lead,.tile.wide{grid-column:auto;padding:26px 24px 0}
  .tile.lead{min-height:0}
  .tile.lead .tile-body,.tile.wide .tile-body{max-width:none}
  .tile.lead .shots,.tile.wide .shots{position:relative;right:auto;bottom:auto;width:100%;height:230px;margin-top:20px}
  .tile.wide .shots img+img{margin-left:-14%}
  .why-card.feature,.why-card.wide{grid-column:auto}
  .why-card.wide{grid-template-columns:1fr}
  .why-card{padding:30px 26px}
  .stats3{gap:28px}
  .checks-grid{grid-template-columns:1fr}
  .lab{padding:76px 0 70px}
  .lab-art{height:340px}
  .vial-lab img{width:70%}
  .stat b{font-size:34px}
  .rev{flex-basis:100%}
  .cta-copy{padding:10px 24px 40px}
  .f-grid{grid-template-columns:1fr}
  .acc-a p{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
}

/* =====================================================================
   Shared components for inner pages (shop, product, cart, checkout, info, policies)
   ===================================================================== */
.card-media{display:block}
.card-name a{color:inherit}
.nav a.active::after{transform:scaleX(1)}
html.locked,html.locked body{overflow:hidden}
/* decorative bleed (glows, pings, rotated bands) never creates a horizontal scrollbar; clip keeps position:sticky working */
main{overflow-x:clip}

/* Scrim + slide-over panels */
.scrim{position:fixed;inset:0;z-index:140;background:rgba(5,14,31,.45);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:150;width:min(440px,100%);background:#fff;display:flex;flex-direction:column;transform:translateX(105%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s,box-shadow .6s}
.drawer.open{transform:none;visibility:visible;transition:transform .6s var(--ease),visibility 0s;box-shadow:-30px 0 60px -30px rgba(5,14,31,.4)}
.dr-head{display:flex;justify-content:space-between;align-items:center;padding:26px 28px;border-bottom:1px solid var(--line)}
.dr-head h3{font:500 20px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--navy)}
.dr-head h3 span{color:var(--muted);font-weight:400}
.dr-body{flex:1;overflow-y:auto;padding:8px 28px}
.dr-foot{padding:22px 28px 28px;border-top:1px solid var(--line);display:grid;gap:10px}
.drawer.empty .dr-foot{display:none}
.dr-row{display:flex;justify-content:space-between;align-items:baseline;font:500 15px var(--display);color:var(--navy)}
.dr-row b{font-size:22px;font-weight:500}
.dr-note{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.dr-btn{width:100%;justify-content:center;min-width:0}
.dr-empty{text-align:center;padding:70px 10px;display:grid;justify-items:center;gap:18px;color:var(--muted)}
.dr-helm{width:70px;color:#E4E7EC}
.line{display:grid;grid-template-columns:78px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.line-img{display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#F6F7F9,#E4E7EC)}
/* Product shots are cutouts on a transparent background: cropping them to the
   square thumbnail cuts the vial off, so the whole vial is fitted inside. */
.line-img img{width:100%;height:100%;object-fit:contain;padding:10px;mix-blend-mode:normal}
.line-img img.cut{object-fit:contain;padding:8px;mix-blend-mode:normal}
.line-name{display:block;font:500 15px/1.25 var(--display);color:var(--navy)}
.line-meta{display:block;font-size:12.5px;color:var(--muted);margin:3px 0 10px}
.line-end{display:grid;justify-items:end;gap:14px;font:500 15px var(--display);color:var(--navy)}
.line-rm{color:var(--muted);font-size:14px;transition:color .3s}
.line-rm:hover{color:var(--navy)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:30px;height:34px}
.qty button{width:32px;height:32px;display:grid;place-items:center;font-size:10px;color:var(--navy)}
.qty span{min-width:22px;text-align:center;font:500 13px var(--display);color:var(--navy)}

/* Search overlay + mobile menu */
.search-ov,.menu{position:fixed;left:0;right:0;top:0;z-index:150;background:#fff;padding:30px 0 40px;transform:translateY(-105%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s;max-height:100vh;overflow-y:auto}
.search-ov.open,.menu.open{transform:none;visibility:visible;transition:transform .6s var(--ease),visibility 0s;box-shadow:0 30px 60px -30px rgba(5,14,31,.35)}
.s-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.s-form{display:flex;align-items:center;gap:16px;border-bottom:2px solid var(--navy);padding-bottom:14px}
.s-form i{font-size:22px;color:var(--navy)}
.s-form input{flex:1;min-width:0;border:0;outline:0;font:300 clamp(24px,3.4vw,40px)/1.2 var(--display);color:var(--navy);text-transform:uppercase;letter-spacing:-.02em;background:transparent}
.s-results{margin-top:20px;display:grid;gap:4px}
.s-hint{color:var(--muted);font-size:14px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:10px 0}
.s-hint a{border:1px solid var(--line);border-radius:30px;padding:7px 14px;font:500 12px var(--display);color:var(--navy);letter-spacing:.06em;text-transform:uppercase;transition:background .3s,color .3s}
.s-hint a:hover{background:var(--navy);color:#fff}
.s-hit{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;padding:10px 12px;border-radius:14px;transition:background .3s}
.s-hit:hover{background:#F4F5F7}
.s-hit img{width:56px;height:56px;border-radius:12px;object-fit:contain;padding:4px;background:#EEF0F3}

/* Honeypot (inc/forms.php). Off screen rather than display:none, because a form
   filling script checks for display:none and skips the field, which is the one
   thing this must not let it do. aria-hidden and tabindex keep it away from
   anybody reading or tabbing the page. */
.sp-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.s-hit img.cut{object-fit:contain;padding:4px}
.s-hit b{display:block;font:500 16px var(--display);color:var(--navy)}
.s-hit small{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.s-hit em{font-style:normal;font-size:14px;color:var(--muted)}
.s-all{display:inline-flex;gap:10px;align-items:center;margin-top:12px;font:500 13px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.m-links{display:grid;gap:4px}
.m-legal{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px}
.m-legal a{font:500 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.m-links a{font:400 clamp(28px,8vw,40px)/1.2 var(--display);text-transform:uppercase;letter-spacing:-.02em;color:var(--navy);padding:6px 0;border-bottom:1px solid var(--line)}

/* Inner page hero */
.page-hero{position:relative;overflow:hidden;padding:170px 0 70px;background:#fff}
.page-hero.dark{padding-bottom:90px}
.page-hero .helm-ph{position:absolute;right:-6%;top:40px;width:min(520px,48vw);color:#F2F4F7;pointer-events:none}
.page-hero.dark .helm-ph{color:rgba(255,255,255,.04)}
.page-hero .container{position:relative}
.page-hero h1{font-size:clamp(44px,6.4vw,88px);margin:20px 0 22px}
.page-hero .lead{max-width:600px;font-size:17px;line-height:1.7}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font:500 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.crumbs a{color:var(--navy)}
.crumbs a:hover{text-decoration:underline}
.crumbs i{font-size:9px}
.dark .crumbs,.dark .crumbs a{color:#AEBAD0}
.sec{padding:80px 0}
.sec.tight{padding:40px 0 80px}

/* Shop */
.toolbar{position:sticky;top:96px;z-index:20;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:14px;margin-bottom:36px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{height:42px;padding:0 18px;border-radius:30px;font:500 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);border:1px solid transparent;transition:background .35s var(--ease),color .35s,border-color .35s}
.tab:hover{border-color:var(--line)}
.tab.on{background:var(--navy);color:#fff}
.tab small{opacity:.55;margin-left:6px}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.field{display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;border:1px solid var(--line);border-radius:30px;color:var(--navy);background:#fff}
.field input,.field select{border:0;outline:0;background:transparent;font:400 14px var(--body);color:var(--navy);min-width:0}
.field input{width:180px}
.field select{cursor:pointer;padding-right:4px}
.fam-row{display:flex;gap:8px;flex-wrap:wrap;margin:-14px 0 34px}
.fam{border:1px solid var(--line);border-radius:30px;padding:8px 14px;font:500 12px var(--display);color:var(--navy);transition:background .3s,color .3s,border-color .3s}
.fam:hover{border-color:var(--navy)}
.fam.on{background:var(--navy);border-color:var(--navy);color:#fff}
.result-meta{font:500 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.grid-shop{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 28px}
.empty-state{grid-column:1/-1;text-align:center;padding:80px 20px;color:var(--muted)}
.empty-state h3{font:400 28px var(--display);text-transform:uppercase;color:var(--navy);margin-bottom:10px}
.more-wrap{text-align:center;margin-top:60px}

/* Product page */
.pdp{padding:150px 0 40px}
.pdp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:start}
.gallery{position:sticky;top:110px}
.g-main{position:relative;aspect-ratio:1;border-radius:28px;overflow:hidden;background:radial-gradient(60% 50% at 50% 55%,#fff 0%,rgba(255,255,255,0) 100%),linear-gradient(180deg,#F6F7F9 0%,#E4E7EC 100%);cursor:zoom-in}
.g-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .5s var(--ease)}
.g-main img.cut{inset:8%;width:84%;height:84%;object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 30px 30px rgba(10,31,68,.18))}
.g-main.zoom img{transform:scale(1.35)}
.g-badges{position:absolute;left:18px;top:18px;display:flex;gap:8px;z-index:2}
.g-badges span{background:rgba(255,255,255,.92);border-radius:30px;padding:7px 12px;font:500 10.5px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.g-thumbs{display:flex;gap:12px;margin-top:14px}
.g-thumbs button{width:82px;aspect-ratio:1;border-radius:16px;overflow:hidden;border:1.5px solid transparent;background:#EEF0F3;transition:border-color .3s}
.g-thumbs button.on{border-color:var(--navy)}
.g-thumbs img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.g-thumbs img.cut{object-fit:contain;padding:8px;mix-blend-mode:normal}
.pdp-info .p-fam{font:500 12px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pdp-info h1{font-size:clamp(40px,4.8vw,64px);margin:14px 0 18px}
.p-price{font:400 30px/1 var(--display);color:var(--navy);display:flex;align-items:baseline;gap:12px}
.p-price small{font-size:13px;color:var(--muted)}
.ruo{display:flex;gap:12px;align-items:flex-start;margin:24px 0;padding:14px 16px;border-radius:14px;background:#F4F5F7;font-size:13px;line-height:1.55;color:var(--text)}
.ruo i{color:var(--navy);margin-top:2px}
.opt-label{display:block;font:500 11px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:12px}
.sizes{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.size{min-width:84px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);text-align:left;transition:border-color .3s,background .3s}
.size b{display:block;font:500 15px var(--display);color:var(--navy)}
.size small{font-size:12px;color:var(--muted)}
.size.on{border-color:var(--navy);background:#F6F7F9}
.buy{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.qty.lg{height:56px}
.qty.lg button{width:48px;height:54px;font-size:12px}
.qty.lg span{min-width:30px;font-size:16px}
.buy .btn{flex:1;justify-content:center;min-width:220px}
.perks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0}
.perk{display:flex;gap:12px;align-items:center;font-size:13.5px;color:var(--navy)}
.perk i{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:13px;flex:none}
.spec{border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-top:10px}
.spec-row{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);font-size:14px}
.spec-row:last-child{border-bottom:0}
.spec-row span{font:500 11px/1.9 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.spec-row b{font-weight:500;color:var(--navy)}
.spec-row b.pending{color:var(--muted);font-weight:400;font-style:italic}
.coa-card{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-top:14px;padding:20px;border-radius:22px;background:var(--ink);color:#AEBAD0}
.coa-card .ic{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;font-size:18px}
.coa-card b{display:block;color:#fff;font:500 15px var(--display)}
.coa-card small{font-size:12.5px}
.coa-card a{color:#fff;font:500 12px var(--display);letter-spacing:.12em;text-transform:uppercase;display:flex;gap:8px;align-items:center;white-space:nowrap}
.ptabs{margin-top:90px}
.ptab-nav{position:relative;display:flex;gap:30px;border-bottom:1px solid var(--line);overflow-x:auto}
.ptab-nav button{padding:18px 0;font:500 13px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .3s}
.ptab-nav button.on{color:var(--navy)}
.ptab-ink{position:absolute;bottom:0;left:0;height:2px;background:var(--navy);transition:transform .5s var(--ease),width .5s var(--ease)}
.ptab-panels{padding:40px 0}
.ptab-panel{display:none;max-width:820px}
.ptab-panel.on{display:block;animation:tabIn .6s var(--ease)}
@keyframes tabIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sticky-buy{position:fixed;left:50%;bottom:22px;z-index:90;transform:translate(-50%,160%);width:min(760px,calc(100% - 24px));display:flex;align-items:center;gap:16px;padding:10px 10px 10px 12px;border-radius:40px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 24px 50px -20px rgba(5,14,31,.35);transition:transform .6s var(--ease)}
.sticky-buy.show{transform:translate(-50%,0)}
.sticky-buy img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#EEF0F3}
.sticky-buy img.cut{object-fit:contain;padding:3px}
.sticky-buy .sb-name{flex:1;min-width:0;font:500 15px/1.2 var(--display);color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-buy .sb-name small{display:block;font:400 12.5px var(--body);color:var(--muted)}
.sticky-buy .btn{height:48px;min-width:0}

/* Prose (policies, product copy) */
.prose{color:var(--text);font-size:15.5px;line-height:1.8}
.prose h2{font:400 26px/1.15 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--navy);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font:500 18px/1.3 var(--display);color:var(--navy);margin:28px 0 8px}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 18px 20px}
.prose li{margin-bottom:8px}
.prose a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--navy);font-weight:500}
.ph{background:#FFF3C4;color:#6B5200;border-radius:4px;padding:0 4px;font-style:normal}
.doc{display:grid;grid-template-columns:240px 1fr;gap:70px;align-items:start}
.toc{position:sticky;top:120px;display:grid;gap:4px;border-left:1px solid var(--line);padding-left:18px}
.toc a{font:500 12px/1.4 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 0;transition:color .3s}
.toc a:hover,.toc a.on{color:var(--navy)}
.doc-meta{font-size:13px;color:var(--muted);margin-bottom:30px}
.notice{display:flex;gap:14px;padding:18px 20px;border-radius:16px;background:#F4F5F7;border:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--text);margin-bottom:34px}
.notice i{color:var(--navy);margin-top:3px}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.inp{display:grid;gap:8px}
.inp label{font:500 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.inp input,.inp select,.inp textarea{width:100%;height:52px;padding:0 18px;border:1px solid var(--line);border-radius:14px;font:400 15px var(--body);color:var(--navy);background:#fff;outline:0;transition:border-color .3s,box-shadow .3s}
.inp textarea{height:150px;padding:14px 18px;resize:vertical}
.inp input:focus,.inp select:focus,.inp textarea:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(10,31,68,.08)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--text);cursor:pointer}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--navy);flex:none}
.box{border:1px solid var(--line);border-radius:24px;padding:30px}
.box h3{font:400 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--navy);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.box h3 .n{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:500 13px var(--display)}

/* Cart + checkout */
.cart-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:50px;align-items:start}
.cart-list .line{grid-template-columns:110px 1fr auto;padding:24px 0}
.summary{position:sticky;top:120px;border-radius:26px;padding:30px;background:#F6F7F9;border:1px solid var(--line)}
.summary h3{font:400 22px var(--display);text-transform:uppercase;color:var(--navy);margin-bottom:20px}
.sum-row{display:flex;justify-content:space-between;padding:10px 0;font-size:14.5px;color:var(--text)}
.sum-row b{color:var(--navy);font-weight:500}
.sum-total{border-top:1px solid var(--line);margin-top:10px;padding-top:18px;font:500 18px var(--display);color:var(--navy)}
.sum-total b{font-size:26px}
.summary .btn{width:100%;justify-content:center;margin-top:18px}
.sum-items{display:grid;gap:14px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.sum-item{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;font-size:13.5px}
.sum-item img{width:54px;height:54px;border-radius:12px;object-fit:cover;background:#EEF0F3}
.sum-item img.cut{object-fit:contain;padding:4px}
.sum-item b{display:block;font:500 14px var(--display);color:var(--navy)}
.sum-item small{color:var(--muted)}
.trust-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:18px;font-size:12px;color:var(--muted)}
.trust-row span{display:flex;gap:6px;align-items:center}
.ship-opt{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;transition:border-color .3s}
.ship-opt:has(input:checked){border-color:var(--navy);background:#F6F7F9}
.ship-opt input{accent-color:var(--navy)}
.ship-opt span{flex:1;font-size:14.5px;color:var(--navy)}
.ship-opt small{display:block;color:var(--muted);font-size:12.5px}
.done:not(.contact-form){text-align:center;padding:60px 20px}
.done .ok-ic{width:84px;height:84px;margin:0 auto 26px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:30px}

/* Responsive for inner pages */
@media (max-width:1080px){
  .grid-shop{grid-template-columns:repeat(3,1fr)}
  .pdp-grid,.cart-grid,.doc{grid-template-columns:1fr;gap:40px}
  .gallery,.summary,.toc{position:static}
  .toc{display:none}
}
@media (max-width:760px){
  .inp input,.inp select,.inp textarea,.field input,.field select,.s-form input{font-size:16px}
  .grid-shop{grid-template-columns:1fr 1fr;gap:26px 14px}
  .toolbar{position:static;padding:10px}
  .tools,.field{width:100%}
  .field input{width:100%;flex:1}
  .page-hero{padding:120px 0 50px}
  .pdp{padding:110px 0 30px}
  .form-grid{grid-template-columns:1fr}
  .perks{grid-template-columns:1fr}
  .spec-row{grid-template-columns:1fr;gap:2px}
  .coa-card{grid-template-columns:auto 1fr}
  .coa-card a{grid-column:1/-1}
  .cart-list .line{grid-template-columns:80px 1fr auto}
  .sticky-buy .sb-name small{display:none}
  .box{padding:22px}
}

/* =====================================================================
   Mobile card slider. Add class "m-slider" to any card grid/row container.
   Desktop: untouched (the container's own grid rules apply).
   <=760px: horizontal scroll-snap slider, one card + a peek of the next,
   with progress dots injected by site.js (SP.mobileSlider).
   Optional: data-slide="72%" on the container sets the card width.
   ===================================================================== */
@media (max-width:760px){
  .m-slider{min-width:0;display:flex!important;grid-template-columns:none!important;gap:14px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:4px 20px 18px!important;margin-inline:-20px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .m-slider::-webkit-scrollbar{display:none}
  .m-slider>*{flex:0 0 var(--slide,80%)!important;max-width:var(--slide,80%)!important;min-width:0;scroll-snap-align:start;grid-column:auto!important;grid-row:auto!important}
  .m-slider>.hide,.m-slider>[hidden]{display:none!important}
  .m-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:6px}
  .m-dots button{position:relative;width:7px;height:7px;border-radius:4px;background:#C9CDD5;padding:0;transition:width .4s var(--ease),background .4s}
  .m-dots button::before{content:"";position:absolute;inset:-12px -5px}
  .m-dots button.on{width:22px;background:var(--navy)}
  .dark .m-dots button{background:rgba(255,255,255,.25)}
  .dark .m-dots button.on{background:#fff}
}
@media (min-width:761px){.m-dots{display:none}}


/* =====================================================================
   Mega menu (header). Triggers live in .nav, panels in #mega under the bar.
   ===================================================================== */
.nav-t{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 4px;font:500 12.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);position:relative}
.nav-t i{font-size:9px;transition:transform .45s var(--ease)}
.nav-t[aria-expanded="true"] i{transform:rotate(180deg)}
.nav-t::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:1.5px;background:var(--navy);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav-t:hover::after,.nav-t.active::after,.nav-t[aria-expanded="true"]::after{transform:scaleX(1);transform-origin:left}
.nav{gap:22px}
.mega{pointer-events:none;position:relative;margin-top:10px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s .5s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.mega.open{pointer-events:auto;opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s}
.mm-panel{display:none;background:rgba(255,255,255,.97);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:0 40px 80px -30px rgba(5,14,31,.35)}
.mm-panel.on{display:block}
.mm-panel.on .mm-col,.mm-panel.on .mm-tile,.mm-panel.on .mm-feature,.mm-panel.on .mm-talk{animation:mmIn .55s var(--ease) both}
.mm-panel.on>.mm-grid>*:nth-child(2),.mm-panel.on .mm-tile:nth-child(2){animation-delay:.04s}
.mm-panel.on>.mm-grid>*:nth-child(3),.mm-panel.on .mm-tile:nth-child(3){animation-delay:.08s}
.mm-panel.on>.mm-grid>*:nth-child(4),.mm-panel.on .mm-tile:nth-child(4){animation-delay:.12s}
@keyframes mmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mm-grid{display:grid;gap:26px;align-items:stretch}
.mm-shop{grid-template-columns:1.35fr 1fr 1fr 1.05fr}
.mm-research{grid-template-columns:1.9fr 1fr}
.mm-support{grid-template-columns:1fr 1fr 1.3fr}
.mm-col{padding:6px 4px;min-width:0}
.mm-head{display:flex;align-items:center;gap:10px;font:500 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy);padding-bottom:14px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.mm-head small{color:var(--muted);font-size:11px;letter-spacing:.06em}
.mm-head i{margin-left:auto;font-size:11px;transition:transform .4s var(--ease)}
.mm-head:hover i{transform:translateX(4px)}
.mm-label{display:block;font:500 11px var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-bottom:14px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.mm-fams{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.mm-fam{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 10px;margin:0 -10px;border-radius:10px;font-size:14px;color:var(--navy);transition:background .3s}
.mm-fam small{font:500 11px var(--display);color:var(--muted)}
.mm-fam:hover{background:#F4F5F7}
.mm-prods{display:grid;gap:2px}
.mm-prod{display:block;padding:8px 10px;margin:0 -10px;border-radius:10px;font-size:14px;color:var(--text);transition:background .3s,color .3s,padding .35s var(--ease)}
.mm-prod:hover{background:#F4F5F7;color:var(--navy);padding-left:14px}
.mm-all{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:500 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.mm-feature,.mm-talk{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:260px;padding:22px;border-radius:20px;background:radial-gradient(420px 260px at 80% 0%,rgba(22,58,125,.55),transparent 70%),var(--ink);color:#fff;isolation:isolate}
.mm-helm{position:absolute;right:-50px;bottom:-40px;width:210px;color:rgba(255,255,255,.05);z-index:-1}
.mm-tag{position:absolute;left:22px;top:22px;font:500 10.5px var(--display);letter-spacing:.16em;text-transform:uppercase;color:#C9CED8;border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:6px 10px}
.mm-feature img{position:absolute;right:10px;top:26px;width:44%;height:70%;object-fit:contain;transition:transform .8s var(--ease)}
.mm-feature img:not(.cut){border-radius:14px;object-fit:cover;width:40%;height:auto;top:60px}
.mm-feature:hover img{transform:translateY(-6px) rotate(-3deg)}
.mm-feature .mm-lab{right:-30px;top:10px;width:70%;height:80%}
.mm-fname{position:relative;font:400 22px/1.05 var(--display);text-transform:uppercase;letter-spacing:-.01em;max-width:60%}
.dark-feature .mm-fname{max-width:70%}
.mm-fprice{position:relative;display:flex;align-items:center;gap:8px;margin-top:10px;font:500 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:#C9CED8}
.mm-fprice i{transition:transform .4s var(--ease)}
.mm-feature:hover .mm-fprice i{transform:translateX(4px)}
.mm-talk b{font:400 20px var(--display);margin-top:auto}
.mm-talk small{color:#9FB0CC;font-size:13px;margin-top:6px}
.mm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mm-tile{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:18px;border:1px solid var(--line);transition:border-color .35s,background .35s,transform .45s var(--ease)}
.mm-tile:hover{border-color:var(--navy);background:#F6F7F9;transform:translateY(-2px)}
.mm-tile b{display:block;font:500 15px/1.2 var(--display);color:var(--navy);margin-bottom:4px}
.mm-tile small{font-size:13px;line-height:1.5;color:var(--muted)}
.mm-ic{width:42px;height:42px;flex:none;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:15px}
.header.mega-open .bar{background:rgba(255,255,255,.97)}
@media (max-width:1180px){.mm-shop{grid-template-columns:1.4fr 1fr 1fr}.mm-shop .mm-feature{display:none}}
@media (max-width:1080px){.mega{display:none}}
@media (prefers-reduced-motion:reduce){.mm-panel.on *{animation:none!important}}

/* Touch targets on phones: bigger hit areas without changing the look */
@media (max-width:760px){
  .crumbs a{display:inline-block;padding:12px 0;margin:-12px 0}
  .drawer .qty{height:38px}
  .drawer .qty button{width:38px;height:38px}
  .line-rm{position:relative}
  .line-rm::before{content:"";position:absolute;inset:-12px}
  .card-size button{position:relative}
  .card-size button::before{content:"";position:absolute;inset:-8px -3px}
}


/* =====================================================================
   Custom dropdown (site.js enhanceSelects). The native select is kept, hidden.
   ===================================================================== */
.dd{position:relative;width:100%;min-width:0}
.dd-native{position:absolute!important;inset:0;opacity:0;pointer-events:none;width:100%;height:100%}
.dd-btn{width:100%;height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--navy);font:400 15px var(--body);text-align:left;transition:border-color .3s,box-shadow .3s}
.dd-btn .dd-val{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-empty .dd-val{color:var(--muted)}
.dd-btn>i{font-size:11px;transition:transform .45s var(--ease)}
.dd.open .dd-btn>i{transform:rotate(180deg)}
.dd-btn:hover{border-color:#C9CFD9}
.dd-btn:focus-visible,.dd.open .dd-btn{outline:0;border-color:var(--navy);box-shadow:0 0 0 4px rgba(10,31,68,.08)}
.dd-invalid .dd-btn{border-color:var(--err)}
.dd-pop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;background:#fff;border:1px solid var(--line);border-radius:18px;padding:6px;box-shadow:0 30px 60px -20px rgba(5,14,31,.28);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top center;transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.dd.dd-up .dd-pop{top:auto;bottom:calc(100% + 8px);transform-origin:bottom center;transform:translateY(6px) scale(.98)}
.dd.open .dd-pop{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s}
.dd-search{display:none;align-items:center;gap:10px;margin:2px 2px 6px;padding:0 14px;height:44px;border-radius:12px;background:#F4F5F7;color:var(--muted)}
.dd-searchable .dd-search{display:flex}
.dd-search i{font-size:13px}
.dd-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 15px var(--body);color:var(--navy)}
.dd-list{list-style:none;margin:0;padding:0;max-height:280px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.dd-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 14px;border-radius:10px;font:400 15px var(--body);color:var(--text);cursor:pointer;transition:background .2s}
.dd-list li i{font-size:12px;color:var(--navy);opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s var(--ease)}
.dd-list li.on{background:#F4F5F7;color:var(--navy)}
.dd-list li[aria-selected="true"]{color:var(--navy);font-weight:500}
.dd-list li[aria-selected="true"] i{opacity:1;transform:none}
.dd-list li.dd-ph{color:var(--muted)}
.dd-list li[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.dd-list li[hidden]{display:none}
/* isolate the component from page-level input/icon styles */
.dd i{position:static;inset:auto;transform:none;margin:0;pointer-events:none}
.dd.open .dd-btn>i{transform:rotate(180deg)}
.dd .dd-search input{width:auto;height:auto;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-indent:0}
.dd .dd-btn{text-indent:0}
.dd-none{display:none;padding:14px;font-size:14px;color:var(--muted);text-align:center}
/* compact variant inside the pill-shaped .field (shop toolbar) */
.field .dd{width:auto;flex:1}
.field .dd-btn{height:40px;border:0;padding:0 2px;background:transparent;box-shadow:none!important;font-size:14px}
.field .dd-pop{left:-16px;right:-16px;min-width:220px}
/* dark variant */
.dd-dark .dd-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
.dd-dark.dd-empty .dd-val{color:#8E9DB7}
.dd-dark .dd-btn:focus-visible,.dd-dark.open .dd-btn{border-color:rgba(255,255,255,.55);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.dd-dark .dd-pop{background:#0B1A33;border-color:rgba(255,255,255,.12);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.dd-dark .dd-search{background:rgba(255,255,255,.07);color:#8E9DB7}
.dd-dark .dd-search input{color:#fff}
.dd-dark .dd-list li{color:#C9D3E3}
.dd-dark .dd-list li.on{background:rgba(255,255,255,.07);color:#fff}
.dd-dark .dd-list li[aria-selected="true"],.dd-dark .dd-list li i{color:#fff}
@media (max-width:760px){.dd-btn,.dd-search input{font-size:16px}.dd-list{max-height:min(320px,50vh)}}
@media (prefers-reduced-motion:reduce){.dd-pop,.dd-btn>i,.dd-list li i{transition:none}}

/* =====================================================================
   Mobile: footer in two columns, equal button pairs
   ===================================================================== */
@media (max-width:760px){
  .f-grid{grid-template-columns:1fr 1fr;gap:34px 22px;padding-bottom:40px}
  .f-grid>div:first-child,.f-grid>.f-news{grid-column:1/-1}
  .f-grid h5{margin-bottom:16px}
  .f-grid ul{gap:11px;font-size:14px}
  .footer{padding-top:70px}
  .f-bot{flex-direction:column;gap:12px;padding:22px 0}
  .f-bot div{gap:18px;flex-wrap:wrap}
  /* any group of two or more buttons side by side: stack them, same width and height */
  :where(div,p,nav):has(> .btn + .btn){display:flex;flex-direction:column;align-items:stretch;gap:12px}
  :where(div,p,nav):has(> .btn + .btn) > .btn{width:100%;min-width:0;justify-content:center;height:56px;margin:0}
}

/* ==========================================================================
   WordPress core and WooCommerce classes
   --------------------------------------------------------------------------
   Everything above this line is the approved design, copied verbatim from
   design/assets/css/site.css and left untouched. Everything below only maps
   the markup WordPress and WooCommerce generate onto that same design
   language (same tokens, same radii, same type scale). Nothing here
   restyles the design itself.
   ========================================================================== */

/* ---------- WordPress core blocks ---------- */
.wp-block-image{margin:0 0 26px}
.wp-block-image img{border-radius:22px}
.wp-block-image figcaption,.wp-caption-text{margin-top:10px;font:400 13px/1.5 var(--body);color:var(--muted)}
.wp-block-quote{margin:0 0 26px;padding:20px 26px;border-left:2px solid var(--navy);color:var(--navy);font-size:17px}
.wp-block-quote cite{display:block;margin-top:10px;font:500 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-style:normal}
.wp-block-pullquote{margin:0 0 26px;padding:30px;border:1px solid var(--line);border-radius:24px;text-align:center}
.wp-block-separator{height:0;border:0;border-top:1px solid var(--line);margin:40px 0}
.wp-block-code,.wp-block-preformatted{padding:20px;border:1px solid var(--line);border-radius:18px;background:#F4F6FA;font-size:14px;overflow:auto}
.wp-block-table{margin:0 0 26px}
.wp-block-table table{width:100%;border-collapse:collapse;font-size:15px}
.wp-block-table th,.wp-block-table td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left}
.wp-block-table th{font:500 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;border-radius:50px;background:var(--blue);color:#fff;font:500 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;transition:background .4s var(--ease)}
.wp-block-button__link:hover{background:var(--blue-h)}
.is-style-outline .wp-block-button__link{background:transparent;border:1.5px solid var(--navy);color:var(--navy)}
.is-style-outline .wp-block-button__link:hover{background:var(--navy);color:#fff}
.wp-block-list,.entry-content ul,.entry-content ol{margin:0 0 26px;padding-left:22px}
.wp-block-list li,.entry-content li{margin-bottom:8px}
.wp-block-embed,.wp-block-video{margin:0 0 26px}
.wp-block-embed iframe,.wp-block-video video{width:100%;border-radius:22px}
.wp-block-group.has-background{padding:30px;border-radius:24px}

/* Block alignment, relative to the design container (1140px) */
.alignleft{float:left;margin:6px 26px 20px 0}
.alignright{float:right;margin:6px 0 20px 26px}
.aligncenter{display:block;margin-inline:auto;text-align:center}
.alignwide{width:min(1320px,100vw - 40px);margin-inline:auto;max-width:none}
.alignfull{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.alignfull img,.alignfull .wp-block-cover{border-radius:0}

/* Captions */
.wp-caption{max-width:100%;margin:0 0 26px}
.wp-caption img{border-radius:22px}

/* Accessibility helper, WordPress standard markup */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.screen-reader-text:focus{position:fixed!important;top:16px;left:16px;z-index:300;width:auto;height:auto;clip:auto;clip-path:none;padding:12px 20px;border-radius:30px;background:var(--navy);color:#fff;font:500 12px var(--display);letter-spacing:.12em;text-transform:uppercase}
.skip-link:focus{outline:0}

/* ---------- Admin bar offset for the sticky header ---------- */
body.admin-bar .header{top:calc(18px + 32px)}
@media (max-width:782px){
  body.admin-bar .header{top:calc(18px + 46px)}
}
@media (max-width:640px){
  body.admin-bar .header{top:calc(10px + 46px)}
}
body.admin-bar .gate,body.admin-bar .search-ov,body.admin-bar .menu,body.admin-bar .drawer{top:32px}
@media (max-width:782px){
  body.admin-bar .gate,body.admin-bar .search-ov,body.admin-bar .menu,body.admin-bar .drawer{top:46px}
}

/* ---------- WooCommerce notices, drawn like the design .box card ---------- */
/* Notices are a status line, not a hero card: the design keeps them compact so
   the page content stays where the visitor expects it. */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,p.no-comments{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;list-style:none;
  margin:0 0 22px;padding:12px 16px;border:1px solid var(--line);border-radius:16px;
  background:#F4F6FA;color:var(--navy);font:400 14px/1.5 var(--body)}
.woocommerce-message{border-color:rgba(10,31,68,.18);background:#fff;box-shadow:0 14px 26px -24px rgba(10,31,68,.45)}
.woocommerce-info{background:#F4F6FA}
.woocommerce-error{border-color:rgba(180,35,24,.35);background:#FFF6F5;color:var(--err)}
.woocommerce-error li{margin:0;list-style:none}
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 16px;border-radius:24px;
  background:var(--blue);color:#fff;font:500 10px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:none;transition:background .4s var(--ease)}
.woocommerce-message .button:hover,.woocommerce-info .button:hover,.woocommerce-error .button:hover{background:var(--blue-h)}
.woocommerce-NoticeGroup{margin-bottom:26px}

/* ---------- WooCommerce breadcrumb, mapped onto the design .crumbs ---------- */
.woocommerce-breadcrumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font:500 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.woocommerce-breadcrumb a{color:var(--navy)}
.woocommerce-breadcrumb a:hover{text-decoration:underline}
.dark .woocommerce-breadcrumb,.dark .woocommerce-breadcrumb a{color:#AEBAD0}
@media (max-width:760px){
  .woocommerce-breadcrumb a{display:inline-block;padding:12px 0;margin:-12px 0}
}

/* ---------- Pagination (WordPress core and WooCommerce) ---------- */
.nav-links,.woocommerce-pagination ul.page-numbers,.wp-block-query-pagination{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  margin:48px 0 0;padding:0;border:0;list-style:none}
.woocommerce-pagination ul.page-numbers li{margin:0;border:0}
.page-numbers,.nav-links a,.nav-links span{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:30px;background:#fff;color:var(--navy);
  font:500 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s}
.page-numbers:hover,.nav-links a:hover{border-color:var(--navy)}
.page-numbers.current,.page-numbers.dots{pointer-events:none}
.page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
.page-numbers.dots{border-color:transparent;background:transparent;color:var(--muted)}
.woocommerce-result-count{font:400 14px var(--body);color:var(--muted)}

/* ---------- WooCommerce form fields, mapped onto the design .field and .inp ---------- */
.woocommerce form .form-row{display:grid;gap:8px;margin:0 0 18px;padding:0}
.woocommerce form .form-row label,
.woocommerce form label:not(.checkbox):not(.woocommerce-form__label-for-checkbox){
  font:500 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.woocommerce form .form-row .required{color:var(--err);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce form input.input-text,
.woocommerce form select,
.woocommerce form textarea{
  width:100%;height:52px;padding:0 18px;border:1px solid var(--line);border-radius:14px;
  font:400 15px var(--body);color:var(--navy);background:#fff;outline:0;
  transition:border-color .3s,box-shadow .3s}
.woocommerce form .form-row textarea,.woocommerce form textarea{height:150px;padding:14px 18px;resize:vertical}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form input.input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(10,31,68,.08)}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{border-color:var(--err);box-shadow:0 0 0 4px rgba(180,35,24,.08)}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%}
@media (min-width:761px){
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{display:inline-grid;width:calc(50% - 9px);vertical-align:top}
  .woocommerce form .form-row-first{margin-right:14px}
}
.woocommerce form .form-row label.checkbox,
.woocommerce form .woocommerce-form__label-for-checkbox{
  display:flex;align-items:flex-start;gap:10px;font:400 14px/1.6 var(--body);
  letter-spacing:0;text-transform:none;color:var(--text)}
.woocommerce form .form-row label.checkbox input,
.woocommerce form .woocommerce-form__label-for-checkbox input{width:18px;height:18px;margin-top:3px;flex:0 0 auto;accent-color:var(--navy)}
.woocommerce form .password-input{display:block;position:relative}
.woocommerce form small.woocommerce-password-hint,
.woocommerce form .description{display:block;margin-top:6px;font:400 13px/1.5 var(--body);color:var(--muted)}
.woocommerce form .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 30px;border-radius:50px;
  background:var(--blue);color:#fff;font:500 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 14px 30px -10px rgba(5,14,31,.45);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.woocommerce form .button:hover,.woocommerce button.button:hover,.woocommerce a.button:hover,.woocommerce input.button:hover{
  background:var(--blue-h);box-shadow:0 20px 40px -12px rgba(5,14,31,.55)}
.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--blue)}
.woocommerce .button:disabled,.woocommerce .button.disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
/* keep mobile inputs at 16px so iOS does not zoom on focus, same rule the design uses */
@media (max-width:760px){
  .woocommerce form input.input-text,.woocommerce form select,.woocommerce form textarea{font-size:16px}
}

/* ============ Theme-only additions (no prototype equivalent) ============
   These cover markup WordPress generates that the static design never had:
   the announcement bar, the 404 / empty state (it lived in a page-level
   <style> block in design/product.html), nav menu <li> wrappers and
   pagination. Keep design changes in design/, keep these here. */
.announce{background:var(--ink);color:#fff;text-align:center}
.announce .container{padding:10px 0;font:500 11.5px/1.4 var(--display);letter-spacing:.16em;text-transform:uppercase}
.announce a{text-decoration:underline;text-underline-offset:3px}
body.has-announce .header{top:auto}

/* Empty state, from design/product.html's page styles */
.nf{text-align:center;padding:40px 0 60px}
.nf .helm-nf{width:84px;margin:0 auto 26px;color:#E4E7EC}
.nf h1{font-size:clamp(40px,5.4vw,72px);margin:18px 0 18px}
.nf p{max-width:480px;margin:0 auto 32px}
.nf .cta-btns{justify-content:center}

/* wp_nav_menu wraps every link in an <li>; the design styled the anchors as
   direct children of these grids/flex rows. display:contents keeps the
   original layout without rewriting the design's selectors. */
.f-grid ul li,.f-bot li,.m-links li,.m-legal li,.mm-prods li{display:contents}
.f-grid ul,.f-bot ul,.m-links ul,.m-legal ul,.mm-prods ul{list-style:none;margin:0;padding:0}

/* WooCommerce prints its price as nested <span>/<bdi>/<del>/<ins>. The design's
   mega feature card styles a single line of text, so flatten it back to one. */
.mm-fprice .mm-fp{display:inline-flex;align-items:baseline;gap:6px;font:inherit;color:inherit}
.mm-fprice .mm-fp span,.mm-fprice .mm-fp bdi,.mm-fprice .mm-fp ins{font:inherit;color:inherit;text-decoration:none}
.mm-fprice .mm-fp del{opacity:.6}

/* the_posts_pagination() */
.sp-pagination{margin-top:56px}
.sp-pagination .nav-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.sp-pagination .page-numbers{min-width:44px;height:44px;padding:0 14px;border-radius:30px;border:1px solid var(--line);display:grid;place-items:center;font:500 13px/1 var(--display);color:var(--navy);transition:border-color .3s,background .3s,color .3s}
.sp-pagination .page-numbers:hover{border-color:var(--navy)}
.sp-pagination .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
.sp-pagination .page-numbers.dots{border-color:transparent}

/* The design's card size chips were <button>. A real product card links each
   size at the product page, so the same chips arrive as anchors. shop.css
   covers the shop grid; these keep the [sp_products] cards on the home page
   and content pages identical. */
.card-size a{font:500 11px/1 var(--display);letter-spacing:.06em;padding:6px 9px;border-radius:14px;border:1px solid var(--line);color:var(--muted);transition:border-color .3s,color .3s}
.card-size a.on,.card-size a:hover{border-color:var(--navy);color:var(--navy)}
@media (max-width:760px){
  .card-size a{position:relative}
  .card-size a::before{content:"";position:absolute;inset:-8px -3px}
}

/* Digital Heroes footer credit, sits after the copyright line in the same muted style */
.f-credit{margin-left:10px;padding-left:10px;border-left:1px solid rgba(111,127,153,.4);transition:color .3s}
.f-credit:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.f-credit{transition:none}}