:root{
  /* surface scale (light mode — Synthera) */
  --bg:#FFFFFF;
  --card:#F7F8FA;
  --card-2:#FFFFFF;
  --accent-surface:#F0F2F5;
  --border:#E5E8ED;
  --border-soft:#EDEFF3;
  --stroke:#A8B0BD;
  /* text scale */
  --fg:#0A0F1A;
  --fg-muted:#5A6373;
  --fg-dim:#9097A8;
  /* Synthera accents (sampled from logo) */
  --blue:#4F7DF9;
  --blue-deep:#4070F0;
  --blue-soft:#7B9DFB;
  --mint:#6EE5D0;          /* bright mint — fills only (badges) */
  --mint-deep:#0FAA8E;     /* readable mint — text on light bg */
  --mint-soft:#D6F4EC;     /* very pale mint — icon backgrounds */
  --destructive:#D93B3B;
  /* type */
  --ff-display:"Space Grotesk",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,sans-serif;
  /* geometry */
  --r-sm:4px;
  --r-md:6px;
  --r-pill:999px;
  --container:1280px;
  --pad:24px;
  --duration:.25s;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);font-family:var(--ff-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}

/* ─── Eyebrow (the defining type style) ────────────────────────────── */
.eyebrow{
  font-family:var(--ff-display);font-size:12px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mint-deep);
  display:inline-block;
}

/* ─── Top utility bar ──────────────────────────────────────────────── */
.utility{
  background:#F2F4F7;border-bottom:1px solid var(--border-soft);
  padding:9px 0;
}
.utility .row{
  display:flex;justify-content:center;align-items:center;gap:48px;
  font-family:var(--ff-display);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);
}
.utility .row .sep{color:var(--fg-dim)}
.utility .row .accent{color:var(--mint-deep)}

/* ─── Header ───────────────────────────────────────────────────────── */
header.site{
  background:var(--bg);position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--border-soft);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:104px}
.nav .logo{display:flex;align-items:center}
.nav .logo img{height:64px;width:auto}
.nav ul{display:flex;gap:36px;list-style:none}
.nav ul a{
  font-size:14px;font-weight:500;color:var(--fg-muted);
  letter-spacing:.02em;transition:color var(--duration) var(--ease);
  padding:8px 0;position:relative;
}
.nav ul a:hover,.nav ul a.active{color:var(--fg)}
.nav ul a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--blue);border-radius:2px;
}
.nav .utils{display:flex;gap:10px;align-items:center}
.nav .utils a,
.nav .utils button{
  display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;
  color:var(--fg);border:1px solid var(--border);border-radius:50%;background:transparent;
  transition:all var(--duration) var(--ease);cursor:pointer;
}
.nav .utils a:hover,
.nav .utils button:hover{border-color:var(--blue);color:var(--blue)}
.nav .utils svg{width:18px;height:18px;stroke-width:1.8}
.nav .utils .cart{position:relative}
.nav .utils .cart .count{
  position:absolute;top:-4px;right:-4px;background:var(--blue);color:#fff;
  font-family:var(--ff-display);font-size:10px;font-weight:700;
  width:18px;height:18px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;
}

/* ─── Hero (full-width, 50/50 image right) ─────────────────────────── */
.hero{
  position:relative;background:var(--bg);overflow:hidden;
  min-height:min(720px, calc(100vh - 136px));
  display:flex;align-items:stretch;
}
.hero .grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;
  width:100%;max-width:1600px;margin:0 auto;
}
.hero .left{padding:88px 64px 88px 64px;max-width:720px;justify-self:end;width:100%}
.hero .eyebrow{margin-bottom:24px}
.hero h1{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(56px, 7vw, 96px);line-height:.95;
  letter-spacing:-.04em;color:var(--fg);margin-bottom:32px;
}
.hero h1 .stroke{
  -webkit-text-stroke:1.5px var(--stroke);
  -webkit-text-fill-color:transparent;color:transparent;
  display:block;
}
.hero .deck{
  font-size:18px;line-height:1.6;color:var(--fg-muted);
  max-width:46ch;margin-bottom:40px;font-weight:400;
}
.hero .ctas{display:flex;gap:14px;margin-bottom:56px;flex-wrap:wrap}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--blue);color:#fff;
  border-radius:var(--r-pill);padding:16px 32px;
  font-weight:600;font-size:14px;letter-spacing:.02em;
  transition:all var(--duration) var(--ease);
  box-shadow:0 8px 24px rgba(79,125,249,.25);
}
.btn-primary:hover{
  background:var(--blue-deep);transform:translateY(-1px);
  box-shadow:0 12px 32px rgba(79,125,249,.35);
}
.btn-primary::after{content:"→";font-size:16px}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:var(--fg);
  border:1px solid var(--border);border-radius:var(--r-pill);
  padding:15px 30px;font-weight:600;font-size:14px;letter-spacing:.02em;
  transition:all var(--duration) var(--ease);
}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);background:#F7F8FA}
.hero .stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border-soft);padding-top:32px;gap:12px;
}
.hero .stat .num{
  font-family:var(--ff-display);font-weight:700;font-size:28px;
  color:var(--fg);letter-spacing:-.02em;line-height:1;margin-bottom:8px;
}
.hero .stat .lab{
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mint-deep);
}
.hero .image-side{
  position:relative;background:#FFFFFF;align-self:stretch;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  aspect-ratio:1/1;
}
.hero .image-side img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;
}
.hero .image-side picture{display:contents}
/* Subtle vignette on left edge of image to blend into copy column */
.hero .image-side::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, var(--bg) 0%, rgba(255,255,255,0) 12%, rgba(255,255,255,0) 100%);
  pointer-events:none;z-index:1;
}

/* ─── Search modal ────────────────────────────────────────────────── */
.search-scrim{
  position:fixed;inset:0;background:rgba(10,15,26,.55);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s var(--ease);
  z-index:150;backdrop-filter:blur(6px);
}
body.search-open .search-scrim{opacity:1;visibility:visible}
body.search-open{overflow:hidden}
.search-modal{
  position:fixed;top:80px;left:50%;transform:translate(-50%,-12px);
  width:min(640px, calc(100vw - 32px));max-height:calc(100vh - 120px);
  background:var(--bg);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 32px 80px rgba(31,38,55,.18);
  z-index:151;opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease),visibility .25s var(--ease),transform .35s cubic-bezier(0.16,1,0.3,1);
  display:flex;flex-direction:column;overflow:hidden;
}
body.search-open .search-modal{opacity:1;visibility:visible;transform:translate(-50%,0)}
.search-input-row{
  display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--border);
}
.search-input-row svg{width:20px;height:20px;color:var(--fg-muted);flex-shrink:0;stroke-width:1.8}
.search-input-row input{
  flex:1;border:0;background:transparent;outline:none;
  font:inherit;font-size:18px;color:var(--fg);font-family:var(--ff-display);font-weight:500;
}
.search-input-row input::placeholder{color:var(--fg-dim)}
.search-input-row .esc-key{
  font-family:var(--ff-display);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);
  padding:4px 8px;border:1px solid var(--border);border-radius:4px;cursor:pointer;
  transition:all var(--duration) var(--ease);background:transparent;
}
.search-input-row .esc-key:hover{border-color:var(--blue);color:var(--blue)}
.search-body{flex:1;overflow-y:auto;padding:18px 22px}
.search-section{margin-bottom:22px}
.search-section:last-child{margin-bottom:0}
.search-section-h{
  font-family:var(--ff-display);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:10px;
}
.search-results{display:grid;gap:6px}
.search-result{
  display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;
  padding:10px;border-radius:8px;transition:background var(--duration) var(--ease);
}
.search-result:hover{background:var(--card)}
.search-result .pic{
  width:48px;height:48px;background:#FFFFFF;border:1px solid var(--border-soft);
  border-radius:6px;display:flex;align-items:center;justify-content:center;padding:4px;
}
.search-result .pic img{max-height:36px;width:auto}
.search-result .name{font-family:var(--ff-display);font-weight:600;font-size:14px;color:var(--fg);letter-spacing:-.005em}
.search-result .meta{font-size:12px;color:var(--fg-muted)}
.search-result .price{font-family:var(--ff-display);font-weight:700;font-size:13px;color:var(--fg)}
.search-tags{display:flex;flex-wrap:wrap;gap:8px}
.search-tag{
  font-family:var(--ff-display);font-size:11px;font-weight:600;letter-spacing:.04em;
  border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 12px;color:var(--fg-muted);
  cursor:pointer;background:transparent;transition:all var(--duration) var(--ease);
}
.search-tag:hover{border-color:var(--blue);color:var(--blue)}
.search-foot{
  padding:14px 22px;background:var(--card);border-top:1px solid var(--border);
  font-family:var(--ff-display);font-size:11px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:var(--fg-dim);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
@media(max-width:640px){
  .search-modal{top:64px;border-radius:8px}
  .search-input-row input{font-size:16px}
}

/* ─── Section heading ──────────────────────────────────────────────── */
.section-head{padding:96px 0 32px;text-align:center}
.section-head .eyebrow{margin-bottom:18px}
.section-head h2{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(36px, 4.5vw, 56px);line-height:1;
  letter-spacing:-.025em;color:var(--fg);
}
.section-head h2 .stroke{
  -webkit-text-stroke:1.5px var(--stroke);
  -webkit-text-fill-color:transparent;color:transparent;
  display:block;
}
.section-head .deck{
  font-size:16px;color:var(--fg-muted);max-width:54ch;
  margin:24px auto 0;line-height:1.6;
}

/* ─── Trust strip (4 stats — repeated pattern) ─────────────────────── */
.trust-strip{
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  padding:36px 0;background:var(--card);
}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust-item{
  text-align:center;padding:0 24px;
  border-right:1px solid var(--border-soft);
}
.trust-item:last-child{border-right:0}
.trust-item .icon{
  display:inline-flex;width:42px;height:42px;border-radius:50%;
  background:var(--mint-soft);color:var(--mint-deep);
  align-items:center;justify-content:center;
  margin-bottom:16px;font-size:20px;
}
.trust-item .num{
  font-family:var(--ff-display);font-weight:700;font-size:22px;
  color:var(--fg);letter-spacing:-.02em;margin-bottom:4px;
}
.trust-item .lab{
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);
}

/* ─── Product grid (cards) ─────────────────────────────────────────── */
.products{padding:48px 0 96px}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.product-grid.full{grid-template-columns:repeat(4,1fr)}

/* ─── Infinite product slider (most-researched compounds) ─────────── */
.product-slider{
  position:relative;width:100%;overflow:hidden;
  margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));
  padding-left:var(--pad);padding-right:var(--pad);
  /* Soft fade at edges so cards seem to slide in/out of frame */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.product-slider .track{
  display:flex;flex-wrap:nowrap;gap:24px;width:max-content;
  animation:synthera-slide 50s linear infinite;
  will-change:transform;
}
.product-slider:hover .track,
.product-slider:focus-within .track{animation-play-state:paused}
.product-slider .product{
  flex:0 0 280px;width:280px;
}
@keyframes synthera-slide{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .product-slider .track{animation:none}
}
@media(max-width:680px){
  .product-slider .product{flex:0 0 240px;width:240px}
  .product-slider .track{animation-duration:35s}
}
.product{
  background:var(--card-2);border:1px solid var(--border);
  border-radius:var(--r-sm);overflow:hidden;
  display:flex;flex-direction:column;
  transition:all var(--duration) var(--ease);position:relative;
}
.product:hover{
  border-color:var(--blue);transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(31,38,55,.08),0 0 0 1px rgba(79,125,249,.30);
}
.product .badge{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--mint);color:#000;
  font-family:var(--ff-display);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-sm);
}
.product .badge.new{background:var(--blue);color:#fff}
.product .badge.oos{background:var(--destructive);color:#fff}
.product .img-wrap{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  padding:24px;background:#FFFFFF;
  border-bottom:1px solid var(--border-soft);
}
.product .img-wrap img{max-height:220px;width:auto}
.product .body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.product .meta{
  font-family:var(--ff-display);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mint-deep);
  margin-bottom:10px;
}
.product h3{
  font-family:var(--ff-display);font-weight:600;
  font-size:18px;line-height:1.2;color:var(--fg);
  margin-bottom:6px;letter-spacing:-.01em;
}
.product .dose{font-size:13px;color:var(--fg-muted);margin-bottom:14px}
.product .price-row{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:16px;margin-top:auto;
}
.product .price{
  font-family:var(--ff-display);font-weight:700;font-size:22px;
  color:var(--fg);letter-spacing:-.01em;
}
.product .price .currency{font-size:14px;color:var(--fg-muted);font-weight:500}
.product .add{
  display:flex;justify-content:center;align-items:center;gap:8px;
  background:var(--blue);color:#fff;border-radius:var(--r-pill);
  padding:12px 18px;font-weight:600;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;transition:all var(--duration) var(--ease);
}
.product .add:hover{background:var(--blue-deep)}
.product .add::after{content:"→"}

/* ─── Premium research (split-headline + stats panel) ──────────────── */
.premium{padding:96px 0;border-top:1px solid var(--border-soft)}
.premium-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center;
}
.premium .eyebrow{margin-bottom:20px}
.premium h2{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(40px,5vw,72px);line-height:1;
  letter-spacing:-.03em;color:var(--fg);margin-bottom:28px;
}
.premium h2 .stroke{
  -webkit-text-stroke:1.5px var(--stroke);
  -webkit-text-fill-color:transparent;color:transparent;display:block;
}
.premium p{font-size:17px;color:var(--fg-muted);line-height:1.65;margin-bottom:18px;max-width:54ch}
.premium .qual-list{
  list-style:none;margin-top:36px;
  display:grid;gap:0;border-top:1px solid var(--border-soft);
}
.premium .qual-list li{
  display:grid;grid-template-columns:48px 1fr;gap:20px;
  padding:20px 0;border-bottom:1px solid var(--border-soft);
  align-items:flex-start;
}
.premium .qual-list .n{
  font-family:var(--ff-display);font-weight:700;font-size:14px;
  color:var(--mint-deep);letter-spacing:.06em;padding-top:2px;
}
.premium .qual-list h4{
  font-family:var(--ff-display);font-weight:600;font-size:17px;
  color:var(--fg);margin-bottom:4px;letter-spacing:-.01em;
}
.premium .qual-list p{font-size:14px;color:var(--fg-muted);margin:0;max-width:none}
.premium .panel{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:48px 40px;
  position:relative;overflow:hidden;
}
.premium .panel::before{
  content:"";position:absolute;top:-50%;right:-30%;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,125,249,.10) 0%,rgba(79,125,249,0) 70%);
}
.premium .panel-head{
  font-family:var(--ff-display);font-weight:700;font-size:22px;
  color:var(--fg);letter-spacing:-.01em;margin-bottom:32px;position:relative;
}
.premium .panel-stats{display:grid;gap:24px;position:relative}
.premium .panel-stat{
  padding:20px 0;border-top:1px solid var(--border-soft);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.premium .panel-stat:first-child{border-top:0;padding-top:0}
.premium .panel-stat .label{
  font-family:var(--ff-display);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);
}
.premium .panel-stat .value{
  font-family:var(--ff-display);font-weight:700;font-size:28px;
  color:var(--fg);letter-spacing:-.02em;line-height:1;
}
.premium .panel-stat .value .accent{color:var(--mint-deep)}
.premium .panel-stat .value .blue{color:var(--blue)}

/* ─── FAQ ─────────────────────────────────────────────────────────── */
.faq{padding:96px 0;background:var(--card);border-top:1px solid var(--border)}
.faq-list{max-width:820px;margin:32px auto 0;display:grid;gap:0}
.faq-item{border-bottom:1px solid var(--border-soft)}
.faq-item:first-child{border-top:1px solid var(--border-soft)}
.faq-item summary{
  cursor:pointer;list-style:none;
  padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;
  font-family:var(--ff-display);font-weight:600;font-size:18px;
  color:var(--fg);letter-spacing:-.01em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-size:24px;color:var(--mint-deep);font-weight:300;
  transition:transform .35s cubic-bezier(0.16,1,0.3,1);flex-shrink:0;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary{transition:color var(--duration) var(--ease)}
.faq-item summary:hover{color:var(--blue)}
/* Animated answer panel — JS sets explicit height during transition, CSS handles easing */
.faq-item .a{
  color:var(--fg-muted);font-size:15px;line-height:1.65;max-width:64ch;
  height:0;opacity:0;overflow:hidden;
  padding:0;
  transition:height .35s cubic-bezier(0.16,1,0.3,1),
             opacity .25s ease,
             padding-bottom .35s cubic-bezier(0.16,1,0.3,1);
  will-change:height;
}
.faq-item[open] .a{
  opacity:1;
  padding-bottom:24px;
  /* height is set inline by overlays.js to scrollHeight, then cleared on end */
}
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
}

/* ─── Verified CTA panel ──────────────────────────────────────────── */
.verified{padding:96px 0;border-top:1px solid var(--border-soft)}
.verified-card{
  background:linear-gradient(135deg,#FAFBFD 0%,#EEF2F8 100%);
  border:1px solid var(--border);border-radius:var(--r-sm);
  padding:80px 64px;text-align:center;position:relative;overflow:hidden;
}
.verified-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 30%,rgba(79,125,249,.14) 0%,rgba(79,125,249,0) 50%),
             radial-gradient(ellipse at 80% 70%,rgba(110,229,208,.20) 0%,rgba(110,229,208,0) 50%);
  pointer-events:none;
}
.verified-card .eyebrow{margin-bottom:18px;position:relative}
.verified-card h2{
  position:relative;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(36px,4.5vw,56px);line-height:1;
  letter-spacing:-.025em;color:var(--fg);margin-bottom:20px;
}
.verified-card h2 .stroke{
  -webkit-text-stroke:1.5px var(--stroke);
  -webkit-text-fill-color:transparent;color:transparent;display:block;
}
.verified-card p{
  position:relative;color:var(--fg-muted);font-size:17px;line-height:1.65;
  max-width:60ch;margin:0 auto 32px;
}
.verified-card .ctas{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ─── Compliance banner ───────────────────────────────────────────── */
.compliance{
  background:var(--accent-surface);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:18px 0;text-align:center;
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);
}
.compliance .accent{color:var(--mint-deep)}

/* ─── Footer ──────────────────────────────────────────────────────── */
footer{background:var(--bg);padding:80px 0 32px}
.foot-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;
  padding-bottom:56px;border-bottom:1px solid var(--border-soft);margin-bottom:32px;
}
.foot-brand img{height:44px;width:auto;margin-bottom:18px}
.foot-brand p{font-size:14px;color:var(--fg-muted);max-width:34ch;line-height:1.65;margin-bottom:18px}
.foot-grid h5{
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mint-deep);
  margin-bottom:18px;
}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:10px;font-size:14px;color:var(--fg-muted)}
.foot-grid li a{transition:color var(--duration) var(--ease)}
.foot-grid li a:hover{color:var(--blue)}
.foot-disclaimer{
  background:var(--card);border:1px solid var(--border-soft);
  border-radius:var(--r-sm);padding:20px 24px;margin-bottom:24px;
  font-size:12px;color:var(--fg-muted);line-height:1.65;
}
.foot-disclaimer strong{color:var(--fg);font-weight:600}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-family:var(--ff-display);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);
}
.foot-bottom .right{color:var(--mint-deep)}

/* ─── Floating help anchor ────────────────────────────────────────── */
.help-anchor{
  position:fixed;bottom:24px;right:24px;z-index:90;
  width:56px;height:56px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 32px rgba(79,125,249,.32);
  transition:all var(--duration) var(--ease);
  font-size:20px;
}
.help-anchor:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(79,125,249,.45),0 0 0 2px rgba(110,229,208,.45);
}

/* ─── Slide cart drawer ───────────────────────────────────────────── */
.cart-scrim{
  position:fixed;inset:0;background:rgba(10,15,26,.55);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s var(--ease);
  z-index:100;backdrop-filter:blur(2px);
}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);
  background:var(--bg);border-left:1px solid var(--border);
  z-index:101;display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(0.16,1,0.3,1);
  box-shadow:-24px 0 60px rgba(31,38,55,.12);
}
body.cart-open .cart-scrim{opacity:1;visibility:visible}
body.cart-open .cart-drawer{transform:translateX(0)}
body.cart-open{overflow:hidden}

.cart-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 28px;border-bottom:1px solid var(--border);
}
.cart-head .title{
  font-family:var(--ff-display);font-weight:700;font-size:16px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg);
}
.cart-head .title .count{color:var(--fg-muted);margin-left:8px;font-weight:500;letter-spacing:.04em}
.cart-head .close{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--border);
  background:transparent;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:14px;color:var(--fg);
  transition:all var(--duration) var(--ease);
}
.cart-head .close:hover{border-color:var(--blue);color:var(--blue)}

.cart-progress{padding:16px 28px;border-bottom:1px solid var(--border-soft);background:var(--card)}
.cart-progress .text{
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);
  margin-bottom:10px;display:flex;justify-content:space-between;gap:12px;
}
.cart-progress .text .accent{color:var(--mint-deep)}
.cart-progress .bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden}
.cart-progress .fill{
  height:100%;background:linear-gradient(90deg,var(--mint) 0%,var(--mint-deep) 100%);
  border-radius:3px;transition:width .4s var(--ease);
}

.cart-items{flex:1;overflow-y:auto;padding:8px 0}
.cart-line{
  display:grid;grid-template-columns:72px 1fr auto;gap:16px;
  padding:20px 28px;border-bottom:1px solid var(--border-soft);align-items:flex-start;
}
.cart-line:last-child{border-bottom:0}
.cart-line .pic{
  background:#FFFFFF;border:1px solid var(--border-soft);border-radius:var(--r-sm);
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:4px;
}
.cart-line .pic img{max-height:64px;width:auto}
.cart-line .info h4{
  font-family:var(--ff-display);font-weight:600;font-size:15px;
  color:var(--fg);margin-bottom:4px;letter-spacing:-.005em;
}
.cart-line .info .meta{font-size:12px;color:var(--fg-muted);margin-bottom:10px;letter-spacing:.02em}
.cart-line .qty-row{display:flex;align-items:center;gap:14px}
.cart-line .qty{
  display:flex;align-items:center;border:1px solid var(--border);
  border-radius:var(--r-pill);overflow:hidden;height:32px;
}
.cart-line .qty button{
  width:30px;height:30px;background:transparent;color:var(--fg);
  display:flex;align-items:center;justify-content:center;font-size:14px;
  transition:color var(--duration) var(--ease);
}
.cart-line .qty button:hover{color:var(--blue)}
.cart-line .qty span{padding:0 8px;font-size:13px;font-weight:600;font-family:var(--ff-display)}
.cart-line .remove{
  font-size:11px;color:var(--fg-dim);text-decoration:underline;cursor:pointer;
  letter-spacing:.06em;text-transform:uppercase;font-family:var(--ff-display);font-weight:600;
}
.cart-line .remove:hover{color:var(--destructive)}
.cart-line .price{
  font-family:var(--ff-display);font-weight:700;font-size:15px;color:var(--fg);
  letter-spacing:-.01em;
}

.cart-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:64px 28px;text-align:center;
}
.cart-empty .icon{
  width:80px;height:80px;border-radius:50%;background:var(--mint-soft);
  color:var(--mint-deep);display:flex;align-items:center;justify-content:center;
  font-size:32px;margin-bottom:24px;
}
.cart-empty h4{font-family:var(--ff-display);font-size:20px;font-weight:600;margin-bottom:8px;color:var(--fg)}
.cart-empty p{color:var(--fg-muted);margin-bottom:24px;font-size:14px;max-width:32ch}
.cart-empty a{color:var(--blue);font-weight:500;font-size:14px}

.cart-foot{padding:24px 28px;border-top:1px solid var(--border);background:var(--card)}
.cart-foot .row{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;
  font-size:13px;color:var(--fg-muted);
}
.cart-foot .total{
  display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 18px;
  padding-top:14px;border-top:1px solid var(--border);
  font-family:var(--ff-display);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg);
}
.cart-foot .total .amount{font-size:26px;letter-spacing:-.02em}
.cart-foot .actions{display:grid;gap:10px}
.cart-foot .btn-checkout{
  display:flex;justify-content:center;align-items:center;gap:10px;
  background:var(--blue);color:#fff;border-radius:var(--r-pill);
  padding:18px;font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;transition:all var(--duration) var(--ease);
  box-shadow:0 8px 24px rgba(79,125,249,.25);
}
.cart-foot .btn-checkout:hover{background:var(--blue-deep);transform:translateY(-1px)}
.cart-foot .btn-view{
  display:flex;justify-content:center;align-items:center;gap:8px;
  background:transparent;color:var(--fg);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:14px;font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
  transition:all var(--duration) var(--ease);
}
.cart-foot .btn-view:hover{border-color:var(--blue);color:var(--blue);background:#F7F8FA}
.cart-foot .ship-note{
  text-align:center;font-size:10px;color:var(--fg-dim);margin-top:14px;
  letter-spacing:.16em;font-family:var(--ff-display);text-transform:uppercase;font-weight:600;
}

/* ─── Forms (shared across cart / checkout / login / contact) ────── */
.form-section{margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid var(--border-soft)}
.form-section:last-child{border-bottom:0}
.form-section .step{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.form-section .step .n{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--border);
  background:var(--bg);color:var(--mint-deep);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-weight:700;font-size:12px;
}
.form-section .step h3{
  font-family:var(--ff-display);font-weight:700;font-size:18px;
  letter-spacing:-.01em;color:var(--fg);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-row.full{grid-template-columns:1fr}
.form-row.thirds{grid-template-columns:2fr 1fr 1fr}
.form-field label{
  display:block;font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:8px;
}
.form-field input,.form-field select,.form-field textarea{
  width:100%;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:0 18px;height:48px;
  font:inherit;font-size:14px;color:var(--fg);outline:none;
  transition:border-color var(--duration) var(--ease);
  font-family:inherit;
}
.form-field textarea{min-height:140px;resize:vertical;border-radius:12px;padding:14px 18px;height:auto}
.form-field select{
  cursor:pointer;padding-right:36px;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-muted) 50%),linear-gradient(135deg,var(--fg-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(79,125,249,.10);
}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--fg-dim)}
.form-field .help{font-size:12px;color:var(--fg-dim);margin-top:6px;letter-spacing:.02em}
.btn-block{
  display:flex;justify-content:center;align-items:center;gap:10px;
  background:var(--blue);color:#fff;border-radius:var(--r-pill);padding:18px;
  font-family:var(--ff-display);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;width:100%;cursor:pointer;
  transition:all var(--duration) var(--ease);
  box-shadow:0 8px 24px rgba(79,125,249,.25);border:0;
}
.btn-block:hover{background:var(--blue-deep);transform:translateY(-1px);box-shadow:0 12px 32px rgba(79,125,249,.35)}
.btn-block::after{content:"→";font-size:16px}

/* Radio cards (shipping methods, payment methods) */
.radio-cards{display:grid;gap:10px}
.radio-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  border:1px solid var(--border);border-radius:var(--r-sm);padding:18px 20px;
  cursor:pointer;transition:all var(--duration) var(--ease);background:var(--bg);
}
.radio-card:hover{border-color:var(--blue-soft)}
.radio-card.checked{border-color:var(--blue);box-shadow:0 0 0 1px rgba(79,125,249,.25);background:rgba(79,125,249,.04)}
.radio-card .dot{
  width:18px;height:18px;border-radius:50%;border:2px solid var(--border);
  flex-shrink:0;transition:all var(--duration) var(--ease);background:var(--bg);
}
.radio-card.checked .dot{border-color:var(--blue);box-shadow:inset 0 0 0 4px var(--blue)}
.radio-card .body h4{font-family:var(--ff-display);font-weight:600;font-size:15px;color:var(--fg);margin-bottom:2px;letter-spacing:-.005em}
.radio-card .body .sub{font-size:12px;color:var(--fg-muted)}
.radio-card .price{font-family:var(--ff-display);font-weight:700;font-size:15px;color:var(--fg);letter-spacing:-.01em}
.radio-card .price.free{color:var(--mint-deep)}

/* Checkbox / inline */
.cb-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--fg-muted);cursor:pointer}
.cb-row input{accent-color:var(--blue);width:14px;height:14px;cursor:pointer}
.cb-row a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.field-link{
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  margin-left:auto;cursor:pointer;
}
.field-link:hover{color:var(--blue-deep)}

@media(max-width:880px){
  .form-row,.form-row.thirds{grid-template-columns:1fr}
}

/* ─── Auth (login / register) ─────────────────────────────────────── */
.auth-page{padding:64px 0 96px;background:linear-gradient(180deg,var(--card) 0%,var(--bg) 30%)}
.auth-page .page-head{text-align:center;margin-bottom:48px}
.auth-page .page-head .eyebrow{margin-bottom:14px}
.auth-page .page-head h1{font-family:var(--ff-display);font-weight:700;font-size:clamp(36px,5vw,48px);letter-spacing:-.025em;color:var(--fg);line-height:1;margin-bottom:14px}
.auth-page .page-head .deck{font-size:15px;color:var(--fg-muted);max-width:48ch;margin:0 auto;line-height:1.6}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:980px;margin:0 auto}
.auth-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:40px 36px}
.auth-card .auth-eyebrow{font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:8px;display:inline-block}
.auth-card h2{font-family:var(--ff-display);font-weight:700;font-size:22px;letter-spacing:-.015em;color:var(--fg);margin-bottom:6px}
.auth-card .sub{font-size:13px;color:var(--fg-muted);margin-bottom:24px}
.auth-card form{display:grid;gap:14px}
.auth-card .field-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--fg-muted);margin-top:-4px}
.auth-card .field-row a{color:var(--blue)}
.partner-cta{
  margin:48px auto 0;background:linear-gradient(135deg,#FAFBFD 0%,#EEF2F8 100%);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:32px 40px;max-width:980px;
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;position:relative;overflow:hidden;
}
.partner-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 50%,rgba(110,229,208,.18) 0%,rgba(110,229,208,0) 60%);pointer-events:none}
.partner-cta .body{position:relative}
.partner-cta .eyebrow{margin-bottom:8px}
.partner-cta h4{font-family:var(--ff-display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--fg);margin-bottom:6px}
.partner-cta p{font-size:13px;color:var(--fg-muted);max-width:52ch;line-height:1.55}
.partner-cta .btn-ghost{position:relative}

@media(max-width:880px){
  .auth-grid{grid-template-columns:1fr}
  .partner-cta{grid-template-columns:1fr;text-align:center}
}

/* ─── Account dashboard ───────────────────────────────────────────── */
.dash-page{padding:48px 0 96px}
.dash-grid{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:flex-start}
.dash-side{position:sticky;top:120px}
.dash-side .user{
  display:flex;align-items:center;gap:14px;padding:18px 20px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:18px;
}
.dash-side .user .avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue) 0%,var(--mint-deep) 100%);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-weight:700;font-size:14px;flex-shrink:0;letter-spacing:.04em;
}
.dash-side .user .name{font-family:var(--ff-display);font-weight:700;font-size:14px;color:var(--fg);letter-spacing:-.005em}
.dash-side .user .email{font-size:12px;color:var(--fg-muted);margin-top:2px}
.dash-nav{list-style:none;display:grid;gap:2px}
.dash-nav a{
  display:flex;align-items:center;gap:12px;padding:11px 18px;border-radius:var(--r-pill);
  font-family:var(--ff-display);font-weight:600;font-size:13px;letter-spacing:.04em;
  color:var(--fg-muted);transition:all var(--duration) var(--ease);
}
.dash-nav a:hover{background:var(--card);color:var(--fg)}
.dash-nav a.active{background:rgba(79,125,249,.10);color:var(--blue)}
.dash-nav a.logout{margin-top:14px;border-top:1px solid var(--border-soft);padding-top:18px;border-radius:0;color:var(--fg-dim)}
.dash-nav a.logout:hover{color:var(--destructive);background:transparent}
.dash-main h1{font-family:var(--ff-display);font-weight:700;font-size:36px;letter-spacing:-.025em;color:var(--fg);margin-bottom:8px;line-height:1}
.dash-main .greeting{font-size:14px;color:var(--fg-muted);margin-bottom:32px}
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
.dash-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:22px}
.dash-stat .label{font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:8px}
.dash-stat .num{font-family:var(--ff-display);font-weight:700;font-size:28px;color:var(--fg);letter-spacing:-.02em;line-height:1}
.dash-stat .sub{font-size:12px;color:var(--fg-muted);margin-top:6px}
.dash-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:24px;overflow:hidden}
.dash-card-head{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--border)}
.dash-card-head h3{font-family:var(--ff-display);font-weight:700;font-size:15px;color:var(--fg);letter-spacing:-.005em}
.dash-card-head a{font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.orders-table{width:100%;border-collapse:collapse}
.orders-table th{text-align:left;padding:14px 24px;font-family:var(--ff-display);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);border-bottom:1px solid var(--border-soft)}
.orders-table td{padding:18px 24px;font-size:14px;color:var(--fg);border-bottom:1px solid var(--border-soft)}
.orders-table tr:last-child td{border-bottom:0}
.orders-table .order-num{font-family:var(--ff-display);font-weight:700;letter-spacing:-.005em}
.orders-table .status{display:inline-block;padding:4px 10px;border-radius:var(--r-pill);font-family:var(--ff-display);font-size:10px;font-weight:700;letter-spacing:.10em;text-transform:uppercase}
.orders-table .status.delivered{background:var(--mint-soft);color:var(--mint-deep)}
.orders-table .status.shipped{background:rgba(79,125,249,.10);color:var(--blue)}
.orders-table .status.processing{background:var(--accent-surface);color:var(--fg-muted)}
.orders-table .view{font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.address-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:22px 24px}
.address-block h4{font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:10px}
.address-block p{font-size:13px;color:var(--fg);line-height:1.6}

@media(max-width:1080px){
  .dash-grid{grid-template-columns:1fr;gap:24px}
  .dash-side{position:static}
  .dash-stats{grid-template-columns:1fr;gap:10px}
}
@media(max-width:680px){
  .orders-table th:nth-child(2),.orders-table td:nth-child(2),.orders-table th:nth-child(4),.orders-table td:nth-child(4){display:none}
  .address-grid{grid-template-columns:1fr}
}

/* ─── Research Guide ──────────────────────────────────────────────── */
.guide-page{padding:64px 0 96px}
.guide-hero{margin-bottom:48px;border-bottom:1px solid var(--border-soft);padding-bottom:48px}
.guide-hero .eyebrow{margin-bottom:14px}
.guide-hero h1{font-family:var(--ff-display);font-weight:700;font-size:clamp(40px,5vw,72px);letter-spacing:-.03em;line-height:1;color:var(--fg);margin-bottom:20px}
.guide-hero h1 .stroke{-webkit-text-stroke:1.5px var(--stroke);-webkit-text-fill-color:transparent;color:transparent;display:block}
.guide-hero p{font-size:18px;color:var(--fg-muted);max-width:64ch;line-height:1.6}
.guide-layout{display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:flex-start}
.guide-side{position:sticky;top:120px}
.guide-side .head{font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border-soft)}
.guide-nav{list-style:none;display:grid;gap:2px}
.guide-nav a{display:block;padding:10px 14px;border-radius:6px;font-family:var(--ff-display);font-weight:600;font-size:14px;color:var(--fg-muted);transition:all var(--duration) var(--ease);letter-spacing:-.005em}
.guide-nav a:hover,.guide-nav a.active{background:var(--card);color:var(--fg)}
.guide-section{padding:32px 0 56px;border-bottom:1px solid var(--border-soft);scroll-margin-top:120px}
.guide-section:first-child{padding-top:0}
.guide-section:last-child{border-bottom:0}
.guide-section .eyebrow{margin-bottom:14px}
.guide-section h2{font-family:var(--ff-display);font-weight:700;font-size:36px;letter-spacing:-.025em;line-height:1.05;color:var(--fg);margin-bottom:18px}
.guide-section .lead{font-size:16px;color:var(--fg-muted);line-height:1.7;margin-bottom:32px;max-width:62ch}
.guide-compounds{display:grid;gap:14px}
.guide-compound{
  display:grid;grid-template-columns:64px 1fr auto;gap:24px;align-items:center;
  border:1px solid var(--border);border-radius:var(--r-sm);padding:20px 24px;background:var(--bg);
  transition:all var(--duration) var(--ease);
}
.guide-compound:hover{border-color:var(--blue-soft);transform:translateY(-1px)}
.guide-compound .pic{width:64px;height:64px;background:#FFFFFF;border:1px solid var(--border-soft);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;padding:6px}
.guide-compound .pic img{max-height:48px;width:auto}
.guide-compound h3{font-family:var(--ff-display);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--fg);margin-bottom:6px}
.guide-compound p{font-size:13px;color:var(--fg-muted);line-height:1.6;margin-bottom:10px;max-width:64ch}
.guide-compound .tags{display:flex;gap:6px;flex-wrap:wrap}
.guide-compound .tag{
  font-family:var(--ff-display);font-size:9px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:var(--mint-deep);padding:3px 8px;
  border:1px solid var(--mint-soft);border-radius:var(--r-pill);background:var(--mint-soft);
}
.guide-compound .more{font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);align-self:center;white-space:nowrap}
.guide-compound .more::after{content:"→";margin-left:4px}

@media(max-width:1080px){
  .guide-layout{grid-template-columns:1fr;gap:32px}
  .guide-side{position:static;border-bottom:1px solid var(--border-soft);padding-bottom:24px}
  .guide-nav{display:flex;flex-wrap:wrap;gap:6px}
  .guide-nav a{padding:8px 14px;border:1px solid var(--border);border-radius:var(--r-pill)}
}
@media(max-width:680px){
  .guide-compound{grid-template-columns:1fr;gap:14px}
  .guide-compound .more{justify-self:start}
  .guide-section h2{font-size:28px}
}

/* ─── Contact page ────────────────────────────────────────────────── */
.contact-page{padding:64px 0 96px}
.contact-hero{margin-bottom:48px;text-align:center}
.contact-hero .eyebrow{margin-bottom:14px}
.contact-hero h1{font-family:var(--ff-display);font-weight:700;font-size:clamp(40px,5vw,64px);letter-spacing:-.03em;line-height:1;color:var(--fg);margin-bottom:18px}
.contact-hero h1 .stroke{-webkit-text-stroke:1.5px var(--stroke);-webkit-text-fill-color:transparent;color:transparent;display:block}
.contact-hero p{font-size:16px;color:var(--fg-muted);max-width:54ch;margin:0 auto;line-height:1.6}
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;max-width:1080px;margin:0 auto;align-items:flex-start}
.contact-form-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:40px}
.contact-info{display:grid;gap:14px}
.contact-info .item{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:24px 28px;
}
.contact-info .item h4{font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:10px}
.contact-info .item p{font-size:14px;color:var(--fg);line-height:1.6}
.contact-info .item p strong{display:block;font-family:var(--ff-display);font-weight:700;font-size:16px;letter-spacing:-.005em;margin-bottom:4px;color:var(--fg)}
.contact-info .item p a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.contact-info .item p .meta{font-size:12px;color:var(--fg-muted);margin-top:6px;display:block}

@media(max-width:880px){
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .contact-form-card{padding:28px 24px}
}

/* ─── 404 page ────────────────────────────────────────────────────── */
.not-found{padding:120px 0 96px;text-align:center;background:linear-gradient(180deg,var(--card) 0%,var(--bg) 50%);min-height:60vh;display:flex;flex-direction:column;justify-content:center}
.not-found .code{
  font-family:var(--ff-display);font-weight:700;font-size:clamp(120px,18vw,200px);
  background:linear-gradient(135deg,var(--blue) 0%,var(--mint-deep) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:-.05em;line-height:1;margin-bottom:18px;
}
.not-found .eyebrow{margin-bottom:14px;display:inline-block}
.not-found h1{font-family:var(--ff-display);font-weight:700;font-size:36px;letter-spacing:-.025em;color:var(--fg);margin-bottom:14px}
.not-found p{font-size:15px;color:var(--fg-muted);margin-bottom:32px;max-width:48ch;margin-left:auto;margin-right:auto;line-height:1.6}
.not-found .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ─── Order Received page ─────────────────────────────────────────── */
.order-page{padding:64px 0 96px;background:linear-gradient(180deg,var(--card) 0%,var(--bg) 30%)}
.order-card{
  max-width:760px;margin:0 auto;
  background:var(--bg);border:1px solid var(--border);border-radius:12px;
  padding:48px 48px 40px;
  box-shadow:0 24px 60px rgba(31,38,55,.06);
}
.order-card .check{
  width:80px;height:80px;border-radius:50%;background:var(--mint-soft);color:var(--mint-deep);
  display:flex;align-items:center;justify-content:center;font-size:36px;
  margin:0 auto 24px;position:relative;
}
.order-card .check::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--mint);opacity:.4}
.order-card .eyebrow{display:block;text-align:center;margin-bottom:14px}
.order-card h1{
  font-family:var(--ff-display);font-weight:700;font-size:36px;letter-spacing:-.025em;
  color:var(--fg);text-align:center;line-height:1.1;margin-bottom:12px;
}
.order-card .lead{font-size:15px;color:var(--fg-muted);text-align:center;margin-bottom:36px;line-height:1.6;max-width:48ch;margin-left:auto;margin-right:auto}
.order-meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:20px 0;margin-bottom:32px;
}
.order-meta .item{padding:0 16px;border-right:1px solid var(--border);text-align:center}
.order-meta .item:last-child{border-right:0}
.order-meta .label{font-family:var(--ff-display);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:6px}
.order-meta .val{font-family:var(--ff-display);font-weight:700;font-size:16px;color:var(--fg);letter-spacing:-.01em}
.order-summary-list{margin-bottom:8px}
.order-summary-list .head{font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:14px}
.order-line{
  display:grid;grid-template-columns:56px 1fr auto;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--border-soft);align-items:center;
}
.order-line:last-child{border-bottom:0}
.order-line .pic{width:56px;height:56px;background:#FFFFFF;border:1px solid var(--border-soft);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;padding:4px;position:relative}
.order-line .pic .qty-pill{position:absolute;top:-6px;right:-6px;background:var(--fg);color:#fff;font-family:var(--ff-display);font-size:10px;font-weight:700;min-width:20px;height:20px;padding:0 4px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.order-line .pic img{max-height:42px;width:auto}
.order-line .name{font-family:var(--ff-display);font-weight:600;font-size:14px;color:var(--fg)}
.order-line .meta{font-size:12px;color:var(--fg-muted)}
.order-line .price{font-family:var(--ff-display);font-weight:700;font-size:14px;color:var(--fg)}
.order-totals{padding-top:14px;border-top:1px solid var(--border)}
.order-totals .row{display:flex;justify-content:space-between;font-size:13px;color:var(--fg-muted);padding:6px 0}
.order-totals .row .val{color:var(--fg)}
.order-totals .total{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--border);font-family:var(--ff-display);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.order-totals .total .amount{font-size:22px;letter-spacing:-.02em}
.next-steps{
  margin-top:32px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:32px;
}
.next-steps h3{font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:20px}
.next-steps ol{list-style:none;display:grid;gap:18px}
.next-steps li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:flex-start}
.next-steps li .n{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--bg);
  color:var(--mint-deep);display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-weight:700;font-size:13px;
}
.next-steps li h4{font-family:var(--ff-display);font-weight:600;font-size:15px;color:var(--fg);margin-bottom:4px;letter-spacing:-.005em}
.next-steps li p{font-size:13px;color:var(--fg-muted);line-height:1.6}
.order-actions{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media(max-width:680px){
  .order-card{padding:32px 24px 28px;border-radius:var(--r-sm)}
  .order-card h1{font-size:26px}
  .order-meta{grid-template-columns:1fr;padding:0;border:0;margin-bottom:24px}
  .order-meta .item{padding:14px 0;border-right:0;border-bottom:1px solid var(--border-soft);text-align:left;display:flex;justify-content:space-between;align-items:center}
  .order-meta .item:last-child{border-bottom:0}
  .order-meta .label{margin-bottom:0}
}

/* ─── WooCommerce checkout — restyle WC's default form-row markup ── */
/* WC outputs <p class="form-row"> with <label> + <input>. We restyle to match
   our pill-shaped Synthera fields. */
.woocommerce-checkout h3{
  font-family:var(--ff-display);font-weight:700;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);
  margin:18px 0 14px;
}
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3{display:none}
.woocommerce-checkout .form-row{
  display:flex;flex-direction:column;margin:0 0 14px 0;padding:0;
  position:relative;
}
.woocommerce-checkout .form-row.form-row-first{width:calc(50% - 7px);float:left;clear:left}
.woocommerce-checkout .form-row.form-row-last{width:calc(50% - 7px);float:right;clear:right}
.woocommerce-checkout .form-row.form-row-wide{width:100%;clear:both}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::after,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper::after{
  content:"";display:table;clear:both;
}
.woocommerce-checkout .form-row label{
  display:block;font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);
  margin-bottom:8px;order:-1;
}
.woocommerce-checkout .form-row label .required,
.woocommerce-checkout .form-row label .optional{display:none}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-selection{
  width:100% !important;background:var(--bg) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-pill) !important;
  padding:0 18px !important;height:48px !important;
  font:inherit !important;font-size:14px !important;color:var(--fg) !important;
  outline:none !important;
  font-family:inherit !important;line-height:46px !important;
  transition:border-color var(--duration) var(--ease);box-shadow:none !important;
}
.woocommerce-checkout .form-row textarea{
  height:auto !important;min-height:120px !important;border-radius:12px !important;
  padding:14px 18px !important;line-height:1.5 !important;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus{
  border-color:var(--blue) !important;
  box-shadow:0 0 0 3px rgba(79,125,249,.10) !important;
}
.woocommerce-checkout .form-row .select2-container{width:100% !important}
.woocommerce-checkout .form-row .select2-selection__rendered{
  line-height:46px !important;padding:0 !important;color:var(--fg) !important;
}
.woocommerce-checkout .form-row .select2-selection__arrow{height:46px !important;right:14px !important}
/* Red border only AFTER a field is touched (.synthera-touched added by checkout.js).
   WC stamps .woocommerce-invalid on empty required fields at load; without this gate
   a pristine checkout looks like it's already erroring. */
.woocommerce-checkout .form-row.woocommerce-invalid.synthera-touched input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid.synthera-touched select{
  border-color:var(--destructive) !important;
}
.woocommerce-checkout .form-row .woocommerce-input-wrapper{display:contents}

/* Hide WC's "Billing details" / "Ship to a different address?" page-section h3
   since we use our own .step labels above */
.woocommerce-checkout #ship-to-different-address{
  margin:18px 0 14px;
  font-family:var(--ff-display);font-weight:700;font-size:13px;
  letter-spacing:.04em;color:var(--fg);
}
.woocommerce-checkout #ship-to-different-address-checkbox{
  margin-right:8px;accent-color:var(--blue);
}

/* Account-create checkbox */
.woocommerce-checkout .create-account label,
.woocommerce-checkout .woocommerce-account-fields label{
  text-transform:none;letter-spacing:0;font-weight:500;font-size:13px;color:var(--fg-muted);
  display:flex;align-items:center;gap:10px;cursor:pointer;
}
.woocommerce-checkout .woocommerce-account-fields input[type="checkbox"]{
  accent-color:var(--blue);width:14px;height:14px;
}

/* Payment methods box (WC's #payment) */
.woocommerce-checkout-payment{
  background:transparent;
}
.woocommerce-checkout-payment ul.wc_payment_methods{
  list-style:none;padding:0;margin:0 0 16px 0;display:grid;gap:10px;border:0 !important;
}
.woocommerce-checkout-payment ul.wc_payment_methods li.wc_payment_method{
  border:1px solid var(--border);border-radius:var(--r-sm);padding:18px 20px;
  background:var(--bg);transition:all var(--duration) var(--ease);
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
}
.woocommerce-checkout-payment ul.wc_payment_methods li.wc_payment_method:hover{border-color:var(--blue-soft)}
.woocommerce-checkout-payment ul.wc_payment_methods li.wc_payment_method input[type="radio"]{
  accent-color:var(--blue);width:18px;height:18px;cursor:pointer;
}
.woocommerce-checkout-payment ul.wc_payment_methods li.wc_payment_method label{
  font-family:var(--ff-display);font-weight:600;font-size:15px;color:var(--fg);
  cursor:pointer;letter-spacing:-.005em;
}
.woocommerce-checkout-payment .payment_box{
  grid-column:1/-1;padding:14px 0 0;font-size:13px;color:var(--fg-muted);
  border-top:1px dashed var(--border-soft);margin-top:14px;
}
.woocommerce-checkout-payment #place_order{
  display:flex;justify-content:center;align-items:center;gap:10px;
  background:var(--blue);color:#fff;border-radius:var(--r-pill);padding:18px;
  font-family:var(--ff-display);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;width:100%;cursor:pointer;border:0;
  margin-top:14px;
  transition:all var(--duration) var(--ease);
  box-shadow:0 8px 24px rgba(79,125,249,.25);
}
.woocommerce-checkout-payment #place_order:hover{background:var(--blue-deep);transform:translateY(-1px)}
.woocommerce-checkout-payment .terms{font-size:12px;color:var(--fg-muted);margin-top:14px;display:flex;align-items:center;gap:8px}

/* WC notices inside checkout */
.woocommerce-checkout .woocommerce-notices-wrapper:empty{display:none}
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message{
  list-style:none;padding:14px 18px;border-radius:var(--r-sm);margin-bottom:14px;
  font-size:13px;border:1px solid var(--border);background:var(--card);
}
.woocommerce-checkout .woocommerce-error{border-color:rgba(217,59,59,.30);background:rgba(217,59,59,.06);color:var(--destructive)}
.woocommerce-checkout .woocommerce-message{border-color:rgba(15,170,142,.30);background:var(--mint-soft);color:var(--mint-deep)}

/* ─── Checkout page (simplified, isolated) ───────────────────────── */
.checkout-page{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.checkout-head{border-bottom:1px solid var(--border);padding:20px 0}
.checkout-head .row{display:flex;justify-content:space-between;align-items:center}
.checkout-head .logo img{height:52px;width:auto}
.checkout-head .secure{
  display:flex;align-items:center;gap:8px;
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mint-deep);
}
.checkout-head .secure::before{content:"⊕";font-size:14px}
.checkout-page main{flex:1;padding:48px 0 64px}
.checkout-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:flex-start}
.checkout-form .page-title{
  font-family:var(--ff-display);font-weight:700;font-size:36px;
  letter-spacing:-.025em;color:var(--fg);margin-bottom:8px;line-height:1;
}
.checkout-form .page-sub{font-size:14px;color:var(--fg-muted);margin-bottom:36px}
.summary-side{
  position:sticky;top:24px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:28px;
}
.summary-side h3{font-family:var(--ff-display);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin-bottom:18px}
.summary-side .lines{margin-bottom:0}
.summary-side .line{
  display:grid;grid-template-columns:56px 1fr auto;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--border-soft);align-items:center;
}
.summary-side .line:last-child{border-bottom:0}
.summary-side .line .pic{width:56px;height:56px;background:#FFFFFF;border:1px solid var(--border-soft);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;padding:4px;position:relative}
.summary-side .line .pic .qty-pill{
  position:absolute;top:-6px;right:-6px;background:var(--fg);color:#fff;
  font-family:var(--ff-display);font-size:10px;font-weight:700;letter-spacing:.04em;
  min-width:20px;height:20px;padding:0 4px;border-radius:10px;display:flex;align-items:center;justify-content:center;
}
.summary-side .line .pic img{max-height:42px;width:auto}
.summary-side .line .name{font-family:var(--ff-display);font-weight:600;font-size:13px;color:var(--fg);letter-spacing:-.005em}
.summary-side .line .meta{font-size:11px;color:var(--fg-muted);margin-top:2px}
.summary-side .line .price{font-family:var(--ff-display);font-weight:700;font-size:13px;color:var(--fg);letter-spacing:-.01em}
.summary-side .notes{margin-top:20px;padding-top:20px;border-top:1px solid var(--border-soft)}
.summary-side .notes label{font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:8px;display:block}
.summary-side .notes textarea{
  width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;font:inherit;font-size:13px;color:var(--fg);outline:none;
  min-height:72px;resize:vertical;font-family:inherit;
}
.summary-side .notes textarea:focus{border-color:var(--blue)}
.summary-side .totals-section{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.summary-side .row{display:flex;justify-content:space-between;font-size:13px;color:var(--fg-muted);padding:6px 0}
.summary-side .row .val{color:var(--fg)}
.summary-side .row.discount .val{color:var(--mint-deep);font-weight:700}
.summary-side .total{
  display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 4px;
  padding-top:14px;border-top:1px solid var(--border);
  font-family:var(--ff-display);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg);
}
.summary-side .total .amount{font-size:24px;letter-spacing:-.02em}
.checkout-foot{
  border-top:1px solid var(--border);padding:24px 0;
  font-family:var(--ff-display);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);
}
.checkout-foot .row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.checkout-foot .secure-icons{display:flex;gap:18px;flex-wrap:wrap}
.checkout-foot .accent{color:var(--mint-deep)}
.checkout-form .place-order-note{font-size:11px;color:var(--fg-dim);text-align:center;margin-top:14px;line-height:1.55}
.checkout-form .place-order-note a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}

@media(max-width:1080px){
  .checkout-grid{grid-template-columns:1fr;gap:40px}
  .summary-side{position:static}
}

/* ─── Cart page (full) ────────────────────────────────────────────── */
.cart-page{padding:48px 0 96px}
.cart-page .page-head{margin-bottom:32px}
.cart-page .page-head .row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px}
.cart-page h1{font-family:var(--ff-display);font-weight:700;font-size:clamp(36px,5vw,56px);letter-spacing:-.025em;color:var(--fg);line-height:1}
.cart-page .sub{font-size:14px;color:var(--fg-muted);margin-top:8px}
.cart-page .back{font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);transition:color var(--duration) var(--ease)}
.cart-page .back:hover{color:var(--blue-deep)}
.cart-page .back::before{content:"←";margin-right:6px}
.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:flex-start}
.cart-table{border-top:1px solid var(--border)}
.cart-row{
  display:grid;grid-template-columns:96px 1fr auto auto auto;gap:24px;
  padding:24px 0;border-bottom:1px solid var(--border);align-items:center;
}
.cart-row .pic{
  width:96px;height:96px;background:#FFFFFF;border:1px solid var(--border-soft);
  border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;padding:8px;
}
.cart-row .pic img{max-height:80px;width:auto}
.cart-row .info h4{font-family:var(--ff-display);font-weight:700;font-size:16px;color:var(--fg);margin-bottom:6px;letter-spacing:-.01em}
.cart-row .info .meta{font-size:11px;color:var(--mint-deep);letter-spacing:.14em;margin-bottom:8px;font-family:var(--ff-display);font-weight:700;text-transform:uppercase}
.cart-row .info .unit{font-size:13px;color:var(--fg-muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cart-row .info .unit .was{text-decoration:line-through;opacity:.65;font-size:.92em}
.cart-row .info .unit .vol-badge{
  display:inline-block;background:var(--mint-soft);color:var(--mint-deep);
  font-family:var(--ff-display);font-weight:700;font-size:10px;letter-spacing:.06em;
  padding:2px 7px;border-radius:999px;line-height:1.4;
}
.cart-row .qty{
  display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--r-pill);
  overflow:hidden;height:36px;
}
.cart-row .qty button{width:32px;height:36px;background:transparent;color:var(--fg);font-size:14px;cursor:pointer}
.cart-row .qty button:hover{color:var(--blue)}
.cart-row .qty span{padding:0 10px;font-size:13px;font-weight:600;font-family:var(--ff-display);min-width:32px;text-align:center}
.cart-row .line-total{font-family:var(--ff-display);font-weight:700;font-size:18px;color:var(--fg);letter-spacing:-.01em;text-align:right;min-width:80px}
.cart-row .remove{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--border-soft);
  background:transparent;color:var(--fg-dim);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--duration) var(--ease);font-size:13px;
}
.cart-row .remove:hover{border-color:var(--destructive);color:var(--destructive)}
.summary-card{
  position:sticky;top:120px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:28px;
}
.summary-card h3{font-family:var(--ff-display);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin-bottom:20px}
.summary-card .progress{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border-soft)}
.summary-card .progress .text{display:flex;justify-content:space-between;font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:10px;gap:8px}
.summary-card .progress .text .accent{color:var(--mint-deep)}
.summary-card .progress .bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden}
.summary-card .progress .fill{height:100%;background:linear-gradient(90deg,var(--mint) 0%,var(--mint-deep) 100%);border-radius:3px}
.summary-card .coupon{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:20px}
.summary-card .coupon input{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:0 18px;height:42px;font:inherit;font-size:13px;outline:none;
  font-family:var(--ff-display);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg);
  transition:border-color var(--duration) var(--ease);
}
.summary-card .coupon input:focus{border-color:var(--blue)}
.summary-card .coupon button{
  background:transparent;color:var(--fg);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:0 18px;font-family:var(--ff-display);font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;height:42px;
  transition:all var(--duration) var(--ease);
}
.summary-card .coupon button:hover{border-color:var(--blue);color:var(--blue)}
.summary-card .row{display:flex;justify-content:space-between;font-size:14px;color:var(--fg-muted);padding:6px 0}
.summary-card .row .label{font-family:var(--ff-display);font-weight:500;letter-spacing:.02em}
.summary-card .row .val{color:var(--fg)}
.summary-card .row.discount .val{color:var(--mint-deep);font-weight:700}
.summary-card .total{
  display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 22px;
  padding-top:14px;border-top:1px solid var(--border);
  font-family:var(--ff-display);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg);
}
.summary-card .total .amount{font-size:26px;letter-spacing:-.02em}
.summary-card .checkout-btn{
  display:flex;justify-content:center;align-items:center;gap:10px;
  background:var(--blue);color:#fff;border-radius:var(--r-pill);padding:18px;
  font-family:var(--ff-display);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;width:100%;cursor:pointer;
  transition:all var(--duration) var(--ease);
  box-shadow:0 8px 24px rgba(79,125,249,.25);border:0;
}
.summary-card .checkout-btn:hover{background:var(--blue-deep);transform:translateY(-1px);box-shadow:0 12px 32px rgba(79,125,249,.35)}
.summary-card .checkout-btn::after{content:"→"}
.summary-card .trust-row{
  display:flex;justify-content:center;gap:14px;margin-top:18px;flex-wrap:wrap;
  font-family:var(--ff-display);font-size:9px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-dim);text-align:center;
}
.cart-empty-page{text-align:center;padding:96px 24px}
.cart-empty-page .icon{
  width:96px;height:96px;border-radius:50%;background:var(--mint-soft);
  color:var(--mint-deep);font-size:36px;margin:0 auto 28px;
  display:inline-flex;align-items:center;justify-content:center;
}
.cart-empty-page h2{font-family:var(--ff-display);font-weight:700;font-size:32px;letter-spacing:-.02em;color:var(--fg);margin-bottom:12px}
.cart-empty-page p{font-size:15px;color:var(--fg-muted);margin-bottom:28px}

@media(max-width:1080px){
  .cart-layout{grid-template-columns:1fr;gap:32px}
  .summary-card{position:static}
}
@media(max-width:680px){
  .cart-row{grid-template-columns:64px 1fr auto;gap:14px;padding:18px 0}
  .cart-row .pic{width:64px;height:64px}
  .cart-row .pic img{max-height:48px}
  .cart-row .qty,.cart-row .line-total{grid-column:1/-1}
  .cart-row .qty{justify-self:start;margin-top:6px}
  .cart-row .line-total{justify-self:end;margin-top:-30px}
}

/* ─── Mobile nav drawer ───────────────────────────────────────────── */
/* Higher specificity (.nav .utils button.mnav-toggle) so this beats the
   generic .nav .utils button {display:inline-flex} rule above. */
.nav .utils button.mnav-toggle{display:none}
.mnav-toggle{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
  align-items:center;justify-content:center;color:var(--fg);
  cursor:pointer;font-size:16px;background:transparent;
  transition:all var(--duration) var(--ease);
}
.mnav-toggle:hover{border-color:var(--blue);color:var(--blue)}
.mnav-scrim{
  position:fixed;inset:0;background:rgba(10,15,26,.55);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s var(--ease);
  z-index:100;backdrop-filter:blur(2px);
}
.mnav-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(360px,100vw);
  background:var(--bg);border-left:1px solid var(--border);
  z-index:101;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .35s cubic-bezier(0.16,1,0.3,1);
  box-shadow:-24px 0 60px rgba(31,38,55,.12);
}
body.mnav-open .mnav-scrim{opacity:1;visibility:visible}
body.mnav-open .mnav-drawer{transform:translateX(0)}
body.mnav-open{overflow:hidden}
.mnav-head{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid var(--border)}
.mnav-head img{height:52px;width:auto}
.mnav-head .close{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--fg);transition:all var(--duration) var(--ease)}
.mnav-head .close:hover{border-color:var(--blue);color:var(--blue)}
.mnav-list{flex:1;padding:8px 0;overflow-y:auto}
.mnav-list a{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;border-bottom:1px solid var(--border-soft);
  font-family:var(--ff-display);font-weight:600;font-size:17px;color:var(--fg);
  letter-spacing:-.005em;transition:color var(--duration) var(--ease);
}
.mnav-list a::after{content:"→";color:var(--fg-dim);font-size:14px}
.mnav-list a:hover,.mnav-list a:hover::after{color:var(--blue)}
.mnav-list .sep{
  padding:14px 28px 8px;
  font-family:var(--ff-display);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mint-deep);
}
.mnav-foot{padding:18px 28px;border-top:1px solid var(--border);background:var(--card);font-family:var(--ff-display);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);text-align:center}
.mnav-foot .accent{color:var(--mint-deep)}

@media(max-width:880px){
  .nav .utils button.mnav-toggle{display:inline-flex}
}

/* ─── Age gate modal ──────────────────────────────────────────────── */
.age-scrim{
  position:fixed;inset:0;background:rgba(10,15,26,.78);
  display:none;align-items:center;justify-content:center;
  z-index:200;backdrop-filter:blur(6px);padding:24px;
}
body.age-open .age-scrim{display:flex}
body.age-open{overflow:hidden}
.age-card{
  background:var(--bg);border:1px solid var(--border);border-radius:12px;
  width:100%;max-width:520px;padding:48px 40px 36px;text-align:center;position:relative;
  box-shadow:0 32px 80px rgba(0,0,0,.40);overflow:hidden;
}
.age-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--mint-deep) 100%);
}
.age-card .logo{height:64px;width:auto;margin-bottom:28px}
.age-card .age-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(217,59,59,.10);color:var(--destructive);
  border:1px solid rgba(217,59,59,.25);border-radius:var(--r-pill);
  padding:6px 14px;font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px;
}
.age-card h2{font-family:var(--ff-display);font-weight:700;font-size:30px;letter-spacing:-.02em;line-height:1.1;color:var(--fg);margin-bottom:14px}
.age-card .copy{font-size:14px;color:var(--fg-muted);line-height:1.6;margin-bottom:24px;max-width:44ch;margin-left:auto;margin-right:auto}
.age-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:18px 0;margin-bottom:24px;
}
.age-stats .stat{padding:0 12px;border-right:1px solid var(--border)}
.age-stats .stat:last-child{border-right:0}
.age-stats .num{font-family:var(--ff-display);font-weight:700;font-size:13px;color:var(--fg);letter-spacing:.04em}
.age-stats .lab{font-family:var(--ff-display);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);margin-top:3px}
.age-card .remember{display:flex;align-items:center;gap:10px;justify-content:center;font-size:12px;color:var(--fg-muted);margin-bottom:20px;cursor:pointer}
.age-card .remember input{accent-color:var(--blue);width:14px;height:14px;cursor:pointer}
.age-card .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.age-card .btn-under{
  background:transparent;color:var(--fg);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:14px;font-family:var(--ff-display);font-weight:700;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:all var(--duration) var(--ease);
}
.age-card .btn-under:hover{border-color:var(--destructive);color:var(--destructive)}
.age-card .btn-enter{
  background:var(--blue);color:#fff;border:0;border-radius:var(--r-pill);padding:14px;
  font-family:var(--ff-display);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;transition:all var(--duration) var(--ease);
  box-shadow:0 8px 24px rgba(79,125,249,.25);
}
.age-card .btn-enter:hover{background:var(--blue-deep);transform:translateY(-1px)}
.age-card .legal{font-size:11px;color:var(--fg-dim);line-height:1.55}
.age-card .legal a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}

@media(max-width:480px){
  .age-card{padding:32px 24px 24px}
  .age-card h2{font-size:24px}
  .age-card .actions{grid-template-columns:1fr}
}

/* ─── COAs page ──────────────────────────────────────────────────── */
.coas{padding:80px 0 96px}
.coas-top{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:64px}
.coas-top .card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:36px 32px;text-align:center;
}
.coas-top .icon{
  width:56px;height:56px;border-radius:50%;background:var(--mint-soft);
  color:var(--mint-deep);display:inline-flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:18px;
}
.coas-top h4{font-family:var(--ff-display);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--fg);margin-bottom:8px}
.coas-top p{font-size:14px;color:var(--fg-muted);line-height:1.6}
.coas-grid-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--border);
}
.coas-grid-head h3{font-family:var(--ff-display);font-weight:700;font-size:24px;letter-spacing:-.01em;color:var(--fg)}
.coas-grid-head .filter{font-size:13px;color:var(--fg-muted)}
.coa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.coa-card{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:24px;display:flex;flex-direction:column;gap:12px;
  transition:all var(--duration) var(--ease);
}
.coa-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 16px 40px rgba(31,38,55,.08)}
.coa-card .file-icon{
  width:44px;height:56px;border:1px solid var(--border);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);color:var(--mint-deep);font-size:11px;font-weight:700;
  font-family:var(--ff-display);letter-spacing:.06em;position:relative;margin-bottom:4px;
}
.coa-card .file-icon::before{
  content:"";position:absolute;top:0;right:0;width:12px;height:12px;
  background:var(--bg);border-left:1px solid var(--border);border-bottom:1px solid var(--border);
}
.coa-card .name{font-family:var(--ff-display);font-weight:700;font-size:15px;color:var(--fg);letter-spacing:-.01em}
.coa-card .lot{font-family:var(--ff-display);font-size:11px;color:var(--fg-muted);letter-spacing:.06em}
.coa-card .meta{font-size:12px;color:var(--fg-muted);letter-spacing:.02em}
.coa-card .download{
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  margin-top:auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  transition:color var(--duration) var(--ease);
}
.coa-card .download:hover{color:var(--blue-deep)}
.coa-card .download::after{content:"↓"}

@media(max-width:1080px){
  .coas-top{grid-template-columns:1fr;gap:14px}
  .coa-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:880px){
  .coa-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .coa-grid{grid-template-columns:1fr}
}

/* ─── FAQ page (grouped accordion) ────────────────────────────────── */
.faq-page{padding:80px 0 96px}
.faq-page .page-head{padding:0 0 56px;text-align:center}
.faq-page .page-head .eyebrow{margin-bottom:14px}
.faq-page .page-head h1{
  font-family:var(--ff-display);font-weight:700;font-size:clamp(40px,5vw,72px);
  letter-spacing:-.03em;line-height:1;color:var(--fg);
}
.faq-page .page-head h1 .stroke{
  -webkit-text-stroke:1.5px var(--stroke);
  -webkit-text-fill-color:transparent;color:transparent;display:block;
}
.faq-page .page-head .deck{font-size:16px;color:var(--fg-muted);max-width:54ch;margin:18px auto 0;line-height:1.6}
.faq-cat{margin-bottom:56px;max-width:820px;margin-left:auto;margin-right:auto}
.faq-cat-head{
  display:flex;align-items:baseline;gap:14px;
  padding-bottom:14px;margin-bottom:8px;border-bottom:1px solid var(--border);
}
.faq-cat-head .n{
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.18em;color:var(--mint-deep);text-transform:uppercase;
}
.faq-cat-head h3{
  font-family:var(--ff-display);font-weight:700;font-size:22px;
  letter-spacing:-.01em;color:var(--fg);
}
.faq-still-card{
  background:linear-gradient(135deg,#FAFBFD 0%,#EEF2F8 100%);
  border:1px solid var(--border);border-radius:var(--r-sm);
  padding:48px 40px;margin:64px auto 0;max-width:820px;
  text-align:center;position:relative;overflow:hidden;
}
.faq-still-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(110,229,208,.18) 0%,rgba(110,229,208,0) 60%);
  pointer-events:none;
}
.faq-still-card .eyebrow{margin-bottom:14px;position:relative}
.faq-still-card h3{position:relative;font-family:var(--ff-display);font-weight:700;font-size:28px;letter-spacing:-.01em;color:var(--fg);margin-bottom:10px}
.faq-still-card p{position:relative;color:var(--fg-muted);font-size:15px;line-height:1.65;max-width:48ch;margin:0 auto 24px}
.faq-still-card .ctas{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ─── About page ──────────────────────────────────────────────────── */
.about-hero{padding:80px 0 72px;border-bottom:1px solid var(--border-soft)}
.about-hero .eyebrow{margin-bottom:18px}
.about-hero h1{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(48px,6vw,88px);line-height:.95;
  letter-spacing:-.035em;color:var(--fg);margin-bottom:28px;
}
.about-hero h1 .stroke{
  -webkit-text-stroke:1.5px var(--stroke);
  -webkit-text-fill-color:transparent;color:transparent;display:block;
}
.about-hero .deck{font-size:19px;color:var(--fg-muted);max-width:62ch;line-height:1.6}

.founding{padding:96px 0;border-bottom:1px solid var(--border-soft)}
.founding-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:stretch}
.founding-card{
  background:linear-gradient(160deg,#FAFBFD 0%,#EEF2F8 100%);
  border:1px solid var(--border);border-radius:12px;
  padding:64px 48px;text-align:center;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.founding-card::before{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,125,249,.12) 0%,rgba(79,125,249,0) 70%);
  filter:blur(24px);left:50%;top:50%;transform:translate(-50%,-50%);
}
.founding-card::after{
  content:"";position:absolute;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(110,229,208,.18) 0%,rgba(110,229,208,0) 70%);
  filter:blur(20px);left:60%;top:55%;transform:translate(-50%,-50%);
}
.founding-card .num{
  font-family:var(--ff-display);font-weight:700;font-size:120px;
  letter-spacing:-.04em;line-height:1;position:relative;
  background:linear-gradient(135deg,var(--blue) 0%,var(--mint-deep) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.founding-card .label{
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);
  margin-top:18px;position:relative;
}
.founding-mission .eyebrow{margin-bottom:14px}
.founding-mission h2{font-family:var(--ff-display);font-weight:700;font-size:36px;line-height:1.05;letter-spacing:-.02em;color:var(--fg);margin-bottom:20px}
.founding-mission p{font-size:16px;line-height:1.7;color:var(--fg-muted);margin-bottom:14px;max-width:52ch}
.founding-mission .strip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid var(--border);margin-top:32px;padding-top:24px;
}
.founding-mission .strip .stat{padding-right:24px;border-right:1px solid var(--border)}
.founding-mission .strip .stat:last-child{border-right:0;padding-right:0;padding-left:24px}
.founding-mission .strip .num{font-family:var(--ff-display);font-weight:700;font-size:32px;color:var(--fg);letter-spacing:-.02em;line-height:1;margin-bottom:6px}
.founding-mission .strip .lab{font-family:var(--ff-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep)}

.quality{padding:96px 0;background:var(--card);border-bottom:1px solid var(--border-soft)}
.quality .section-head{padding:0 0 48px}
.quality-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quality-card{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:40px 32px;
}
.quality-card .n{
  font-family:var(--ff-display);font-weight:700;font-size:42px;
  background:linear-gradient(135deg,var(--blue) 0%,var(--mint-deep) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:-.03em;line-height:1;margin-bottom:18px;
}
.quality-card h4{font-family:var(--ff-display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--fg);margin-bottom:10px}
.quality-card p{font-size:14px;line-height:1.65;color:var(--fg-muted)}

@media(max-width:880px){
  .founding-grid{grid-template-columns:1fr;gap:32px}
  .founding-card{padding:48px 24px}
  .founding-card .num{font-size:80px}
  .quality-list{grid-template-columns:1fr;gap:14px}
  .about-hero{padding:48px 0 40px}
}

/* ─── Shop page ───────────────────────────────────────────────────── */
.shop-head{padding:48px 0 28px;border-bottom:1px solid var(--border-soft)}
.shop-head .row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.shop-head .titles .eyebrow{margin-bottom:14px}
.shop-head .titles h1{
  font-family:var(--ff-display);font-weight:700;font-size:clamp(40px,5vw,64px);
  letter-spacing:-.025em;color:var(--fg);line-height:1;
}
.shop-head .titles .deck{font-size:15px;color:var(--fg-muted);margin-top:10px;max-width:52ch}
.shop-tools{display:flex;gap:12px;align-items:center}
.shop-search{
  display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--bg);padding:0 16px;height:46px;width:260px;
  transition:border-color var(--duration) var(--ease);
}
.shop-search:focus-within{border-color:var(--blue)}
.shop-search input{border:0;background:transparent;font:inherit;font-size:14px;color:var(--fg);outline:none;flex:1}
.shop-search input::placeholder{color:var(--fg-dim)}
.shop-search .icon{color:var(--fg-dim);font-size:14px;margin-right:10px}
.shop-sort{
  border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg);
  padding:0 36px 0 18px;height:46px;
  font-family:var(--ff-display);font-size:13px;font-weight:600;color:var(--fg);
  letter-spacing:.04em;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-muted) 50%),linear-gradient(135deg,var(--fg-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.cats{padding:22px 0;display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--border-soft)}
.cats .chip{
  border:1px solid var(--border);background:var(--bg);border-radius:var(--r-pill);
  padding:8px 18px;
  font-family:var(--ff-display);font-size:12px;font-weight:600;
  letter-spacing:.06em;color:var(--fg-muted);
  transition:all var(--duration) var(--ease);cursor:pointer;
}
.cats .chip:hover{border-color:var(--blue-soft);color:var(--fg)}
.cats .chip.active{background:var(--fg);color:#fff;border-color:var(--fg)}
.cats .chip .count{color:var(--fg-dim);margin-left:6px;font-weight:500}
.cats .chip.active .count{color:rgba(255,255,255,.55)}
.shop-grid{padding:40px 0 96px}
.shop-result-bar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:24px;font-size:13px;color:var(--fg-muted);
}
.shop-result-bar .accent{color:var(--fg);font-weight:600}

@media(max-width:880px){
  .shop-head .row{flex-direction:column;align-items:stretch;gap:18px}
  .shop-search{width:100%}
  .shop-sort{width:100%}
}

/* ─── Breadcrumb ──────────────────────────────────────────────────── */
.crumb{
  padding:24px 0;border-bottom:1px solid var(--border-soft);
  font-family:var(--ff-display);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.crumb .row{display:flex;align-items:center;gap:10px;color:var(--fg-dim);flex-wrap:wrap}
.crumb a{color:var(--fg-muted);transition:color var(--duration) var(--ease)}
.crumb a:hover{color:var(--blue)}
.crumb .sep{color:var(--border)}
.crumb .current{color:var(--fg)}

/* ─── PDP — Product Detail Page ───────────────────────────────────── */
.pdp{padding:48px 0 96px}
.pdp-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:flex-start}

/* Gallery */
.pdp-gallery{position:sticky;top:120px}
.pdp-main{
  position:relative;background:linear-gradient(160deg,#FAFBFD 0%,#EEF2F8 100%);
  border:1px solid var(--border);border-radius:12px;
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;box-shadow:0 24px 60px rgba(31,38,55,.06);
  margin-bottom:18px;
}
.pdp-main::before{
  content:"";position:absolute;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle, rgba(79,125,249,.10) 0%, rgba(79,125,249,0) 70%);
  filter:blur(16px);left:50%;top:50%;transform:translate(-50%,-50%);
}
.pdp-main::after{
  content:"";position:absolute;width:240px;height:240px;
  border-radius:50%;background:radial-gradient(circle, rgba(110,229,208,.18) 0%, rgba(110,229,208,0) 70%);
  filter:blur(20px);left:60%;top:55%;transform:translate(-50%,-50%);
}
.pdp-main img{position:relative;max-height:540px;width:auto;mix-blend-mode:multiply}
.pdp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pdp-thumb{
  aspect-ratio:1;background:#FFFFFF;border:1px solid var(--border);
  border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  padding:12px;cursor:pointer;transition:all var(--duration) var(--ease);
}
.pdp-thumb img{max-height:60px;width:auto;mix-blend-mode:multiply}
.pdp-thumb.active{border-color:var(--blue);box-shadow:0 0 0 1px rgba(79,125,249,.25)}
.pdp-thumb:hover{border-color:var(--blue-soft)}

/* Info column */
.pdp-info .eyebrow{margin-bottom:14px}
.pdp-info h1{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(36px,4.5vw,56px);line-height:1;
  letter-spacing:-.025em;color:var(--fg);margin-bottom:8px;
}
.pdp-info .dose-line{
  font-size:15px;color:var(--fg-muted);margin-bottom:20px;letter-spacing:.02em;
}
.pdp-info .price-row{
  display:flex;align-items:baseline;gap:14px;margin-bottom:24px;
  padding-bottom:24px;border-bottom:1px solid var(--border-soft);
}
.pdp-info .price{
  font-family:var(--ff-display);font-weight:700;font-size:36px;
  color:var(--fg);letter-spacing:-.02em;
}
.pdp-info .price-was{
  font-size:18px;color:var(--fg-dim);text-decoration:line-through;font-weight:500;
}
.pdp-info .stock-tag{
  display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);
}
.pdp-info .stock-tag::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--mint-deep);
}
.pdp-info .desc{font-size:15px;color:var(--fg-muted);line-height:1.7;margin-bottom:32px;max-width:54ch}

/* Volume Discount Table */
.vol-disc{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:20px 24px;margin-bottom:32px;
}
.vol-disc .head{
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:14px;
}
.vol-disc table{width:100%;border-collapse:collapse}
.vol-disc th{
  text-align:left;padding:8px 0;
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;color:var(--fg-dim);
  border-bottom:1px solid var(--border);
}
.vol-disc th:not(:first-child),.vol-disc td:not(:first-child){text-align:right}
.vol-disc td{
  padding:14px 0;border-bottom:1px solid var(--border-soft);
  font-size:14px;color:var(--fg);
}
.vol-disc tr:last-child td{border-bottom:0}
.vol-disc tr.popular td{background:rgba(110,229,208,.06);position:relative}
.vol-disc tr.popular td:first-child{
  position:relative;padding-left:14px;
}
.vol-disc tr.popular td:first-child::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  background:var(--mint);border-radius:2px;
}
.vol-disc .tier{font-family:var(--ff-display);font-weight:600;letter-spacing:.02em}
.vol-disc .tier .sub{display:block;font-size:11px;color:var(--fg-muted);font-weight:500;letter-spacing:.10em;text-transform:uppercase;margin-top:2px}
.vol-disc .save{font-family:var(--ff-display);font-weight:700;color:var(--mint-deep);letter-spacing:-.01em}

/* Inline mini trust row */
.mini-trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--border);border-radius:var(--r-sm);
  margin-bottom:32px;background:var(--card);
}
.mini-trust .item{
  text-align:center;padding:16px 12px;border-right:1px solid var(--border-soft);
}
.mini-trust .item:last-child{border-right:0}
.mini-trust .num{
  font-family:var(--ff-display);font-weight:700;font-size:14px;
  color:var(--fg);letter-spacing:.04em;
}
.mini-trust .lab{
  font-family:var(--ff-display);font-size:9px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);margin-top:2px;
}

/* Variant + Qty row */
.pdp-options{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:18px}
.pdp-variant label{
  display:block;
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:8px;
}
.pdp-variant .opts{display:flex;gap:10px;flex-wrap:wrap}
.pdp-variant .opt{
  border:1px solid var(--border);background:var(--bg);
  border-radius:var(--r-sm);padding:12px 18px;cursor:pointer;
  font-family:var(--ff-display);font-weight:600;font-size:13px;letter-spacing:.04em;
  display:flex;flex-direction:column;align-items:flex-start;min-width:100px;gap:2px;
  transition:all var(--duration) var(--ease);color:var(--fg);
}
.pdp-variant .opt .price-mini{font-size:11px;color:var(--fg-muted);font-weight:500}
.pdp-variant .opt:hover{border-color:var(--blue-soft)}
.pdp-variant .opt.active{border-color:var(--blue);background:rgba(79,125,249,.06);box-shadow:0 0 0 1px rgba(79,125,249,.30)}

.pdp-atc-row{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-bottom:14px}
.pdp-qty{
  display:flex;align-items:center;border:1px solid var(--border);
  border-radius:var(--r-pill);overflow:hidden;height:54px;background:var(--bg);
}
.pdp-qty button{
  width:46px;height:54px;background:transparent;color:var(--fg);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  transition:color var(--duration) var(--ease);
}
.pdp-qty button:hover{color:var(--blue)}
.pdp-qty span{
  padding:0 8px;font-size:15px;font-weight:700;font-family:var(--ff-display);
  min-width:30px;text-align:center;
}
.btn-atc{
  display:flex;justify-content:center;align-items:center;gap:10px;
  background:var(--blue);color:#fff;border-radius:var(--r-pill);
  padding:0 28px;height:54px;
  font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;transition:all var(--duration) var(--ease);
  box-shadow:0 8px 24px rgba(79,125,249,.25);width:100%;cursor:pointer;
}
.btn-atc:hover{background:var(--blue-deep);transform:translateY(-1px);box-shadow:0 12px 32px rgba(79,125,249,.35)}
.btn-atc::after{content:"→";font-size:16px}
.pdp-atc-note{
  font-size:12px;color:var(--fg-dim);margin-bottom:32px;text-align:center;letter-spacing:.04em;
}

/* Frequently researched together */
.bundle{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:24px;margin-bottom:32px;
}
.bundle .head{
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:18px;
}
.bundle ul{list-style:none;display:grid;gap:0;margin-bottom:18px}
.bundle li{
  display:grid;grid-template-columns:auto 56px 1fr auto;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--border-soft);align-items:center;
}
.bundle li:last-child{border-bottom:0}
.bundle li .check{
  width:20px;height:20px;border-radius:5px;border:1.5px solid var(--blue);
  background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;
}
.bundle li .pic{
  width:56px;height:56px;background:#FFFFFF;border:1px solid var(--border-soft);
  border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;padding:4px;
}
.bundle li .pic img{max-height:46px;width:auto}
.bundle li .info{font-family:var(--ff-display);font-weight:600;font-size:14px;color:var(--fg)}
.bundle li .info .sub{display:block;font-size:11px;color:var(--fg-muted);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.bundle li .price{font-family:var(--ff-display);font-weight:700;font-size:14px;color:var(--fg)}
.bundle .total-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--border);margin-bottom:16px;
}
.bundle .total-row .label{
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);
}
.bundle .total-row .amount{
  font-family:var(--ff-display);font-weight:700;font-size:24px;
  color:var(--mint-deep);letter-spacing:-.02em;
}
.bundle .btn-add-all{
  display:flex;justify-content:center;align-items:center;gap:8px;
  background:var(--blue);color:#fff;border-radius:var(--r-pill);
  padding:14px;font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;width:100%;cursor:pointer;
  transition:all var(--duration) var(--ease);
}
.bundle .btn-add-all:hover{background:var(--blue-deep)}
.bundle .btn-add-all::after{content:"→"}

/* Notice / banner / references */
.notice{
  display:grid;grid-template-columns:auto 1fr;gap:14px;
  padding:14px 18px;border:1px solid var(--border);
  border-radius:var(--r-sm);margin-bottom:24px;background:var(--card);
  align-items:center;
}
.notice .icon{
  width:32px;height:32px;border-radius:50%;background:var(--mint-soft);
  color:var(--mint-deep);display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.notice .copy{font-size:12px;color:var(--fg-muted);line-height:1.55}
.notice .copy strong{color:var(--fg);font-weight:700;letter-spacing:.04em}
.notice.ruo .icon{background:rgba(217,59,59,.08);color:var(--destructive)}
.notice.warn .icon{background:rgba(255,168,0,.10);color:#D58B00}

/* References block */
.references{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:24px;margin-bottom:24px;
}
.references .head{
  font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.references .head::before{content:"📑";font-size:14px}
.references ol{padding-left:22px;display:grid;gap:10px}
.references li{font-size:13px;color:var(--fg-muted);line-height:1.6}
.references li a{color:var(--blue);transition:color var(--duration) var(--ease);text-decoration:underline;text-decoration-color:rgba(79,125,249,.3);text-underline-offset:2px}
.references li a:hover{color:var(--blue-deep)}

/* Related products section header tweak */
.related{padding:96px 0;border-top:1px solid var(--border-soft);background:var(--card)}
.related .section-head{padding:0 0 32px}

/* PDP responsive */
@media(max-width:1080px){
  .pdp-grid{grid-template-columns:1fr;gap:48px}
  .pdp-gallery{position:static}
}
@media(max-width:880px){
  .pdp{padding:32px 0 64px}
  .pdp-info h1{font-size:34px}
  .pdp-info .price{font-size:30px}
  .mini-trust{grid-template-columns:repeat(2,1fr)}
  .mini-trust .item:nth-child(2){border-right:0}
  .pdp-atc-row{grid-template-columns:1fr;gap:10px}
  .btn-atc{width:100%}
  .pdp-thumbs{grid-template-columns:repeat(4,1fr)}
}

/* ─── Responsive — global ─────────────────────────────────────────── */
@media(max-width:1080px){
  .product-grid,.product-grid.full{grid-template-columns:repeat(3,1fr)}
  .premium-grid{grid-template-columns:1fr;gap:48px}
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr;gap:32px}
}
@media(max-width:1080px){
  .hero{min-height:auto}
  .hero .grid{grid-template-columns:1fr}
  .hero .left{padding:48px 32px 24px;justify-self:center;text-align:left;max-width:720px;width:100%}
  .hero .image-side{aspect-ratio:1/1;max-height:520px}
  .hero .image-side::before{display:none}
}
@media(max-width:880px){
  .nav ul{display:none}
  .hero .left{padding:36px 20px 20px}
  .hero h1{font-size:clamp(44px, 11vw, 72px)}
  .hero .deck{font-size:16px;margin-bottom:28px}
  .hero .ctas{margin-bottom:36px}
  .hero .image-side{aspect-ratio:1/1;max-height:420px}
  .hero .stats{grid-template-columns:repeat(2,1fr);gap:18px;padding-top:24px}
  .hero .stat .num{font-size:24px}
  .products{padding:32px 0 64px}
  .product-grid,.product-grid.full{grid-template-columns:repeat(2,1fr);gap:14px}
  .section-head{padding:48px 0 16px}
  .section-head h2,.premium h2,.verified-card h2{font-size:32px}
  .premium,.verified,.faq{padding:56px 0}
  .premium-grid{grid-template-columns:1fr;gap:36px}
  .premium .panel{padding:32px 24px}
  .verified-card{padding:48px 22px}
  .container,.cats.container{padding:0 20px}
  /* Override any later mobile rules — keep here so this block is authoritative */
  .product-grid,.product-grid.full{grid-template-columns:repeat(2,1fr);gap:14px}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:24px 0}
  .trust-item{border-right:0;padding:16px 12px}
  .verified-card{padding:48px 24px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .utility .row{gap:18px;font-size:10px}
  .section-head{padding:64px 0 16px}
  .section-head h2,.premium h2,.verified-card h2{font-size:34px}
  .premium,.verified,.faq{padding:64px 0}
}
@media(max-width:480px){
  .product-grid,.product-grid.full{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero .ctas{flex-direction:column;align-items:stretch}
  .btn-primary,.btn-ghost{justify-content:center}
}