/* ==========================================================================
   NIVAH — atta.nivah.life
   Single stylesheet. Tokens first, then primitives, then components.
   Rule: no hard-coded hex or px spacing below the token block.
   Bump ?v=N in every HTML file after any change here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* brand */
  --nv-primary:          #365D39;
  --nv-primary-hover:    #2B4A2E;
  --nv-primary-subtle:   #EAF0E9;
  --nv-secondary:        #C89A43;
  --nv-secondary-subtle: #F7F0E2;

  /* surfaces */
  --nv-bg:             #FAF8F3;
  --nv-surface:        #FFFFFF;
  --nv-surface-raised: #FFFFFF;
  --nv-border:         #E8E3D8;
  --nv-scrim:          rgba(29, 29, 31, .48);

  /* text */
  --nv-text:           #1D1D1F;
  --nv-text-secondary: #4A4A4A;
  --nv-text-muted:     #6B6B6B;
  --nv-text-on-primary:#FFFFFF;

  /* semantic */
  --nv-success: #2E7D32;
  --nv-error:   #B3261E;
  --nv-warning: #8A6100;
  --nv-info:    #1F5F8B;
  --nv-success-subtle: #E8F1E8;
  --nv-error-subtle:   #FBEAE9;

  /* spacing — 8pt with 4pt half-step */
  --nv-space-3xs: 2px;
  --nv-space-2xs: 4px;
  --nv-space-xs:  8px;
  --nv-space-sm:  12px;
  --nv-space-md:  16px;
  --nv-space-lg:  24px;
  --nv-space-xl:  32px;
  --nv-space-2xl: 48px;
  --nv-space-3xl: 64px;
  --nv-space-4xl: 96px;

  /* radius */
  --nv-radius-xs:   8px;
  --nv-radius-sm:   12px;
  --nv-radius-md:   16px;
  --nv-radius-lg:   20px;
  --nv-radius-xl:   28px;
  --nv-radius-full: 999px;

  /* type */
  --nv-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --nv-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nv-font-deva:    'Tiro Devanagari Hindi', Georgia, serif;

  /* elevation — warm-tinted, never neutral grey */
  --nv-shadow-xs: 0 1px 2px rgba(45, 35, 20, .05);
  --nv-shadow-sm: 0 1px 3px rgba(45, 35, 20, .07), 0 1px 2px rgba(45, 35, 20, .04);
  --nv-shadow-md: 0 4px 12px rgba(45, 35, 20, .08);
  --nv-shadow-lg: 0 12px 28px rgba(45, 35, 20, .10);
  --nv-shadow-focus: 0 0 0 3px rgba(54, 93, 57, .35);

  /* Tonal elevation, Material 3 style: a raised surface is not a shadowed
     white box, it is a surface tinted a little further toward the brand
     colour. Reads as depth without any of the drop-shadow heaviness that
     makes a site look like a template. */
  --nv-surface-1: color-mix(in srgb, var(--nv-primary) 4%,  var(--nv-surface));
  --nv-surface-2: color-mix(in srgb, var(--nv-primary) 7%,  var(--nv-surface));
  --nv-surface-3: color-mix(in srgb, var(--nv-primary) 10%, var(--nv-surface));
  --nv-surface-4: color-mix(in srgb, var(--nv-primary) 12%, var(--nv-surface));

  /* State layers: Material 3 expresses hover/focus/press as a translucent
     wash of the element's own colour, not a different colour. */
  --nv-state-hover: 8%;
  --nv-state-focus: 10%;
  --nv-state-press: 12%;

  /* motion */
  --nv-fast:   150ms;
  --nv-normal: 200ms;
  --nv-slow:   300ms;
  --nv-ease:        cubic-bezier(.2, 0, 0, 1);
  --nv-decelerate:  cubic-bezier(0, 0, 0, 1);
  /* Material 3 emphasized curves — a slow start and a long, soft settle.
     Used only where something genuinely travels. */
  --nv-emphasized:            cubic-bezier(.2, 0, 0, 1);
  --nv-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1);
  --nv-emphasized-accelerate: cubic-bezier(.3, 0, .8, .15);

  /* sizes */
  --nv-touch:      48px;
  --nv-input-h:    56px;
  --nv-header-h:   56px;
  --nv-bottomnav-h:64px;
  --nv-wrap:       1200px;

  /* z */
  --nv-z-sticky: 100;
  --nv-z-header: 200;
  --nv-z-nav:    250;
  --nv-z-scrim:  300;
  --nv-z-modal:  400;
  --nv-z-toast:  500;
}

@media (min-width: 768px) {
  :root { --nv-header-h: 72px; }
}

[data-theme="dark"] {
  --nv-primary:          #7FB37F;
  --nv-primary-hover:    #94C294;
  --nv-primary-subtle:   #1B2A1C;
  --nv-secondary:        #D9B067;
  --nv-secondary-subtle: #2A2318;

  --nv-bg:             #121211;
  --nv-surface:        #1C1C1A;
  --nv-surface-raised: #242422;
  --nv-border:         #33332F;
  --nv-scrim:          rgba(0, 0, 0, .64);

  --nv-text:           #F5F4F0;
  --nv-text-secondary: #B8B6AE;
  --nv-text-muted:     #8F8D86;
  --nv-text-on-primary:#0F1A10;

  --nv-success: #6FBF73;
  --nv-error:   #F2B8B5;
  --nv-warning: #E8B33C;
  --nv-info:    #8FC5E8;
  --nv-success-subtle: #16241A;
  --nv-error-subtle:   #2C1917;

  /* dark mode expresses elevation through surface lightness, not shadow */
  --nv-shadow-xs: none;
  --nv-shadow-sm: none;
  --nv-shadow-md: none;
  --nv-shadow-lg: none;
  --nv-shadow-focus: 0 0 0 3px rgba(127, 179, 127, .45);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip`, not `hidden`: `hidden` on the root/body makes body a scroll
     container, which stops window scroll events, IntersectionObserver and
     lazy-loading from ever firing. */
  overflow-x: clip;
}

body {
  margin: 0;
  padding: 0;
  background: var(--nv-bg);
  color: var(--nv-text);
  font-family: var(--nv-font-body);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

/* room for the fixed mobile bottom nav */
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--nv-bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
}

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

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

a { color: var(--nv-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--nv-shadow-focus);
  border-radius: var(--nv-radius-xs);
}

::selection { background: var(--nv-primary-subtle); color: var(--nv-text); }

/* --------------------------------------------------------------------------
   3. TYPE SCALE
   -------------------------------------------------------------------------- */
.t-display, .t-h1, .t-h2 {
  font-family: var(--nv-font-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  color: var(--nv-text);
  text-wrap: balance;
}

.t-display { font-size: 34px; line-height: 1.08; letter-spacing: -.02em; }
.t-h1      { font-size: 28px; line-height: 1.15; letter-spacing: -.015em; }
.t-h2      { font-size: 24px; line-height: 1.20; letter-spacing: -.01em; }
.t-h3      { font-size: 20px; line-height: 1.30; font-weight: 600; letter-spacing: -.005em; }
.t-h4      { font-size: 18px; line-height: 1.35; font-weight: 600; }
.t-body-lg { font-size: 17px; line-height: 1.60; }
.t-body    { font-size: 16px; line-height: 1.60; }
.t-body-sm { font-size: 15px; line-height: 1.55; }
.t-caption { font-size: 14px; line-height: 1.45; }
.t-micro   { font-size: 12px; line-height: 1.40; font-weight: 500; }

.t-label {
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .t-display { font-size: 52px; }
  .t-h1      { font-size: 40px; }
  .t-h2      { font-size: 32px; }
  .t-h3      { font-size: 24px; }
  .t-h4      { font-size: 20px; }
  .t-body-lg { font-size: 18px; }
}

.t-muted     { color: var(--nv-text-muted); }
.t-secondary { color: var(--nv-text-secondary); }
.t-nums      { font-variant-numeric: tabular-nums; }
.t-deva      { font-family: var(--nv-font-deva); }

/* prose measure — never wider than ~65 characters */
.prose { max-width: 65ch; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--nv-wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) { .wrap { padding-inline: 32px; } }
@media (min-width: 1024px){ .wrap { padding-inline: 48px; } }

.section { padding-block: var(--nv-space-3xl); }
@media (min-width: 768px) { .section { padding-block: var(--nv-space-4xl); } }

.section--tight { padding-block: var(--nv-space-2xl); }
.section--surface { background: var(--nv-surface); }
.section--gold    { background: var(--nv-secondary-subtle); }
.section--green   { background: var(--nv-primary-subtle); }

.stack > * + * { margin-top: var(--nv-space-md); }
.stack-lg > * + * { margin-top: var(--nv-space-lg); }
.stack-xl > * + * { margin-top: var(--nv-space-xl); }

.grid { display: grid; gap: var(--nv-space-md); }
@media (min-width: 768px) { .grid { gap: var(--nv-space-lg); } }

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--products { grid-template-columns: 1fr; }
@media (min-width: 480px)  { .grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.grid--cards { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.section-head { max-width: 60ch; margin-bottom: var(--nv-space-xl); }
.section-head > * + * { margin-top: var(--nv-space-sm); }

/* breadcrumb links need a real tap height, not just a line box */
nav[aria-label="Breadcrumb"] a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-space-xs);
  color: var(--nv-primary);
}

.skip-link {
  position: absolute;
  left: var(--nv-space-md);
  top: -100px;
  z-index: var(--nv-z-toast);
  background: var(--nv-primary);
  color: var(--nv-text-on-primary);
  padding: var(--nv-space-sm) var(--nv-space-md);
  border-radius: var(--nv-radius-xs);
  transition: top var(--nv-fast) var(--nv-ease);
}
.skip-link:focus { top: var(--nv-space-md); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nv-space-xs);
  min-height: var(--nv-touch);
  padding: 0 var(--nv-space-lg);
  border: 1.5px solid transparent;
  border-radius: var(--nv-radius-full);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--nv-fast) var(--nv-ease),
    border-color var(--nv-fast) var(--nv-ease),
    transform var(--nv-fast) var(--nv-ease),
    box-shadow var(--nv-fast) var(--nv-ease);
}

.btn svg { width: 20px; height: 20px; flex: none; }

.btn--primary {
  background: var(--nv-primary);
  color: var(--nv-text-on-primary);
}

.btn--secondary {
  background: transparent;
  color: var(--nv-primary);
  border-color: var(--nv-primary);
}

.btn--ghost {
  background: transparent;
  color: var(--nv-text);
  padding-inline: var(--nv-space-sm);
}

.btn--on-image {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  color: var(--nv-text);
}

.btn--lg { min-height: 56px; padding-inline: var(--nv-space-xl); font-size: 17px; }
/* 44, not 40 — the same floor the chips set. */
.btn--sm { min-height: 44px; padding-inline: var(--nv-space-md); font-size: 15px; }
.btn--block { display: flex; width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover   { background: var(--nv-primary-hover); transform: translateY(-1px); box-shadow: var(--nv-shadow-sm); }
  .btn--secondary:hover { background: var(--nv-primary-subtle); transform: translateY(-1px); }
  .btn--ghost:hover     { background: var(--nv-primary-subtle); }
  .btn--on-image:hover  { background: #fff; transform: translateY(-1px); }
}

.btn:active { transform: scale(.98); box-shadow: none; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .38;
  cursor: not-allowed;
  transform: none;
}

.btn[aria-busy="true"] { pointer-events: none; }

/* --------------------------------------------------------------------------
   6. FORM CONTROLS
   -------------------------------------------------------------------------- */
.field { position: relative; }

.field__input {
  width: 100%;
  height: var(--nv-input-h);
  padding: var(--nv-space-lg) var(--nv-space-md) var(--nv-space-xs);
  background: var(--nv-surface);
  color: var(--nv-text);
  border: 1.5px solid var(--nv-border);
  border-radius: var(--nv-radius-sm);
  transition: border-color var(--nv-normal) var(--nv-ease), box-shadow var(--nv-normal) var(--nv-ease);
}

textarea.field__input { height: auto; min-height: 120px; padding-top: var(--nv-space-lg); resize: vertical; }

.field__label {
  position: absolute;
  left: var(--nv-space-md);
  /* Anchored to the input's own height, NOT 50% of the .field container —
     help and error text inside the container made "50%" land on the input's
     bottom border, striking the label through it. */
  top: calc(var(--nv-input-h) / 2);
  transform: translateY(-50%);
  color: var(--nv-text-muted);
  pointer-events: none;
  transition: all var(--nv-normal) var(--nv-ease);
}

textarea.field__input + .field__label { top: var(--nv-space-lg); transform: none; }

.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  top: 10px;
  transform: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--nv-text-secondary);
}

.field__input:focus {
  outline: none;
  border-color: var(--nv-primary);
  box-shadow: var(--nv-shadow-focus);
}

.field__input[aria-invalid="true"] { border-color: var(--nv-error); }

.field__help { display: block; margin-top: var(--nv-space-xs); color: var(--nv-text-muted); }
.field__error { display: flex; gap: var(--nv-space-2xs); margin-top: var(--nv-space-xs); color: var(--nv-error); }

/* selection controls */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-space-2xs);
  /* 44px, not 40: WCAG 2.2 AAA target size. Chips are the densest control on
     the site, so they set the floor for everything else. */
  min-height: 44px;
  /* Never shrink in a flex row. Chips sit in flex containers (filterbar,
     topic rails, policy jump-links); default flex-shrink compressed them
     below content width and the ripple's overflow:hidden then CLIPPED the
     label text. Scroll or wrap instead — never squash. */
  flex-shrink: 0;
  padding: 0 var(--nv-space-md);
  background: var(--nv-surface);
  color: var(--nv-text);
  border: 1.5px solid var(--nv-border);
  border-radius: var(--nv-radius-full);
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--nv-fast) var(--nv-ease);
}

.chip[aria-pressed="true"], .chip[aria-selected="true"] {
  background: var(--nv-primary-subtle);
  border-color: var(--nv-primary);
  color: var(--nv-primary);
}

/* Selection is never colour-only — every chip carries a tick.
   The tick is always in the layout and only fades in, otherwise selecting a
   chip widens it and the whole row reflows under the user's finger. For the
   same reason the label does not go bold on selection. */
.chip::before {
  content: "✓";
  opacity: 0;
  transition: opacity var(--nv-fast) var(--nv-ease);
}
.chip[aria-pressed="true"]::before, .chip[aria-selected="true"]::before { opacity: 1; }

/* segmented control */
.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--nv-space-2xs);
  padding: var(--nv-space-2xs);
  background: var(--nv-primary-subtle);
  border-radius: var(--nv-radius-full);
}

.segmented__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--nv-touch);
  padding: var(--nv-space-xs);
  background: transparent;
  border: 0;
  border-radius: var(--nv-radius-full);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  color: var(--nv-text-secondary);
  transition: background var(--nv-slow) var(--nv-ease), color var(--nv-slow) var(--nv-ease);
}

.segmented__option[aria-checked="true"] {
  background: var(--nv-surface);
  color: var(--nv-primary);
  box-shadow: var(--nv-shadow-xs);
}

.segmented__note { font-size: 12px; font-weight: 500; color: var(--nv-text-muted); }
.segmented__option[aria-checked="true"] .segmented__note { color: var(--nv-success); }

/* stepper */
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--nv-border); border-radius: var(--nv-radius-full); }
.stepper__btn {
  width: var(--nv-touch); height: var(--nv-touch);
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--nv-radius-full);
  cursor: pointer; font-size: 20px; color: var(--nv-primary);
}
.stepper__value { min-width: 40px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   7. HEADER / NAV
   -------------------------------------------------------------------------- */
.announce {
  background: var(--nv-primary);
  color: var(--nv-text-on-primary);
  text-align: center;
}
.announce__inner { display: flex; align-items: center; justify-content: center; gap: var(--nv-space-sm); min-height: 36px; padding-block: var(--nv-space-xs); }
.announce__close {
  background: none; border: 0; color: inherit; cursor: pointer;
  width: 44px; height: 44px; flex: none; margin: -4px -10px -4px 0;
  display: grid; place-items: center; font-size: 20px; line-height: 1;
}

.header {
  position: sticky;
  top: 0;
  z-index: var(--nv-z-header);
  background: color-mix(in srgb, var(--nv-bg) 92%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--nv-normal) var(--nv-ease);
}
.header.is-scrolled { border-bottom-color: var(--nv-border); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--nv-space-md);
  min-height: var(--nv-header-h);
}

.logo { display: flex; align-items: center; gap: var(--nv-space-xs); text-decoration: none; color: var(--nv-text); margin-right: auto; }
.logo svg { width: 28px; height: 28px; color: var(--nv-primary); }
.logo__name { font-family: var(--nv-font-display); font-weight: 600; font-size: 20px; letter-spacing: .04em; }
.logo__domain { display: block; font-size: 10px; letter-spacing: .1em; color: var(--nv-text-muted); text-transform: lowercase; }

.nav-desktop { display: none; }
@media (min-width: 1024px) {
  .nav-desktop { display: flex; align-items: center; gap: var(--nv-space-lg); }
  .nav-desktop a {
    color: var(--nv-text-secondary);
    text-decoration: none;
    font-size: 15px;
    padding: var(--nv-space-xs) 0;
    border-bottom: 2px solid transparent;
  }
  .nav-desktop a:hover { color: var(--nv-text); }
  .nav-desktop a[aria-current="page"] { color: var(--nv-primary); font-weight: 600; border-bottom-color: var(--nv-primary); }
}

.pill-new {
  margin-left: var(--nv-space-2xs);
  padding: 2px 6px;
  border-radius: var(--nv-radius-full);
  background: var(--nv-secondary-subtle);
  color: var(--nv-warning);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

.header__actions { display: flex; align-items: center; gap: var(--nv-space-2xs); }

.icon-btn {
  width: var(--nv-touch); height: var(--nv-touch);
  flex: none;
  display: grid; place-items: center;
  position: relative;
  background: transparent; border: 0; border-radius: var(--nv-radius-full);
  color: var(--nv-text); cursor: pointer;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--nv-primary-subtle); } }
.icon-btn svg { width: 22px; height: 22px; }

.cart-count {
  position: absolute; top: 6px; right: 5px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--nv-secondary); color: #1D1D1F;
  border-radius: var(--nv-radius-full);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cart-count[hidden] { display: none; }

/* the pincode chip in the header — the highest-value trust element on the site */
.pin-chip {
  display: none;
  align-items: center; gap: var(--nv-space-2xs);
  min-height: 44px; padding: 0 var(--nv-space-sm);
  max-width: 46vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: var(--nv-success-subtle);
  border: 1px solid transparent;
  border-radius: var(--nv-radius-full);
  color: var(--nv-success);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.pin-chip.is-set { display: inline-flex; }
@media (max-width: 767px) { .pin-chip { font-size: 12px; padding-inline: var(--nv-space-xs); } }

/* the header is crowded at 375px — the theme toggle lives in the menu sheet
   on mobile, where there is room for a proper label */
.theme-toggle { display: none; }
@media (min-width: 1024px) { .theme-toggle { display: grid; } }

/* mobile menu sheet */
.sheet {
  position: fixed; inset: 0;
  z-index: var(--nv-z-modal);
  display: flex; flex-direction: column;
  background: var(--nv-bg);
  transform: translateY(100%);
  transition: transform var(--nv-slow) var(--nv-decelerate);
}
.sheet[hidden] { display: none; }
.sheet.is-open { transform: translateY(0); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--nv-header-h); }
.sheet__body { flex: 1; overflow-y: auto; padding-bottom: var(--nv-space-3xl); }
.sheet__link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px;
  padding-block: var(--nv-space-sm);
  border-bottom: 1px solid var(--nv-border);
  font-family: var(--nv-font-display); font-size: 22px; font-weight: 600;
  color: var(--nv-text); text-decoration: none;
}

/* bottom nav */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--nv-z-nav);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--nv-surface) 94%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--nv-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 768px) { .bottom-nav { display: none; } }

.bottom-nav a {
  position: relative;
  min-height: var(--nv-bottomnav-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--nv-space-2xs);
  color: var(--nv-text-muted); text-decoration: none;
  font-size: 11px; font-weight: 500;
}
.bottom-nav a svg { width: 22px; height: 22px; }
.bottom-nav a[aria-current="page"] { color: var(--nv-primary); font-weight: 600; }
.bottom-nav a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--nv-primary);
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--nv-space-2xl) var(--nv-space-3xl); }
@media (min-width: 1024px) { .hero { padding-block: var(--nv-space-3xl) var(--nv-space-4xl); } }

.hero__grid { display: grid; gap: var(--nv-space-xl); align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--nv-space-4xl); } }

.hero__copy > * + * { margin-top: var(--nv-space-md); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--nv-space-sm); }
@media (max-width: 479px) { .hero__actions .btn { flex: 1 1 100%; } }

.hero__media { position: relative; }
.hero__media img { width: 100%; border-radius: var(--nv-radius-lg); }

.proof-chip {
  position: absolute;
  right: var(--nv-space-md);
  bottom: var(--nv-space-md);
  display: flex; align-items: center; gap: var(--nv-space-xs);
  max-width: calc(100% - var(--nv-space-xl));
  padding: var(--nv-space-sm) var(--nv-space-md);
  background: color-mix(in srgb, var(--nv-surface) 94%, transparent);
  backdrop-filter: blur(12px);
  border-radius: var(--nv-radius-sm);
  box-shadow: var(--nv-shadow-md);
  font-size: 13px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nv-success); flex: none; }

/* --------------------------------------------------------------------------
   9. PINCODE CHECKER
   -------------------------------------------------------------------------- */
.pincode {
  padding: var(--nv-space-md);
  background: var(--nv-surface);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-md);
}
.pincode__row { display: flex; gap: var(--nv-space-xs); }
.pincode__row .field { flex: 1; }
.pincode__result { margin-top: var(--nv-space-sm); }

.result {
  display: flex; gap: var(--nv-space-xs);
  padding: var(--nv-space-sm) var(--nv-space-md);
  border-radius: var(--nv-radius-sm);
  border-left: 4px solid;
}
.result--ok    { background: var(--nv-success-subtle); border-color: var(--nv-success); color: var(--nv-success); }
.result--warn  { background: var(--nv-secondary-subtle); border-color: var(--nv-warning); color: var(--nv-warning); }
.result--error { background: var(--nv-error-subtle); border-color: var(--nv-error); color: var(--nv-error); }
.result strong { display: block; color: var(--nv-text); }

/* --------------------------------------------------------------------------
   10. TRUST STRIP
   -------------------------------------------------------------------------- */
.trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nv-space-md);
  padding-block: var(--nv-space-xl);
  border-block: 1px solid var(--nv-border);
}
@media (min-width: 768px) { .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nv-space-lg); } }

.trust__item { display: flex; gap: var(--nv-space-sm); }
.trust__item svg { width: 24px; height: 24px; flex: none; color: var(--nv-secondary); }
.trust__item b { display: block; font-size: 15px; }
.trust__item span { font-size: 13px; color: var(--nv-text-muted); }

/* --------------------------------------------------------------------------
   11. CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--nv-surface);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-md);
  overflow: hidden;
  transition: box-shadow var(--nv-slow) var(--nv-ease), border-color var(--nv-slow) var(--nv-ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: var(--nv-shadow-md); border-color: transparent; }
  .card:hover .card__img img { transform: scale(1.03); }
}

.card__img { position: relative; overflow: hidden; background: var(--nv-secondary-subtle); }
.card__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform var(--nv-slow) var(--nv-ease); }
.card__img--wide img { aspect-ratio: 16 / 9; }

.badge {
  position: absolute;
  top: var(--nv-space-md);
  left: var(--nv-space-md);
  padding: var(--nv-space-2xs) var(--nv-space-sm);
  background: color-mix(in srgb, var(--nv-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--nv-radius-full);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--nv-warning);
}

.card__body { display: flex; flex-direction: column; gap: var(--nv-space-xs); padding: var(--nv-space-md); flex: 1; }
.card__body .btn { margin-top: auto; }

.card__title { font-size: 18px; font-weight: 600; line-height: 1.3; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card is the link */

.card__meta { font-size: 13px; color: var(--nv-text-muted); }
.card__price { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.card__price small { font-size: 13px; font-weight: 400; color: var(--nv-text-muted); }

.card__fresh { display: flex; align-items: center; gap: var(--nv-space-2xs); font-size: 13px; color: var(--nv-success); font-weight: 500; }

/* the add button sits above the whole-card link */
.card .btn { position: relative; z-index: 1; }

/* wisdom card */
.wisdom {
  padding: var(--nv-space-lg);
  background: var(--nv-secondary-subtle);
  border-radius: var(--nv-radius-md);
}
.wisdom > * + * { margin-top: var(--nv-space-xs); }
.wisdom svg { width: 28px; height: 28px; color: var(--nv-secondary); }
.wisdom__term { font-family: var(--nv-font-display); font-size: 22px; font-weight: 600; }
.wisdom__deva { font-family: var(--nv-font-deva); font-size: 18px; color: var(--nv-text-secondary); }
.wisdom__src  { font-size: 12px; color: var(--nv-text-muted); font-style: italic; }

/* --------------------------------------------------------------------------
   12. COMPARISON
   -------------------------------------------------------------------------- */
.compare { display: grid; gap: var(--nv-space-md); }
@media (min-width: 768px) { .compare { grid-template-columns: 1fr 1fr; gap: var(--nv-space-lg); } }

.compare__col { padding: var(--nv-space-lg); border-radius: var(--nv-radius-md); border: 1px solid var(--nv-border); }
.compare__col--ours  { background: var(--nv-primary-subtle); border-color: transparent; }
.compare__col--theirs{ background: var(--nv-surface); }
.compare__col h3 { margin-bottom: var(--nv-space-md); }

.compare__list { list-style: none; margin: 0; padding: 0; }
.compare__list li { display: flex; gap: var(--nv-space-xs); padding-block: var(--nv-space-xs); font-size: 15px; }
.compare__list li + li { border-top: 1px solid color-mix(in srgb, var(--nv-border) 60%, transparent); }
.compare__list svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.compare__col--ours   svg { color: var(--nv-success); }
.compare__col--theirs svg { color: var(--nv-text-muted); }

/* --------------------------------------------------------------------------
   13. STEPS RAIL
   -------------------------------------------------------------------------- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--nv-space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--nv-space-md);
  margin-inline: -20px;
  padding-inline: 20px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

@media (min-width: 768px) {
  .rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: var(--nv-space-lg);
  }
}

.step > * + * { margin-top: var(--nv-space-xs); }
.step img { border-radius: var(--nv-radius-md); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.step__n {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--nv-radius-full);
  background: var(--nv-primary); color: var(--nv-text-on-primary);
  font-size: 14px; font-weight: 700;
}

/* --------------------------------------------------------------------------
   14. ORDER TRACKER
   -------------------------------------------------------------------------- */
.tracker { list-style: none; margin: 0; padding: 0; }
.tracker__step { position: relative; display: flex; gap: var(--nv-space-md); padding-bottom: var(--nv-space-lg); }
.tracker__step:last-child { padding-bottom: 0; }
.tracker__step::before {
  content: ""; position: absolute; left: 13px; top: 28px; bottom: 0;
  width: 2px; background: var(--nv-border);
}
.tracker__step:last-child::before { display: none; }
.tracker__step.is-done::before { background: var(--nv-primary); }

.tracker__dot {
  position: relative; z-index: 1;
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--nv-bg);
  border: 2px solid var(--nv-border);
  font-size: 13px;
}
.is-done .tracker__dot { background: var(--nv-primary); border-color: var(--nv-primary); color: var(--nv-text-on-primary); }
.is-current .tracker__dot { border-color: var(--nv-secondary); box-shadow: 0 0 0 4px var(--nv-secondary-subtle); }
.tracker__label { font-weight: 600; }
.tracker__time { font-size: 13px; color: var(--nv-text-muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   15. ACCORDION / FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--nv-border); }
.faq details { border-bottom: 1px solid var(--nv-border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nv-space-md);
  min-height: var(--nv-touch);
  padding-block: var(--nv-space-md);
  font-size: 17px; font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--nv-primary); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq__body { padding-bottom: var(--nv-space-md); color: var(--nv-text-secondary); max-width: 65ch; }

/* --------------------------------------------------------------------------
   16. NOTES / ALERTS
   -------------------------------------------------------------------------- */
.note {
  padding: var(--nv-space-lg);
  border-radius: var(--nv-radius-md);
  border-left: 4px solid var(--nv-secondary);
  background: var(--nv-secondary-subtle);
}
.note > * + * { margin-top: var(--nv-space-xs); }

.verify-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nv-space-md); }
.verify-list li { display: flex; gap: var(--nv-space-sm); }
.verify-list svg { width: 20px; height: 20px; color: var(--nv-primary); flex: none; margin-top: 2px; }
.verify-list b { display: block; }
.verify-list span { color: var(--nv-text-secondary); font-size: 15px; }

/* a visible marker for facts that must be filled in before launch */
.todo {
  background: var(--nv-error-subtle);
  color: var(--nv-error);
  border-radius: var(--nv-radius-xs);
  padding: 1px 6px;
  font-size: 14px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--nv-surface); border-top: 1px solid var(--nv-border); padding-block: var(--nv-space-3xl) var(--nv-space-xl); }
.footer__grid { display: grid; gap: var(--nv-space-xl); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.footer h3 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nv-text-muted); margin-bottom: var(--nv-space-sm); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nv-space-xs); }
.footer a {
  color: var(--nv-text-secondary); text-decoration: none; font-size: 15px;
  display: inline-flex; align-items: center; min-height: 44px;
}
.footer a:hover { color: var(--nv-primary); text-decoration: underline; }

.footer__bottom {
  margin-top: var(--nv-space-xl);
  padding-top: var(--nv-space-lg);
  border-top: 1px solid var(--nv-border);
  display: flex; flex-wrap: wrap; gap: var(--nv-space-md);
  align-items: center; justify-content: space-between;
  font-size: 14px; color: var(--nv-text-muted);
}

/* --------------------------------------------------------------------------
   18. STICKY MOBILE CTA
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--nv-bottomnav-h) + env(safe-area-inset-bottom, 0px));
  z-index: var(--nv-z-sticky);
  padding: var(--nv-space-sm) 20px;
  background: color-mix(in srgb, var(--nv-bg) 94%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--nv-border);
  transform: translateY(140%);
  transition: transform var(--nv-slow) var(--nv-ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* --------------------------------------------------------------------------
   19. TOAST
   -------------------------------------------------------------------------- */
.toast-region {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nv-bottomnav-h) + var(--nv-space-md) + env(safe-area-inset-bottom, 0px));
  z-index: var(--nv-z-toast);
  width: calc(100% - 40px); max-width: 420px;
  display: grid; gap: var(--nv-space-xs);
  pointer-events: none;
}
@media (min-width: 768px) { .toast-region { left: var(--nv-space-lg); transform: none; bottom: var(--nv-space-lg); } }

.toast {
  display: flex; align-items: center; gap: var(--nv-space-sm);
  padding: var(--nv-space-sm) var(--nv-space-md);
  background: var(--nv-text);
  color: var(--nv-bg);
  border-radius: var(--nv-radius-sm);
  box-shadow: var(--nv-shadow-lg);
  font-size: 15px;
  animation: toast-in var(--nv-normal) var(--nv-decelerate);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   20. SHOP: filters, quiz, table
   -------------------------------------------------------------------------- */
.filterbar {
  position: sticky;
  top: var(--nv-header-h);
  z-index: var(--nv-z-sticky);
  display: flex; gap: var(--nv-space-xs);
  padding-block: var(--nv-space-sm);
  background: var(--nv-bg);
  border-bottom: 1px solid var(--nv-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.filterbar::-webkit-scrollbar { display: none; }

/* Two facets in one scroll row read as twelve identical chips unless the
   groups are named. The label travels with its group. */
.filterbar__group {
  display: flex;
  align-items: center;
  gap: var(--nv-space-xs);
  flex: none;
}
.filterbar__group + .filterbar__group {
  margin-left: var(--nv-space-sm);
  padding-left: var(--nv-space-sm);
  border-left: 1px solid var(--nv-border);
}
.filterbar__legend {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nv-text-muted);
  white-space: nowrap;
}

.quiz { padding: var(--nv-space-lg); background: var(--nv-primary-subtle); border-radius: var(--nv-radius-md); }
.quiz__q + .quiz__q { margin-top: var(--nv-space-lg); }

.quiz__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nv-space-md);
  min-height: var(--nv-touch);
  cursor: pointer;
  list-style: none;
}
.quiz__summary::-webkit-details-marker { display: none; }
.quiz__summary > span { display: grid; gap: 2px; }
.quiz__summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--nv-primary);
  border-bottom: 2px solid var(--nv-primary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--nv-normal) var(--nv-ease);
}
.quiz[open] .quiz__summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
.quiz[open] .quiz__summary { margin-bottom: var(--nv-space-xs); }
.quiz__options { display: flex; flex-wrap: wrap; gap: var(--nv-space-xs); margin-top: var(--nv-space-xs); }

.table-scroll { overflow-x: auto; border: 1px solid var(--nv-border); border-radius: var(--nv-radius-md); background: var(--nv-surface); }
table.compare-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; }
.compare-table th, .compare-table td { padding: var(--nv-space-sm) var(--nv-space-md); text-align: left; border-bottom: 1px solid var(--nv-border); white-space: nowrap; }
.compare-table thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--nv-text-muted); }
.compare-table tbody th { position: sticky; left: 0; background: var(--nv-surface); font-weight: 600; }

/* --------------------------------------------------------------------------
   21. BLEND BUILDER
   -------------------------------------------------------------------------- */
.blend { display: grid; gap: var(--nv-space-xl); }
@media (min-width: 1024px) { .blend { grid-template-columns: 1.1fr .9fr; align-items: start; } }

.blend__panel { position: sticky; top: calc(var(--nv-header-h) + var(--nv-space-md)); padding: var(--nv-space-lg); background: var(--nv-surface); border: 1px solid var(--nv-border); border-radius: var(--nv-radius-md); }
.ring { width: 180px; height: 180px; margin-inline: auto; }
.ring circle { fill: none; stroke-width: 18; }

.blend__legend { list-style: none; margin: var(--nv-space-md) 0 0; padding: 0; display: grid; gap: var(--nv-space-xs); }
.blend__legend li { display: flex; align-items: center; gap: var(--nv-space-xs); font-size: 14px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }

.progress { height: 6px; border-radius: var(--nv-radius-full); background: var(--nv-border); overflow: hidden; }
.progress__bar { height: 100%; background: var(--nv-secondary); border-radius: inherit; transition: width var(--nv-slow) var(--nv-ease); }

/* --------------------------------------------------------------------------
   22. CONTACT CHANNELS
   -------------------------------------------------------------------------- */
.channels { display: grid; gap: var(--nv-space-md); }
@media (min-width: 768px) { .channels { grid-template-columns: repeat(3, 1fr); } }

.channel {
  display: flex; gap: var(--nv-space-md); align-items: flex-start;
  min-height: 88px;
  padding: var(--nv-space-lg);
  background: var(--nv-surface);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-md);
  text-decoration: none; color: var(--nv-text);
  transition: box-shadow var(--nv-slow) var(--nv-ease);
}
@media (hover: hover) and (pointer: fine) { .channel:hover { box-shadow: var(--nv-shadow-md); } }
.channel svg { width: 28px; height: 28px; color: var(--nv-primary); flex: none; }
.channel b { display: block; font-size: 17px; }
.channel span { font-size: 14px; color: var(--nv-text-muted); }

/* --------------------------------------------------------------------------
   22a. ARTICLE
   -------------------------------------------------------------------------- */
.reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: var(--nv-z-header);
  background: transparent;
  pointer-events: none;
}
.reading-progress span {
  display: block; height: 100%; width: 0;
  background: var(--nv-secondary);
  transition: width 80ms linear;
}

.article-body { font-size: 17px; line-height: 1.7; }
.article-body > * + * { margin-top: var(--nv-space-md); }
.article-body h2 {
  font-family: var(--nv-font-display);
  font-size: 24px; font-weight: 600; line-height: 1.25;
  margin-top: var(--nv-space-xl);
}
.article-body p { color: var(--nv-text-secondary); }
.article-body strong { color: var(--nv-text); font-weight: 600; }
.article-body ul, .article-body ol { padding-left: var(--nv-space-lg); color: var(--nv-text-secondary); }
.article-body li + li { margin-top: var(--nv-space-xs); }
.article-body em { font-style: italic; }

@media (min-width: 768px) { .article-body { font-size: 18px; } }

.article-sources { margin-top: var(--nv-space-2xl); padding-top: var(--nv-space-lg); border-top: 1px solid var(--nv-border); max-width: 65ch; }
.article-sources:empty { display: none; }
.article-sources ol { padding-left: var(--nv-space-lg); margin-top: var(--nv-space-xs); }
.article-sources li + li { margin-top: var(--nv-space-2xs); }

/* --------------------------------------------------------------------------
   22b. SHARE
   -------------------------------------------------------------------------- */
.share { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nv-space-xs); }
.share__btn {
  display: inline-flex; align-items: center; gap: var(--nv-space-2xs);
  min-height: 44px; padding: 0 var(--nv-space-md);
  background: transparent; color: var(--nv-text-secondary);
  border: 1.5px solid var(--nv-border); border-radius: var(--nv-radius-full);
  font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: border-color var(--nv-fast) var(--nv-ease), color var(--nv-fast) var(--nv-ease);
}
.share__btn svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .share__btn:hover { border-color: var(--nv-primary); color: var(--nv-primary); }
}

/* --------------------------------------------------------------------------
   22c. MATERIAL 3 STATE LAYERS & TONAL DEPTH
   Depth comes from surface tint, not from drop shadows. Interaction is a
   translucent wash of the element's own colour.
   -------------------------------------------------------------------------- */
.card,
.channel,
.blend__panel,
.pincode,
.table-scroll {
  background: var(--nv-surface-1);
}

.wisdom, .quiz, .note { position: relative; }

/* Buttons get a state layer instead of a colour swap, so the brand colour
   stays exactly the brand colour at every state. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--nv-fast) var(--nv-ease);
  pointer-events: none;
  z-index: -1;
}
.btn--primary::after, .btn--on-image::after { background: #000; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { opacity: calc(var(--nv-state-hover) / 100); }
}
.btn:focus-visible::after { opacity: calc(var(--nv-state-focus) / 100); }
.btn:active::after { opacity: calc(var(--nv-state-press) / 100); }

.chip { position: relative; overflow: hidden; isolation: isolate; }
.chip::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--nv-primary);
  opacity: 0;
  transition: opacity var(--nv-fast) var(--nv-ease);
  pointer-events: none; z-index: -1;
}
@media (hover: hover) and (pointer: fine) { .chip:hover::after { opacity: .08; } }
.chip:active::after { opacity: .12; }

/* Cards rise by tint first, shadow second — the shadow is only there to
   separate the tint from the page, not to do the lifting. */
@media (hover: hover) and (pointer: fine) {
  .card:hover { background: var(--nv-surface-2); }
  .channel:hover { background: var(--nv-surface-2); }
}

/* --------------------------------------------------------------------------
   22c2. M3 EXPRESSIVE TOUCHES
   The signature Material interactions: ink ripple on press, spring-flavoured
   settles on the emphasized curves, and animated disclosure. All decorative,
   all killed by prefers-reduced-motion.
   -------------------------------------------------------------------------- */

/* Ink ripple — the single most recognisable Material gesture. The span is
   injected by ui.js at the actual touch point. */
.icon-btn, .bottom-nav a, .segmented__option, .sheet__link, .share__btn {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .14;
  transform: scale(0);
  animation: nv-ripple 550ms var(--nv-emphasized-decelerate) forwards;
  pointer-events: none;
}
@keyframes nv-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* Hero copy arrives as a cascade — one pass, on load only. */
.hero__copy > * { animation: nv-rise 600ms var(--nv-emphasized-decelerate) both; }
.hero__copy > *:nth-child(1) { animation-delay: 0ms; }
.hero__copy > *:nth-child(2) { animation-delay: 70ms; }
.hero__copy > *:nth-child(3) { animation-delay: 140ms; }
.hero__copy > *:nth-child(4) { animation-delay: 210ms; }
.hero__copy > *:nth-child(5) { animation-delay: 280ms; }

/* Cards lift as well as tint on hover — M3 elevation change, 2px of travel. */
@media (hover: hover) and (pointer: fine) {
  .card { transition: box-shadow var(--nv-slow) var(--nv-ease),
                      border-color var(--nv-slow) var(--nv-ease),
                      background-color var(--nv-slow) var(--nv-ease),
                      transform var(--nv-slow) var(--nv-emphasized-decelerate); }
  .card:hover { transform: translateY(-3px); }
  .wisdom { transition: transform var(--nv-slow) var(--nv-emphasized-decelerate); }
  .wisdom:hover { transform: translateY(-2px); }
}

/* Chips pop very slightly when they become selected. */
.chip[aria-pressed="true"], .chip[aria-selected="true"] {
  animation: nv-chip-pop 250ms var(--nv-emphasized-decelerate);
}
@keyframes nv-chip-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}

/* The cart badge pops when the count goes up — feedback you can see from
   the corner of your eye without a toast. */
.cart-count.is-pop { animation: nv-pop 400ms var(--nv-emphasized-decelerate); }
@keyframes nv-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Flour burst on add-to-batch — six specks, half a second, then gone. */
.flour {
  position: fixed;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nv-secondary);
  opacity: .8;
  pointer-events: none;
  z-index: var(--nv-z-toast);
  animation: nv-flour 550ms var(--nv-emphasized-accelerate) forwards;
}
@keyframes nv-flour {
  to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; }
}

/* FAQ / accordion opens smoothly instead of snapping. Progressive: browsers
   without interpolate-size just snap as before. */
:root { interpolate-size: allow-keywords; }
.faq details::details-content {
  height: 0;
  overflow: clip;
  transition: height var(--nv-slow) var(--nv-emphasized-decelerate),
              content-visibility var(--nv-slow) allow-discrete;
}
.faq details[open]::details-content { height: auto; }

/* Inputs glow awake on focus — border colour plus a soft ring is already
   there; add a 1px lift so the active field reads as the raised one. */
.field__input:focus { transform: translateY(-1px); }
.field__input { transition: border-color var(--nv-normal) var(--nv-ease),
                            box-shadow var(--nv-normal) var(--nv-ease),
                            transform var(--nv-normal) var(--nv-emphasized-decelerate); }

/* --------------------------------------------------------------------------
   22d. AMBIENT MOTION
   The rule: nothing moves on its own except the one CTA we want noticed and
   the live "milling today" signal. Everything else moves only in response to
   the user. All of it stops under prefers-reduced-motion.
   -------------------------------------------------------------------------- */

/* The hero CTA breathes — 2px, 4s, barely perceptible. Enough to catch the
   eye in peripheral vision, not enough to nag. */
@keyframes nv-breathe {
  0%, 100% { transform: translateY(0); box-shadow: var(--nv-shadow-sm); }
  50%      { transform: translateY(-2px); box-shadow: var(--nv-shadow-md); }
}
.btn--attention { animation: nv-breathe 4s var(--nv-ease) infinite; }
@media (hover: hover) and (pointer: fine) {
  .btn--attention:hover { animation-play-state: paused; }
}

/* The arrow inside a CTA nudges forward on hover. */
.btn svg { transition: transform var(--nv-normal) var(--nv-emphasized); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover svg { transform: translateX(3px); }
}

/* The live signal on the hero: a slow pulse on the status dot only. */
@keyframes nv-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nv-success) 45%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.dot { animation: nv-pulse 2.8s var(--nv-decelerate) infinite; }

/* Flour settling into the hero image on first paint — one pass, never loops */
@keyframes nv-settle {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: none; }
}
.hero__media img { animation: nv-settle 900ms var(--nv-emphasized-decelerate) both; }

/* Cards in a grid arrive one after another rather than all at once. */
.reveal-stagger > * { animation: nv-rise 500ms var(--nv-emphasized-decelerate) both; }
@keyframes nv-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.reveal-stagger > *:nth-child(1) { animation-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { animation-delay: 60ms; }
.reveal-stagger > *:nth-child(3) { animation-delay: 120ms; }
.reveal-stagger > *:nth-child(4) { animation-delay: 180ms; }
.reveal-stagger > *:nth-child(5) { animation-delay: 240ms; }
.reveal-stagger > *:nth-child(n+6) { animation-delay: 300ms; }

/* --------------------------------------------------------------------------
   22e. AD SLOTS
   Reserved space for Google Ads / AdSense, held empty until a slot is
   actually filled. Two rules matter here:

   1. The slot collapses to zero height when empty. An empty reserved box
      is a hole in the page, and a premium brand cannot have holes.
   2. min-height is applied ONLY once filled, so an unfilled slot causes no
      layout shift at all — reserving space up front is the classic way
      sites wreck their own CLS score.
   -------------------------------------------------------------------------- */
.ad-slot {
  display: block;
  margin-inline: auto;
  text-align: center;
  /* nothing until it has content */
  height: 0;
  overflow: hidden;
}

.ad-slot.is-filled {
  height: auto;
  overflow: visible;
  margin-block: var(--nv-space-2xl);
}

.ad-slot.is-filled::before {
  content: "Advertisement";
  display: block;
  margin-bottom: var(--nv-space-xs);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nv-text-muted);
}

/* Keep ad creative inside the page's geometry rather than letting a network
   inject something full-bleed. */
.ad-slot iframe, .ad-slot ins, .ad-slot img {
  max-width: 100%;
  border-radius: var(--nv-radius-sm);
}

/* --------------------------------------------------------------------------
   23. REVEAL ON SCROLL
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--nv-ease), transform 400ms var(--nv-ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   24. REDUCED MOTION — reveals must end visible, never invisible
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  /* Ambient motion is decorative by definition — it simply stops. */
  .btn--attention, .dot, .hero__media img, .reveal-stagger > *,
  .hero__copy > *, .ripple, .flour, .cart-count.is-pop,
  .chip[aria-pressed="true"], .chip[aria-selected="true"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .flour, .ripple { display: none !important; }
}