/* ==========================================================================
   SAATVIK HERBS — BASE
   Reset, typography, and every component that appears on more than one page:
   grain, nav, drawer, buttons, labels, rules, footer, reveal system.
   Page-specific layout lives in its own stylesheet (e.g. home.css).

   Written mobile-first throughout. The only breakpoint that matters is
   1024px: below it is the phone/tablet design, above it is the desktop
   design, and in several places those are genuinely different layouts
   built from the same markup rather than one layout that stretches.
   ========================================================================== */

/* ------------------------------------------------------------------ RESET */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the fixed nav instead of hiding beneath it. */
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  background: var(--alabaster);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Nothing on this site is allowed to cause sideways scroll on a phone.
     Full-bleed art is clipped here rather than being individually policed. */
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Visible, on-brand focus. Never remove this — keyboard users navigate the
   whole purchase flow with it. */
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.on-dark :focus-visible, .on-olive :focus-visible { outline-color: var(--ochre); }

::selection { background: var(--ochre); color: var(--charcoal); }

/* ------------------------------------------------------------------- GRAIN
   A single fixed paper-grain layer over the entire document. This is the
   quiet trick that makes the page feel printed rather than rendered, and it
   is also what keeps section boundaries from reading as hard cuts — the same
   texture runs across every band, so bands feel like areas of one sheet
   rather than stacked slides. Inline SVG turbulence: no image request. */
.grain {
  position: fixed;
  inset: -50%;              /* oversized so the animation never shows an edge */
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- LAYOUT */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 860px; }
.wrap--wide   { max-width: 1560px; }

.band { padding-block: var(--section); position: relative; }
.band--tight { padding-block: calc(var(--section) * 0.62); }

/* Full-bleed escape hatch for art inside a .wrap. */
.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.measure { max-width: var(--measure); }

/* -------------------------------------------------------------- TYPOGRAPHY */

.display, .chapter-title, .h2, .quote {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--heading);
  letter-spacing: var(--tr-display);
  word-spacing: var(--ws-display);
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}
.chapter-title {
  font-size: var(--fs-chapter);
  line-height: 0.92;
}
.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
}
.h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--heading);
}

/* Italic is the brand's one emphasis gesture — an inflection in a headline,
   never a whole paragraph. Terracotta on light, ochre on dark (see tokens). */
.display em, .chapter-title em, .h2 em, .quote em {
  font-style: italic;
  color: var(--accent);
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 46ch;
  text-wrap: pretty;
}

.quote {
  font-size: var(--fs-quote);
  line-height: 1.14;
  text-wrap: balance;
}

.body-copy { color: var(--text); }
.body-copy + .body-copy { margin-top: var(--s-sm); }
.muted { color: var(--text-muted); }

/* The tracked micro-label. Carries the "editorial" register everywhere:
   eyebrows, chapter numbers, column heads, table labels. */
.label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--accent);
}
.label--muted { color: var(--text-muted); }

/* Label with the hairline that runs off to the edge of its column — the
   recurring "printed page" motif that ties sections to each other. */
.label-rule {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
}
.label-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-firm);
}

.hairline { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* --------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3rem;              /* ≥48px touch target on phones */
  padding: 0.9em 1.6em;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease-soft),
              color var(--t-fast) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft);
}
.btn:active { transform: scale(0.975); }

/* The arrow slides on hover — a small acknowledgement that the control is
   live, consistent across every button on the site. */
.btn .arw { transition: transform var(--t-fast) var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.btn--primary { background: var(--charcoal); color: var(--alabaster); }
.btn--primary:hover { background: var(--olive); }

.btn--ochre { background: var(--ochre); color: var(--charcoal); }
.btn--ochre:hover { background: var(--ochre-soft); }

.btn--terracotta { background: var(--terracotta); color: var(--alabaster); }
.btn--terracotta:hover { background: var(--terracotta-deep); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--rule-firm);
}
.btn--ghost:hover { border-color: currentColor; background: rgba(28,38,31,0.04); }
.on-dark .btn--ghost:hover, .on-olive .btn--ghost:hover { background: rgba(249,246,240,0.08); }

.btn--light { background: var(--alabaster); color: var(--charcoal); }
.btn--light:hover { background: var(--oat); }

.btn--lg { min-height: 3.5rem; padding: 1.05em 2rem; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

/* Text link that underlines from the left on hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--accent);
  padding-block: 0.35em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t-med) var(--ease);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow .arw { transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover .arw { transform: translateX(4px); }

/* ------------------------------------------------------------------- PILL */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.9em;
  border: 1px solid var(--rule-firm);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.pill--ochre { background: var(--ochre); border-color: transparent; color: var(--charcoal); }

/* --------------------------------------------------------------- MEDIA ART
   Every image slot on the site. Keeps its own aspect ratio so the layout
   never reflows when a real photo replaces a placeholder, and clips a
   subtle inner ring so art always sits on the page rather than floating. */
.art {
  position: relative;
  overflow: hidden;
  background: var(--oat);
  border-radius: var(--r-md);
}
.art > img { width: 100%; height: 100%; object-fit: cover; }
.art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(28,38,31,0.07);
  pointer-events: none;
}
.art--arch { border-radius: var(--arch); }
.art--square { aspect-ratio: 1; }
.art--portrait { aspect-ratio: 4 / 5; }
.art--tall { aspect-ratio: 3 / 4; }

/* ─── Price, with the printed MRP beside it ──────────────────────────────
   The saving is real: 650 is the number on the bottle. It is struck through
   rather than merely quieter, because a crossed-out price is the one visual
   convention every shopper already reads correctly. */
.price-mrp {
  color: var(--text-muted);
  text-decoration-thickness: 1px;
  font-size: 0.62em;
  font-weight: 400;
}
.price-save {
  /* Baseline, not middle. Vertically centring a small chip against a 3.25rem
     price floats it well above the numbers it belongs to. */
  display: inline-block;
  margin-left: 0;
  padding: 0.3em 0.7em;
  border-radius: var(--r-pill);
  background: var(--oat-deep);
  color: var(--terracotta);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.prepaid-note {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.prepaid-note strong { color: var(--olive); font-weight: 600; }

/* ===================================================================== NAV
   Mobile: a slim fixed bar — wordmark, one primary action, menu button.
   Desktop (≥1024px): the same bar grows an inline link row.
   The bar starts transparent over the hero art and turns to solid paper on
   scroll, so the hero image is never cropped by a nav strip. */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--s-md);
  padding-inline: var(--gutter);
  color: var(--alabaster);
  transition: background-color var(--t-med) var(--ease-soft),
              color var(--t-med) var(--ease-soft),
              box-shadow var(--t-med) var(--ease-soft),
              border-color var(--t-med) var(--ease-soft);
  border-bottom: 1px solid transparent;
}
/* Interior pages have no dark hero, so their nav is solid from the start.
   `html:not(.js)` catches the case where main.js never arrives: the bar can
   only be transparent if something is going to turn it solid on scroll, and
   without JS nothing is — a transparent bar over the light sections lower
   down is an invisible nav. */
html:not(.js) .site-nav,
.site-nav.is-solid,
.site-nav.is-scrolled {
  background: var(--glass-light);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  color: var(--charcoal);
  border-bottom-color: var(--line-dark);
}

.nav-mark {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-right: auto;
  white-space: nowrap;
}
.nav-mark em { font-style: italic; }

.nav-links { display: none; }

.nav-cta { display: none; }

/* ---- Cart link ----------------------------------------------------------
   Always present, on every page and every width — a returning customer with
   something already in the cart should not have to find a product page to get
   back to it. Icon only on a phone, where the bar has a wordmark and a menu
   button and no room for a third word. */
.nav-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  padding: 0.5rem;
  color: inherit;
  border-radius: var(--r-pill);
  transition: color var(--t-fast) var(--ease-soft);
}
.nav-cart:hover { color: var(--accent); }
.nav-cart svg { display: block; }
.nav-cart-label { display: none; }

.drawer-cart { margin-top: var(--s-md); }
.drawer-cart .btn { width: 100%; color: var(--alabaster); border-color: var(--line-light-firm); }

/* Hamburger — three rules that become an X. */
.nav-toggle {
  width: 2.75rem;
  height: 2.75rem;
  margin-right: calc(var(--s-2xs) * -1);
  display: grid;
  place-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) linear;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- Mobile drawer: full-screen, typographic, thumb-reachable ---- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--charcoal);
  color: var(--alabaster);
  padding: calc(var(--nav-h) + var(--s-lg)) var(--gutter) var(--s-xl);
  display: flex;
  flex-direction: column;
  /* Clipped away rather than hidden, so it can animate open. */
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.drawer.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path var(--t-med) var(--ease), visibility 0s;
}
.drawer-links { display: flex; flex-direction: column; }
.drawer-links a {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 11vw, 3.5rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  padding-block: 0.18em;
  border-bottom: 1px solid var(--line-light);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-sm);
  /* Staggered entrance, set per-link with --i in the markup. */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  transition-delay: calc(60ms * var(--i, 0));
}
.drawer.is-open .drawer-links a { opacity: 1; transform: none; }
.drawer-links a span {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ochre);
}
.drawer-foot {
  margin-top: auto;
  padding-top: var(--s-lg);
  display: grid;
  gap: var(--s-xs);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.drawer-foot a { color: var(--alabaster); }

/* Lock the page behind an open drawer. */
body.is-locked { overflow: hidden; }

/* ------------------------------------------------- MOBILE STICKY BUY BAR
   Phones only. Once the hero has scrolled away, the two purchase routes are
   always one thumb-tap away — the single highest-leverage mobile commerce
   pattern, and the reason the desktop nav CTA isn't just shrunk down. */
.buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  gap: var(--s-2xs);
  padding: var(--s-2xs) var(--s-2xs) calc(var(--s-2xs) + env(safe-area-inset-bottom));
  background: var(--glass-light);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid var(--line-dark);
  transform: translateY(110%);
  transition: transform var(--t-med) var(--ease);
}
.buybar.is-visible { transform: none; }
.buybar .btn { flex: 1; min-height: 3rem; padding-inline: 0.75em; font-size: 0.875rem; }
.buybar .btn small { display: block; font-weight: 400; opacity: 0.75; font-size: 0.6875rem; }

/* ================================================================== FOOTER */
.site-footer {
  background: var(--charcoal-deep);
  color: var(--alabaster);
  padding-block: var(--s-xl) var(--s-lg);
  /* Sits above the mobile buy bar. */
  padding-bottom: calc(var(--s-lg) + 4.5rem);
}
.footer-top {
  display: grid;
  gap: var(--s-xl);
  padding-bottom: var(--s-xl);
  border-bottom: 1px solid var(--line-light);
}
.footer-mark {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 12vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.footer-mark em { font-style: italic; color: var(--ochre); }
.footer-blurb {
  margin-top: var(--s-sm);
  max-width: 34ch;
  color: #A5A7A1;
  font-size: var(--fs-small);
}
.footer-head {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: var(--s-sm);
}
.footer-list { display: grid; gap: 0.6rem; font-size: var(--fs-small); }
.footer-list a { color: #D5D3CC; transition: color var(--t-fast) var(--ease-soft); }
.footer-list a:hover { color: var(--alabaster); }
.footer-contact { display: grid; gap: var(--s-sm); font-size: var(--fs-small); color: #D5D3CC; }
.footer-contact strong { display: block; color: var(--alabaster); font-weight: 600; }
.footer-bottom {
  padding-top: var(--s-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs) var(--s-md);
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: #8E918B;
}
/* Compliance §22 — a herbal-products site must not imply medical treatment.
   Stated once, globally, so it can never be missing from a page. */
.footer-disclaimer {
  margin-top: var(--s-md);
  padding-top: var(--s-md);
  border-top: 1px solid var(--line-light);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: #8E918B;
  max-width: 78ch;
}

/* ============================================================ STUB PAGES
   Placeholder routes. Styled properly rather than left bare, because a
   half-built page that looks broken is its own trust problem. */
.stub {
  min-height: 68vh;
  padding-top: calc(var(--nav-h) + var(--section));
  padding-bottom: var(--section);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stub-intro { margin-top: var(--s-md); }
.stub-help  { margin-top: var(--s-lg); font-size: var(--fs-small); }
.stub-help a { color: var(--accent); }

.stub-note {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--s-md);
  padding: 0.7em 1.1em;
  border: 1px dashed var(--rule-firm);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stub-plan {
  margin-top: var(--s-lg);
  display: grid;
  gap: var(--s-sm);
  max-width: 58ch;
}
.stub-plan li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--s-sm);
  align-items: baseline;
  padding-top: var(--s-sm);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.stub-plan li b {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--accent);
  font-weight: 400;
}

/* ============================================================== REVEAL SYS
   One mechanism for all entrance animation. Elements start displaced and are
   released by IntersectionObserver. Grouped children stagger via --i so a
   section arrives as a phrase rather than all at once — this is what makes
   the page feel choreographed instead of merely animated.

   ── READ THIS BEFORE CHANGING ANY SELECTOR BELOW ────────────────────────
   Every hidden state is scoped to `html.js`, and NOTHING here hides content
   on its own. That is deliberate and load-bearing.

   The obvious way to build a reveal system is to hide elements in CSS and
   let JavaScript show them. It also means one failed request — a 404 on
   main.js, a wrong MIME type from a host, a subfolder deploy where /assets/
   doesn't resolve, an over-eager cache — leaves every word on the page
   invisible while the coloured bands still paint perfectly. The page looks
   designed and empty, and nothing in the console explains why.

   So the default state is *visible*. `html.js` is added by an inline script
   in partials/head.php, which also starts a failsafe timer: if main.js has
   not set window.__shBooted within 1.2s, the class comes off again and the
   page renders in full, un-animated. Losing an animation is a small failure;
   losing the copy is not.

   Consequence: never write `.reveal { opacity: 0 }` outside a `.js` scope.
   ------------------------------------------------------------------------ */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  transition-delay: calc(80ms * var(--i, 0));
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Art reveals by uncovering rather than sliding — a wipe, like a page being
   turned, with the image itself drifting in behind the mask. */
/* The wipe is applied to the IMAGE, never to the observed figure. Chromium
   folds a target's own clip-path into the rect IntersectionObserver measures,
   so a figure clipped to `inset(0 0 100% 0)` reports intersectionRatio 0 and
   never crosses the 0.08 threshold that would un-clip it — the element hides
   itself out of its own reveal and the photograph never appears at all. The
   figure keeps its parchment fill and arch radius, so the shape is on the page
   from the first paint and only the photograph wipes in. */
.js .reveal-art > img,
.js .reveal-art > .art-inner {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.14);
  transition: clip-path 1.1s var(--ease), transform 1.6s var(--ease);
}
.js .reveal-art.is-in > img,
.js .reveal-art.is-in > .art-inner {
  clip-path: inset(0 0 0 0);
  transform: none;
}

/* Headline that arrives line by line, each line rising out of a clipping
   mask. The mask carries a descender allowance in padding, cancelled by an
   equal negative margin: `overflow: hidden` on a box set at 0.86 line-height
   would otherwise slice the tail off every g, j, y and p in the headline.
   The inner element is pushed 130% down rather than 100% so it still starts
   fully outside the taller mask. */
.reveal-lines .line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
.js .reveal-lines .line-inner {
  display: block;
  transform: translateY(130%);
  transition: transform 1s var(--ease);
  transition-delay: calc(90ms * var(--i, 0));
}
.js .reveal-lines.is-in .line-inner { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal-art > img,
  .js .reveal-art > .art-inner { clip-path: none; transform: none; }
  .js .reveal-lines .line-inner { transform: none; }
  .buybar { transition: none; }
}

/* ======================================================= DESKTOP (≥1024px)
   Above this line the nav becomes a full editorial bar and the mobile-only
   commerce furniture is removed. */
@media (min-width: 1024px) {
  :root { --nav-h: 5rem; }

  .nav-mark { font-size: 1.65rem; margin-right: var(--s-xl); }

  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--s-md);
    margin-right: auto;
    font-size: var(--fs-small);
    /* 600 rather than 500: weight 500 was this rule's only user on the whole
       site, and a fifth font file is not worth one nav row. */
    font-weight: 600;
  }
  .nav-links a {
    position: relative;
    padding-block: 0.4em;
  }
  /* Underline grows from the left; the active page keeps it drawn. */
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-med) var(--ease);
  }
  .nav-links a:hover::after,
  .nav-links a[aria-current="page"]::after { transform: scaleX(1); }

  .nav-cta { display: inline-flex; min-height: 2.75rem; padding: 0.7em 1.4em; }
  .nav-toggle { display: none; }

  /* The link row already takes the free space at this width, so the cart sits
     next to the Shop button rather than pushing away from it. */
  .nav-cart { margin-left: 0; padding: 0.5rem 0.75rem; font-size: var(--fs-small); font-weight: 600; }
  .nav-cart-label { display: inline; }
  .drawer-cart { display: none; }
  .drawer { display: none; }
  .buybar { display: none; }

  .site-footer { padding-bottom: var(--s-lg); }
  .footer-top {
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: var(--s-lg);
  }

  .stub { min-height: 70vh; }
  .stub-plan { grid-template-columns: 1fr 1fr; gap: var(--s-sm) var(--s-lg); max-width: none; }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════ SHARED CONTENT COMPONENTS
   Used by the home page and by both product pages. They live here rather
   than in home.css so the two never drift apart — a benefit list has to look
   identical wherever a customer meets it. */

.benefits { display: grid; }
.benefits li {
  padding: var(--s-sm) 0 var(--s-sm) 1.85rem;
  border-top: 1px solid var(--rule);
  position: relative;
  font-size: var(--fs-small);
}
.benefits li:last-child { border-bottom: 1px solid var(--rule); }
/* Small ochre lozenge instead of a bullet — quiet, and it survives on both grounds. */
.benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--s-sm) + 0.62em);
  width: 0.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ochre);
}

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fact { background: var(--bg); padding: var(--s-sm) var(--s-md); }
.fact dt {
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.fact dd {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--olive);
  text-wrap: balance;
}
@media (min-width: 640px) {
  .fact dd { font-size: 1.35rem; }
}


.index-head { margin: var(--s-md) 0 var(--s-xl); }

/* The formulation, set as a printed index: numbered, ruled, two columns on a
   phone. A herbal buyer reads this list before anything else on the page, so
   it gets real typographic weight rather than being folded into an accordion. */
.index-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s-md);
}
.index-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.2;
  transition: color var(--t-fast) var(--ease-soft);
}
.index-list li:hover { color: var(--ochre); }
.index-n {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ochre);
}
/* A formulation of two or three entries in a four-column grid reads as a list
   that failed to load. One ruled column at larger type reads as a short list
   on purpose — which, for a product whose whole point is that there is very
   little in it, is the more honest impression as well as the better-looking
   one. */
.index-list--few {
  grid-template-columns: 1fr;
  max-width: 34ch;
}
.index-list--few li { font-size: 1.2rem; padding: 0.95rem 0; }

.index-note { margin-top: var(--s-lg); font-size: var(--fs-small); max-width: 52ch; }

/* The index widens with the viewport rather than the page it sits on, so the
   responsive steps belong with the component. */
@media (min-width: 640px) {
  .index-list { grid-template-columns: repeat(3, 1fr); }
  .index-list--few { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) {
  .index-head { max-width: 18ch; }
  .index-list { grid-template-columns: repeat(4, 1fr); column-gap: var(--s-lg); }
  .index-list li { font-size: 1.25rem; padding: 0.95rem 0; }
  /* Re-asserted after the column rules above, which are more specific by
     order rather than by weight. */
  .index-list--few { grid-template-columns: 1fr; }
  .index-list--few li { font-size: 1.5rem; padding: 1.15rem 0; }
}
@media (min-width: 1440px) {
  .index-list li { font-size: 1.35rem; }
}


/* ═════════════════════════════════════════════════════════════ REVIEWS
   One card, three homes: the home rail, a product page rail, and the grid on
   /reviews/. Keeping the styles here rather than in home.css is what stops a
   review looking like a different kind of object depending on where you meet
   it. Layout around the card is per-page; the card itself never changes. */
.review {
  scroll-snap-align: center;
  flex: 0 0 min(80vw, 21rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  padding: var(--s-md);
  background: var(--alabaster-lift);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.review-stars { color: var(--ochre); letter-spacing: 0.18em; font-size: 0.8rem; }
.review-text {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--olive);
}
.review-who { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; }
.review-avatar {
  width: 2.375rem; height: 2.375rem;
  flex: none;
  border-radius: 50%;
  background: var(--olive);
  color: var(--alabaster);
  display: grid;
  place-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.review-who strong { display: block; font-size: var(--fs-small); font-weight: 600; }
.review-who small { display: block; font-size: var(--fs-micro); color: var(--text-muted); }


/* Devanagari opts out of the display setting entirely. Instrument Serif has
   no Devanagari, so these fall to a system face — and the tight tracking and
   added word-spacing that suit a Latin serif are actively wrong for a script
   with a connecting headline stroke. Named Windows/Android/macOS faces first
   so it lands on a real Devanagari font rather than whatever the browser
   improvises. */
.review-text[lang="mr"],
.review-text[lang="hi"] {
  font-family: 'Nirmala UI', 'Noto Sans Devanagari', 'Mangal', 'Kohinoor Devanagari', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: 0;
  word-spacing: normal;
}

/* A translation is a courtesy under the review, never a replacement for it —
   set quieter and smaller so the customer's own words stay the review. */
.review-trans {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-muted);
  padding-top: var(--s-2xs);
  border-top: 1px dashed var(--rule);
}
.review-trans-label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent-quiet);
  margin-bottom: 0.2rem;
}

.review-meta { min-width: 0; }
.review-src { white-space: nowrap; }

/* Swipe hint and the "read them all" link share a row. */
.reviews-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  margin-top: var(--s-sm);
}
.rail-hint {
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity var(--t-med) var(--ease-soft);
}
.reviews-note {
  margin-top: var(--s-md);
  font-size: var(--fs-micro);
  line-height: 1.7;
  max-width: 64ch;
}

@media (min-width: 1024px) {
  .rail-hint { display: none; }
  .reviews-foot { justify-content: flex-end; }
}

/* ------------------------------------------------------------- SKIP LINK
   Keyboard users land here first and can jump the nav straight into the
   page. Off-screen until focused, then a real, visible control. */
.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: calc(var(--z-drawer) + 10);
  padding: 0.75em 1.2em;
  border-radius: var(--r-pill);
  background: var(--charcoal);
  color: var(--alabaster);
  font-size: var(--fs-small);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus-visible { transform: none; }