/* ============================================================================
   hempkart.in — COMPONENT INVENTORY
   ----------------------------------------------------------------------------
   Source of truth: design-spec PART 1 §1.2 (the canonical, deduplicated
   component inventory) + foundation §2.5. EVERY class below maps 1:1 to a named
   component in that inventory; names are NOT drifted or renamed.

   Composition rule: every component is built from tokens.css custom properties
   only — no new colours, no raw hex, no new type sizes. If you need a value that
   isn't a token, that's a signal to stop, not to invent.

   Load order (see INTEGRATION-PATTERN.md): base.css -> tokens.css -> components.css
   ----------------------------------------------------------------------------
   THE LOAD-BEARING SEAM DISCIPLINE (foundation §3.4) — read before editing:
     • food lane  = sage / linen chrome; has price; uses .btn-primary add-to-cart.
     • gated lane = slate-violet (--color-gate) chrome; has NO price element and
       NEVER a .btn-primary / add-to-cart in ANY state; uses .btn-consult only.
   Three independent seam markers keep the two distinguishable: COLOUR, STRUCTURE
   (no add-to-cart on gated), PLACEMENT (gated only behind Guided Help -> Consult).
   This CSS encodes the COLOUR and STRUCTURE markers; templates encode PLACEMENT.
   ============================================================================ */


/* ===========================================================================
   GROUP A — GLOBAL CHROME / NAVIGATION
   design-spec §1.2 Group A
   =========================================================================== */

/* .nav-bar-desktop — desktop top nav: logo + 5 goal/utility destinations +
   search/account/cart. (foundation §1.6) Learn & Guided Help get .nav-link--trust
   (the trust-accent treatment). */
.nav-bar-desktop {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--gutter);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
}

/* Brand v2 wordmark (brand-system §A.3): lowercase Bricolage 700, tight tracking,
   "hempkart" in bark + ".in" muted, with the single −18° clay seed accent.
   The seed is a SEED, never a leaf — the entire brand motif in one ~9×6px shape. */
.nav-bar-desktop__logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-head);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--color-bark);
  text-decoration: none;
  margin-right: var(--space-4);
}
.nav-bar-desktop__logo .logo__tld {
  color: var(--color-ink-muted);   /* ".in" recedes so "hempkart" carries the weight */
}
/* The seed accent — a small clay oval, rotated −18°, dropped just after the wordmark. */
.logo__seed {
  display: inline-block;
  width: 9px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: rotate(-18deg);
  vertical-align: baseline;
  flex: 0 0 auto;
  align-self: center;
}
/* On dark grounds (footer) the whole mark flips to cream; ".in" at ~70% cream. */
.logo--on-dark { color: var(--color-cream); }
.logo--on-dark .logo__tld { color: rgba(243, 236, 221, .7); }

.nav-bar-desktop__nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 1;
}

.nav-bar-desktop__link {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-med);
  color: var(--color-ink);
  text-decoration: none;
  padding-block: var(--space-2);
}
.nav-bar-desktop__link:hover {
  color: var(--color-sage-dark);
}

/* trust-accent treatment for "New to Hemp" and "Guided Help" — reads as
   reassurance, not "more shopping" (foundation §1.6). */
.nav-link--trust {
  color: var(--color-trust-accent);
  font-weight: var(--weight-semi);
}
.nav-link--trust:hover {
  color: var(--color-trust);
  text-decoration: underline;
}

/* The visual divider " | " before "New to Hemp" (foundation §1.6 ASCII). */
.nav-bar-desktop__divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-line);
  margin-inline: var(--space-2);
}

/* Utility cluster (search / account / cart) — top-right, visually lighter. */
.nav-bar-desktop__utility {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
}
.nav-bar-desktop__utility-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
}
.nav-bar-desktop__utility-btn:hover {
  background: var(--color-linen);
}

/* Cart count bubble. NOTE: the NUMBER inside is a WC integration seam — the
   template marks it; this is just the bubble styling. It must NOT display a faked
   persisted count from the sample catalog (see integration-stubs.js). */
.nav-bar-desktop__cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--color-sage);
  color: var(--color-paper);
  font-size: var(--text-xs);
  line-height: 18px;
  text-align: center;
  font-weight: var(--weight-semi);
}

/* Desktop nav hidden on small screens (mobile uses .nav-drawer-mobile). */
@media (max-width: 900px) {
  .nav-bar-desktop__nav,
  .nav-bar-desktop__divider {
    display: none;
  }
}


/* .nav-drawer-mobile — mobile bottom tab bar: Shop / Learn / Guided Help / Cart
   (foundation §1.6). Fixed to the viewport bottom; depth capped at goal->PLP. */
.nav-drawer-mobile {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 900;
  background: var(--color-paper);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -1px 3px rgba(46, 58, 47, .08);
}

@media (max-width: 900px) {
  .nav-drawer-mobile {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}

.nav-drawer-mobile__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0 calc(var(--space-2) + env(safe-area-inset-bottom, 0));
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  text-decoration: none;
}
.nav-drawer-mobile__tab--active,
.nav-drawer-mobile__tab:hover {
  color: var(--color-sage-dark);
}
/* Learn & Guided Help tabs carry the trust accent. */
.nav-drawer-mobile__tab--trust {
  color: var(--color-trust-accent);
}


/* .goal-flyout — single-column flyout (<=6 links) opened by a browse-goal nav
   item; the structural antidote to the 155-link mega-menu (foundation §1.6).
   No brand list, no format dump, nothing disease-named — that is a content rule,
   enforced by the template, not this CSS. */
.goal-flyout {
  position: absolute;
  z-index: 800;
  min-width: 260px;
  max-width: 320px;
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.goal-flyout__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--text-base);
}
.goal-flyout__link:hover {
  background: var(--color-linen);
  color: var(--color-sage-dark);
}


/* .trust-strip — Zone-0 reassurance band on the nav top edge (design-spec §1.2,
   reconciled-in). Composes chip-trust ×<=3 + a review count over --color-trust-soft.
   The chip COPY is content's (bound by slot ID HP-Z0-a/b/c); this is the band. */
.trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-2) var(--gutter);
  background: var(--color-trust-soft);
  color: var(--color-trust);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
}
.trust-strip__reviews {
  font-weight: var(--weight-semi);
  /* The number here binds to LIVE review data (never round up) — the template
     marks it as a WC-INTEGRATION-SEAM. */
}


/* ===========================================================================
   GROUP B — BUTTONS
   design-spec §1.2 Group B
   =========================================================================== */

/* Shared button base (internal helper, not a named component). */
.btn-primary,
.btn-secondary,
.btn-consult {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-soft),
              color var(--motion-duration-fast) var(--motion-ease-soft),
              border-color var(--motion-duration-fast) var(--motion-ease-soft),
              transform var(--motion-duration-fast) var(--motion-ease-out),
              box-shadow var(--motion-duration-fast) var(--motion-ease-out);
}

/* .btn-primary — BRAND v2: clay-terracotta fill, cream text. THE FOOD-CART
   "Add to cart" / shop CTA — the brand's confidence on the buy CTA (brand-system
   §B.1 btn-primary note). Uses --color-accent-bold (#A8472A) for ≈5.4:1 AA with
   cream text. ALSO the SOLE age-confirm action inside .age-gate-modal (still NOT a
   buy there — an age-confirm). NEVER a purchase action in the gated lane
   (design-spec §1.2 / foundation §3). The gated lane uses .btn-consult only. */
.btn-primary {
  background: var(--color-accent-bold);
  color: var(--color-cream);
}
.btn-primary:hover {
  background: var(--color-accent);            /* warms toward the brighter accent on hover */
  color: var(--color-cream);
  transform: translateY(-2px);                /* −2px tactile press recipe (brand-system §D.3) */
  box-shadow: var(--motion-lift-shadow);
}
.btn-primary:active {
  transform: translateY(0);                   /* the snappy tactile "click" */
}

/* .btn-secondary — outline bark, transparent fill ("View vendor", "Learn more",
   "Continue shopping"). */
.btn-secondary {
  background: transparent;
  color: var(--color-bark);
  border-color: var(--color-bark);
}
.btn-secondary:hover {
  background: var(--color-bark);
  color: var(--color-cream);
  transform: translateY(-2px);                /* same gentle lift as the primary, calm sage/bark register */
  box-shadow: var(--motion-lift-shadow);
}
.btn-secondary:active {
  transform: translateY(0);
}

/* .btn-consult — THE GATED-LANE / CONSULT CTA.
   ----------------------------------------------------------------------------
   !!! LOAD-BEARING HONESTY RULE !!!
   .btn-consult is the ONLY CTA the gated (CBD/extract) lane EVER uses. It is
   --color-gate (slate-violet) fill — NEVER sage, NEVER green. Its label is
   "Start consultation" / "Request / Reserve" — NEVER "Add to cart". There is NO
   add-to-cart in the gated lane at ANY state of the state machine (foundation
   §3.3, design-spec §4.1). If you ever find yourself reaching for .btn-primary in
   a gated context, STOP — that is the exact mistake this whole package exists to
   prevent.
   ---------------------------------------------------------------------------- */
.btn-consult {
  background: var(--color-gate);
  color: var(--color-paper);
}
.btn-consult:hover {
  background: var(--color-bark);   /* darken toward bark; stays sober, never sage */
  color: var(--color-paper);
}

/* Full-width modifier (cards/panels). */
.btn--block { width: 100%; }

/* Disabled state. */
.btn-primary[disabled],
.btn-secondary[disabled],
.btn-consult[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ===========================================================================
   GROUP C — PRODUCT CARDS & MERCHANDISING RAILS
   design-spec §1.2 Group C
   =========================================================================== */

/* .card-product — the FOOD-LANE PLP/grid card: image, vendor-chip, title, rating,
   optional chip-nutrition/badge-coa, price, btn-primary add-to-cart.
   This is sage/linen chrome and DOES carry a price + add-to-cart (foundation §2.5). */
.card-product {
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  /* Brand v2 tactile hover (§D.3): the warm food card rises off the paper. */
  transition: transform var(--motion-duration-base) var(--motion-ease-out),
              box-shadow var(--motion-duration-base) var(--motion-ease-out);
}
/* Food-lane card lift — NOT applied to .card-product--gated (overridden below to
   stay sober: the gated lane never reads "pick me up"). */
.card-product:hover,
.card-product:focus-within {
  transform: translateY(var(--motion-lift));
  box-shadow: var(--motion-lift-shadow);
}
.card-product__media {
  aspect-ratio: 4 / 3;
  background: var(--color-linen);
}
.card-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-product__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  flex: 1;
}
.card-product__title {
  font-family: var(--font-head);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--weight-semi);
  color: var(--color-bark);
}
.card-product__rating {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.card-product__cues {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* Price + add-to-cart row. Pinned to the bottom of the card. */
.card-product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}
.card-product__price {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: var(--color-bark);
}


/* .card-product--gated — the FLOW-B card variant.
   ----------------------------------------------------------------------------
   STRUCTURAL SEAM MARKER. This variant:
     • uses slate-violet (--color-gate) chrome, NOT sage/linen;
     • has NO .card-product__price element — there is NO price for casual display;
     • has NO .card-product__foot add-to-cart — it uses .btn-consult ONLY.
   The template must NOT render a price node or a btn-primary inside this card.
   (foundation §2.5, §3.4; design-spec §1.2 Group C.)
   ---------------------------------------------------------------------------- */
.card-product--gated {
  border-color: var(--color-gate);
  background: var(--color-gate-soft);
}
/* SOBRIETY GUARDRAIL (art-direction §A.3 / §B.6): the gated lane keeps the warm
   craft layer (radius, base shadow, base-opacity grain) but gets NO tactile
   "pick me up" lift, NO accent hover kiss — it must never read as a buy moment. */
.card-product--gated:hover,
.card-product--gated:focus-within {
  transform: none;
  box-shadow: var(--shadow-card);
}
.card-product--gated .card-product__media {
  position: relative;
  background: #E3DFE8;   /* tinted from gate-soft family; image placeholder bed */
}
.card-product--gated .card-product__title {
  color: var(--color-gate);
}
/* The consult CTA sits where the price/add-to-cart would be on a food card —
   replacing it, never alongside it. */
.card-product--gated__cta {
  margin-top: auto;
  padding-top: var(--space-3);
}


/* .door-card — the equal-weight Zone-4 onboarding door (pairs with .finder-card).
   Heading + body + btn-secondary over paper/radius-md/shadow-card (design-spec §1.2). */
.door-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--motion-duration-base) var(--motion-ease-out),
              box-shadow var(--motion-duration-base) var(--motion-ease-out);
}
.door-card:hover,
.door-card:focus-within {
  transform: translateY(var(--motion-lift));
  box-shadow: var(--motion-lift-shadow);
}
.door-card__title {
  font-family: var(--font-head);
  font-size: var(--text-xl);
  color: var(--color-bark);
}
.door-card__body {
  font-size: var(--text-base);
  color: var(--color-ink-muted);
}


/* .finder-card — large entry tile for the Product Finder ("Not sure where to
   start? 4 quick steps"), btn-primary (foundation §2.5). [CHOICE-REDUCTION] */
.finder-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-trust-soft);
  border: 1px solid var(--color-trust);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.finder-card__title {
  font-family: var(--font-head);
  font-size: var(--text-xl);
  color: var(--color-trust);
}
.finder-card__body {
  font-size: var(--text-base);
  color: var(--color-ink);
}


/* .goal-rail — below-fold homepage per-goal horizontal rail of card-products +
   a "View all" link. FOOD-LANE ONLY (never a card-product--gated) (design-spec §1.2). */
.goal-rail {
  margin-block: var(--space-7);
}
.goal-rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.goal-rail__title {
  font-family: var(--font-head);
  font-size: var(--text-2xl);
  color: var(--color-bark);
}
.goal-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
}
.goal-rail__track > .card-product {
  scroll-snap-align: start;
}


/* .licensed-lane-door — the sober Guided-Help gated-lane entry block; the gated
   lane's ONLY homepage surface (design-spec §1.2). Composes lock-affordance +
   badge-gated + btn-consult over --color-gate-soft. NEVER an add-to-cart.
   The explainer COPY is a lawyer-gated [NEEDS-CONTENT/LEGAL] blank (slot HP-Z6-b)
   — the template renders it as a visible STUB, never invented copy. */
.licensed-lane-door {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-gate-soft);
  border: 1px solid var(--color-gate);
  border-left: 4px solid var(--color-gate);
  border-radius: var(--radius-md);
}
.licensed-lane-door__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.licensed-lane-door__title {
  font-family: var(--font-head);
  font-size: var(--text-xl);
  color: var(--color-gate);
}


/* ===========================================================================
   GROUP D — TRUST / VERIFICATION CUES
   design-spec §1.2 Group D
   =========================================================================== */

/* Shared chip/badge base (internal helper). */
.badge-coa,
.badge-gated,
.badge-licence,
.vendor-chip,
.chip-nutrition,
.chip-trust {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-med);
  white-space: nowrap;
}

/* .badge-coa — Lab-test / COA badge: gold ring + document glyph + "Lab tested ·
   COA"; links to the batch CoA. Renders ONLY where a CoA is on file (conditional
   render enforced in JS via coa_on_file). Copy -> PART 3 #4. (foundation §2.5) */
.badge-coa {
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  background: transparent;
  text-decoration: none;
}
.badge-coa:hover {
  background: rgba(176, 138, 62, .08);
}

/* .badge-gated — slate-violet "Licensed · consult required · to be taken under
   medical supervision" marker; the visual seam tag for Flow B. Never red, never
   "buy". (foundation §2.5) */
.badge-gated {
  color: var(--color-paper);
  background: var(--color-gate);
}

/* .badge-licence — gold FSSAI-licence cue. Renders ONLY when the live licence
   number is on file (NEVER faked). It is SUPPRESSED in this package because no
   number is on file (HK_FSSAI_LICENCE = null in integration-stubs.js). Style is
   provided so it renders correctly once the operator supplies a number. */
.badge-licence {
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  background: rgba(176, 138, 62, .06);
}

/* .vendor-chip (a.k.a. badge-vendor) — names the seller + storefront-link glyph;
   the marketplace "Sold by" signal. (foundation §2.5) */
.vendor-chip {
  color: var(--color-trust);
  background: var(--color-trust-soft);
  text-decoration: none;
}
.vendor-chip:hover {
  background: #CFE2DF;   /* slightly deeper trust-soft on hover */
}

/* .chip-nutrition — neutral chip for a PERMITTED nutrition claim ("Rich in
   fibre"); renders ONLY with Schedule-1 substantiation on file (PART 3 #7) —
   else SUPPRESSED, never greyed (conditional render enforced in JS via
   nutrition_claims). (foundation §2.5) */
.chip-nutrition {
  color: var(--color-bark);
  background: var(--color-linen);
  border: 1px solid var(--color-line);
}

/* .chip-trust — sayable trust fact chip; every chip's copy MUST trace to a PART 3
   fact (content owns the copy). (foundation §2.5) */
.chip-trust {
  color: var(--color-trust);
  background: var(--color-trust-soft);
}

/* .coa-explainer — homepage transparency block ("We publish our lab tests").
   Composes the badge-coa motif + btn-secondary + --color-gold accent; copy ->
   PART 3 #4 (slot HP-Z8-a). (design-spec §1.2) */
.coa-explainer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
}
.coa-explainer__title {
  font-family: var(--font-head);
  font-size: var(--text-xl);
  color: var(--color-bark);
}

/* .lock-affordance — slate-violet padlock glyph marking a gated product/zone
   (corner of a gated image/card). Pairs with badge-gated. (foundation §2.5) */
.lock-affordance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--color-gate);
  color: var(--color-paper);
  font-size: var(--text-base);
}
/* When placed over a card image, pin to the top-right corner. */
.card-product--gated .lock-affordance {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
}


/* ===========================================================================
   GROUP E — GATED-LANE STATE MACHINE (FLOW B)
   design-spec §1.2 Group E. NO add-to-cart at any state; sober, never alarming.
   =========================================================================== */

/* .age-gate-modal — STATE 1 modal: "confirm you are 18+." Sober --color-warn
   styling (NOT red). Contains the ONLY .btn-primary in the gated flow, used as an
   age-confirm (not a buy) action. (design-spec §1.2 Group E) */
.age-gate-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(46, 58, 47, .45);
}
.age-gate-modal__panel {
  max-width: 420px;
  width: 100%;
  padding: var(--space-6);
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--color-warn);   /* amber-brown, sober, NOT red */
  box-shadow: var(--shadow-card);
  text-align: center;
}
.age-gate-modal__title {
  font-family: var(--font-head);
  font-size: var(--text-xl);
  color: var(--color-warn);
  margin-bottom: var(--space-3);
}
.age-gate-modal__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}


/* .gate-explainer — STATE 2 inline panel: plain-language licensed-route /
   supervision messaging + the persistent supervision line + two CTAs.
   Composes copy over --color-gate-soft bg + --color-gate LEFT-BORDER +
   btn-consult/btn-secondary. (design-spec §1.2 Group E)
   ITS COPY IS [NEEDS-CONTENT/LEGAL] (slots PG-state2 / PG-header / HP-Z6-b) —
   lawyer-gated. The template renders the copy region as a VISIBLE STUB BLANK,
   never invented copy. */
.gate-explainer {
  padding: var(--space-5);
  background: var(--color-gate-soft);
  border-left: 4px solid var(--color-gate);
  border-radius: var(--radius-md);
}
.gate-explainer__title {
  font-family: var(--font-head);
  font-size: var(--text-lg);
  color: var(--color-gate);
  margin-bottom: var(--space-3);
}
.gate-explainer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
/* The persistent "to be taken under medical supervision" line (slot
   PG-supervision) renders in sober warn colour at micro size. */
.gate-explainer__supervision {
  font-size: var(--text-xs);
  color: var(--color-warn);
  margin-top: var(--space-3);
}


/* .rx-upload-panel — STATE 3 panel: upload a valid prescription (or book a
   consult); cannot proceed without an Rx on file (CCPA July-2022). Back-office
   verification is a STUB seam. (design-spec §1.2 Group E) */
.rx-upload-panel {
  padding: var(--space-5);
  background: var(--color-paper);
  border: 1px dashed var(--color-gate);
  border-radius: var(--radius-md);
}
.rx-upload-panel__title {
  font-family: var(--font-head);
  font-size: var(--text-lg);
  color: var(--color-gate);
  margin-bottom: var(--space-3);
}
.rx-upload-panel__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  margin-block: var(--space-3);
  text-align: center;
  background: var(--color-gate-soft);
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}


/* ===========================================================================
   GROUP F — PRODUCT-FINDER
   design-spec §1.2 Group F
   =========================================================================== */

/* .finder-option — a single selectable answer tile in a finder step. The
   "guided/expert help" option uses .finder-option--trust (trust-accent).
   (design-spec §1.2 Group F) */
.finder-option {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  transition: border-color var(--motion-duration-base) var(--motion-ease-out),
              background-color var(--motion-duration-base) var(--motion-ease-out),
              transform var(--motion-duration-base) var(--motion-ease-out),
              box-shadow var(--motion-duration-base) var(--motion-ease-out);
}
.finder-option:hover,
.finder-option:focus-within {
  border-color: var(--color-sage);
  background: var(--color-linen);
  transform: translateY(var(--motion-lift));
  box-shadow: var(--motion-lift-shadow);
}
.finder-option--selected {
  border-color: var(--color-sage);
  background: var(--color-linen);
  box-shadow: inset 0 0 0 1px var(--color-sage);
}
/* The "I want guided/expert help" option reads as reassurance. */
.finder-option--trust {
  border-color: var(--color-trust);
  color: var(--color-trust-accent);
}
.finder-option--trust:hover {
  background: var(--color-trust-soft);
}


/* .finder-result — finder output block: "a good place to start" heading + 3-5
   food-lane card-products + Learn/Guided-Help cross-links (design-spec §1.2). */
.finder-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.finder-result__title {
  font-family: var(--font-head);
  font-size: var(--text-2xl);
  color: var(--color-bark);
}
.finder-result__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
@media (max-width: 640px) {
  .finder-result__grid { grid-template-columns: repeat(2, 1fr); }
}
.finder-result__crosslinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}


/* .finder-stepper — finder progress indicator ("Step n of 4"). Step
   dots/connectors over --color-sage/--color-line (design-spec §1.2). */
.finder-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.finder-stepper__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-line);
}
.finder-stepper__dot--done,
.finder-stepper__dot--current {
  background: var(--color-sage);
}
.finder-stepper__connector {
  flex: 1;
  height: 2px;
  background: var(--color-line);
}


/* ===========================================================================
   GROUP G — FILTERS  (mobile bottom-sheet + desktop left rail)
   design-spec §1.2 Group G. Templates need BOTH surfaces; the bottom-sheet
   inherits the rail's inner styling (design-spec §1.2 note).
   =========================================================================== */

/* .filter-rail — desktop left filter rail (foundation §1.5; left rail desktop).
   Holds the bounded filter set: Format / Lane / Brand-Vendor / Price / Nutrition
   / Dietary. ZERO disease vocabulary — content/structural labels only. */
.filter-rail {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.filter-rail__group + .filter-rail__group {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}
.filter-rail__legend {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--color-bark);
  margin-bottom: var(--space-3);
}
.filter-rail__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  color: var(--color-ink);
}


/* .filter-bottom-sheet — mobile bottom-sheet holding the foundation §1.5 filter
   set. Inherits the desktop rail styling (design-spec §1.2 Group G). */
.filter-bottom-sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 950;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--color-linen);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -2px 12px rgba(46, 58, 47, .12);
  padding: var(--space-5);
}
.filter-bottom-sheet__handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-line);
  margin: 0 auto var(--space-4);
}
/* The sheet reuses the rail's inner group/legend/option styling. */
.filter-bottom-sheet .filter-rail__group,
.filter-bottom-sheet .filter-rail__legend,
.filter-bottom-sheet .filter-rail__option {
  /* inherited as-is */
}


/* ===========================================================================
   GROUP H — PAGE-SCALE TEMPLATE HELPERS
   design-spec §1.2 Group H
   =========================================================================== */

/* .vendor-storefront — per-vendor page scope helpers. The page is a vendor-scoped
   PLP; these are the page-band helpers (header band etc). Reached only from a PDP
   vendor-chip or the vendor filter — NEVER top nav (foundation §4.1). */
.vendor-storefront__header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-line);
}
.vendor-storefront__logo {
  width: var(--space-9);
  height: var(--space-9);
  border-radius: var(--radius-md);
  background: var(--color-linen);
  object-fit: contain;
}
.vendor-storefront__name {
  font-family: var(--font-head);
  font-size: var(--text-2xl);
  color: var(--color-bark);
}
.vendor-storefront__blurb {
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  max-width: 60ch;
}
/* Vendor-scoped PLP body: filter rail + product grid. */
.vendor-storefront__body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--gutter);
  margin-top: var(--space-6);
}
@media (max-width: 900px) {
  .vendor-storefront__body { grid-template-columns: 1fr; }
}
.vendor-storefront__policies {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}


/* ===========================================================================
   GROUP I-FOOTER — BRAND v2 SHARED FOOTER CHROME (art-direction §B.9)
   The footer re-grounds to --color-bark + 7% grain, cream wordmark + "Grown
   honest." signature, cream/muted links — present on every template identically.
   (The grain layer is the homepage's fixed overlay; the footer carries the dark
   ground + wordmark lockup here so the shared chrome partial renders correctly
   wherever it is transcluded.)
   =========================================================================== */
.footer {
  position: relative;
  background: var(--color-bark);
  color: var(--color-cream);
  margin-top: var(--space-9);
  padding-block: var(--space-7);
  overflow: hidden;
}
.footer .hr { border-top-color: rgba(243, 236, 221, .16); }
.footer__brand { margin-bottom: var(--space-5); }
.footer__wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--color-cream);
  text-decoration: none;
}
.footer__wordmark .logo__tld { color: rgba(243, 236, 221, .7); }
.footer__signature {
  font-family: var(--font-body);
  font-weight: var(--weight-med);
  font-size: var(--text-xs);
  color: #9AA591;                 /* muted-on-dark, per art-direction §B.9 */
  margin-top: var(--space-2);
}
.footer .text-micro { color: #9AA591; }
.footer__links a { color: var(--color-cream); }
.footer__links a:hover { color: var(--color-accent); }


/* ===========================================================================
   GROUP I — BRAND v2 GLOBAL: FOCUS-VISIBLE + REDUCED-MOTION (brand-system §D.3)
   =========================================================================== */

/* Accessible focus ring on every interactive element — keyboard users get a
   clear, high-contrast indicator independent of hover. Never outline:none without
   a replacement ring. (brand-system §D.3 — non-negotiable.) */
:focus-visible {
  outline: 2px solid var(--color-trust);
  outline-offset: 2px;
}

/* Reduced motion: hover COLOUR + SHADOW state remains (it conveys state); the
   transform/lift is removed and transitions shortened — state is legible, motion
   is gone. (brand-system §D.3 mandatory branch.) */
@media (prefers-reduced-motion: reduce) {
  .card-product,
  .door-card,
  .finder-option,
  .btn-primary,
  .btn-secondary {
    transition: background-color var(--motion-duration-fast) var(--motion-ease-soft),
                border-color var(--motion-duration-fast) var(--motion-ease-soft),
                box-shadow var(--motion-duration-fast) var(--motion-ease-soft);
  }
  .card-product:hover,
  .card-product:focus-within,
  .door-card:hover,
  .door-card:focus-within,
  .finder-option:hover,
  .finder-option:focus-within,
  .btn-primary:hover,
  .btn-primary:active,
  .btn-secondary:hover,
  .btn-secondary:active {
    transform: none;
  }
}