/* =========================================================
   SATYATERRA — Brand styles
   Bright, energetic, playful. Pomegranate red as the energy
   color (matches the MetaFit tube), green + gold from the
   logo as the premium grounding palette.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Caveat:wght@600&display=swap');

:root {
  /* Brand palette */
  --st-green:        #1F4A2E;   /* forest green from logo */
  --st-green-deep:   #143320;
  --st-green-soft:   #E8F0E9;
  --st-gold:         #C9A04A;   /* warm gold accent */
  --st-gold-soft:    #F5E9C9;

  /* Energy palette (Vitallfizz vibe) */
  --st-pom:          #E63946;   /* pomegranate red */
  --st-pom-deep:     #B91D2E;
  --st-coral:        #FF7A59;
  --st-yellow:       #FFC93C;
  --st-mint:         #7BCFA0;
  --st-cream:        #FFF8EE;
  --st-ink:          #1A1A1A;
  --st-muted:        #6B6B6B;
  --st-line:         #ECE6D9;
  --st-white:        #FFFFFF;

  /* Type */
  --font-display:    'Cormorant Garamond', 'Georgia', serif;
  --font-body:       'Plus Jakarta Sans', system-ui, sans-serif;
  --font-hand:       'Caveat', cursive;

  /* Layout */
  --radius:          14px;
  --radius-lg:       22px;
  --shadow-soft:     0 6px 24px rgba(20, 51, 32, 0.08);
  --shadow-pop:      0 14px 40px rgba(230, 57, 70, 0.22);
  --container:       1240px;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--st-ink);
  background: var(--st-cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  /* Never let a stray wide element create a horizontal scroll / right-side gap.
     `clip` (where supported) doesn't create a scroll container, so the sticky
     header keeps working; `hidden` is the fallback. */
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section   { padding: 90px 0; }
.section--tight { padding: 60px 0; }

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--st-green-deep);
  color: var(--st-gold-soft);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 20px;          /* horizontal gutter so bare text isn't flush to the edge */
  font-weight: 500;
  text-align: center;          /* centers the single-line variant; the .container/flex
                                  variant on the homepage keeps its own left/right layout */
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.announce__right {
  color: var(--st-gold);
  text-decoration: none;
  white-space: nowrap;
}
.announce__right:hover { text-decoration: underline; }
.announce span { color: var(--st-gold); }
@media (max-width: 720px) {
  .announce__inner { flex-direction: column; gap: 4px; text-align: center; }
  .announce__right { white-space: normal; }
}

/* ---------- Header ---------- */
.header {
  background: var(--st-white);
  border-bottom: 1px solid var(--st-line);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--container);
  margin: 0 auto;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.brand__logo {
  height: 56px;
  width: auto;
  display: block;
  object-fit: contain;
}

.nav { display: flex; gap: 28px; align-items: center; }
.nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--st-ink);
  position: relative;
  padding: 6px 0;
  transition: color .2s;
}
.nav a:hover { color: var(--st-pom); }
.nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--st-pom);
  border-radius: 2px;
}

.header__actions { display: flex; gap: 6px; align-items: center; }
.icon-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background .2s, transform .2s;
  font-size: 20px;
  color: var(--st-green-deep);
}
.icon-btn svg { width: 22px; height: 22px; stroke-width: 1.8; }
.icon-btn:hover { background: var(--st-cream); transform: translateY(-1px); color: var(--st-pom); }
.cart-count {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--st-pom);
  color: var(--st-white);
  font-size: 11px;
  font-weight: 700;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--st-white);
}
.cart-count[data-count="0"] { display: none; }

/* Logged-in indicator dot on the user icon */
.icon-btn.is-authed::after {
  content: "";
  position: absolute;
  bottom: 6px; right: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--st-mint);
  border: 2px solid var(--st-white);
}

.menu-toggle { display: none; font-size: 22px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .2s ease, background .2s;
  white-space: nowrap;
}
.btn--primary {
  background: var(--st-pom);
  color: var(--st-white);
  box-shadow: var(--shadow-pop);
}
.btn--primary:hover { background: var(--st-pom-deep); transform: translateY(-2px); }
.btn--outline {
  background: transparent;
  color: var(--st-green);
  border: 2px solid var(--st-green);
}
.btn--outline:hover { background: var(--st-green); color: var(--st-white); }
.btn--gold {
  background: var(--st-gold);
  color: var(--st-green-deep);
}
.btn--gold:hover { background: var(--st-green); color: var(--st-white); }
.btn--sm { padding: 10px 18px; font-size: 12px; }
.btn--block { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--st-cream);          /* shows while the first slide decodes */
  padding: 80px 0 100px;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* ---------- Hero slider ----------
   Slides are stacked layers that cross-fade; the copy and the legibility wash
   sit above them. Images are served at three widths (see the media queries at
   the end of this block) — a phone never downloads the 1600px file.
   Rotation lives in initHeroSlider() in assets/js/main.js. */
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide--1 { background-image: url(../images/slider/slider-1-hd.webp); }
.hero__slide--2 { background-image: url(../images/slider/slider-2-hd.webp); }
.hero__slide--3 { background-image: url(../images/slider/slider-3-hd.6eba701f.webp); }

/* Dots — small, low-contrast, bottom-right so they never fight the headline. */
.hero__dots {
  position: absolute; z-index: 2;
  right: 28px; bottom: 22px;
  display: flex; gap: 9px;
}
.hero__dot {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(31, 74, 46, 0.28);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.hero__dot:hover { background: rgba(31, 74, 46, 0.55); }
.hero__dot.is-active { background: var(--st-green-deep); transform: scale(1.25); }
.hero__dot:focus-visible { outline: 2px solid var(--st-pom); outline-offset: 3px; }

/* Respect the OS "reduce motion" setting: no cross-fade, no auto-advance
   (the JS also stops rotating). */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

/* Smaller viewports get proportionally smaller files (1600 → 1200 → 900).
   A phone downloads ~28KB instead of ~76KB per slide. */
@media (max-width: 1024px) {
  .hero__slide--1 { background-image: url(../images/slider/slider-1-1200.4929cde1.webp); }
  .hero__slide--2 { background-image: url(../images/slider/slider-2-1200.093c07aa.webp); }
  .hero__slide--3 { background-image: url(../images/slider/slider-3-1200.6eba701f.webp); }
}
@media (max-width: 640px) {
  .hero__slide--1 { background-image: url(../images/slider/slider-1-900.4929cde1.webp); }
  .hero__slide--2 { background-image: url(../images/slider/slider-2-900.093c07aa.webp); }
  .hero__slide--3 { background-image: url(../images/slider/slider-3-900.6eba701f.webp); }
}
/* Legibility wash — keeps the copy readable over the photo's left edge
   while letting the products on the right stay fully visible. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                 /* above the slides, below the copy */
  background: linear-gradient(90deg,
    rgba(250,244,235,0.95) 0%,
    rgba(250,244,235,0.82) 30%,
    rgba(250,244,235,0.35) 48%,
    rgba(250,244,235,0) 62%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; width: 100%; }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
.hero__copy { max-width: 560px; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--st-green-soft);
  color: var(--st-green);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1.02;
  color: var(--st-green-deep);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.hero__title em {
  font-style: italic;
  color: var(--st-pom);
  font-weight: 500;
}
.hero__title .swirl {
  font-family: var(--font-hand);
  color: var(--st-gold);
  font-size: 0.85em;
  font-weight: 600;
  display: inline-block;
  transform: rotate(-3deg) translateY(-8px);
  margin: 0 6px;
}
.hero__sub {
  font-size: 19px;
  color: var(--st-muted);
  max-width: 520px;
  margin-bottom: 32px;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }

.hero__badges {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.hero__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--st-green-deep);
}
.hero__badge::before {
  content: "✓";
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--st-mint);
  color: var(--st-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

/* ---------- Marquee strip ---------- */
.marquee {
  background: var(--st-green-deep);
  color: var(--st-gold-soft);
  padding: 18px 0;
  overflow: hidden;
  border-top: 1px solid var(--st-gold);
  border-bottom: 1px solid var(--st-gold);
}
.marquee__track {
  display: flex;
  gap: 60px;
  animation: scroll 28s linear infinite;
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
}
.marquee__track span { display: inline-flex; align-items: center; gap: 60px; }
.marquee__track span::before {
  content: "✦";
  color: var(--st-gold);
  font-style: normal;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Section heading ---------- */
.section__head {
  text-align: center;
  margin-bottom: 56px;
}
.section__eyebrow {
  font-family: var(--font-hand);
  font-size: 28px;
  color: var(--st-pom);
  margin-bottom: 4px;
}
.section__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  color: var(--st-green-deep);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.section__title em { color: var(--st-pom); font-style: italic; }
.section__sub {
  color: var(--st-muted);
  max-width: 580px;
  margin: 14px auto 0;
  font-size: 17px;
}

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}
.product-card {
  background: var(--st-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;   /* Safari: don't size to the slider's scroll-content width */
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20,51,32,0.12); }
.product-card__media {
  background: var(--bg, var(--st-cream));
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  position: relative;
  overflow: hidden;
}
.product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 60%);
  pointer-events: none;
}
.product-card__media svg { max-height: 100%; width: auto; position: relative; z-index: 1; }
.product-card__vis { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* Full-bleed photo mode (real product images shown large, with a slider). */
.product-card__media--photos, .combo-card__stage--photos { padding: 0 !important; overflow: hidden; }
/* Real photos show at full vibrancy — drop the white sheen overlay used for the
   SVG placeholder look, which otherwise washes out / dulls the photography. */
.product-card__media--photos::after, .combo-card__stage--photos::after { display: none; }
.combo-card__stage--photos { border: none; background: var(--st-cream); aspect-ratio: 1 / 1; }

/* ---- Card image slider (product + combo cards) ---- */
.card-slider { position: relative; width: 100%; height: 100%; aspect-ratio: 1 / 1; min-width: 0; max-width: 100%; }
.card-slider__track { display: flex; width: 100%; height: 100%; min-width: 0; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.card-slider__track::-webkit-scrollbar { display: none; }
.card-slider__slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; display: block; }
.card-slider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--st-green-deep); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; z-index: 3; box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
.card-slider:hover .card-slider__nav { opacity: 1; }
.card-slider__nav--prev { left: 10px; } .card-slider__nav--next { right: 10px; }
.card-slider__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 3; }
.card-slider__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.65); box-shadow: 0 1px 3px rgba(0,0,0,0.25); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.card-slider__dot.is-active { background: #fff; transform: scale(1.35); }
@media (hover: none) { .card-slider__nav { display: none; } }
.product-card__badge {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--st-pom);
  color: var(--st-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  z-index: 2;
}
.product-card__body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.product-card__cat {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-gold);
  font-weight: 700;
  margin-bottom: 6px;
}
.product-card__name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--st-green-deep);
  line-height: 1.1;
  margin-bottom: 6px;
}
.product-card__tagline {
  font-size: 14px;
  color: var(--st-muted);
  margin-bottom: 14px;
  flex: 1;
}
.product-card__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.price-now {
  font-size: 22px;
  font-weight: 800;
  color: var(--st-green-deep);
}
.price-was {
  font-size: 14px;
  color: var(--st-muted);
  text-decoration: line-through;
}
.price-off {
  background: var(--st-yellow);
  color: var(--st-green-deep);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}
.product-card__actions { display: flex; gap: 8px; }
.product-card__actions .btn { flex: 1; padding: 12px 14px; font-size: 12px; }
/* Matches .combo-card__more — the PDP link lives under the buttons, not in the
   row, so "Add to Cart" + share always fit even in the narrowest grid column. */
.product-card__more {
  display: block; text-align: center; margin-top: 10px;
  font-size: 13px; font-weight: 700; color: var(--st-green-deep); text-decoration: none;
}
.product-card__more:hover { text-decoration: underline; }

/* ---------- Concern pills ---------- */
.concerns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: -10px;
  margin-bottom: 50px;
}
.concern-pill {
  background: var(--st-white);
  border: 2px solid var(--st-line);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--st-green-deep);
  transition: all .2s;
  cursor: pointer;
}
.concern-pill:hover, .concern-pill.active {
  background: var(--st-green);
  color: var(--st-white);
  border-color: var(--st-green);
  transform: translateY(-2px);
}

/* ---------- Promise band ---------- */
.promise-band {
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(201,160,74,0.12), transparent 55%),
    var(--st-green);
  color: var(--st-white);
  padding: 72px 0 76px;
}
.promise-head {
  text-align: center;
  margin-bottom: 44px;
}
.promise-head__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--st-gold);
  margin-bottom: 10px;
}
.promise-head__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
}
.promise-head__title em { color: var(--st-gold); font-style: italic; }
.promise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.promise-item {
  text-align: center;
  padding: 30px 22px 28px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  transition: transform .28s ease, border-color .28s ease, background .28s ease;
}
.promise-item:hover {
  transform: translateY(-6px);
  border-color: rgba(201,160,74,0.5);
  background: rgba(255,255,255,0.06);
}
.promise-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: var(--st-gold);
  background: rgba(201,160,74,0.10);
  border: 1px solid rgba(201,160,74,0.32);
  transition: background .28s ease, transform .28s ease, color .28s ease;
}
.promise-item__badge svg { width: 30px; height: 30px; }
.promise-item:hover .promise-item__badge {
  background: var(--st-gold);
  color: var(--st-green-deep);
  transform: scale(1.06);
}
.promise-item__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--st-gold);
  margin-bottom: 8px;
}
.promise-item__text {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}

/* ---------- Free-from band ---------- */
.freefrom {
  background: var(--st-cream, #F7F3E9);
  padding: 40px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  text-align: center;
}
.freefrom__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--st-gold, #C9A23F);
  margin-bottom: 20px;
}
.freefrom__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.freefrom__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--st-green-deep);
  background: #fff;
  border: 1px solid rgba(31,74,46,0.14);
  border-radius: 999px;
  padding: 9px 18px;
  box-shadow: 0 2px 6px rgba(31,74,46,0.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.freefrom__item:hover {
  transform: translateY(-2px);
  border-color: rgba(201,160,74,0.55);
  box-shadow: 0 8px 18px rgba(31,74,46,0.10);
}
.freefrom__item::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  /* gold disc with a white ✕ — a small "removed" badge */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23C9A23F'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Story / About ---------- */
.story {
  background: var(--st-white);
}
.story__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}
.story__visual {
  background: linear-gradient(135deg, var(--st-green) 0%, var(--st-green-deep) 100%);
  border-radius: var(--radius-lg);
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--st-white);
}
.story__visual::before {
  content: "";
  position: absolute;
  top: -50px; right: -50px;
  width: 250px; height: 250px;
  background: var(--st-gold);
  border-radius: 50%;
  opacity: 0.18;
}
.story__visual::after {
  content: "";
  position: absolute;
  top: 30px; left: 30px;
  width: 88px; height: 88px;
  background: url("/assets/images/satyaterra-leaves.png") center/contain no-repeat;
  opacity: 0.9;
}
.story__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  line-height: 1.25;
  color: var(--st-gold-soft);
  position: relative;
  z-index: 1;
}
.story__quote::before {
  content: "“";
  font-size: 80px;
  display: block;
  line-height: 0.5;
  color: var(--st-gold);
  margin-bottom: 14px;
}
.story__sign {
  font-family: var(--font-hand);
  font-size: 28px;
  color: var(--st-gold);
  margin-top: 18px;
}

.story__text h2 {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--st-green-deep);
  line-height: 1.05;
  margin-bottom: 20px;
}
.story__text h2 em { color: var(--st-pom); font-style: italic; }
.story__text p {
  color: var(--st-muted);
  font-size: 16px;
  margin-bottom: 16px;
}
.story__text .btn { margin-top: 14px; }

/* ---------- Testimonials ---------- */
.testimonials { background: var(--st-cream); }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial {
  background: var(--st-white);
  padding: 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  position: relative;
  display: flex;
  flex-direction: column;
}
.testimonial__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.testimonial__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--st-gold-soft);
  box-shadow: 0 4px 10px rgba(20,51,32,0.08);
}
.testimonial__name {
  font-weight: 700;
  font-size: 15px;
  color: var(--st-green-deep);
  line-height: 1.25;
}
.testimonial__where {
  font-size: 12px;
  color: var(--st-muted);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.testimonial__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--st-green);
  font-weight: 600;
}
.testimonial__verified::before {
  content: "✓";
  background: var(--st-green);
  color: var(--st-white);
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
}
.testimonial__stars {
  color: var(--st-yellow);
  letter-spacing: 2px;
  font-size: 16px;
  margin-bottom: 12px;
}
.testimonial__quote {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--st-green-deep);
  margin-bottom: 10px;
  line-height: 1.3;
}
.testimonial__body {
  font-size: 14px;
  color: var(--st-muted);
  margin-bottom: 0;
  flex: 1;
}
.testimonial__product {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 6px 12px;
  background: var(--st-green-soft);
  color: var(--st-green);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  align-self: flex-start;
}
.testimonial__product::before { content: ""; display: inline-block; width: 13px; height: 13px; background: url("/assets/images/satyaterra-leaves.png") center/contain no-repeat; vertical-align: -2px; margin-right: 3px; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(circle at 15% 50%, rgba(255,201,60,0.25), transparent 50%),
    radial-gradient(circle at 85% 50%, rgba(255,122,89,0.25), transparent 50%),
    var(--st-pom);
  color: var(--st-white);
  padding: 80px 0;
  text-align: center;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  font-weight: 600;
  margin-bottom: 16px;
}
.cta-band h2 em { font-style: italic; color: var(--st-yellow); }
.cta-band p { font-size: 18px; opacity: 0.9; margin-bottom: 28px; }
.cta-band .btn--gold:hover { background: var(--st-white); color: var(--st-pom); }

/* ---------- Footer ---------- */
.footer {
  background: var(--st-green-deep);
  color: rgba(255,255,255,0.75);
  padding: 70px 0 30px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.1fr 1fr 1.4fr;
  gap: 40px;
  margin-bottom: 50px;
}
.footer__brand {
  margin-bottom: 16px;
}
.footer__logo {
  height: 62px;
  width: auto;
  max-width: 100%;
  display: block;
}
/* Golden logo leaves, reused inline in place of the old 🌿 emoji. Scales with
   the surrounding font-size so it fits any icon slot. */
.inline-leaf { width: 1.05em; height: 1.05em; vertical-align: -0.2em; display: inline-block; }
.leaf-ic { width: 1em; height: 1em; display: inline-block; vertical-align: middle; }
.footer__about {
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}
.footer h4 {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-gold);
  margin-bottom: 18px;
  font-weight: 700;
}
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { font-size: 14px; transition: color .2s; }
.footer ul a:hover { color: var(--st-gold); }
.footer__sub {
  display: flex;
  gap: 0;
  margin-top: 14px;
}
.footer__sub input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 999px 0 0 999px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: var(--st-white);
  font-family: inherit;
  font-size: 14px;
}
.footer__sub input::placeholder { color: rgba(255,255,255,0.5); }
.footer__sub button {
  padding: 12px 20px;
  border-radius: 0 999px 999px 0;
  background: var(--st-gold);
  color: var(--st-green-deep);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.footer__socials { display: flex; gap: 12px; margin-top: 18px; }
.footer__note { font-size: 14px; line-height: 1.6; }
.footer__socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.footer__socials a:hover { background: var(--st-gold); color: var(--st-green-deep); }

/* =====================================================
   PRODUCT DETAIL PAGE
   ===================================================== */
.pdp { padding: 60px 0 30px; }
.pdp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}
.pdp__gallery {
  background: var(--bg, var(--st-cream));
  border-radius: var(--radius-lg);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  position: relative;
  overflow: hidden;
}
.pdp__gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 60%);
}
.pdp__gallery svg { max-height: 90%; width: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.18)); position: relative; }

/* Real product photo gallery (admin-managed images) */
.pdp__gallery--photos { aspect-ratio: auto; padding: 18px; background: #fff; align-items: stretch; }
.pdp__gallery--photos::before { display: none; }
.pdp-gallery { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.pdp-gallery__main { width: 100%; aspect-ratio: 1/1; background: #fff; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.pdp-gallery__main img { width: 100%; height: 100%; object-fit: contain; transition: transform .12s ease-out; transform-origin: center; will-change: transform; }
.pdp-gallery__main.is-zooming { cursor: zoom-out; }
.pdp-gallery__main.is-zooming img { transition: transform-origin .03s linear; }
@media (hover: none) { .pdp-gallery__main { cursor: default; } }
.pdp-gallery__thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp-thumb { width: 68px; height: 68px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: #fff; cursor: pointer; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.active { border-color: var(--st-green); }
.pdp-thumb:hover { border-color: var(--st-green-soft, #cfe3d4); }

/* Hero gallery (dedicated product pages): thumbnails on the SIDE, compact —
   the main image stays large and the gallery's vertical footprint shrinks. */
.lp-hero__media.has-photos { aspect-ratio: auto; padding: 16px; background: #fff; }
.lp-hero__media.has-photos .pdp-gallery { flex-direction: row-reverse; align-items: flex-start; gap: 12px; }
.lp-hero__media.has-photos .pdp-gallery__main { flex: 1 1 auto; min-width: 0; }
.lp-hero__media.has-photos .pdp-gallery__thumbs {
  flex: 0 0 62px; width: 62px; flex-direction: column; flex-wrap: nowrap;
  gap: 8px; max-height: 380px; overflow-y: auto;
}
.lp-hero__media.has-photos .pdp-thumb { width: 62px; height: 62px; flex: 0 0 auto; }

/* Stacked photo gallery (rendered by pdp-page.js when a product has >1 image).
   Every image must be clamped to the column width, or a large source photo
   spills past the edge — this was the "images going out from the left" bug. */
.pdp-gallery--stack { width: 100%; min-width: 0; }
.pdp-stack__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(31,74,46,0.08);
}
.pdp-stack__hint { font-size: 12px; color: var(--st-muted, #7a8a7f); text-align: center; margin: 0 0 2px; }

/* Grid columns must be allowed to shrink below their content's intrinsic size,
   otherwise a wide gallery/photo forces the whole page wider (horizontal
   scroll + the empty strip on the right when zoomed out). */
.pdp__grid { min-width: 0; }
.pdp__grid > * { min-width: 0; }
.pdp__gallery--photos, .pdp-gallery { max-width: 100%; }

/* ---------- MOBILE STICKY BUY BAR (rate + Add to Cart, always reachable) ---------- */
.buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  display: none; align-items: center; gap: 14px;
  padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--st-line);
  box-shadow: 0 -6px 22px rgba(20,51,32,0.10);
}
.buy-bar__info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.buy-bar__name { font-size: 12px; font-weight: 600; color: var(--st-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.buy-bar__price { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--st-green-deep); }
.buy-bar__price .mrp { font-size: 13px; font-weight: 400; color: var(--st-muted); text-decoration: line-through; margin-left: 7px; }
.buy-bar__price .off { font-size: 11px; font-weight: 800; color: var(--st-green); margin-left: 6px; }
.buy-bar .btn { margin-left: auto; padding: 13px 30px; white-space: nowrap; }
@media (max-width: 880px) {
  .buy-bar { display: flex; }
  body.has-buybar { padding-bottom: 80px; }
  .lp-hero__media.has-photos { max-width: 380px; }  /* fit side thumbs within the per-page mobile cap */
}

.pdp__cat {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-gold);
  font-weight: 700;
  margin-bottom: 10px;
}
.pdp__name {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 60px);
  color: var(--st-green-deep);
  line-height: 1.02;
  margin-bottom: 14px;
  font-weight: 600;
}
.pdp__name em { color: var(--st-pom); font-style: italic; }
.pdp__name-plan {
  display: block;
  font-size: 0.52em;
  font-weight: 600;
  color: var(--st-gold);
  margin-top: 4px;
  line-height: 1.1;
}
.pdp__tagline {
  font-size: 18px;
  color: var(--st-muted);
  margin-bottom: 24px;
}
.pdp__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 13px;
  color: var(--st-muted);
}
.pdp__rating .stars { color: var(--st-yellow); letter-spacing: 2px; font-size: 18px; }

.pdp__price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
}
.pdp__price .price-now { font-size: 32px; }
.pdp__price .price-was { font-size: 18px; }

.pdp__benefits {
  background: var(--st-green-soft);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 28px;
}
.pdp__benefits h4 {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--st-green);
  margin-bottom: 14px;
  font-weight: 700;
}
.pdp__benefits ul { list-style: none; }
.pdp__benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--st-green-deep);
}
.pdp__benefits li::before {
  content: "✓";
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--st-green);
  color: var(--st-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.pdp__qty {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.qty-control {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--st-line);
  border-radius: 999px;
  overflow: hidden;
}
.qty-control button {
  width: 44px; height: 44px;
  font-size: 20px;
  color: var(--st-green-deep);
  font-weight: 700;
}
.qty-control button:hover { background: var(--st-green-soft); }
.qty-control span {
  min-width: 40px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
}

.pdp__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.pdp__actions .btn { flex: 1 1 160px; min-width: 0; padding: 18px 24px; font-size: 14px; }

.pdp__details {
  border-top: 1px solid var(--st-line);
  padding-top: 24px;
}
.pdp__detail-row {
  border-bottom: 1px solid var(--st-line);
  padding: 16px 0;
}
.pdp__detail-row summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 15px;
  color: var(--st-green-deep);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pdp__detail-row summary::after {
  content: "+";
  font-size: 22px;
  color: var(--st-pom);
  transition: transform .2s;
}
.pdp__detail-row[open] summary::after { transform: rotate(45deg); }
.pdp__detail-row p {
  margin-top: 12px;
  font-size: 14px;
  color: var(--st-muted);
  line-height: 1.6;
}

/* ---------- Page heading (about, contact) ---------- */
.page-head {
  background:
    radial-gradient(circle at 20% 50%, rgba(255,201,60,0.20), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(230,57,70,0.12), transparent 50%),
    var(--st-cream);
  padding: 80px 0 60px;
  text-align: center;
}
.page-head__crumb {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-gold);
  font-weight: 700;
  margin-bottom: 14px;
}
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 90px);
  color: var(--st-green-deep);
  line-height: 1;
  font-weight: 600;
}
.page-head h1 em { color: var(--st-pom); font-style: italic; }
.page-head__title--oneline { white-space: nowrap; }
@media (max-width: 640px) {
  .page-head__title--oneline { white-space: normal; font-size: clamp(34px, 11vw, 52px); }
}
.page-head__sub {
  margin-top: 18px;
  font-size: 18px;
  color: var(--st-muted);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- About content ---------- */
.about-content {
  background: var(--st-white);
}
.about-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 90px;
}
.about-cols:nth-child(even) > .about-cols__visual { order: 2; }
.about-cols__visual {
  background: var(--st-green-soft);
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120px;
  position: relative;
  overflow: hidden;
}
.about-cols__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(201,160,74,0.4), transparent 50%);
}
.about-cols__text h2 {
  font-family: var(--font-display);
  font-size: 42px;
  color: var(--st-green-deep);
  line-height: 1.05;
  margin-bottom: 16px;
}
.about-cols__text h2 em { color: var(--st-pom); font-style: italic; }
.about-cols__text p {
  color: var(--st-muted);
  font-size: 16px;
  margin-bottom: 14px;
}

/* ---------- Values grid ---------- */
.values {
  background: var(--st-cream);
  padding: 90px 0;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.value-card {
  background: var(--st-white);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  box-shadow: var(--shadow-soft);
  text-align: center;
  transition: transform .2s;
}
.value-card:hover { transform: translateY(-4px); }
.value-card__icon {
  font-size: 44px;
  margin-bottom: 14px;
}
.value-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--st-green-deep);
  margin-bottom: 10px;
  font-weight: 600;
}
.value-card p {
  font-size: 14px;
  color: var(--st-muted);
}

/* ---------- Our Story page ---------- */
.story-prose {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.story-prose .section__title { margin-bottom: 26px; }
.story-prose p {
  color: var(--st-muted);
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 18px;
}
.story-prose p strong { color: var(--st-green-deep); }

/* Core principles */
.principles { background: var(--st-cream); }
.principle-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.principle {
  background: var(--st-white);
  border: 1px solid rgba(31,74,46,0.12);
  border-radius: var(--radius-lg);
  padding: 30px 22px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.principle__num {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--st-gold);
  display: block;
  margin-bottom: 12px;
}
.principle h3 {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--st-green-deep);
  margin-bottom: 10px;
  font-weight: 600;
}
.principle p { font-size: 13.5px; color: var(--st-muted); line-height: 1.55; }

/* Five elements */
.elements { background: var(--st-white); }
.elements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 44px;
}
.element-card {
  background: var(--st-white);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  box-shadow: var(--shadow-soft);
  border-top: 5px solid var(--el, var(--st-green));
}
.element-card--earth { --el: #8C6239; }
.element-card--water { --el: #2E86C1; }
.element-card--fire  { --el: #E8612C; }
.element-card--air   { --el: #16A085; }
.element-card--ether { --el: #7E57C2; }
.element-card--full { grid-column: 1 / -1; }
.element-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.element-card__icon { font-size: 34px; line-height: 1; }
.element-card__head h3 {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--st-green-deep);
  font-weight: 600;
}
.element-card__tag {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
  color: var(--el, var(--st-green));
  margin: 14px 0;
}
.element-card__desc {
  color: var(--st-muted);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.element-card__supports {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 18px;
}
.element-card__supports li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--st-green-deep);
}
.element-card__supports li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--el, var(--st-gold));
  font-size: 12px;
}
.element-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--el, var(--st-green-deep));
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 16px;
  margin: 0;
}

/* Our promise */
.promise-close {
  background: var(--st-green-deep);
  text-align: center;
}
.promise-close .section__eyebrow { color: var(--st-gold); }
.promise-close h2 {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--st-white);
  margin-bottom: 20px;
}
.promise-close > .container > p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  max-width: 720px;
  margin: 0 auto 14px;
}
.promise-close__lines { margin: 26px 0; }
.promise-close__lines span {
  display: block;
  font-size: 17px;
  color: var(--st-gold-soft);
  line-height: 1.8;
}
.promise-close__tag {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--st-gold);
  margin-top: 26px;
}
.promise-close__sub {
  color: rgba(255,255,255,0.7) !important;
  letter-spacing: 0.04em;
  margin-top: 6px !important;
}

@media (max-width: 860px) {
  .principle-grid { grid-template-columns: repeat(2, 1fr); }
  .elements-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */
.contact { background: var(--st-white); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}
.contact-info h3 {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--st-green-deep);
  margin-bottom: 16px;
}
.contact-info p {
  color: var(--st-muted);
  margin-bottom: 30px;
}
.contact-info__item {
  display: flex;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--st-line);
}
.contact-info__item:last-child { border-bottom: none; }
.contact-info__icon {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--st-green-soft);
  color: var(--st-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.contact-info__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st-gold);
  font-weight: 700;
  margin-bottom: 4px;
}
.contact-info__value {
  font-size: 16px;
  color: var(--st-green-deep);
  font-weight: 600;
}

.contact-form {
  background: var(--st-cream);
  padding: 40px;
  border-radius: var(--radius-lg);
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--st-green-deep);
  font-weight: 700;
  margin-bottom: 8px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--st-line);
  border-radius: var(--radius);
  background: var(--st-white);
  font-family: inherit;
  font-size: 15px;
  color: var(--st-ink);
  transition: border-color .2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--st-pom);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Show/hide password (assets/js/pw-toggle.js) ----------
   The script wraps each password input in .pw-wrap and appends the button, so
   this works on any field without touching its markup. Padding-right keeps the
   typed text clear of the eye; the button is transparent so the input's own
   border and focus ring stay in charge. */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 46px !important; }
.pw-toggle {
  position: absolute; top: 0; bottom: 0; right: 4px;
  display: flex; align-items: center; justify-content: center;
  width: 38px; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--st-muted); border-radius: 8px; line-height: 0;
  transition: color .15s ease;
}
.pw-toggle:hover  { color: var(--st-green-deep); }
.pw-toggle:active { transform: none; }
.pw-toggle:focus-visible {
  outline: 2px solid var(--st-pom); outline-offset: -2px; color: var(--st-green-deep);
}

/* ---------- Validation states ---------- */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: var(--st-pom) !important;
  background: #FFF5F6;
}
.form-group .field-error-text {
  color: var(--st-pom-deep);
  font-size: 12px;
  margin-top: 6px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-group .field-error-text::before {
  content: "⚠";
  font-size: 13px;
}
.form-group .field-hint {
  font-size: 12px;
  color: var(--st-muted);
  margin-top: 6px;
}
.form-group label .req {
  color: var(--st-pom);
  margin-left: 2px;
}
.form-group input:not(:placeholder-shown):valid,
.form-group select:valid {
  /* keep default look; just ensure no red border lingers */
}

/* Password strength / match indicator */
.pw-match {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pw-match.ok    { color: var(--st-green); }
.pw-match.miss  { color: var(--st-pom-deep); }
.pw-match.ok::before   { content: "✓"; }
.pw-match.miss::before { content: "✕"; }

/* Checkbox row (terms consent etc.) */
.form-checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0;
}
.form-checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--st-green);
  flex-shrink: 0;
}
.form-checkbox label {
  font-size: 13px;
  color: var(--st-ink);
  line-height: 1.5;
  cursor: pointer;
  font-weight: 500;
}
.form-checkbox label a {
  color: var(--st-pom);
  font-weight: 700;
  text-decoration: underline;
}
.form-checkbox.has-error label { color: var(--st-pom-deep); }

/* ---------- Cart drawer ---------- */
.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 440px;
  background: var(--st-white);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0,0,0,0.15);
}
.cart-drawer.open { transform: translateX(0); }
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,51,32,0.5);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer__head {
  padding: 24px;
  border-bottom: 1px solid var(--st-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-drawer__head h3 {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--st-green-deep);
}
.cart-close {
  font-size: 24px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--st-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-close:hover { background: var(--st-pom); color: var(--st-white); }

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.cart-empty {
  text-align: center;
  padding: 40px 20px 12px;
}
.cart-empty__icon {
  font-size: 60px;
  margin-bottom: 16px;
  opacity: 0.3;
}
.cart-empty p {
  color: var(--st-muted);
  margin-bottom: 0;
}

/* Empty-cart upsell ("You might also like") */
.cart-upsell { padding: 4px 4px 8px; }
.cart-upsell__title { font-weight: 700; color: var(--st-green-deep); font-size: 14px; margin: 6px 6px 12px; }
.cart-upsell__item {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--st-line);
  border-radius: 12px; padding: 8px; margin-bottom: 10px;
}
.cart-upsell__img {
  width: 58px; height: 58px; flex: 0 0 auto; border-radius: 9px;
  background: var(--bg, #eee); display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.cart-upsell__img svg, .cart-upsell__img img { max-width: 84%; max-height: 84%; }
.cart-upsell__combo {
  position: absolute; left: 0; bottom: 0; background: var(--st-green-deep); color: #fff;
  font-size: 7px; font-weight: 700; letter-spacing: .3px; padding: 1px 4px; border-top-right-radius: 5px;
}
.cart-upsell__info { flex: 1; min-width: 0; }
.cart-upsell__name { font-weight: 700; font-size: 14px; color: var(--st-green-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-upsell__sub { font-size: 12px; color: var(--st-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-upsell__price { font-size: 13.5px; font-weight: 800; color: var(--st-green-deep); margin-top: 2px; }
.cart-upsell__price s { color: var(--st-muted); font-weight: 400; margin-left: 5px; }
.cart-upsell__off { color: var(--st-pom); font-weight: 700; margin-left: 5px; font-size: 11px; }
.cart-upsell__add {
  flex: 0 0 auto; background: var(--st-green); color: #fff;
  border-radius: 9px; padding: 9px 16px; font-weight: 700; font-size: 13px;
  transition: background .15s;
}
.cart-upsell__add:hover { background: var(--st-green-deep); }

.cart-item {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--st-line);
  align-items: center;
}
.cart-item__img {
  width: 72px; height: 72px;
  border-radius: var(--radius);
  background: var(--bg, var(--st-cream));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  flex-shrink: 0;
}
.cart-item__img svg { max-height: 100%; }
.cart-item__info { flex: 1; min-width: 0; }
.cart-item__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--st-green-deep);
  margin-bottom: 4px;
}
.cart-item__price { font-size: 14px; color: var(--st-muted); }
.cart-item__price strong { color: var(--st-pom); font-weight: 700; }
.cart-item__qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--st-line);
  border-radius: 999px;
  margin-top: 6px;
}
.cart-item__qty button {
  width: 30px; height: 30px;
  font-size: 16px;
  color: var(--st-green-deep);
  font-weight: 700;
}
.cart-item__qty span {
  min-width: 30px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}
.cart-item__remove {
  font-size: 18px;
  color: var(--st-muted);
  padding: 6px;
  transition: color .2s;
}
.cart-item__remove:hover { color: var(--st-pom); }

/* Subscribe & Save offer under an eligible cart line (assets/js/main.js). */
.cart-sub {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -6px 0 14px; padding: 8px 10px;
  background: var(--st-green-soft, #EAF3EC); border-radius: 10px; font-size: 12.5px;
}
.cart-sub__label { font-weight: 700; color: var(--st-green-deep); }
.cart-sub__sel {
  padding: 6px 8px; border: 1px solid var(--st-line); border-radius: 7px;
  font-size: 12px; font-family: inherit; background: #fff;
}
.cart-sub__btn {
  margin-left: auto; padding: 6px 13px; border: 1px solid var(--st-green);
  border-radius: 7px; background: #fff; color: var(--st-green-deep);
  font-weight: 700; font-size: 12px; cursor: pointer; transition: background .15s, color .15s;
}
.cart-sub__btn:hover { background: var(--st-green); color: #fff; }
.cart-sub__btn:disabled { opacity: .6; cursor: default; }

.cart-drawer__foot {
  padding: 24px;
  border-top: 1px solid var(--st-line);
  background: var(--st-cream);
}
.cart-totals {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--st-muted);
}
.cart-totals--grand {
  font-size: 22px;
  color: var(--st-green-deep);
  font-weight: 800;
  margin-bottom: 18px;
}
.cart-totals--grand span:last-child { color: var(--st-pom); }
.cart-totals--save { color: var(--st-green); }
.cart-totals--save span:last-child { font-weight: 700; }
.cart-note {
  font-size: 12px;
  color: var(--st-muted);
  text-align: center;
  margin-top: 12px;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px)); left: 50%;
  transform: translateX(-50%) translateY(220%);
  max-width: calc(100vw - 32px);
  background: var(--st-green-deep);
  color: var(--st-white);
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 2000;
  transition: transform .3s ease;
}
.toast.show { transform: translateX(-50%) translateY(0); }
/* Lift it clear of the mobile browser chrome + the floating chat button. */
@media (max-width: 640px) {
  .toast { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}
.toast::before {
  content: "✓";
  background: var(--st-mint);
  color: var(--st-white);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-weight: 800;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--st-white);
    padding: 20px;
    border-bottom: 1px solid var(--st-line);
    border-top: 1px solid var(--st-line);
    gap: 14px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
  }
  .header__inner { padding: 12px 16px; gap: 8px; }
  .brand__logo { height: 44px; }
  .header__actions { gap: 2px; }
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn svg { width: 20px; height: 20px; }
  .hero__grid, .story__grid, .about-cols, .contact-grid, .pdp__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* Narrower viewport: pull the products into frame, keep copy legible. */
  .hero { min-height: 480px; }
  /* Pull the products into frame on narrow viewports (the slides carry
     the photo now, so the position moves with them). */
  .hero__slide { background-position: 82% center; }
  .hero__dots { right: 16px; bottom: 16px; }
  .hero::before {
    background: linear-gradient(90deg,
      rgba(250,244,235,0.97) 0%,
      rgba(250,244,235,0.94) 45%,
      rgba(250,244,235,0.86) 75%,
      rgba(250,244,235,0.72) 100%);
  }
  .promise-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid, .values-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
  .section { padding: 60px 0; }
  .about-cols:nth-child(even) > .about-cols__visual { order: 0; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .promise-grid, .footer__grid { grid-template-columns: 1fr; }
  .hero { padding: 50px 0 60px; min-height: 420px; }
  .brand__logo { height: 40px; }
  /* Hide track-order icon on very narrow screens to save space */
  .icon-btn.icon-track { display: none; }
}

/* =====================================================
   SEARCH MODAL
   ===================================================== */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 51, 32, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1005;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.search-overlay.open { opacity: 1; pointer-events: auto; }

.search-modal {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%) translateY(-100%);
  width: 100%;
  max-width: 720px;
  background: var(--st-white);
  z-index: 1006;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.search-overlay.open ~ .search-modal,
.search-modal.open { transform: translateX(-50%) translateY(0); }

.search-modal__head {
  padding: 22px 24px;
  border-bottom: 1px solid var(--st-line);
  display: flex;
  align-items: center;
  gap: 14px;
}
.search-modal__icon {
  font-size: 22px;
  color: var(--st-green-deep);
  flex-shrink: 0;
}
.search-modal__input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  color: var(--st-ink);
  outline: none;
  font-weight: 500;
}
.search-modal__input::placeholder { color: var(--st-muted); }
.search-close {
  background: var(--st-cream);
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--st-green-deep);
  flex-shrink: 0;
}
.search-close:hover { background: var(--st-pom); color: var(--st-white); }

.search-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px 20px;
}
.search-section-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-gold);
  font-weight: 700;
  padding: 14px 10px 8px;
}
.search-result {
  display: flex;
  gap: 14px;
  padding: 12px 10px;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
  align-items: center;
}
.search-result:hover, .search-result.active {
  background: var(--st-cream);
}
.search-result__img {
  width: 56px; height: 56px;
  border-radius: 10px;
  background: var(--bg, var(--st-cream));
  padding: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-result__img svg { max-height: 100%; }
.search-result__info { flex: 1; min-width: 0; }
.search-result__name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--st-green-deep);
  font-weight: 600;
  margin-bottom: 2px;
}
.search-result__cat {
  font-size: 12px;
  color: var(--st-muted);
}
.search-result__price {
  color: var(--st-pom);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.search-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--st-muted);
}
.search-empty__icon {
  font-size: 50px;
  opacity: 0.3;
  margin-bottom: 12px;
}
.search-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px 16px;
}
.search-suggestions button {
  background: var(--st-cream);
  color: var(--st-green-deep);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s;
}
.search-suggestions button:hover { background: var(--st-green-soft); }

@media (max-width: 540px) {
  .search-modal { border-radius: 0; max-height: 100vh; height: 100vh; }
}

/* =====================================================
   POLICY PAGES (Terms, Privacy, Refund, Shipping)
   ===================================================== */
.policy-wrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}
.policy-toc {
  position: sticky;
  top: 100px;
  background: #fff;
  padding: 22px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.policy-toc h4 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-gold);
  font-weight: 700;
  margin-bottom: 14px;
}
.policy-toc ul { list-style: none; }
.policy-toc li { margin-bottom: 8px; }
.policy-toc a {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--st-green-deep);
  font-weight: 600;
  transition: background .15s;
}
.policy-toc a:hover { background: var(--st-cream); color: var(--st-pom); }

.policy-content {
  background: #fff;
  padding: 50px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  font-size: 15px;
  line-height: 1.75;
  color: var(--st-ink);
}
.policy-content h2 {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--st-green-deep);
  margin: 38px 0 14px;
  scroll-margin-top: 100px;
  font-weight: 600;
}
.policy-content h2:first-child { margin-top: 0; }
.policy-content h3 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--st-green);
  margin: 24px 0 10px;
  font-weight: 600;
}
.policy-content p { margin-bottom: 14px; color: var(--st-ink); }
.policy-content ul, .policy-content ol { margin: 0 0 16px 24px; }
.policy-content li { margin-bottom: 6px; }
.policy-content strong { color: var(--st-green-deep); }
.policy-content a { color: var(--st-pom); font-weight: 600; }
.policy-content a:hover { text-decoration: underline; }
.policy-content .last-updated {
  display: inline-block;
  background: var(--st-green-soft);
  color: var(--st-green);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
  font-weight: 600;
}
.policy-content .callout {
  background: var(--st-cream);
  border-left: 3px solid var(--st-gold);
  padding: 16px 20px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 14px;
}
.policy-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 14px;
}
.policy-content th,
.policy-content td {
  padding: 12px 14px;
  border: 1px solid var(--st-line);
  text-align: left;
}
.policy-content th {
  background: var(--st-green-soft);
  color: var(--st-green-deep);
  font-weight: 700;
}

@media (max-width: 960px) {
  .policy-wrap { grid-template-columns: 1fr; }
  .policy-toc { position: static; }
  .policy-content { padding: 30px 22px; }
}


/* =====================================================
   VIDEO GALLERY (horizontal scroller, Plix-style)
   ===================================================== */
.video-gallery { background: var(--st-white); }
.video-gallery__head { margin-bottom: 36px; }

.video-scroller {
  position: relative;
}
.video-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 4px 24px;
  /* Hide scrollbar on Chrome/Safari/Edge while keeping it functional */
  scrollbar-width: thin;
  scrollbar-color: var(--st-gold-soft) transparent;
}
.video-track::-webkit-scrollbar { height: 6px; }
.video-track::-webkit-scrollbar-track { background: transparent; }
.video-track::-webkit-scrollbar-thumb {
  background: var(--st-gold-soft);
  border-radius: 999px;
}

.video-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .2s ease;
}
.video-card:hover { transform: translateY(-4px); }

.video-card__media {
  position: relative;
  width: 220px;
  height: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--st-green-deep);
  box-shadow: var(--shadow-soft);
}
.video-card__poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.video-card:hover .video-card__poster { transform: scale(1.05); }

.video-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

.video-card__brand {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(255,255,255,0.92);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: var(--st-green-deep);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 2;
}
.video-card__discount {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--st-mint);
  color: var(--st-white);
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 2;
  letter-spacing: 0.04em;
}
.video-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform .2s ease, background .2s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.video-card__play::before {
  content: "";
  width: 0; height: 0;
  border-left: 18px solid var(--st-pom);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 4px;
}
.video-card:hover .video-card__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--st-white);
}
.video-card__product-chip {
  position: absolute;
  bottom: 12px; left: 12px;
  background: var(--st-white);
  border-radius: 12px;
  padding: 6px 10px 6px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.video-card__product-chip img,
.video-card__product-chip svg {
  width: 32px; height: 32px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--chip-bg, var(--st-cream));
  padding: 2px;
}
.video-card__product-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--st-green-deep);
  line-height: 1.1;
  max-width: 100px;
}
.video-card__caption {
  font-size: 14px;
  color: var(--st-green-deep);
  font-weight: 600;
  line-height: 1.35;
  padding: 0 6px;
}

.video-scroller__nav {
  position: absolute;
  top: 180px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--st-white);
  box-shadow: 0 6px 18px rgba(20,51,32,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--st-green-deep);
  cursor: pointer;
  z-index: 3;
  transition: background .15s, transform .15s;
}
.video-scroller__nav:hover { background: var(--st-pom); color: var(--st-white); transform: scale(1.05); }
.video-scroller__nav--prev { left: -20px; }
.video-scroller__nav--next { right: -20px; }

/* Video lightbox */
.video-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.video-lightbox.open { opacity: 1; pointer-events: auto; }
.video-lightbox__inner {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.video-lightbox__video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.video-lightbox__close {
  position: absolute;
  top: -50px; right: 0;
  background: rgba(255,255,255,0.15);
  color: var(--st-white);
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: background .15s;
}
.video-lightbox__close:hover { background: rgba(255,255,255,0.3); }
.video-lightbox__missing {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--st-white);
  padding: 30px;
  text-align: center;
  background: linear-gradient(135deg, var(--st-green-deep), var(--st-green));
}
.video-lightbox__missing h4 {
  font-family: var(--font-display);
  font-size: 26px;
  margin-bottom: 10px;
  color: var(--st-gold-soft);
}
.video-lightbox__missing p {
  font-size: 14px;
  opacity: 0.8;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .video-card { flex: 0 0 180px; }
  .video-card__media { width: 180px; height: 300px; }
  .video-scroller__nav { display: none; }
}

/* =====================================================
   REVIEWS — PDP customer-facing
   ===================================================== */
.reviews-section { background: var(--st-cream); }

.reviews-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 50px;
  align-items: start;
}
.reviews-summary {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 100px;
}

.rs-summary { text-align: center; }
.rs-summary__avg {
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--st-green-deep);
  line-height: 1;
  font-weight: 600;
}
.rs-summary__count {
  color: var(--st-muted);
  font-size: 14px;
  margin: 10px 0 22px;
}

.rs-bars { text-align: left; display: flex; flex-direction: column; gap: 6px; }
.rs-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.rs-bar__label { color: var(--st-muted); width: 28px; flex-shrink: 0; }
.rs-bar__track {
  flex: 1;
  height: 8px;
  background: var(--st-cream);
  border-radius: 999px;
  overflow: hidden;
}
.rs-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--st-gold) 0%, var(--st-yellow) 100%);
  border-radius: 999px;
}
.rs-bar__count { color: var(--st-muted); width: 30px; text-align: right; flex-shrink: 0; }

.rs-summary-empty { text-align: center; padding: 30px 10px; }

/* Stars (read-only) */
.rs-stars { display: inline-flex; gap: 2px; }
.rs-stars--big .rs-star { font-size: 24px; }
.rs-star { color: var(--st-yellow); font-size: 16px; line-height: 1; }
.rs-star--empty { color: var(--st-line); }
.rs-star--half {
  background: linear-gradient(90deg, var(--st-yellow) 50%, var(--st-line) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Reviews list */
.reviews-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 16px;
}
.reviews-list__title {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--st-green-deep);
  font-weight: 600;
}
.reviews-list__controls select {
  margin-left: 8px;
  padding: 8px 12px;
  border: 1.5px solid var(--st-line);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--st-green-deep);
  font-weight: 600;
  cursor: pointer;
}

.rs-review {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}
.rs-review__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.rs-review__name {
  font-weight: 700;
  font-size: 15px;
  color: var(--st-green-deep);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rs-verified {
  background: var(--st-green-soft);
  color: var(--st-green);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.04em;
}
.rs-review__date { font-size: 12px; color: var(--st-muted); margin-top: 2px; }
.rs-review__title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--st-green-deep);
  margin: 8px 0 8px;
  font-weight: 600;
}
.rs-review__body {
  color: var(--st-ink);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 14px;
  white-space: pre-wrap;
}
.rs-review__foot {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--st-line);
}
.rs-helpful {
  background: var(--st-cream);
  color: var(--st-green-deep);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  transition: background .15s;
}
.rs-helpful:hover { background: var(--st-green-soft); }
.rs-helpful.voted { background: var(--st-green); color: #fff; }
.rs-helpful__count { font-weight: 600; opacity: 0.85; }

/* Write a review */
.write-review { margin-top: 30px; }
.write-review__card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-soft);
  border-left: 4px solid var(--st-gold);
}

.rs-rating-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}
.rs-rating-input__star {
  font-size: 36px;
  color: var(--st-line);
  cursor: pointer;
  transition: color .12s, transform .12s;
  line-height: 1;
}
.rs-rating-input__star:hover,
.rs-rating-input__star.active {
  color: var(--st-yellow);
  transform: scale(1.05);
}
.rs-rating-input__label {
  margin-left: 14px;
  font-size: 14px;
  color: var(--st-muted);
  font-weight: 600;
}

/* PDP rating cluster spacing */
.pdp__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 13px;
  color: var(--st-muted);
}

/* Product card ratings (live data from API) */
.product-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--st-muted);
  margin: 6px 0 10px;
  font-weight: 600;
}
.product-card__rating .rs-stars .rs-star { font-size: 13px; }

@media (max-width: 960px) {
  .reviews-layout { grid-template-columns: 1fr; gap: 30px; }
  .reviews-summary { position: static; }
}

/* =====================================================
   CATEGORY CARDS (Home + Shop)
   ===================================================== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 50px;
}
.cat-card {
  background: var(--cat-bg);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .2s, box-shadow .2s;
  min-height: 200px;
  box-shadow: 0 4px 14px rgba(20,51,32,0.05);
  border: 2px solid transparent;
}
.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20,51,32,0.12);
  border-color: var(--cat-color);
}
.cat-card::after {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.5), transparent 70%);
  pointer-events: none;
}
.cat-card__icon {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 8px;
}
.cat-card__label {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--st-green-deep);
  font-weight: 700;
}
.cat-card__desc {
  font-size: 14px;
  color: var(--st-green-deep);
  opacity: 0.75;
  flex: 1;
}
.cat-card__cta {
  font-size: 13px;
  font-weight: 800;
  color: var(--cat-color);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* Cart drawer — coupon strip */
.cart-totals--coupon {
  background: var(--st-green-soft);
  margin: 8px -22px;
  padding: 10px 22px;
  border-radius: 0;
  font-size: 13px;
}
.cart-totals--coupon code {
  background: var(--st-green);
  color: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-left: 4px;
}
.cart-coupon-remove {
  background: transparent;
  border: none;
  color: var(--st-pom);
  font-weight: 800;
  margin-left: 6px;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
}
.cart-coupon-remove:hover { color: var(--st-pom-deep); }
.cart-coupon-hint {
  font-size: 12px;
  color: var(--st-muted);
  margin: 8px 0 12px;
  text-align: center;
}

/* Checkout — coupon box */
.checkout-coupon {
  background: var(--st-cream);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.checkout-coupon__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.checkout-coupon__head h4 {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--st-gold);
  font-weight: 800;
  text-transform: uppercase;
}
.checkout-coupon__form {
  display: flex;
  gap: 8px;
}
.checkout-coupon__form input {
  flex: 1;
  padding: 12px 14px;
  border: 1.5px solid var(--st-line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #fff;
}
.checkout-coupon__applied {
  background: #fff;
  padding: 12px 14px;
  border-radius: var(--radius);
  border-left: 3px solid var(--st-green);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.checkout-coupon__applied .code {
  background: var(--st-green);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.checkout-coupon__applied .desc {
  flex: 1;
  font-size: 13px;
  color: var(--st-green);
  font-weight: 600;
}
.checkout-coupon__error {
  margin-top: 8px;
  padding: 8px 10px;
  background: #FDE2E5;
  color: var(--st-pom-deep);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.checkout-coupon__gift {
  background: var(--st-gold-soft);
  color: var(--st-green-deep);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 8px;
  font-weight: 600;
}

/* =====================================================
   ACCOUNT DASHBOARD — tabs, addresses, modals
   ===================================================== */
.acc-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.acc-tab {
  text-align: left;
  background: transparent;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--st-green-deep);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.acc-tab:hover { background: var(--st-cream); }
.acc-tab.active {
  background: var(--st-green-deep);
  color: #fff;
}
.acc-pane { display: none; }
.acc-pane.active { display: block; }

.acc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.acc-card__head h3 { margin-bottom: 0; }

.acc-msg {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}
.acc-msg.success { background: var(--st-green-soft); color: var(--st-green); }
.acc-msg.error   { background: #FDE2E5; color: var(--st-pom-deep); }

/* Address cards */
.addr-card {
  background: #fff;
  border: 1.5px solid var(--st-line);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 12px;
  position: relative;
}
.addr-card.is-default { border-color: var(--st-green); }
.addr-default-badge {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--st-green);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 999px;
}
.addr-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* Modal */
.acc-modal {
  position: fixed;
  inset: 0;
  background: rgba(20,51,32,0.55);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.acc-modal.open { opacity: 1; pointer-events: auto; }
.acc-modal__inner {
  background: #fff;
  border-radius: 18px;
  padding: 32px 34px;
  width: 100%;
  max-width: 660px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
}
.acc-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.acc-modal__head h3 {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--st-green-deep);
  font-weight: 600;
  margin: 0;
}
.acc-modal__close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--st-muted);
  cursor: pointer;
  padding: 4px 10px;
}
.acc-modal__close:hover { color: var(--st-pom); }

/* Order details modal */
.om-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 36px;
}
.om-section-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-gold);
  font-weight: 800;
  margin: 0 0 12px;
}
/* Line items */
.om-items { margin-bottom: 4px; }
.om-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--st-line);
}
.om-item:first-child { padding-top: 0; }
.om-item:last-child { border-bottom: none; }
.om-item__thumb {
  width: 56px; height: 56px; flex: none;
  border-radius: 12px; background: var(--st-cream, #F6F1E7);
  border: 1px solid var(--st-line);
  padding: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.om-item__thumb img, .om-item__thumb svg { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.om-item__info { flex: 1; min-width: 0; }
.om-item__name { font-weight: 700; color: var(--st-green-deep); font-size: 14.5px; line-height: 1.3; }
.om-item__meta { font-size: 12.5px; color: var(--st-muted); margin-top: 3px; }
.om-item__total { font-weight: 800; color: var(--st-green-deep); font-size: 14.5px; white-space: nowrap; align-self: flex-start; padding-top: 1px; }
/* Totals */
.om-totals { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--st-line); }
.om-tline {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-size: 14px; padding: 5px 0;
}
.om-tline span:first-child { color: var(--st-muted); }
.om-tline strong { color: var(--st-green-deep); font-weight: 700; }
.om-tline--save span, .om-tline--save strong { color: var(--st-green); }
.om-tline--grand {
  margin-top: 8px; padding-top: 14px; border-top: 2px solid var(--st-line);
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
}
.om-tline--grand span:first-child { color: var(--st-green-deep); }
.om-tline--grand strong { color: var(--st-pom); font-size: 22px; }
/* Right column: stacked, divider-separated blocks */
.om-block { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--st-line); }
.om-block:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.om-block:empty { display: none; }
.om-addr { font-size: 14px; line-height: 1.65; color: var(--st-ink); margin: 0; }
.om-addr strong { color: var(--st-green-deep); }
.om-muted { font-size: 13px; color: var(--st-muted); line-height: 1.6; margin: 0; }
.om-invoice { margin: 12px 0 4px; display: inline-flex; gap: 7px; align-items: center; }
.om-cancel { margin-top: 14px; }
.om-cancel__form { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--st-line); }
/* Cancel / Request-cancellation trigger reads as a (red) danger action. */
.om-cancel__open { color: var(--st-pom) !important; border-color: var(--st-pom) !important; }
.om-cancel__open:hover { background: var(--st-pom) !important; color: #fff !important; }
/* SatyaTerra Coin icon — replaces the old 🪙 emoji next to balances/labels. */
.coin-ic { width: 1.15em; height: 1.15em; vertical-align: -0.22em; display: inline-block; }

@media (max-width: 720px) {
  .om-grid { grid-template-columns: 1fr; gap: 26px; }
  .acc-modal__inner { padding: 22px; }
}

/* ============================================================
   COMBOS / BUNDLES
   ============================================================ */
.combos-section { background: var(--st-cream); }
.combo-grid {
  display: grid;
  /* auto-fill (not auto-fit): keep the empty columns so a lone card stays a
     normal card width instead of stretching to fill the whole row. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
/* A lone bundle card shouldn't stretch the whole section — center it at
   roughly a third of the width so it reads as a single, deliberate offer. */
.combo-grid--single {
  display: flex;
  justify-content: center;
}
.combo-grid--single > * {
  flex: 0 1 360px;
  max-width: 380px;
}
/* Mixed cross-sell row (own combo + other combos/products): keep cards an
   even, non-stretching width so combo and product cards line up tidily. */
.combo-grid--mixed {
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  justify-content: center;
}
.combo-card {
  background: var(--st-white);
  border: 1px solid rgba(31,74,46,0.12);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Safari: a flex/grid item containing the overflow-x scroll slider will size to
     the slider's full content width (all slides) unless min-width is 0 — without
     this the card width grows unbounded. */
  min-width: 0;
}
.combo-card__more {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--st-green-deep);
  text-decoration: none;
  margin-top: 2px;
}
.combo-card__more:hover { text-decoration: underline; }
.combo-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.combo-card__tag {
  display: inline-block;
  background: var(--st-green);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}
.combo-card__gift {
  font-size: 12px;
  font-weight: 700;
  color: var(--st-pom);
}
.combo-card__title {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  color: var(--st-green-deep);
  line-height: 1.1;
}
.combo-card__items {
  font-size: 13px;
  font-weight: 700;
  color: var(--st-ink);
  letter-spacing: 0.01em;
}
.combo-card__rationale {
  font-size: 14px;
  color: var(--st-muted);
  line-height: 1.55;
  flex: 1;
}
.combo-card__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}
.combo-card__now {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--st-green-deep);
}
.combo-card__was { font-size: 15px; text-decoration: line-through; color: var(--st-muted); }
.combo-card__save {
  margin-left: auto;
  background: var(--st-green-soft);
  color: var(--st-green-deep);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.combo-card__off {
  background: var(--st-pom);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  border-radius: 999px;
}

/* ---- Visual product stage inside a combo card ---- */
.combo-card__stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201,160,74,0.10), transparent 60%),
    var(--st-cream);
  border: 1px solid rgba(31,74,46,0.08);
  border-radius: 16px;
  padding: 18px 12px 14px;
  min-height: 168px;
  margin: 2px 0 4px;
}
.combo-thumb {
  position: relative;
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
}
.combo-thumb__art {
  width: 70px;
  height: 112px;
  background: var(--bg, #f3f3f3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  box-shadow: 0 4px 12px rgba(20,51,32,0.10);
}
.combo-thumb__art svg { height: 100%; width: auto; max-width: 100%; }
.combo-thumb__emoji { font-size: 46px; line-height: 112px; }
.combo-thumb__name {
  font-size: 10px;
  font-weight: 700;
  color: var(--st-green-deep);
  text-align: center;
  line-height: 1.15;
  max-width: 78px;
}
.combo-thumb__qty {
  position: absolute;
  top: -2px;
  right: 4px;
  z-index: 2;
  background: var(--st-green-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.combo-thumb--gift .combo-thumb__art {
  background: #FFF6DC;
  border: 2px dashed var(--st-gold);
}
.combo-thumb__free {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: var(--st-pom);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 2px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.22);
}
.combo-plus {
  align-self: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--st-muted);
  padding: 0 1px;
  margin-bottom: 22px;
}
.combo-plus--gift { color: var(--st-gold); }
.btn--block { display: block; width: 100%; text-align: center; }

/* Sit Clean spray visual sizing parity with tubes */
.product-card__media svg[aria-label$="spray"],
.lp-hero__media svg[aria-label$="spray"] { max-height: 100%; }

/* ------------------------------------------------------------
   Home: centered, balanced grids
   Cards keep a fixed width and the last row centers, so an odd
   count (5 products → 3+2, 9 combos → 3+3+3) looks intentional.
   ------------------------------------------------------------ */
.product-grid--center,
.combo-grid--center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.product-grid--center > * { flex: 0 1 320px; }
.combo-grid--center  > * { flex: 0 1 340px; }
@media (max-width: 700px) {
  /* Home page: two products / combos per row (was one full-width card). */
  .product-grid--center,
  .combo-grid--center {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  }
  .product-grid--center > *,
  .combo-grid--center  > * { flex: none; max-width: none; min-width: 0; margin: 0; }
}

/* ============================================================
   SHOP PAGE — category sidebar + product grid
   ============================================================ */
.shop-layout {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 40px;
  /* Stretch (not start) so the sidebar column is as tall as the products
     column — this gives the sticky inner panel room to travel the full
     length and only release at the footer. */
  align-items: stretch;
}
.shop-sidebar__sticky { position: sticky; top: 96px; }
.shop-sidebar__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--st-green-deep);
  margin-bottom: 14px;
}
.shop-filters { display: flex; flex-direction: column; gap: 6px; }
.shop-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--st-ink);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.shop-filter:hover { background: var(--st-green-soft); }
.shop-filter.active { background: var(--st-green); color: #fff; }
.shop-filter__count {
  font-size: 12px;
  font-weight: 700;
  background: rgba(20,51,32,0.08);
  color: inherit;
  min-width: 24px;
  text-align: center;
  padding: 2px 7px;
  border-radius: 999px;
}
.shop-filter.active .shop-filter__count { background: rgba(255,255,255,0.24); }
.shop-sidebar__combos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--st-green-deep);
  text-decoration: none;
  border: 1px dashed var(--st-gold);
  border-radius: 12px;
}
.shop-sidebar__combos:hover { background: #FFF6DC; }

/* Redesigned shop sidebar — grouped nav, sort, value note */
.shop-nav__group { margin-bottom: 24px; }
.shop-nav { display: flex; flex-direction: column; gap: 6px; }
.shop-nav__link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 12px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  color: var(--st-ink); text-decoration: none;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.shop-nav__link:hover { background: var(--st-green-soft); }
.shop-nav__link--accent {
  background: #FFF6DC; border-color: var(--st-gold); color: var(--st-green-deep);
}
.shop-nav__link--accent:hover { background: #FBEFCB; }

.shop-sort { display: flex; flex-direction: column; gap: 6px; }
.shop-sort__btn {
  text-align: left; background: transparent; border: 1px solid transparent;
  border-radius: 12px; padding: 9px 14px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--st-ink); cursor: pointer; transition: background .15s, color .15s;
}
.shop-sort__btn:hover { background: var(--st-green-soft); }
.shop-sort__btn.active { background: var(--st-green); color: #fff; }

.shop-sidebar__note {
  margin-top: 4px; padding: 14px;
  background: var(--st-cream); border: 1px solid var(--st-line);
  border-radius: 12px; font-size: 13px; line-height: 1.7; color: var(--st-muted);
}
.shop-sidebar__note strong { color: var(--st-green-deep); font-weight: 700; }

/* Compact mobile Category + Sort dropdowns — one row, shown only on phones/tablets
   where the sidebar collapses (see the ≤860 block). Hidden on desktop. */
.shop-filterbar { display: none; }
.shop-select { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.shop-select__lbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--st-muted);
}
.shop-select__input {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-width: 0;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--st-ink);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231F4A2E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  border: 1px solid var(--st-line); border-radius: 12px;
  padding: 11px 34px 11px 14px; cursor: pointer;
}
.shop-select__input:focus { outline: none; border-color: var(--st-green); box-shadow: 0 0 0 3px rgba(31,74,46,0.12); }

.shop-empty {
  grid-column: 1 / -1; text-align: center;
  color: var(--st-muted); padding: 40px 20px;
}

/* Centered "view all" action under a home section grid */
.section__more { text-align: center; margin-top: 28px; }

/* Stacked content blocks (combos + products) sharing one sidebar */
.shop-block + .shop-block { margin-top: 44px; }

/* ---------- Product sale badge ---------- */
.price-sale-badge {
  display: inline-block; background: var(--st-pom); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 999px; margin-right: 6px; vertical-align: middle;
}
.price-sale-ends { display: block; font-size: 12px; color: var(--st-pom); font-weight: 600; margin-top: 4px; }

/* ---------- Share ---------- */
.icon-share {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  border: 1px solid var(--st-line); border-radius: 10px;
  background: #fff; color: var(--st-green-deep); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-share:hover { background: var(--st-green-soft); border-color: var(--st-green); color: var(--st-green); }
.icon-share--lg { width: 48px; height: 48px; }
.combo-card__cta { display: flex; gap: 8px; align-items: stretch; }

/* Share sits next to a pill CTA on the cards. The CTA's height comes from its
   padding (44px on combos, ~47px on products), so a fixed 40px share button
   ended up short and top-aligned, leaving a gap under it. Let it stretch to the
   row height and match the pill shape so the two read as one control group. */
.product-card__actions { align-items: stretch; }
.combo-card__cta .icon-share,
.product-card__actions .icon-share {
  align-self: stretch;
  height: auto;
  width: 44px;
  border-radius: 999px;
}
/* "Add Combo to Cart" is nowrap, so .btn's 26px side padding set a 205px minimum
   width — the row then needed 257px while the narrowest grid column only gives
   232px, pushing the share button outside the card. Trimming the side padding
   lowers that minimum (the button is flex:1, so padding only matters at the
   minimum — the label stays centred at normal widths). Wrapping is the fallback
   if the label ever gets longer. */
.combo-card__cta .btn {
  padding-left: 12px;
  padding-right: 12px;
  font-size: 13px;
  letter-spacing: 0.01em;
  white-space: normal;
  min-width: 0;
}

.share-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(10,14,10,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.share-modal__box { background: #fff; border-radius: 16px; width: 100%; max-width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.share-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--st-line); }
.share-modal__head strong { color: var(--st-green-deep); font-size: 16px; font-family: var(--font-display); }
.share-modal__close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--st-muted); }
.share-modal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px; }
.share-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px;
  border: 1px solid var(--st-line); border-radius: 12px; background: #fff; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--st-ink); text-decoration: none; text-align: center;
  transition: background .15s; }
.share-opt:hover { background: var(--st-cream); }
.share-opt__ic { font-size: 22px; }

/* ---------- Video testimonials ---------- */
.vtm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.vtm-card {
  display: flex; flex-direction: column; text-align: left;
  background: #fff; border: 1px solid var(--st-line); border-radius: 14px;
  overflow: hidden; cursor: pointer; padding: 0; transition: box-shadow .15s, transform .15s;
}
.vtm-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.vtm-card__thumb { position: relative; display: block; aspect-ratio: 16/10; background: #11140f; overflow: hidden; }
.vtm-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vtm-card__noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 38px; }
.vtm-card__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; padding-left: 3px; transition: background .15s, transform .15s;
}
.vtm-card:hover .vtm-card__play { background: var(--st-pom); transform: translate(-50%, -50%) scale(1.08); }
.vtm-card__name { font-weight: 700; color: var(--st-green-deep); font-size: 14px; padding: 12px 14px 0; }
.vtm-card__stars { color: var(--st-gold); font-size: 13px; padding: 2px 14px 0; letter-spacing: 1px; }
.vtm-card__cap { color: var(--st-muted); font-size: 13px; line-height: 1.45; padding: 4px 14px 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.vtm-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(10,14,10,.82);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.vtm-modal__box { position: relative; width: 100%; max-width: 420px; }
.vtm-modal__media { aspect-ratio: 9/16; background: #000; border-radius: 14px; overflow: hidden; max-height: 80vh; }
.vtm-modal__media iframe, .vtm-modal__media video { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000; }
.vtm-modal__close { position: absolute; top: -44px; right: 0; background: rgba(255,255,255,.15); color: #fff;
  width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.vtm-modal__close:hover { background: rgba(255,255,255,.3); }
.vtm-modal__cap { color: #fff; font-size: 13px; margin-top: 12px; line-height: 1.5; }
.vtm-modal__cap strong { color: var(--st-gold-soft, #f5e9c9); }
@media (min-width: 720px) { .vtm-modal__box { max-width: 760px; } .vtm-modal__media { aspect-ratio: 16/9; } }

.shop-toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--st-line);
}
.shop-main__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--st-green-deep);
}
.shop-count { font-size: 14px; font-weight: 600; color: var(--st-muted); }
.shop-main .product-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

@media (max-width: 860px) {
  .shop-layout { grid-template-columns: 1fr; gap: 16px; }
  /* Phones/tablets: retire the whole sidebar and drive filter + sort from the two
     compact dropdowns instead — one tidy row, so products start far higher. */
  .shop-sidebar { display: none; }
  .shop-filterbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
  /* Let both columns shrink to the viewport so the no-wrap chip strip scrolls
     INTERNALLY instead of stretching the whole page sideways. */
  .shop-sidebar, .shop-main, .shop-sidebar__sticky { min-width: 0; }
  .shop-sidebar__sticky { position: static; }
  .shop-sidebar__title { font-size: 18px; margin-bottom: 10px; }
  /* Category filters become a single-row, swipeable chip strip — compact, so
     the products start much higher on the page. */
  .shop-filters {
    flex-direction: row; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .shop-filters::-webkit-scrollbar { display: none; }
  .shop-filter {
    width: auto; flex: 0 0 auto;
    background: #fff; border: 1px solid var(--st-line);
    border-radius: 999px; padding: 8px 14px; font-size: 14px; gap: 7px;
  }
  .shop-filter.active { background: var(--st-green); border-color: var(--st-green); color: #fff; }
  .shop-filter__count { background: rgba(20,51,32,0.08); min-width: 0; padding: 1px 7px; }
  .shop-sidebar__combos { margin-top: 14px; }
  /* New sidebar groups also collapse to compact, swipeable chip strips on mobile. */
  .shop-nav__group { margin-bottom: 14px; }
  .shop-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .shop-nav__link {
    flex: 0 0 auto; background: #fff; border: 1px solid var(--st-line);
    border-radius: 999px; padding: 8px 14px; font-size: 14px;
  }
  .shop-nav__link--accent { border-color: var(--st-gold); }
  .shop-sort {
    flex-direction: row; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
  }
  .shop-sort::-webkit-scrollbar { display: none; }
  .shop-sort__btn {
    flex: 0 0 auto; background: #fff; border: 1px solid var(--st-line);
    border-radius: 999px; padding: 8px 14px; font-size: 14px;
  }
}

/* ============================================================
   MOBILE UX POLISH (≤640px)
   Reclaim wasted vertical space so product cards — not headings
   and marketing copy — own the first screen on phones.
   ============================================================ */
@media (max-width: 640px) {
  /* Promo strip repeats info shown elsewhere (and in the cart) — drop it. */
  .announce { display: none; }

  /* Interior page headers: trim the oversized hero band. */
  .page-head { padding: 26px 0 16px; }
  .page-head h1 { font-size: clamp(30px, 8.5vw, 40px); }
  .page-head__crumb { margin-bottom: 8px; }
  .page-head__sub { margin-top: 10px; font-size: 15px; }

  /* Shop: focus is on selling — cut the preamble, shrink the hero, raise the products. */
  .page-head--shop { padding: 12px 0 4px; }
  .page-head--shop h1 { font-size: clamp(22px, 6.5vw, 28px); }
  .page-head--shop .page-head__sub,
  .page-head--shop .page-head__crumb { display: none; }
  .shop-section.section--tight { padding: 10px 0 40px; }
  /* ===== Two-up product/combo cards on EVERY page that shows them ===== */
  /* Grids go two-up. The .shop-main selector is repeated only to out-specify the
     shop's own 230px rule; a lone combo (.combo-grid--single is flex) is untouched
     and keeps its centered, full-width treatment. */
  .product-grid,
  .shop-main .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .combo-grid,
  .shop-main .combo-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* Product card — right-sized for the narrow column (scoped to the card component,
     so it applies wherever the card renders but never touches PDP pricing/layout). */
  .product-card__body { padding: 14px 14px 16px; }
  .product-card__cat { font-size: 10px; letter-spacing: .1em; margin-bottom: 4px; }
  .product-card__name { font-size: 19px; }
  .product-card__tagline { font-size: 12.5px; margin-bottom: 10px; }
  .product-card__price { margin-bottom: 10px; gap: 6px; flex-wrap: wrap; }
  .product-card .price-now { font-size: 18px; }
  .product-card__badge { top: 8px; left: 8px; padding: 4px 9px; font-size: 10px; }
  .product-card__actions .btn { padding: 10px 8px; }

  /* Combo card — right-sized for the narrow column. */
  .combo-card { padding: 14px 14px 16px; gap: 7px; }
  .combo-card__title { font-size: 18px; }
  .combo-card__items { font-size: 11.5px; }
  .combo-card__rationale { font-size: 12px; line-height: 1.5; }
  .combo-card__tag { font-size: 9.5px; padding: 3px 8px; letter-spacing: .04em; }
  .combo-card__gift { font-size: 10.5px; }
  .combo-card__now { font-size: 22px; }
  .combo-card__was { font-size: 12px; }
  .combo-card__save, .combo-card__off { font-size: 10px; padding: 3px 8px; }
  .combo-card__more { font-size: 12px; }
  /* Shrink the product “stage” (thumbs mode) so it fits the half-width card. */
  .combo-card__stage { min-height: 120px; padding: 12px 8px 10px; }
  .combo-thumb { width: 54px; }
  .combo-thumb__art { width: 48px; height: 74px; }
  .combo-thumb__emoji { font-size: 32px; line-height: 74px; }

  /* Category tiles: compact two-up so they stop eating the whole screen. The tile
     is the link, so the oversized "SHOP <FULL LABEL> →" line is dropped for a small
     corner arrow, and the fixed 200px min-height is released. */
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
  .cat-card { min-height: 0; padding: 14px 12px 32px; gap: 3px; border-radius: 16px; }
  .cat-card__icon { font-size: 24px; margin-bottom: 2px; }
  .cat-card__label { font-size: 14px; line-height: 1.16; }
  .cat-card__desc { font-size: 11.5px; opacity: .72; }
  .cat-card__cta { display: none; }
  .cat-card::before {
    content: "→"; position: absolute; bottom: 10px; right: 13px;
    font-size: 15px; font-weight: 800; color: var(--cat-color); line-height: 1;
  }
  .cat-card::after { width: 84px; height: 84px; top: -28px; right: -28px; }

  /* Add-to-cart button → compact cart-with-+ icon on phones, so it fits the narrow
     2-up card without the label wrapping. The text label stays in the DOM (font-size:0)
     so screen readers still announce it. Out-of-stock (disabled) buttons keep text. */
  .product-card__actions .btn--primary:not([disabled]),
  .combo-card__cta .btn--primary {
    font-size: 0;
    min-height: 44px;
    padding-left: 8px; padding-right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='20.5' r='1.3'/%3E%3Ccircle cx='18' cy='20.5' r='1.3'/%3E%3Cpath d='M2.5 4h2l1.9 9.8a1.3 1.3 0 0 0 1.28 1.05h8.3a1.3 1.3 0 0 0 1.28-1.03L19.5 7H6.2'/%3E%3Cpath d='M11 10.5h4'/%3E%3Cpath d='M13 8.5v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
  }
  /* "You save" badge overflowed the narrow card — let the price row wrap so it drops
     to its own line instead of spilling outside the box. */
  .combo-card__price { flex-wrap: wrap; row-gap: 4px; }
  .combo-card__save { margin-left: 0; }
  .shop-block + .shop-block { margin-top: 24px; }
  /* "Browse" in-page jump links + the value note are secondary on a phone:
     everything they point to is already on the page, so hide them. */
  .shop-nav__group:first-child { display: none; }
  .shop-sidebar__note { display: none; }
  .shop-sidebar__title {
    font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--st-muted); margin-bottom: 8px; font-family: var(--font-body);
  }
  .shop-nav__group { margin-bottom: 12px; }
  .shop-toolbar { margin-bottom: 16px; padding-bottom: 10px; }
  .shop-main__title { font-size: 22px; }

  /* Hero: full-width stacked CTAs (both stay tappable, neither clips the edge)
     and a tighter benefit-badge row. */
  .hero__cta { gap: 10px; margin-bottom: 24px; }
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  .hero__badges { gap: 10px 18px; }

  /* Tighten the section rhythm site-wide (home page especially). */
  .section, .section--tight { padding: 34px 0; }
  .section__head { margin-bottom: 22px; }
  .section__eyebrow { font-size: 22px; }
  .section__title { font-size: clamp(26px, 7.5vw, 34px); }
  .section__sub { font-size: 15px; margin-top: 8px; }
}

/* ============================================================
   6-BOX OTP INPUT (enhanced by assets/js/otp-input.js)
   ============================================================ */
.otp6 { display: flex; gap: 8px; margin: 2px 0; }
.otp6__box {
  flex: 1 1 0; min-width: 0; max-width: 54px;
  aspect-ratio: 3 / 4; height: auto; padding: 0;
  text-align: center; font-size: 22px; font-weight: 700; color: var(--st-green-deep);
  border: 1.5px solid var(--st-line); border-radius: 10px; background: #fff;
  font-family: inherit; -webkit-appearance: none; appearance: none;
}
.otp6__box:focus { outline: none; border-color: var(--st-green); box-shadow: 0 0 0 3px rgba(31,74,46,0.12); }
/* The original input is kept for its value/validation but visually removed. */
.otp6__hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; opacity: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0); pointer-events: none; }
@media (max-width: 380px) { .otp6 { gap: 6px; } .otp6__box { font-size: 19px; } }

/* ============================================================
   INLINE OTP MODAL (checkout — passwordless account confirm)
   ============================================================ */
.otp-modal { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 20px; }
.otp-modal.open { display: flex; }
.otp-modal__backdrop { position: absolute; inset: 0; background: rgba(20,51,32,0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.otp-modal__card {
  position: relative; z-index: 1; box-sizing: border-box; min-width: 0;
  width: min(420px, calc(100vw - 32px));
  background: var(--st-white, #fff); border-radius: 18px; padding: 30px 24px 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.28); text-align: center;
}
.otp-modal__close { position: absolute; top: 14px; right: 16px; border: 0; background: none; font-size: 18px; color: var(--st-muted); cursor: pointer; line-height: 1; }
.otp-modal__title { font-family: var(--font-display); font-size: 26px; color: var(--st-green-deep); font-weight: 600; margin-bottom: 8px; }
.otp-modal__sub { font-size: 14px; color: var(--st-muted); line-height: 1.55; margin-bottom: 18px; }
.otp-modal__sub strong { color: var(--st-green-deep); }
.otp-modal__input {
  width: 100%; text-align: center; font-size: 26px; font-weight: 700; letter-spacing: 8px;
  padding: 14px 12px; border: 2px solid var(--st-line); border-radius: 12px; margin-bottom: 14px;
  color: var(--st-green-deep);
}
.otp-modal__input:focus { outline: none; border-color: var(--st-green); }
.otp-modal__error { color: var(--st-pom); font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.otp-modal__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; margin-top: 16px; }
.otp-modal__link { background: none; border: 0; color: var(--st-pom); font-weight: 700; font-size: 13px; cursor: pointer; padding: 4px; }
.otp-modal__link:hover { text-decoration: underline; }
.otp-modal__link[disabled] { color: var(--st-muted); cursor: default; text-decoration: none; }

/* ---- Combo 1+1 banner + combo cart line ---- */
.combo-card__bogo {
  display: block;
  background: linear-gradient(90deg, rgba(230,57,70,0.12), rgba(201,160,74,0.12));
  border: 1px dashed var(--st-pom);
  color: var(--st-pom-deep);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 10px;
  margin: 2px 0 6px;
}
.cart-item--combo { align-items: flex-start; }
.cart-item__combo-contents {
  font-size: 12px;
  color: var(--st-muted);
  line-height: 1.4;
  margin: 2px 0 4px;
}

/* ---- Out-of-stock product card ---- */
.product-card--oos .product-card__media { opacity: 0.6; filter: grayscale(0.3); }
.product-card__badge--oos { background: var(--st-muted) !important; color: #fff !important; }
/* Pre-order: gold badge + a small ship-note line above the CTA. */
.product-card__badge--preorder { background: linear-gradient(135deg, var(--st-gold, #C9A04A), #A9852F) !important; color: #fff !important; }
.combo-card__tag--preorder { background: linear-gradient(135deg, var(--st-gold, #C9A04A), #A9852F) !important; color: #fff !important; }
.product-card__preorder-note {
  font-size: 12.5px; font-weight: 600; color: var(--st-green-deep);
  background: var(--st-gold-soft, #F5E9C9); border-radius: 8px;
  padding: 7px 10px; margin: 0 0 12px; line-height: 1.35;
}
.pdp-preorder-note {
  font-size: 14px; color: var(--st-green-deep); line-height: 1.5;
  background: var(--st-gold-soft, #F5E9C9); border: 1px solid var(--st-gold, #C9A04A);
  border-radius: 12px; padding: 12px 16px; margin: 0 0 16px;
}
.pdp-preorder-note strong { color: var(--st-gold, #A9852F); }
/* Shared pre-order banner (checkout top + bottom, cart drawer). */
.preorder-banner { border: 1px solid var(--st-gold, #C9A04A); background: var(--st-gold-soft, #F5E9C9); border-radius: 12px; padding: 14px 16px; }
.preorder-banner__h { color: var(--st-green-deep); font-size: 15px; font-weight: 700; }
.preorder-banner p { margin: 6px 0 0; font-size: 13.5px; color: var(--st-ink); line-height: 1.55; }
/* Compact variant for the cart drawer. */
.cart-preorder { margin: 0 0 14px; }
.cart-preorder .preorder-banner__h { font-size: 14px; }
.cart-preorder p { font-size: 12.5px; }

/* Dedicated product pages: photo gallery in the hero media slot */
.lp-hero__media.has-photos { display: block; align-self: start; width: 100%; }
.lp-hero__media.has-photos .pdp-gallery__main { box-shadow: 0 20px 50px rgba(0,0,0,0.10); }

/* Certificate of Analysis (COA) download — product pages */
.coa-section { padding-top: 0; }
.coa-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1.5px solid var(--st-line); border-radius: 14px; background: var(--st-white, #fff); text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.coa-card:hover { border-color: var(--st-green); box-shadow: 0 8px 24px rgba(31, 74, 46, .08); }
.coa-card__icon { font-size: 28px; line-height: 1; flex: none; }
.coa-card__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.coa-card__body strong { color: var(--st-green-deep); font-size: 15px; }
.coa-card__body small { color: var(--st-muted); font-size: 13px; line-height: 1.5; }
.coa-card__cta { flex: none; font-weight: 700; font-size: 13px; color: var(--st-green-deep); border: 1.5px solid var(--st-green); border-radius: 10px; padding: 9px 14px; white-space: nowrap; }
.coa-card:hover .coa-card__cta { background: var(--st-green); color: #fff; }
@media (max-width: 560px) { .coa-card { flex-wrap: wrap; } .coa-card__cta { width: 100%; text-align: center; } }

/* ===== In-app WebView embed mode (?embed=app) =====================
   The mobile app opens content pages (Science/blog, quiz, events, …) inside a
   WebView with ?embed=app. gate.js stamps <html data-embed="app"> so we strip
   the storefront chrome — the page reads as embedded content, not a full site
   the user can wander off into. */
html[data-embed="app"] .header,
html[data-embed="app"] .footer,
html[data-embed="app"] .announce,
html[data-embed="app"] [class^="stw-"],
html[data-embed="app"] [class*=" stw-"] { display: none !important; }
html[data-embed="app"] body { padding-top: 0 !important; margin-top: 0 !important; }