/** Shopify CDN: Minification failed

Line 1675:0 Expected "}" to go with "{"

**/
/* ============================================================
   SOLIA v7 — Vidrate-inspired, V5 palette, DM Sans
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&display=swap');

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

:root{
  /* V5 palette */
  --blue: #B3CFDA;
  --blue-dark: #7AAAB9;
  --blue-deep: #4A8EA0;
  --blue-light: #D9EBF2;
  --blue-section: #E8F2F6;
  --blue-faint: rgba(179,207,218,0.12);
  --cream: #FDFEF1;
  --cream-dark: #F0F2E6;
  --black: #0E0E0C;
  --ink: #1C1C1A;
  --ink-deep: #111110;
  --black-70: rgba(14,14,12,0.70);
  --black-60: rgba(14,14,12,0.60);
  --black-40: rgba(14,14,12,0.40);
  --black-25: rgba(14,14,12,0.25);
  --black-12: rgba(14,14,12,0.08);
  --sans: 'DM Sans', system-ui, sans-serif;
}

html,body{ margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  background:var(--cream);
  color:var(--black);
  font-family:var(--sans);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{ background:var(--blue) }
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit }

/* ---------- reveal ---------- */
.rev{ opacity:0; transform:translateY(20px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1) }
.rev.in{ opacity:1; transform:none }
.rev.d1{ transition-delay:.07s }
.rev.d2{ transition-delay:.14s }
.rev.d3{ transition-delay:.21s }
.rev.d4{ transition-delay:.28s }
.rev.d5{ transition-delay:.35s }

/* ---------- typography ---------- */
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--blue-deep);
}
.eyebrow-cream{ color:var(--blue) }

.h1{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(44px, 5.8vw, 84px);
  line-height:1.02;
  letter-spacing:-2.5px;
}
.h1 strong{ font-weight:600 }

.h2{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(34px, 4.2vw, 60px);
  line-height:1.06;
  letter-spacing:-1.6px;
}
.h2 strong{ font-weight:600 }

.h3{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(24px,2.4vw,32px);
  line-height:1.15;
  letter-spacing:-0.6px;
}

.body-lg{ font-size:18px; line-height:1.7; font-weight:300; color:var(--black-70) }
.body-md{ font-size:16px; line-height:1.7; font-weight:300; color:var(--black-60) }
.body-sm{ font-size:14px; line-height:1.6; font-weight:300; color:var(--black-60) }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 32px; border-radius:100px;
  font-size:14px; font-weight:600; letter-spacing:0.2px;
  transition: all .25s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
}
.btn-primary{ background:var(--black); color:var(--cream) }
.btn-primary:hover{ background:var(--blue-deep); transform:translateY(-1px) }
.btn-blue{ background:var(--blue); color:var(--black) }
.btn-blue:hover{ background:var(--blue-dark); color:var(--black); transform:translateY(-1px) }
.btn-cream{ background:var(--cream); color:var(--black) }
.btn-cream:hover{ background:var(--blue); transform:translateY(-1px) }
.btn-ghost{
  font-weight:400; color:var(--black-60);
  border:1px solid var(--black-12);
  padding:14px 28px;
}
.btn-ghost:hover{ color:var(--black); border-color:var(--black-25) }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 32px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  transition: background .35s, padding .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(253,254,241,0.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--black-12);
  padding:12px 32px;
}
.nav-left{ display:flex; align-items:center; gap:28px; justify-self:start }
.nav-right{ display:flex; align-items:center; gap:22px; justify-self:end }
.nav-logo{ justify-self:center }
.nav-logo img{ height:42px; width:auto; transition:height .3s }
.nav.scrolled .nav-logo img{ height:38px }
.nav-shop{ padding:10px 22px; font-size:13px; white-space:nowrap }
.nav-links{ display:flex; gap:26px; align-items:center }
.nav-link{
  font-size:14px; font-weight:400; color:var(--black-70);
  transition:color .2s; white-space:nowrap;
}
.nav-link:hover{ color:var(--black) }
.nav-link.active{ color:var(--black); font-weight:500 }
.nav-link.active::after{
  content:""; display:block; height:2px; margin-top:3px;
  background:var(--blue-deep); border-radius:2px;
}
.nav-overlay-link.active{ color:var(--blue-deep) }

/* account + cart */
.nav-account{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:400; color:var(--black-70);
  transition:color .2s; white-space:nowrap;
}
.nav-account:hover{ color:var(--black) }
.nav-account svg{ color:currentColor }
.nav-cart{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  color:var(--black-70); transition:color .2s; width:34px; height:34px;
}
.nav-cart:hover{ color:var(--black) }
.nav-cart-count{
  position:absolute; top:-3px; right:-5px;
  min-width:17px; height:17px; padding:0 4px; border-radius:100px;
  background:var(--blue-deep); color:#fff;
  font-family:var(--sans); font-size:10px; font-weight:700;
  display:none; align-items:center; justify-content:center; line-height:1;
}
.nav-cart-count.has{ display:inline-flex }

/* mobile nav controls — hidden on desktop */
.nav-burger{
  display:none;
  width:28px; height:20px; position:relative;
  flex-direction:column; justify-content:space-between;
  background:none; border:none; padding:0; cursor:pointer;
  justify-self:start;
}
.nav-cart-mobile{ display:none; justify-self:end }
.nav-burger span{
  display:block; width:100%; height:2px; border-radius:2px;
  background:var(--black);
  transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .25s;
}
.nav-burger.open span:nth-child(1){ transform:translateY(9px) rotate(45deg) }
.nav-burger.open span:nth-child(2){ opacity:0 }
.nav-burger.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg) }

.nav-overlay{
  position:fixed; inset:0; z-index:90;
  background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity .35s ease;
}
.nav-overlay.open{ opacity:1; pointer-events:auto }
.nav-overlay-links{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
}
.nav-overlay-link{
  font-size:30px; font-weight:300; letter-spacing:-1px;
  color:var(--black); padding:12px 0;
  opacity:0; transform:translateY(12px);
  transition: opacity .4s, transform .4s, color .2s;
}
.nav-overlay.open .nav-overlay-link{ opacity:1; transform:none }
.nav-overlay.open .nav-overlay-link:nth-child(1){ transition-delay:.04s }
.nav-overlay.open .nav-overlay-link:nth-child(2){ transition-delay:.09s }
.nav-overlay.open .nav-overlay-link:nth-child(3){ transition-delay:.14s }
.nav-overlay.open .nav-overlay-link:nth-child(4){ transition-delay:.19s }
.nav-overlay.open .nav-overlay-link:nth-child(5){ transition-delay:.24s }
.nav-overlay-link:hover{ color:var(--blue-deep) }
.nav-overlay-account{ font-size:20px; color:var(--black-60); margin-top:6px }
.nav-overlay-shop{
  margin-top:24px; font-size:15px; padding:16px 36px;
  opacity:0; transform:translateY(12px);
  transition: opacity .4s, transform .4s;
  transition-delay:.3s;
}
.nav-overlay.open .nav-overlay-shop{ opacity:1; transform:none }

/* ---------- hero ---------- */
.hero{
  min-height:100vh; padding:80px 5vw 60px;
  display:flex; align-items:center; position:relative; overflow:hidden;
}
.hero-bg-a, .hero-bg-b{ position:absolute; pointer-events:none; border-radius:50%; filter:blur(0px); }
.hero-bg-a{
  top:-15%; right:-10%;
  width:760px; height:760px;
  background:radial-gradient(ellipse, rgba(179,207,218,0.30) 0%, rgba(179,207,218,0.06) 55%, transparent 75%);
  animation: solia-blob-a 18s ease-in-out infinite;
}
.hero-bg-b{
  bottom:-12%; left:-8%;
  width:520px; height:520px;
  background:radial-gradient(ellipse, rgba(179,207,218,0.18) 0%, transparent 68%);
  animation: solia-blob-b 22s ease-in-out infinite;
}
@keyframes solia-blob-a{
  0%,100%{ transform:translate(0,0) scale(1) }
  33%{ transform:translate(20px,-26px) scale(1.03) }
  66%{ transform:translate(-12px,20px) scale(0.97) }
}
@keyframes solia-blob-b{
  0%,100%{ transform:translate(0,0) }
  50%{ transform:translate(14px,-22px) }
}

.hero-grid{
  max-width:1320px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px;
  align-items:center; position:relative; z-index:2;
}
.hero-checks{ margin-top:36px; display:flex; flex-direction:column; gap:13px }
.hero-check{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:400; color:var(--black-70) }
.hero-check-icon{
  width:18px; height:18px; border-radius:50%; background:var(--blue);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.hero-check-icon svg{ width:9px; height:9px }

.hero-ctas{ margin-top:44px; display:flex; gap:12px; align-items:center; flex-wrap:wrap }

.hero-stage{
  position:relative; width:100%; min-height:720px;
  display:flex; align-items:center; justify-content:center;
}
.hero-stick{
  position:absolute; width:50%; max-width:420px;
  will-change:transform;
  transition: transform .15s linear;
  filter: drop-shadow(0 40px 60px rgba(74,142,160,0.20));
}
.hero-stick img{ width:100%; height:auto; display:block }
.hero-stick-cl{ left:42%; top:50%; transform-origin:center; z-index:2 }
.hero-stick-pog{ left:58%; top:50%; z-index:1 }
.hero-stage-ring{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:600px; height:600px; border-radius:50%;
  border:1px dashed rgba(122,170,185,0.28);
  animation: solia-ring 36s linear infinite;
  pointer-events:none;
}
@keyframes solia-ring{ to{ transform:translate(-50%,-50%) rotate(360deg) } }
.hero-stage-orb{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(217,235,242,0.65), rgba(179,207,218,0.25) 55%, transparent 75%);
  pointer-events:none;
}

.scroll-hint{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--blue-deep);
  animation: solia-bob 2.4s ease-in-out infinite;
  z-index:3;
}
.scroll-hint::after{ content:""; width:1px; height:32px; background:linear-gradient(to bottom, var(--blue-dark), transparent) }
@keyframes solia-bob{
  0%,100%{ opacity:.5; transform:translate(-50%,0) }
  50%{ opacity:1; transform:translate(-50%,6px) }
}

/* ---------- marquee ---------- */
.marquee{ background:var(--blue); padding:14px 0; overflow:hidden }
.marquee-track{
  display:flex; gap:42px; width:max-content;
  animation: solia-marq 38s linear infinite;
}
.marquee-item{
  font-size:12px; font-weight:500; color:var(--black);
  letter-spacing:1.2px; text-transform:uppercase;
  white-space:nowrap; display:inline-flex; align-items:center; gap:16px;
}
.marquee-dot{ font-size:8px; opacity:0.35 }
@keyframes solia-marq{ 0%{ transform:translateX(0) } 100%{ transform:translateX(-50%) } }

/* ---------- section base ---------- */
.section{
  padding: clamp(60px, 9vh, 100px) clamp(24px, 5vw, 64px);
  position:relative;
}
.section-cream{ background:var(--cream) }
.section-blue{ background:var(--blue-section) }
.section-dark{ background:var(--ink-deep); color:var(--cream) }
.section-dark .body-lg, .section-dark .body-md{ color:rgba(253,254,241,0.7) }
.container{ max-width:1320px; margin:0 auto; width:100% }

/* ---------- sticky-scroll story (problem→answer) ---------- */
.story-track{ position:relative; height:240vh }
.story-stage{
  position:sticky; top:0; height:100vh;
  display:grid; grid-template-columns:1fr 1fr;
  overflow:hidden;
  background:var(--blue-section);
}
.story-side-text{
  position:relative;
  padding:0 64px;
  display:flex; flex-direction:column; justify-content:center;
}
.story-progress{
  position:absolute; top:36px; left:64px; right:64px;
  display:flex; gap:8px;
}
.story-progress-bar{
  flex:1; height:2px; border-radius:2px;
  background:rgba(14,14,12,0.1);
  position:relative; overflow:hidden;
}
.story-progress-bar::after{
  content:""; position:absolute; inset:0;
  background:var(--blue-deep);
  transform-origin:left;
  transform:scaleX(var(--p,0));
  transition: transform .2s linear;
}
.story-progress-bar.done::after{ transform:scaleX(1) }

.story-phase{
  position:absolute; left:64px; right:64px;
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.story-phase.out-up{ opacity:0; transform:translateY(-30px); pointer-events:none }
.story-phase.out-down{ opacity:0; transform:translateY(30px); pointer-events:none }
.story-phase.in{ opacity:1; transform:none }
.story-bullets{ display:flex; flex-direction:column; gap:18px; margin-top:32px }
.story-bullet{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  opacity:0; transform:translateY(12px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.story-bullet.on{ opacity:1; transform:none }
.story-bullet-dot{
  width:10px; height:10px; border-radius:50%;
  border:1.5px solid var(--blue-deep);
  margin-top:6px; flex-shrink:0;
  transition: background .35s;
}
.story-phase.answer .story-bullet-dot{ background:var(--blue-deep) }
.story-bullet-text strong{ font-weight:600; display:block; margin-bottom:3px; font-size:15px }

.story-side-visual{
  position:relative;
  border-left:1px solid rgba(14,14,12,0.08);
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-section);
}
.story-svg{ width:min(80%, 480px); height:auto }

/* ---------- anatomy tighter spacing ---------- */
.section-anatomy{ padding-top: 60px; padding-bottom: 40px }
.anatomy-head{ margin-bottom: 20px !important }

.anatomy-grid{
  display:grid; grid-template-columns:1fr 1.3fr 1fr;
  gap:clamp(20px, 3vw, 40px); align-items:center;
  min-height:auto;
}
.anatomy-figure{
  position:relative; display:flex; justify-content:center; align-items:center;
  filter:drop-shadow(0 12px 32px rgba(74,142,160,0.22));
  min-height:520px;
}
.anatomy-figure-inner{
  position:relative; display:inline-block;
  width:100%; max-width:520px;
}
.anatomy-figure-inner img{
  width:100%; height:auto; display:block;
  mix-blend-mode:multiply;
  opacity:0.70;
}
.anatomy-figure::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(179,207,218,0.35), transparent 70%);
  z-index:-1;
}
.anatomy-pulse{
  position:absolute;
  width:14px; height:14px; border-radius:50%;
  background:var(--blue-deep);
  box-shadow: 0 0 0 0 rgba(74,142,160,0.5);
  transform:translate(-50%,-50%);
  opacity:0; transition:opacity .4s, top .6s cubic-bezier(.16,1,.3,1), left .6s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
  z-index:3;
}
.anatomy-pulse.on{ opacity:1; animation: solia-pulse 1.8s ease-out infinite }
@keyframes solia-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(74,142,160,0.55) }
  100%{ box-shadow: 0 0 0 24px rgba(74,142,160,0) }
}

.anatomy-list{ display:flex; flex-direction:column; gap:8px }
.anatomy-list.left .anatomy-item{ text-align:right; padding-right:16px; border-right:2px solid transparent }
.anatomy-list.right .anatomy-item{ text-align:left; padding-left:16px; border-left:2px solid transparent }
.anatomy-item{
  padding:18px 16px;
  cursor:pointer;
  border-radius:8px;
  transition: background .25s, border-color .25s, transform .25s;
}
.anatomy-item:hover{
  background:rgba(179,207,218,0.18);
}
.anatomy-item.active{
  background:rgba(179,207,218,0.30);
}
.anatomy-list.left .anatomy-item.active{ border-right-color:var(--blue-deep) }
.anatomy-list.right .anatomy-item.active{ border-left-color:var(--blue-deep) }
.anatomy-name{ font-size:19px; font-weight:500; color:var(--black); letter-spacing:-0.3px; line-height:1.2 }
.anatomy-sub{ font-size:13px; color:var(--black-60); margin-top:4px; font-weight:300 }

/* ---------- flavor switcher ---------- */
.flavor-stage{
  position:relative;
  background:var(--cream);
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--black-12);
}
.flavor-color-bar{
  height:6px; width:100%;
  background:var(--blue);
  transition: background .6s cubic-bezier(.16,1,.3,1);
}
.flavor-color-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  border-bottom:1px solid var(--black-12);
  background:var(--cream);
  position:relative; z-index:2;
}
.flavor-color-head-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 14px; border-radius:100px;
  background: var(--cream-dark);
  border:1px solid var(--black-12);
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  font-weight:600; color:var(--black);
  transition: background .6s, border-color .6s;
}
.flavor-color-head-pill .swatch{
  width:12px; height:12px; border-radius:50%;
  transition: background .6s;
  flex-shrink:0;
}
.flavor-color-head-meta{
  font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--black-40); font-weight:500;
}
.flavor-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1.1fr 1fr;
  align-items:center; min-height:520px;
  padding:40px 60px;
}
.flavor-text{ display:flex; flex-direction:column; gap:14px }
.flavor-text.right{ text-align:right }
.flavor-text .h1{
  transition: color .8s;
}
.flavor-product{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:480px;
}
.flavor-bag{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.flavor-bag img{
  max-width:90%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  filter: drop-shadow(0 30px 50px rgba(74,142,160,0.20));
}
.flavor-bag.entering{ opacity:0; transform:translateX(60px) scale(0.96) }
.flavor-bag.leaving{ opacity:0; transform:translateX(-60px) scale(0.96) }
.flavor-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:50%;
  background:var(--cream); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  cursor:pointer; z-index:5;
  transition: transform .25s, background .25s;
}
.flavor-arrow:hover{ background:var(--blue); transform:translateY(-50%) scale(1.05) }
.flavor-arrow.left{ left:-22px }
.flavor-arrow.right{ right:-22px }
.flavor-dots{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:5;
}
.flavor-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(14,14,12,0.18);
  transition:all .25s; cursor:pointer; border:none;
}
.flavor-dot.on{ width:28px; border-radius:6px; background:var(--blue-deep) }

.flavor-facts{
  margin-top:20px;
  display:grid; gap:10px;
  font-size:14px; color:var(--black-70);
}
.flavor-facts.right{ justify-items:end }
.flavor-fact{
  display:flex; align-items:center; gap:10px;
  padding:7px 14px; background:var(--cream-dark);
  border:1px solid var(--black-12); border-radius:100px;
  font-size:12.5px;
}
.flavor-fact svg{ width:12px; height:12px; color:var(--blue-deep) }

/* ---------- reviews ---------- */
.reviews-head{ text-align:center; margin-bottom:60px }
.reviews-stars{ display:inline-flex; gap:3px; font-size:24px; color:#D4A017; margin-bottom:16px }
.reviews-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
}
.review-card{
  background:var(--cream); border:1px solid var(--black-12);
  border-radius:14px; padding:32px 28px;
  display:flex; flex-direction:column; gap:18px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.review-card:hover{
  transform:translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(14,14,12,0.10);
  border-color: rgba(122,170,185,0.4);
}
.review-stars{ display:flex; gap:2px; font-size:14px; color:#D4A017 }
.review-quote{
  font-size:16px; line-height:1.55; font-weight:400;
  color:var(--black); letter-spacing:-0.1px;
}
.review-meta{
  margin-top:auto; padding-top:16px;
  border-top:1px solid var(--black-12);
  display:flex; align-items:center; gap:12px;
}
.review-avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--blue); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600;
}
.review-name{ font-size:14px; font-weight:500 }
.review-detail{ font-size:12px; color:var(--black-40); margin-top:2px }

/* ---------- final CTA ---------- */
.cta-block{
  text-align:center; padding: clamp(100px, 16vh, 180px) 6vw;
  background:var(--ink-deep); color:var(--cream);
  position:relative; overflow:hidden;
}
.cta-block::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:780px; height:780px; border-radius:50%;
  background:radial-gradient(circle, rgba(179,207,218,0.16) 0%, transparent 65%);
  pointer-events:none;
}
.cta-block-inner{ max-width:780px; margin:0 auto; position:relative }
.cta-block-logo img{ height:48px; width:auto; margin:0 auto 32px }

/* ---------- footer ---------- */
.footer{
  background:#080706; color:rgba(253,254,241,0.45);
  padding:80px 5vw 32px;
}
.footer-grid{
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:56px; margin-bottom:60px;
}
.footer h4{
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:rgba(253,254,241,0.7); margin-bottom:18px; font-weight:600;
}
.footer a{
  display:block; font-size:14px; font-weight:300;
  color:rgba(253,254,241,0.45); padding:4px 0;
  transition: color .2s;
}
.footer a:hover{ color:var(--cream) }
.footer-bottom{
  max-width:1320px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(253,254,241,0.05); padding-top:24px; gap:14px; flex-wrap:wrap;
}

/* ---------- responsive ---------- */

/* tablet */
@media (max-width:980px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px }
}

/* mobile — under 768px */
@media (max-width:768px){
  /* NAV: burger (left) · logo (center) · cart (right) — slim bar, all centered */
  .nav{ padding:8px 18px; grid-template-columns:1fr auto 1fr; align-items:center }
  .nav.scrolled{ padding:6px 18px }
  .nav-left{ display:none }
  .nav-right{ display:none }
  .nav-burger{ display:flex; grid-column:1; justify-self:start; height:16px; width:24px }
  .nav-logo{ grid-column:2; justify-self:center; display:flex; align-items:center }
  .nav-cart-mobile{ display:inline-flex; grid-column:3; justify-self:end; width:30px; height:30px }
  .nav-cart-mobile svg{ width:19px; height:19px }
  .nav-logo img{ height:30px }
  .nav.scrolled .nav-logo img{ height:28px }

  /* HERO: stack text over visual */
  .hero{ padding:96px 22px 48px; min-height:auto }
  .hero-grid{ grid-template-columns:1fr; gap:8px; text-align:center }
  .hero-text{ display:flex; flex-direction:column; align-items:center }
  .h1{ font-size:clamp(34px, 9vw, 44px); letter-spacing:-1.5px }
  .hero-text .body-lg{ font-size:16px; margin-top:20px }
  .hero-checks{ align-items:center; margin-top:28px }
  .hero-ctas{ flex-direction:column; align-items:stretch; width:100%; max-width:340px; margin-top:32px }
  .hero-ctas .btn{ justify-content:center; width:100% }
  .hero-stage{ min-height:360px; margin-top:8px }
  .hero-stick{ width:42%; max-width:200px }
  .hero-stage-ring{ width:340px; height:340px }
  .hero-stage-orb{ width:240px; height:240px }
  .scroll-hint{ display:none }

  /* SECTIONS: tighter padding */
  .section{ padding:56px 22px }

  /* STORY: text only, no sticky visual */
  .story-track{ height:auto }
  .story-stage{
    position:relative; top:auto; height:auto; min-height:auto;
    grid-template-columns:1fr; display:block;
  }
  .story-side-visual{ display:none }
  .story-side-text{ padding:0 }
  .story-progress{ display:none }
  /* render both phases stacked & always visible on mobile */
  .story-phase{
    position:relative !important; left:auto; right:auto; top:auto !important;
    transform:none !important; opacity:1 !important; pointer-events:auto !important;
    padding:48px 22px;
  }
  .story-phase.answer{ background:var(--blue-section); border-top:1px solid var(--black-12) }
  .story-phase .h2{ font-size:clamp(30px,7.5vw,40px) }
  .story-bullet{ opacity:1 !important; transform:none !important }

  /* ANATOMY: figure on top, ingredients as full-width cards below.
     width/height !important override the inline 1320px/400px (desktop artifact)
     so the section is a single vertical column with no horizontal scroll. */
  .section-anatomy{ padding-top:48px; padding-bottom:48px }
  .anatomy-grid{ display:flex !important; flex-direction:column; gap:8px; width:100% !important; height:auto !important; margin:0 !important }
  .anatomy-figure{ order:-1; min-height:auto; margin-bottom:16px }
  .anatomy-figure-inner{ max-width:300px }
  .anatomy-list{ display:flex; flex-direction:column; gap:10px; width:100% }
  .anatomy-list.left .anatomy-item,
  .anatomy-list.right .anatomy-item{
    text-align:left; padding:16px 18px;
    border:1px solid var(--black-12); border-radius:12px;
    background:var(--cream);
  }
  .anatomy-list.left .anatomy-item.active,
  .anatomy-list.right .anatomy-item.active{
    border-color:var(--blue-dark);
    background:rgba(179,207,218,0.22);
  }

  /* FLAVOR: stack — bag on top, then text blocks */
  .flavor-grid{ grid-template-columns:1fr; min-height:auto; padding:32px 20px 48px; gap:8px }
  .flavor-product{ height:320px; order:-1 }
  .flavor-bag img{ max-width:78% }
  .flavor-text{ align-items:center; text-align:center }
  .flavor-text.right{ text-align:center }
  .flavor-text.right > div{ align-self:center }
  .flavor-text.right .eyebrow{ justify-content:center }
  .flavor-facts{ justify-items:center }
  .flavor-facts.right{ justify-items:center }
  .flavor-arrow{ width:44px; height:44px }
  .flavor-arrow.left{ left:6px }
  .flavor-arrow.right{ right:6px }
  .flavor-color-head{ padding:14px 18px }
  .flavor-color-head-meta{ display:none }

  /* REVIEWS: single column */
  .reviews-grid{ grid-template-columns:1fr }
  .reviews-head{ margin-bottom:36px }

  /* CTA: full-width button */
  .cta-block{ padding:80px 24px }
  .cta-block .btn{ width:100%; max-width:360px; justify-content:center }
  .cta-block .rev.d3{ flex-direction:column; align-items:center; width:100% }

  /* FOOTER: single column */
  .footer{ padding:60px 24px 28px }
  .footer-grid{ grid-template-columns:1fr; gap:32px; margin-bottom:40px }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px }
}

/* very small phones */
@media (max-width:400px){
  .h1{ font-size:32px }
  .hero-stick{ max-width:170px }
  .flavor-product{ height:280px }
}

/* ============================================================
   OUR STORY PAGE
   ============================================================ */
.story-pg-hero{
  min-height:86vh; padding:160px 5vw 90px;
  display:flex; align-items:center; position:relative; overflow:hidden;
  background:var(--cream);
}
.story-pg-hero-inner{ max-width:1080px; margin:0 auto; width:100%; position:relative; z-index:2 }
.story-pg-kicker{
  display:flex; align-items:center; gap:14px; margin-bottom:28px;
}
.story-pg-kicker .line{ width:48px; height:1px; background:var(--blue-deep); opacity:0.5 }
.story-pg-hero h1{ max-width:14ch }
.story-pg-hero .lead{
  margin-top:32px; max-width:600px; font-size:19px;
}
.story-pg-hero .est{
  position:absolute; right:5vw; top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-size:12px; letter-spacing:3px; text-transform:uppercase;
  color:var(--black-40); font-weight:600;
}

/* origin */
.origin-grid{
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(32px,6vw,90px);
  align-items:start;
}
.origin-year{
  font-size:clamp(90px, 13vw, 200px); font-weight:200; line-height:0.85;
  letter-spacing:-6px; color:var(--blue-deep); opacity:0.22;
}
.origin-year-sticky{ position:sticky; top:120px }
.origin-body p{ margin-bottom:22px }
.origin-body p:last-child{ margin-bottom:0 }
.origin-pull{
  font-size:clamp(24px,2.6vw,32px); font-weight:300; line-height:1.3;
  letter-spacing:-0.8px; color:var(--black); margin:8px 0 28px;
}
.origin-pull strong{ font-weight:600; color:var(--blue-deep) }

/* five → one collapse visual */
.collapse{
  margin-top:56px;
  display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(20px,3vw,48px);
  align-items:center;
}
.collapse-many{ display:flex; flex-direction:column; gap:10px }
.collapse-chip{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-radius:12px;
  background:var(--cream); border:1px solid var(--black-12);
  font-size:14px; font-weight:500; color:var(--black-70);
}
.collapse-chip .x{
  width:20px; height:20px; border-radius:50%;
  background:rgba(14,14,12,0.06); color:var(--black-40);
  display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0;
}
.collapse-chip .price{ margin-left:auto; font-size:12px; color:var(--black-40) }
.collapse-arrow{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--blue-deep);
}
.collapse-arrow svg{ width:40px; height:40px }
.collapse-arrow .lbl{ font-size:10px; letter-spacing:2px; text-transform:uppercase; font-weight:600 }
.collapse-one{
  background:var(--blue-section); border:1px solid rgba(122,170,185,0.4);
  border-radius:20px; padding:32px 28px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  position:relative; overflow:hidden;
}
.collapse-one img{
  height:200px; width:auto; margin:0 auto 12px;
  filter:drop-shadow(0 20px 36px rgba(74,142,160,0.22));
}
.collapse-one .one-name{ font-size:20px; font-weight:600; letter-spacing:-0.4px }
.collapse-one .one-sub{ font-size:13px; color:var(--black-60) }

/* philosophy */
.principles{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px);
  margin-top:8px;
}
.principle{
  background:var(--cream); border:1px solid var(--black-12);
  border-radius:16px; padding:36px 32px;
  display:flex; flex-direction:column; gap:14px;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.principle:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 48px -16px rgba(14,14,12,0.10);
  border-color:rgba(122,170,185,0.4);
}
.principle-num{
  font-size:13px; font-weight:600; letter-spacing:2px;
  color:var(--blue-deep); font-variant-numeric:tabular-nums;
}
.principle-name{ font-size:24px; font-weight:600; letter-spacing:-0.5px }
.principle-name::after{
  content:""; display:block; width:28px; height:2px; margin-top:14px;
  background:var(--blue); border-radius:2px;
}
.principle-desc{ font-size:15px; line-height:1.65; font-weight:300; color:var(--black-60) }

/* story page responsive */
@media (max-width:768px){
  .story-pg-hero{ min-height:auto; padding:120px 22px 56px }
  .story-pg-hero .est{ display:none }
  .story-pg-hero .lead{ font-size:16px; margin-top:24px }
  .origin-grid{ grid-template-columns:1fr; gap:8px }
  .origin-year{ opacity:0.18; margin-bottom:8px }
  .origin-year-sticky{ position:relative; top:auto }
  .collapse{ grid-template-columns:1fr; gap:20px; margin-top:40px }
  .collapse-arrow{ transform:rotate(90deg) }
  .collapse-one img{ height:160px }
  .principles{ grid-template-columns:1fr; gap:14px }
  .principle{ padding:28px 24px }
}

/* ============================================================
   SCIENCE PAGE
   ============================================================ */
.sci-hero{
  min-height:78vh; padding:150px 5vw 80px;
  display:flex; align-items:center; position:relative; overflow:hidden;
  background:var(--cream);
}
.sci-hero-inner{ max-width:1080px; margin:0 auto; width:100%; position:relative; z-index:2 }
.sci-hero h1{ max-width:18ch }
.sci-hero .lead{ margin-top:30px; max-width:640px; font-size:19px }

/* premise — dark, two column with documented concerns */
.sci-premise{ background:var(--ink-deep); color:var(--cream) }
.sci-premise .eyebrow{ color:var(--blue) }
.sci-premise-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px,5vw,80px);
  align-items:start;
}
.sci-premise h2{ color:var(--cream) }
.sci-premise-lead{
  font-size:18px; line-height:1.7; font-weight:300;
  color:rgba(253,254,241,0.72); margin-bottom:36px;
}
.sci-concerns{ display:flex; flex-direction:column; gap:2px }
.sci-concern{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:baseline;
  padding:22px 0; border-top:1px solid rgba(253,254,241,0.12);
}
.sci-concern:last-child{ border-bottom:1px solid rgba(253,254,241,0.12) }
.sci-concern-stat{
  font-size:clamp(26px,3vw,38px); font-weight:300; letter-spacing:-1px;
  color:var(--blue); line-height:1; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.sci-concern-name{ font-size:16px; font-weight:600; color:var(--cream); margin-bottom:5px }
.sci-concern-desc{ font-size:14px; line-height:1.6; font-weight:300; color:rgba(253,254,241,0.6) }

/* ingredient deep-dive rows */
.sci-ing{
  display:grid; grid-template-columns:300px 1fr; gap:clamp(28px,5vw,72px);
  align-items:center;
  padding:clamp(40px,6vh,64px) 0;
  border-bottom:1px solid var(--black-12);
}
.sci-ing:last-child{ border-bottom:none }
.sci-ing.flip .sci-compound{ order:2 }

/* chemistry compound panel */
.sci-compound{
  width:300px; min-height:200px;
  background:
    linear-gradient(rgba(122,170,185,0.10), rgba(122,170,185,0.04)),
    var(--cream);
  border:1px solid rgba(122,170,185,0.30);
  border-radius:20px;
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:28px 24px;
}
/* faint grid texture so it reads "lab" */
.sci-compound::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(74,142,160,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,142,160,0.06) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
}
.sci-compound-tag{
  position:absolute; top:12px; left:14px;
  font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--blue-deep); font-weight:600; opacity:0.7;
  font-family:var(--sans);
}
.sci-compound img{
  max-width:100%; max-height:150px; width:auto; height:auto;
  position:relative; z-index:1;
  mix-blend-mode:multiply;
}
/* scattered multi-compound (amino acids) */
.sci-compound-scatter{
  position:relative; z-index:1;
  width:100%; height:170px;
}
.sci-compound-scatter img{
  position:absolute; max-height:none;
}
.sci-compound-scatter img:nth-child(1){ width:46%; top:2%;  left:0;    transform:rotate(-7deg) }
.sci-compound-scatter img:nth-child(2){ width:42%; top:44%; right:2%;  transform:rotate(6deg) }
.sci-compound-scatter img:nth-child(3){ width:50%; bottom:0; left:18%; transform:rotate(-3deg) }
/* naturally-occurring element tokens (electrolytes / zinc) */
.chem-tokens{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center;
}
.chem-token{
  width:72px; height:72px; border-radius:50%;
  border:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:600; letter-spacing:-0.3px; color:var(--ink);
  background:var(--cream);
}
.chem-token sup{ font-size:11px; font-weight:600 }
.chem-token.solo{ width:84px; height:84px; font-size:24px }
.sci-ing-body{ max-width:600px }
.sci-ing-num{
  font-size:12px; font-weight:600; letter-spacing:2px; color:var(--blue-deep);
  margin-bottom:10px; font-variant-numeric:tabular-nums;
}
.sci-ing-name{ font-size:clamp(26px,3vw,38px); font-weight:600; letter-spacing:-0.8px; line-height:1.1; margin-bottom:10px }
.sci-ing-dose{
  display:inline-block; font-size:13px; font-weight:500; color:var(--blue-deep);
  background:rgba(179,207,218,0.22); border:1px solid rgba(122,170,185,0.4);
  border-radius:100px; padding:6px 14px; margin-bottom:18px;
}
.sci-ing-desc{ font-size:16px; line-height:1.7; font-weight:300; color:var(--black-70) }

/* standards grid */
.sci-standards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--black-12); border:1px solid var(--black-12);
  border-radius:16px; overflow:hidden;
}
.sci-standard{
  background:var(--cream); padding:40px 32px;
  display:flex; flex-direction:column; gap:16px;
  transition:background .25s;
}
.sci-standard:hover{ background:var(--blue-section) }
.sci-standard-icon{
  width:44px; height:44px; border-radius:12px;
  background:rgba(179,207,218,0.25);
  display:flex; align-items:center; justify-content:center;
  color:var(--blue-deep);
}
.sci-standard-icon svg{ width:22px; height:22px }
.sci-standard-name{ font-size:18px; font-weight:600; letter-spacing:-0.3px }

/* science page responsive */
@media (max-width:768px){
  .sci-hero{ min-height:auto; padding:120px 22px 56px }
  .sci-hero .lead{ font-size:16px; margin-top:22px }
  .sci-premise-grid{ grid-template-columns:1fr; gap:32px }
  .sci-concern{ grid-template-columns:1fr; gap:6px }
  .sci-concern-stat{ font-size:30px }
  .sci-ing{ grid-template-columns:1fr; gap:24px; text-align:center; padding:40px 0 }
  .sci-ing.flip .sci-compound{ order:0 }
  .sci-compound{ width:100%; max-width:340px; margin:0 auto; min-height:180px }
  .sci-ing-body{ margin:0 auto }
  .sci-ing-dose{ margin-left:auto; margin-right:auto }
  .sci-standards{ grid-template-columns:1fr 1fr }
}
@media (max-width:460px){
  .sci-standards{ grid-template-columns:1fr }
}

/* ============================================================
   FLAVORS PAGE
   ============================================================ */
.flav-hero{
  min-height:70vh; padding:150px 5vw 70px;
  display:flex; align-items:center; position:relative; overflow:hidden;
  background:var(--cream);
}
.flav-hero-inner{ max-width:1000px; margin:0 auto; width:100%; position:relative; z-index:2; text-align:center }
.flav-hero .story-pg-kicker{ justify-content:center }
.flav-hero h1{ max-width:18ch; margin:0 auto }
.flav-hero .lead{ margin:30px auto 0; max-width:620px; font-size:18px }

/* big flavor feature */
.flav-feature{
  position:relative; overflow:hidden;
  padding:clamp(70px,11vh,130px) clamp(24px,5vw,64px);
}
.flav-feature-grid{
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px);
  align-items:center;
}
.flav-feature.flip .flav-feature-art{ order:2 }
.flav-feature-art{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:420px;
}
.flav-feature-halo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:440px; height:440px; border-radius:50%;
  pointer-events:none;
}
.flav-feature-art img{
  position:relative; z-index:1;
  max-height:460px; width:auto;
  filter:drop-shadow(0 36px 60px rgba(74,142,160,0.24));
}
.flav-tagline{
  font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  margin-bottom:18px;
}
.flav-feature h2{ margin-bottom:24px }
.flav-feature-desc{ font-size:18px; line-height:1.7; font-weight:300; color:var(--black-70); max-width:520px; margin-bottom:32px }
.flav-notes{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px;
}
.flav-note{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:100px;
  background:var(--cream); border:1px solid var(--black-12);
  font-size:13px; font-weight:500; color:var(--black-70);
}
.flav-note .dot{ width:7px; height:7px; border-radius:50% }

/* what's in every stick */
.flav-same{ background:var(--ink-deep); color:var(--cream) }
.flav-same .eyebrow{ color:var(--blue) }
.flav-same h2{ color:var(--cream) }
.flav-same-inner{ max-width:900px; margin:0 auto; text-align:center }
.flav-same-list{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:40px auto 0; max-width:760px;
}
.flav-same-chip{
  padding:11px 18px; border-radius:100px;
  background:rgba(253,254,241,0.06); border:1px solid rgba(253,254,241,0.16);
  font-size:13px; font-weight:500; color:rgba(253,254,241,0.85);
}
.flav-same-detail{ margin-top:28px; font-size:13px; color:rgba(253,254,241,0.5); font-style:italic }

/* flavors responsive */
@media (max-width:768px){
  .flav-hero{ min-height:auto; padding:120px 22px 56px }
  .flav-hero .lead{ font-size:16px; margin-top:22px }
  .flav-feature{ padding:64px 22px }
  .flav-feature-grid{ grid-template-columns:1fr; gap:32px; text-align:center }
  .flav-feature.flip .flav-feature-art{ order:0 }
  .flav-feature-art{ min-height:auto; order:-1 }
  .flav-feature-art img{ max-height:360px }
  .flav-feature-desc{ margin-left:auto; margin-right:auto }
  .flav-notes{ justify-content:center }
  .flav-feature-halo{ width:320px; height:320px }
}

/* ============================================================
   REVIEWS PAGE
   ============================================================ */
.rev-hero{
  padding:150px 5vw 60px;
  display:flex; align-items:center; position:relative; overflow:hidden;
  background:var(--cream);
}
.rev-hero-inner{ max-width:1000px; margin:0 auto; width:100%; position:relative; z-index:2; text-align:center }
.rev-hero .story-pg-kicker{ justify-content:center }
.rev-hero h1{ max-width:16ch; margin:0 auto }
.rev-hero-rating{
  margin-top:32px; display:inline-flex; align-items:center; gap:14px;
  flex-wrap:wrap; justify-content:center;
}
.rev-hero-score{ font-size:40px; font-weight:300; letter-spacing:-1.5px; color:var(--black) }
.rev-hero-rating .sub{ font-size:14px; color:var(--black-60); font-weight:300 }
.rev-hero-note{ margin-top:18px; font-size:12px; color:var(--black-40); font-style:italic }

/* featured reviews — large */
.rev-featured{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,24px);
}
.rev-feat-card{
  background:var(--cream); border:1px solid var(--black-12);
  border-radius:18px; padding:40px 36px;
  display:flex; flex-direction:column; gap:20px;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.rev-feat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 56px -18px rgba(14,14,12,0.12);
  border-color:rgba(122,170,185,0.4);
}
.rev-feat-quote{
  font-size:clamp(19px,1.9vw,23px); line-height:1.5; font-weight:300;
  letter-spacing:-0.3px; color:var(--black);
}
.rev-feat-meta{
  margin-top:auto; padding-top:20px; border-top:1px solid var(--black-12);
  display:flex; align-items:center; gap:14px;
}
.rev-avatar{
  width:46px; height:46px; border-radius:50%;
  background:var(--blue); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:600; flex-shrink:0;
}
.rev-name{ font-size:15px; font-weight:600 }
.rev-detail{ font-size:12px; color:var(--black-40); margin-top:2px }

/* review grid — smaller */
.rev-grid{
  columns:3; column-gap:clamp(16px,1.8vw,24px);
}
.rev-card{
  break-inside:avoid; margin-bottom:clamp(16px,1.8vw,24px);
  background:var(--cream); border:1px solid var(--black-12);
  border-radius:14px; padding:28px 26px;
  display:flex; flex-direction:column; gap:16px;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.rev-card:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 44px -16px rgba(14,14,12,0.10);
  border-color:rgba(122,170,185,0.4);
}
.rev-card-quote{ font-size:15px; line-height:1.6; font-weight:400; color:var(--black) }
.rev-card-meta{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--black-12) }
.rev-card-meta .rev-avatar{ width:36px; height:36px; font-size:14px }

/* reviews responsive */
@media (max-width:900px){ .rev-grid{ columns:2 } }
@media (max-width:768px){
  .rev-hero{ padding:120px 22px 48px }
  .rev-featured{ grid-template-columns:1fr; gap:14px }
  .rev-feat-card{ padding:32px 26px }
  .rev-grid{ columns:1 }
}

/* ============================================================
   SHOP PAGE
   ============================================================ */
.shop-hero{
  padding:130px 5vw 36px; text-align:center; position:relative;
  background:var(--cream); overflow:hidden;
}
.shop-hero-inner{ max-width:760px; margin:0 auto; position:relative; z-index:2 }
.shop-hero h1{ margin:14px auto 0; max-width:14ch }
.shop-hero .sub{ margin:20px auto 0; max-width:520px; font-size:16px }

.shop-cards-wrap{ padding:24px 5vw 70px; background:var(--cream) }
.shop-cards{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px);
}
.shop-card{
  background:var(--cream);
  border:1px solid var(--black-12);
  border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s;
}
.shop-card:hover{
  transform:translateY(-6px);
  box-shadow:0 36px 70px -24px rgba(14,14,12,0.20);
  border-color:rgba(122,170,185,0.45);
}
.shop-card-art{
  position:relative; height:340px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.shop-card-art-bg{ position:absolute; inset:0; transition:background .4s }
.shop-card-halo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:300px; height:300px; border-radius:50%; pointer-events:none;
}
.shop-card-art img{
  position:relative; z-index:1; max-height:280px; width:auto;
  filter:drop-shadow(0 24px 40px rgba(74,142,160,0.22));
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.shop-card:hover .shop-card-art img{ transform:translateY(-6px) scale(1.03) }
.shop-card-accent{
  position:absolute; top:16px; left:16px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 13px; border-radius:100px;
  background:rgba(253,254,241,0.8); backdrop-filter:blur(8px);
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase; font-weight:600; color:var(--black-70);
}
.shop-card-accent .dot{ width:8px; height:8px; border-radius:50% }
.shop-card-body{
  padding:32px 32px 36px;
  display:flex; flex-direction:column; gap:10px; flex:1;
  border-top:1px solid var(--black-12);
}
.shop-card-name{ font-size:22px; font-weight:600; letter-spacing:-0.4px; line-height:1.2 }
.shop-card-desc{ font-size:15px; font-weight:300; color:var(--black-60) }
.shop-card-info{ font-size:13px; color:var(--black-40); font-weight:400 }
.shop-card-price-row{
  display:flex; align-items:baseline; gap:12px; margin-top:8px;
}
.shop-card-price{ font-size:32px; font-weight:600; letter-spacing:-1px }
.shop-card-sub{
  font-size:13px; color:var(--blue-deep); font-weight:500;
  background:rgba(179,207,218,0.22); border:1px solid rgba(122,170,185,0.35);
  border-radius:100px; padding:5px 13px; margin-top:4px; align-self:flex-start;
}
.shop-card-actions{ margin-top:18px; display:flex; flex-direction:column; gap:12px }
.shop-card-add{
  width:100%; justify-content:center; padding:16px 28px; font-size:15px;
}
.shop-card-details{
  text-align:center; font-size:13px; font-weight:500; color:var(--black-60);
  transition:color .2s;
}
.shop-card-details:hover{ color:var(--black) }

/* what's inside strip */
.shop-strip{
  background:var(--ink-deep); color:var(--cream);
  padding:48px 5vw; text-align:center;
}
.shop-strip h3{ font-size:clamp(22px,2.4vw,28px); font-weight:500; letter-spacing:-0.5px; margin-bottom:18px }
.shop-strip-ings{
  font-size:15px; font-weight:300; color:rgba(253,254,241,0.85);
  letter-spacing:0.3px; max-width:760px; margin:0 auto 14px;
}
.shop-strip-sub{ font-size:12px; letter-spacing:1px; text-transform:uppercase; color:rgba(253,254,241,0.45) }

/* subscription explainer */
.shop-subs{ background:var(--blue-section); }
.shop-subs-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px);
  margin-top:8px;
}
.shop-sub-step{ display:flex; flex-direction:column; gap:12px }
.shop-sub-num{
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--blue-deep); color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:600;
}
.shop-sub-text{ font-size:16px; font-weight:400; color:var(--black); line-height:1.5 }
.shop-subs-foot{ margin-top:40px; font-size:14px; color:var(--blue-deep); font-weight:500; font-style:italic }

/* shop responsive */
@media (max-width:768px){
  .shop-hero{ padding:110px 22px 28px }
  .shop-cards{ grid-template-columns:1fr; gap:18px }
  .shop-card-art{ height:300px }
  .shop-card-body{ padding:28px 24px 32px }
  .shop-subs-grid{ grid-template-columns:1fr; gap:24px }
  .shop-sub-step{ flex-direction:row; align-items:center; text-align:left }
}

/* ============================================================
   PRODUCT PAGE (PDP)
   ============================================================ */
.pdp{ padding:108px 5vw 0; background:var(--cream) }
.pdp-hero{
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px);
  align-items:start;
}
/* gallery */
.pdp-gallery{ position:sticky; top:96px }
.pdp-gallery-main{
  position:relative; border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg, #FFFFFF 0%, #F6F7F0 100%);
  border:1px solid var(--black-12);
  display:flex; align-items:center; justify-content:center;
  min-height:480px;
}
.pdp-gallery-main-halo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(122,170,185,0.20) 0%, transparent 72%);
  pointer-events:none;
}
.pdp-gallery-main img{
  position:relative; z-index:1; max-height:420px; width:auto;
  filter:drop-shadow(0 30px 50px rgba(74,142,160,0.20));
}
.pdp-thumbs{ display:flex; gap:12px; margin-top:14px }
.pdp-thumb{
  flex:1; height:96px; border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, #FFFFFF 0%, #F4F5EE 100%);
  border:1px solid var(--black-12); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, transform .2s;
}
.pdp-thumb img{ max-height:74px; width:auto }
.pdp-thumb:hover{ transform:translateY(-2px) }
.pdp-thumb.active{ border-color:var(--blue-deep); box-shadow:0 0 0 1px var(--blue-deep) }

/* details */
.pdp-details{ padding-top:8px }
.pdp-rating{
  display:inline-flex; align-items:center; gap:10px; margin:14px 0 0;
  font-size:13px; color:var(--black-60);
}
.pdp-rating a{ color:var(--blue-deep); text-decoration:underline; text-underline-offset:2px }
.pdp-name{ font-size:clamp(34px,4.4vw,54px); font-weight:300; letter-spacing:-1.5px; line-height:1.02; margin-top:8px }
.pdp-tagline{ font-size:17px; font-weight:300; color:var(--black-60); margin-top:14px }
.pdp-price{ font-size:36px; font-weight:600; letter-spacing:-1px; margin-top:24px }

/* purchase options */
.pdp-options{ display:flex; flex-direction:column; gap:10px; margin-top:24px }
.pdp-option{
  display:flex; align-items:center; gap:14px;
  padding:18px 20px; border-radius:14px;
  border:1.5px solid var(--black-12); background:var(--cream);
  cursor:pointer; transition:border-color .2s, background .2s;
}
.pdp-option.sel{ border-color:var(--blue-deep); background:rgba(179,207,218,0.12) }
.pdp-option-radio{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--black-25); position:relative; transition:border-color .2s;
}
.pdp-option.sel .pdp-option-radio{ border-color:var(--blue-deep) }
.pdp-option.sel .pdp-option-radio::after{
  content:""; position:absolute; inset:4px; border-radius:50%; background:var(--blue-deep);
}
.pdp-option-main{ flex:1 }
.pdp-option-label{ font-size:15px; font-weight:600; color:var(--black) }
.pdp-option-sub{ font-size:13px; color:var(--black-60); margin-top:2px; font-weight:300 }
.pdp-option-price{ font-size:17px; font-weight:600 }
.pdp-option-badge{
  font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  color:var(--blue-deep); background:rgba(179,207,218,0.3);
  padding:3px 8px; border-radius:100px; margin-left:8px;
}
.pdp-delivery-note{ font-size:13px; color:var(--black-60); margin-top:12px; font-weight:300 }

/* qty + add */
.pdp-buy-row{ display:flex; gap:14px; margin-top:24px; align-items:stretch }
.pdp-qty{
  display:flex; align-items:center; border:1.5px solid var(--black-12);
  border-radius:100px; overflow:hidden; flex-shrink:0;
}
.pdp-qty button{
  width:46px; height:54px; font-size:20px; color:var(--black);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.pdp-qty button:hover{ background:var(--cream-dark) }
.pdp-qty span{ width:36px; text-align:center; font-size:16px; font-weight:600 }
.pdp-add{
  flex:1; justify-content:center; font-size:16px; padding:16px 28px;
}
.pdp-trust{
  display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px;
  font-size:12.5px; color:var(--black-40);
}
.pdp-trust span{ display:inline-flex; align-items:center; gap:6px }
.pdp-trust .tdot{ width:5px; height:5px; border-radius:50%; background:var(--blue-dark) }

/* flavor profile */
.pdp-flavor{ text-align:center; max-width:760px; margin:0 auto }
.pdp-flavor-notes{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:32px;
}
.pdp-flavor-note{
  padding:10px 18px; border-radius:100px;
  background:var(--cream); border:1px solid var(--black-12);
  font-size:14px; font-weight:500; color:var(--black-70);
}

/* supplement facts table */
.pdp-facts{ max-width:920px; margin:0 auto }
.pdp-table{
  width:100%; border-collapse:collapse; margin-top:8px;
  border-top:2px solid var(--black); border-bottom:2px solid var(--black);
}
.pdp-table th{
  text-align:left; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--black-60); font-weight:600; padding:14px 16px;
  border-bottom:1px solid var(--black-25);
}
.pdp-table td{
  padding:18px 16px; border-bottom:1px solid var(--black-12);
  font-size:15px; vertical-align:top;
}
.pdp-table td.ing{ font-weight:600; color:var(--black); width:42% }
.pdp-table td.amt{ font-family:var(--sans); color:var(--blue-deep); font-weight:600; white-space:nowrap; width:18% }
.pdp-table td.purpose{ color:var(--black-60); font-weight:300 }
.pdp-facts-foot{ margin-top:20px; font-size:14px; color:var(--black-60); font-style:italic }

/* why blocks */
.pdp-why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px) }
.pdp-why{
  background:var(--cream); border:1px solid var(--black-12);
  border-radius:16px; padding:36px 30px;
  display:flex; flex-direction:column; gap:14px;
}
.pdp-why-num{ font-size:13px; font-weight:600; letter-spacing:2px; color:var(--blue-deep) }
.pdp-why-name{ font-size:21px; font-weight:600; letter-spacing:-0.4px; line-height:1.2 }
.pdp-why-name::after{ content:""; display:block; width:26px; height:2px; margin-top:12px; background:var(--blue); border-radius:2px }
.pdp-why-desc{ font-size:15px; line-height:1.65; font-weight:300; color:var(--black-60) }

/* cross-sell */
.pdp-cross{
  max-width:680px; margin:0 auto;
  display:flex; align-items:center; gap:28px;
  background:var(--cream); border:1px solid var(--black-12);
  border-radius:18px; padding:24px 28px;
}
.pdp-cross-art{
  width:130px; height:130px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(180deg,#FFF 0%, #F4F5EE 100%);
  border:1px solid var(--black-12);
  display:flex; align-items:center; justify-content:center;
}
.pdp-cross-art img{ max-height:108px; width:auto }
.pdp-cross-body{ flex:1 }
.pdp-cross-name{ font-size:20px; font-weight:600; letter-spacing:-0.3px }
.pdp-cross-desc{ font-size:14px; color:var(--black-60); font-weight:300; margin:6px 0 12px }
.pdp-cross-link{ font-size:14px; font-weight:600; color:var(--blue-deep) }

/* final details */
.pdp-final{ max-width:760px; margin:0 auto; text-align:center }
.pdp-final-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; font-size:13px; color:var(--black-60) }
.pdp-final-disclaimer{ margin-top:28px; font-size:12px; font-style:italic; color:var(--black-40); line-height:1.6; max-width:560px; margin-left:auto; margin-right:auto }

/* sticky mobile add bar */
.pdp-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:rgba(253,254,241,0.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--black-12);
  padding:12px 18px; display:none;
  align-items:center; gap:14px;
  transform:translateY(100%); transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.pdp-sticky.show{ transform:none }
.pdp-sticky-info{ flex-shrink:0 }
.pdp-sticky-name{ font-size:13px; font-weight:600; line-height:1.1 }
.pdp-sticky-price{ font-size:13px; color:var(--black-60); margin-top:2px }
.pdp-sticky .btn{ flex:1; justify-content:center; padding:14px 20px }

/* PDP responsive */
@media (max-width:860px){
  .pdp-why-grid{ grid-template-columns:1fr; gap:14px }
}

/* warm-accent variant (Passion Orange Guava PDP) */
.pdp-pog .pdp-rating a{ color:#C77F36 }
.pdp-pog .pdp-gallery-main-halo,
.pdp-pog .pdp-cross-art{ }
.pdp-pog .pdp-gallery-main-halo{
  background:radial-gradient(circle, rgba(242,166,90,0.22) 0%, transparent 72%);
}
.pdp-pog .pdp-thumb.active{ border-color:#C77F36; box-shadow:0 0 0 1px #C77F36 }
.pdp-pog .pdp-option.sel{ border-color:#C77F36; background:rgba(242,166,90,0.10) }
.pdp-pog .pdp-option.sel .pdp-option-radio{ border-color:#C77F36 }
.pdp-pog .pdp-option.sel .pdp-option-radio::after{ background:#C77F36 }
.pdp-pog .pdp-option-badge{ color:#C77F36; background:rgba(242,166,90,0.2) }
.pdp-pog .pdp-trust .tdot{ background:#E59A4C }
.pdp-pog .pdp-why-name::after{ background:#E59A4C }
.pdp-pog .pdp-cross-link{ color:#C77F36 }
@media (max-width:768px){
  .pdp{ padding:92px 22px 0 }
  .pdp-hero{ grid-template-columns:1fr; gap:28px }
  .pdp-gallery{ position:static; top:auto }
  .pdp-gallery-main{ min-height:360px }
  .pdp-gallery-main img{ max-height:320px }
  .pdp-name{ font-size:34px }
  .pdp-cross{ flex-direction:column; text-align:center; gap:18px }
  .pdp-table td.ing{ width:auto }
  .pdp-table td, .pdp-table th{ padding:14px 10px; font-size:14px }
  .pdp-sticky{ display:flex }
  /* leave room so footer/content isn't hidden behind the bar */
  .pdp-final{ padding-bottom:80px }
}
/* ============================================================
   SOLIA MOBILE NAV FIX
   Slimmer mobile header + perfectly centered hamburger/logo/cart
   ============================================================ */

@media (max-width: 768px) {
  .nav {
    height: 68px;
    min-height: 68px;
    padding: 0 22px !important;
    grid-template-columns: 44px 1fr 44px !important;
    grid-template-rows: 68px !important;
    align-items: center !important;
    background: rgba(253, 254, 241, 0.96);
    border-bottom: 1px solid var(--black-12);
  }

  .nav.scrolled {
    height: 64px;
    min-height: 64px;
    padding: 0 22px !important;
    grid-template-rows: 64px !important;
  }

  .nav-left,
  .nav-right {
    display: none !important;
  }

  .nav-burger {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: 26px !important;
    height: 18px !important;
    margin: 0 !important;
  }

  .nav-burger span {
    height: 2.5px;
  }

  .nav-logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .nav-logo img {
    height: 30px !important;
    width: auto !important;
    display: block !important;
  }

  .nav.scrolled .nav-logo img {
    height: 28px !important;
  }

  .nav-cart-mobile {
    display: inline-flex !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .nav-cart-mobile svg {
    width: 22px !important;
    height: 22px !important;
  }

  .nav-cart-count {
    top: -4px !important;
    right: -5px !important;
  }

  .hero {
    padding-top: 92px !important;
  }
}
/* ============================================================
   SOLIA LOGO SIZE OVERRIDE
   Makes the center logo larger on desktop and mobile
   ============================================================ */

/* Desktop / web nav logo */
.nav-logo img {
  height: 54px !important;
  width: auto !important;
}

/* Slightly smaller when the user scrolls */
.nav.scrolled .nav-logo img {
  height: 48px !important;
}

/* Mobile nav logo */
@media (max-width: 768px) {
  .nav-logo img {
    height: 42px !important;
    width: auto !important;
  }

  .nav.scrolled .nav-logo img {
    height: 38px !important;
  }

  .nav {
    min-height: 76px !important;
    grid-template-rows: 76px !important;
    align-items: center !important;
  }

  .nav.scrolled {
    min-height: 70px !important;
    grid-template-rows: 70px !important;
  }

  .nav-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }