/* =============================================================
   HerbaOnline UK — Redesign concept ("Fresh Wellness")
   Static CSS. No framework. Easy to drop into PHP includes.
   -------------------------------------------------------------
   Colour system (kept intentionally small):
     - Green   : primary brand / positive / prices
     - Berry   : brand accent for primary CTAs (kept from old brand)
     - Ink     : text
     - Neutrals: off-white bg, white cards, hairlines
     - Sale    : muted red for struck prices / sale badge
   ============================================================= */

:root {
  /* Brand green — richer & higher-contrast, inspired by historic #5AB120.
     --green is the workhorse (buttons, prices, positive states);
     --green-bright is the vivid brand accent for highlights & progress. */
  --green: #2f8f27;
  --green-dark: #1f6a1a;
  --green-bright: #5ab120;
  --green-soft: #e4f4dc;
  --green-softer: #f1f9ec;

  /* Brand plum/berry — uses the historic #8E1566 directly for punch. */
  --berry: #8e1566;
  --berry-dark: #6b0f4d;
  --berry-bright: #b81c84;
  --berry-soft: #f9e3f1;

  --ink: #171d18;
  --muted: #566159;
  --bg: #f5f6f1;
  --card: #ffffff;
  --line: #e4e7dd;

  --sale: #c11a15;
  --sale-dark: #9c110d;

  /* Loyalty tiers (kept distinct from money + discount %) */
  --silver: #6b7a8f;
  --silver-soft: #eef1f5;
  --gold: #a9791f;
  --gold-soft: #f7efda;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(27, 33, 29, 0.06), 0 1px 3px rgba(27, 33, 29, 0.05);
  --shadow-md: 0 6px 20px rgba(27, 33, 29, 0.08);
  /* DG-MOBILE-STOREFRONT-POLISH-20L (Mark): harder and darker, so a raised layer clearly lies on the page. */
  --shadow-lg: 0 4px 12px rgba(27, 33, 29, 0.1), 0 18px 50px rgba(27, 33, 29, 0.24);

  --container: 1180px;
  --header-h: 68px;
  --catbar-h: 0px;
  --searchbar-h: 62px;
  --scroll-pad: 12px;

  /* Phase B.1 — height of the sticky discount bar, written by v3-discount-bar.js from the element's
     real rendered height (it wraps to two lines on narrow screens). 0 when there is no bar, so nothing
     below it moves and no space is reserved.
     --chrome-top is "bar + header": everything that sticks or scrolls to just under the header offsets
     itself by this instead of by --header-h alone. */
  --discountbar-h: 0px;
  --chrome-top: calc(var(--discountbar-h) + var(--header-h));

  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ----------------------------- Reset ----------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Global icon default — prevents any inline SVG.ico from rendering huge when a
   context-specific size rule is missing (e.g. the mobile drawer footer). Every
   more specific ".x .ico" rule still wins over this. */
.ico { width: 20px; height: 20px; flex: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* ----------------------------- Buttons --------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 15px; padding: 10px 22px;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--berry-bright); outline-offset: 2px; }
.btn-primary { background: var(--berry); color: #fff; box-shadow: 0 4px 14px rgba(142,21,102,.28); }
.btn-primary:hover { background: var(--berry-dark); box-shadow: 0 6px 18px rgba(142,21,102,.34); }
.btn-green { background: var(--green); color: #fff; box-shadow: 0 4px 14px rgba(47,143,39,.26); }
.btn-green:hover { background: var(--green-dark); box-shadow: 0 6px 18px rgba(47,143,39,.32); }
.btn-green:focus-visible { outline-color: var(--green-bright); }
.btn-green [data-ico] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.btn-green [data-ico] .ico {
  display: block;
}
.btn-ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--green); color: var(--green-dark); background: var(--green-softer); }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn .ico { width: 18px; height: 18px; }

/* ----------------------------- Header ---------------------------- */
.topbar {
  background: var(--green-dark);
  color: #eaf3ec;
  font-size: 13px;
  font-weight: 600;
}
.topbar .container {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; text-align: center;
}
.topbar .ico { width: 15px; height: 15px; opacity: .9; }

/* The header/search/category cluster is injected into a single #site-header
   wrapper div. A normal wrapper becomes the sticky header's containing block,
   so the header could only stay stuck within that short wrapper and then
   scrolled away. display:contents removes the wrapper's box so its children
   (header, search, category strip) sit directly in <body> flow and the header
   sticks against the page/viewport for the entire scroll. */
/* Phase 42D-3 — sticky policy (Mark feedback):
   - .searchbar is NOT sticky; it only shows at the top of the page and scrolls away.
   - .site-header stays sticky at top:0.
   - .cat-strip sticks directly under the header (top: header height), so header + categories
     travel together while the searchbar scrolls out of view.
   display:contents on the wrapper lets each child participate in body flow for independent sticky. */
#site-header, #site-header.v3-header-cluster { display: contents; }

.site-header {
  /* Phase B.1 — the discount bar is the first sticky element, so the header parks under it. */
  position: sticky; top: var(--discountbar-h); z-index: 70;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Overflow safety: clip stray horizontal overflow from page content WITHOUT
   putting overflow on the sticky header's ancestors (which would break sticky).
   main/footer are siblings of the sticky header, so clipping them is safe. */
main { overflow-x: clip; }
.header-inner {
  display: flex; align-items: center; gap: 18px;
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-logo {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: var(--green); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 20px;
}
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name b { font-size: 18px; letter-spacing: -0.02em; }
.brand-name span { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.brand-name span + span { margin-top: 2px; }

.nav-desktop { display: flex; align-items: center; gap: 4px; }
.nav-desktop a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
}
.nav-desktop a [data-ico],
.nav-desktop a .ico {
  display: block;
  width: 17px;
  height: 17px;
  flex: none;
}
.nav-desktop a:hover { background: var(--green-soft); color: var(--green-dark); }

.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; color: var(--ink);
  font-weight: 600; font-size: 14px; padding: 9px 12px; border-radius: var(--radius-sm);
}
.icon-btn:hover { background: var(--green-soft); }
.icon-btn .ico { width: 26px; height: 26px; }

.points-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: #fff;
  border-radius: var(--radius-pill); padding: 8px 15px;
  font-weight: 800; font-size: 13px; box-shadow: 0 2px 8px rgba(47,143,39,.28);
}
.points-chip:hover { background: var(--green-dark); }
.points-chip .ico { width: 17px; height: 17px; color: var(--green-bright); }
/* Logged-in account link reads clearly as an account, not a generic icon. */
.icon-btn.only-in[href="account.html"] { background: var(--berry-soft); color: var(--berry-dark); font-weight: 800; }
.icon-btn.only-in[href="account.html"]:hover { background: var(--berry-soft); filter: brightness(.97); }

.cart-btn { position: relative; background: var(--berry); color: #fff; }
.cart-btn:hover { background: var(--berry-dark); }
.icon-btn.cart-btn .ico,
.cart-btn .ico,
.icon-btn.cart-btn [data-ico="cart"] {
  width: 30px;
  height: 30px;
}
.cart-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  background: #fff; color: var(--berry-dark);
  font-size: 12px; font-weight: 800; display: inline-grid; place-items: center;
}

/* Compact points chip: number-first, unit small so it never crowds the row. */
.points-chip b { font-size: 13px; letter-spacing: -.01em; }
.points-chip .pc-word { font-size: 11px; font-weight: 700; opacity: .85; }

/* ---- Account dropdown (desktop) ---- */
.acct-menu { position: relative; }
.acct-toggle { background: var(--berry-soft); color: var(--berry-dark); font-weight: 800; }
.acct-toggle:hover { background: var(--berry-soft); filter: brightness(.97); }
.acct-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--berry); color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}
.acct-caret { display: inline-flex; margin-left: -2px; }
.acct-caret .ico { width: 15px; height: 15px; transform: rotate(90deg); transition: transform .18s ease; }
.acct-menu.open .acct-caret .ico { transform: rotate(-90deg); }
.acct-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 90;
  width: 244px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.acct-menu.open .acct-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.acct-dropdown .ad-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px;
  border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.acct-dropdown .ad-head .acct-avatar { width: 38px; height: 38px; font-size: 16px; }
.acct-dropdown .ad-head b { display: block; font-size: 14px; }
.acct-dropdown .ad-head span { font-size: 12px; color: var(--muted); }
.acct-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.acct-dropdown a:hover { background: var(--green-soft); color: var(--green-dark); }
.acct-dropdown a .ico { width: 18px; height: 18px; color: var(--muted); }
.acct-dropdown a:hover .ico { color: var(--green-dark); }
.acct-dropdown .ad-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.acct-dropdown .ad-signout { color: var(--berry-dark); }
.acct-dropdown .ad-signout .ico { color: var(--berry); }
.acct-dropdown .ad-signout:hover { background: var(--berry-soft); color: var(--berry-dark); }

.hamburger { display: none; }

/* Secondary category strip (desktop) — sticky under the header (Phase 42D-3 / 44E / 44H) */
.cat-strip {
  border-bottom: 1px solid rgba(31, 95, 40, 0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(90deg, #d4e4ce 0%, #dce8d8 48%, #d2e2cb 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
  position: sticky; top: var(--chrome-top); z-index: 60;
  transition: top .24s ease;
  padding: 6px 0 4px;
}
.cat-strip .container { display: flex; align-items: center; justify-content: safe center; gap: 6px; overflow-x: auto; }
.cat-strip a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
}
.cat-strip a:hover,
.cat-strip a:focus-visible {
  color: var(--green-dark);
  border-color: var(--green);
  background: var(--green-softer);
}
.cat-strip a.is-active {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}
.cat-strip a.is-active:hover,
.cat-strip a.is-active:focus-visible {
  color: #fff;
  background: var(--green-dark);
  border-color: var(--green-dark);
}
.cat-strip a.is-active .ico,
.cat-strip a.is-active [data-ico] { color: #fff; }
/* DG-CATALOG-NAV-ICON-ORDER-01 — server-rendered decorative category icons
   (App\Catalog\CategoryIcon). Always the label's own colour, so the icon
   stays visible on every active style, including Portal 1's light
   berry-tinted active tab where the white rule above would vanish. */
.cat-strip a .ico.cat-ico { width: 16px; height: 16px; color: inherit; }
.cat-strip.is-compact a .ico.cat-ico { width: 14px; height: 14px; }

/* Mobile category selector (hidden on desktop; desktop keeps the tabs above).
   Phase 44E: sticky under header + balanced vertical padding. */
.cat-select {
  display: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(90deg, #d4e4ce 0%, #dce8d8 50%, #d2e2cb 100%);
  border-bottom: 1px solid rgba(31, 95, 40, 0.12);
  transition: top .24s ease;
}
.cat-select .container { position: relative; padding-top: 12px; padding-bottom: 12px; }
.cat-select-native {
  width: 100%;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  padding: 14px 42px 14px 46px;
  border-radius: 14px;
  background-color: #fff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231f6a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231f6a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: left 16px center, right 14px center;
  color: var(--green-dark);
  border: 1px solid #c5d6c0;
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 2px 10px rgba(23, 29, 24, 0.06);
}
.cat-select-native:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
/* Native stays the no-JS control. After JS enhance, hide it and show
   the custom button. [hidden] must still beat display:flex. */
.cat-select-btn[hidden],
.cat-select-menu[hidden],
.cat-select.is-enhanced .cat-select-native {
  display: none !important;
}
.cat-select-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  background: #fff; color: var(--green-dark);
  border: 1px solid #c5d6c0; font-weight: 800; font-size: 15px;
  box-shadow: 0 2px 10px rgba(23, 29, 24, 0.06);
}
.cat-select-btn .csb-label { display: inline-flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 auto; }
.cat-select-btn .csb-label .ico { width: 19px; height: 19px; flex: none; }
/* CP-010 — the label text is the only part allowed to truncate: it is the
   only text of unpredictable length ("Category: Health & Wellness" vs.
   "Category: All"), so it alone gets the ellipsis, never the icon/caret. */
.cat-select-btn .csb-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cat-select-btn .csb-caret { flex: none; }
.cat-select-btn .csb-caret .ico { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .18s ease; }
.cat-select.open .cat-select-btn { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.cat-select.open .csb-caret .ico { transform: rotate(-90deg); }
.cat-select-menu {
  position: absolute; left: 16px; right: 16px; top: calc(100% - 2px); z-index: 60;
  border: 1px solid #c5d6c0; border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 10px; max-height: 75vh; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  /* CP-010 — pure-CSS "scroll shadow": a bottom fade only becomes visible
     once the panel is actually scrolled away from its end, so a short
     list (nothing to scroll) shows no shadow at all. The scrolling layer
     uses background-attachment:local so it moves with the content; the
     fixed shadow layer uses :scroll so it stays pinned to the viewport
     edge. No JS/ResizeObserver needed to detect overflow. */
  background-color: #fff;
  background-image:
    linear-gradient(#fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(rgba(255, 255, 255, 0), #fff 70%) 0 100%,
    linear-gradient(to bottom, rgba(23, 29, 24, 0.14), rgba(23, 29, 24, 0)) 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 28px, 100% 28px, 100% 14px;
  background-attachment: local, local, scroll;
}
.cat-select.open .cat-select-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cat-select-menu a { display: block; padding: 11px 12px; border-radius: var(--radius-sm); transition: background .12s ease; }
.cat-select-menu a:hover, .cat-select-menu a:active, .cat-select-menu a.is-active { background: var(--green-soft); }
.cat-select-menu a:focus-visible { outline: 2px solid var(--green-dark); outline-offset: -2px; }
/* DG-MOBILE-CATEGORY-BRAND-01 — icon + label share one row (.csm-row); the
   optional sub-label (.csm-sub) is its own line below. Both are <span>s
   inside the same <a>, so they need their own classes rather than a bare
   "a span" selector (which would otherwise also catch the icon row). */
.cat-select-menu .csm-row { display: flex; align-items: center; gap: 9px; }
.cat-select-menu .csm-row .ico.cat-ico { width: 18px; height: 18px; color: var(--green-dark); flex: none; }
.cat-select-menu a b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.cat-select-menu .csm-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; margin-left: 27px; }

/* CP-010A — the disclosure's own open/close opacity/transform fade and the
   caret's rotation are non-essential motion: under reduced-motion the
   class toggle (.cat-select.open, set by v3-nav.js) still applies
   instantly and correctly — opacity 1, visibility visible, transform
   none, the caret rotated to its open position — only the animated
   interpolation between those states is removed. Open/close functionality
   itself is untouched; only how it looks while changing is. */
@media (prefers-reduced-motion: reduce) {
  .cat-select-menu {
    transition: none;
  }
  .cat-select-btn .csb-caret .ico {
    transition: none;
  }
}

/* Search */
.searchbar { background: #fff; border-bottom: 1px solid var(--line); }
.searchbar form {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 4px 5px 4px 18px; margin: 6px 0;
}
.searchbar input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 13px; outline: none; color: var(--ink); }
.searchbar .ico { width: 18px; height: 18px; color: var(--muted); flex: none; margin-top: 5px; }
.search-wrap .searchbar-submit,
.searchbar .searchbar-submit {
  font-size: 12px;
  padding: 10px 18px;
}
.searchbar input::-webkit-search-cancel-button { display: none; }
.search-wrap { position: relative; }
.search-clear {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: none; background: transparent; color: var(--muted); border-radius: 50%;
}
.search-clear:hover { background: var(--line); color: var(--ink); }
.search-clear .ico { width: 16px; height: 16px; }

/* AJAX-style results panel */
.search-results {
  position: absolute; left: 0; right: 0; top: calc(100%); z-index: 70; /* DG-MOBILE-STOREFRONT-POLISH-20T (Mark): was calc(100% - 8px) */
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; max-height: 70vh; overflow-y: auto;
}
.search-results[hidden] { display: none !important; }
.search-results .sr-head { padding: 8px 12px 4px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sr-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); }
.sr-item:hover, .sr-item:focus-visible { background: var(--green-softer); outline: none; }
.sr-media { position: relative; width: 48px; height: 48px; flex: none; border-radius: var(--radius-sm); overflow: hidden; background: var(--green-softer); }
.sr-media img { width: 100%; height: 100%; object-fit: cover; }
.sr-sale { position: absolute; top: 0; left: 0; background: var(--sale); color: #fff; font-size: 8.5px; font-weight: 800; padding: 1px 4px; border-bottom-right-radius: 6px; }
.sr-info { flex: 1; min-width: 0; }
.sr-info b { display: block; font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-cat { display: block; font-size: 12.5px; color: var(--muted); }
.sr-price { flex: none; font-size: 14.5px; font-weight: 800; color: var(--green-dark); white-space: nowrap; }
.sr-price.locked { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); }
.sr-price.locked .ico { width: 14px; height: 14px; }
.sr-price.sr-price-muted { font-weight: 700; color: var(--muted); font-size: 13px; }
.sr-price .price-was { font-weight: 600; }
.sr-item { align-items: flex-start; }
.sr-media .ico { width: 22px; height: 22px; color: var(--green-dark); margin: 13px; }
.sr-snip { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-all { display: block; text-align: center; padding: 11px 12px; margin-top: 4px;
  font-size: 13.5px; font-weight: 800; color: var(--green-dark); border-top: 1px solid var(--line); }
.sr-all:hover { background: var(--green-softer); }
.search-empty { padding: 16px; color: var(--muted); font-size: 14px; }
.sr-all { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; padding: 12px; border-top: 1px solid var(--line); font-weight: 700; font-size: 13.5px; color: var(--berry); }
.sr-all:hover { color: var(--berry-dark); background: var(--berry-soft); border-radius: var(--radius-sm); }
.sr-all .ico { width: 16px; height: 16px; }
/* Empty + loading states */
.sr-empty { text-align: center; padding: 26px 20px; }
.sr-empty-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--green-softer); color: var(--green-dark); margin-bottom: 10px; }
.sr-empty-ico .ico { width: 22px; height: 22px; }
.sr-empty b { display: block; font-size: 15px; }
.sr-empty p { font-size: 13px; color: var(--muted); margin: 6px 0 14px; }
.sr-loading { padding: 6px; }
.sr-skel { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.sr-skel .sk-img { width: 48px; height: 48px; border-radius: var(--radius-sm); flex: none; }
.sr-skel .sk-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.sr-skel .sk-lines span { height: 11px; border-radius: 6px; }
.sr-skel .sk-lines span:first-child { width: 60%; }
.sr-skel .sk-lines span:last-child { width: 35%; }
.sr-skel .sk-img, .sr-skel .sk-lines span {
  background: linear-gradient(90deg, var(--line) 25%, #f2f4ee 50%, var(--line) 75%);
  background-size: 200% 100%; animation: sr-shimmer 1.1s ease-in-out infinite;
}
@keyframes sr-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --------------------- Auth-state visibility --------------------- */
/* Controlled by data-auth on <body> = "in" | "out"                  */
body[data-auth="out"] .only-in { display: none !important; }
body[data-auth="in"]  .only-out { display: none !important; }

/* ----------------------------- Hero ------------------------------ */
.hero { padding: 28px 0 8px; }
.hero-card {
  position: relative; overflow: hidden;
  border-radius: 24px; background: var(--green-soft);
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
  box-shadow: var(--shadow-sm);
}
.hero-copy { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  background: #fff; color: var(--green-dark);
  border-radius: var(--radius-pill); padding: 6px 14px; font-size: 12.5px; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.hero h1 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 800; }
.hero h1 em { color: var(--green-dark); font-style: normal; }
.hero .lead { font-size: 17px; color: var(--muted); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-media { position: relative; min-height: 380px; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }

/* ----------------------------- Trust bar ------------------------- */
.trust {
  margin-top: 22px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; grid-template-columns: repeat(4, 1fr); box-shadow: var(--shadow-sm);
}
.trust-item { display: flex; align-items: center; gap: 14px; padding: 20px 22px; }
.trust-item + .trust-item { border-left: 1px solid var(--line); }
.trust-ico {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--green-soft); color: var(--green-dark);
  display: grid; place-items: center;
}
.trust-ico .ico { width: 24px; height: 24px; }
.trust-item b { display: block; font-size: 15px; }
.trust-item span { font-size: 13px; color: var(--muted); }

/* ----------------------------- Sections -------------------------- */
.section { padding: 44px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.section-head h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; }
.section-head p { color: var(--muted); font-size: 15px; margin-top: 6px; }
.section-head a.link { color: var(--green-dark); font-weight: 700; font-size: 14px; }

/* Welcome (logged-in) */
.welcome {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; display: flex; align-items: center; gap: 20px; box-shadow: var(--shadow-sm);
  margin-top: 22px;
}
.welcome .avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: var(--berry-soft); color: var(--berry-dark);
  display: grid; place-items: center; font-weight: 800; font-size: 22px;
}
.welcome h2 { font-size: 22px; }
.welcome p { color: var(--muted); font-size: 14.5px; }
.welcome .welcome-cta { margin-left: auto; display: flex; gap: 10px; }

/* Category tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tile {
  position: relative; overflow: hidden; border-radius: var(--radius);
  min-height: 176px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px; color: #fff; box-shadow: var(--shadow-md);
  transition: transform .12s ease, box-shadow .15s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,.34)); }
.tile.tile-plan  { background: linear-gradient(140deg, #2f8f27, #1f6a1a); }
.tile.tile-faq   { background: linear-gradient(140deg, #b81c84, #6b0f4d); }
.tile.tile-contact { background: linear-gradient(140deg, #2f8f27, #8e1566); }
.tile .tile-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.tile h3 { font-size: 21px; margin-bottom: 2px; display: inline-flex; align-items: center; gap: 8px; }
.tile h3 .ico { width: 18px; height: 18px; opacity: .95; }
.tile p { font-size: 14px; opacity: .94; max-width: 34ch; }
.tile .tile-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13.5px; margin-top: 12px; }
.tile .tile-cta .ico { width: 16px; height: 16px; }
/* Filled icon chip in the corner — richer than a bare outline icon. */
.tile .tile-ico {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.18);
  backdrop-filter: blur(2px); display: grid; place-items: center;
}
.tile .tile-ico .ico { width: 24px; height: 24px; }

/* Product group grid */
.group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.group-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow-sm); transition: transform .1s ease, box-shadow .15s ease;
}
.group-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.group-card .g-ico {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: var(--green-soft); color: var(--green-dark); display: grid; place-items: center;
}
.group-card b { font-size: 15px; }
.group-card span { font-size: 13px; color: var(--muted); }
.group-card .chev { margin-left: auto; color: var(--muted); }

/* --------------------- Register / gated pricing ------------------ */
.register {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-md);
}
.register-top { padding: 30px 34px 6px; }
.register-top h2 { font-size: 26px; }
.register-top p { opacity: .9; margin-top: 6px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px 34px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step .num {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.16); display: grid; place-items: center; font-weight: 800;
}
.step b { display: block; font-size: 16px; }
.step span { font-size: 13.5px; opacity: .9; }
.register-form {
  background: rgba(255,255,255,.1); padding: 22px 34px 30px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.register-form .field {
  flex: 1 1 200px; background: #fff; border-radius: var(--radius-pill);
  padding: 13px 18px; border: none;
}
.register-form .field input { border: none; outline: none; width: 100%; font-size: 15px; background: transparent; }
.register-note { width: 100%; font-size: 13.5px; opacity: .92; }
.register-note a { text-decoration: underline; font-weight: 700; }

/* ----------------------------- Testimonials ---------------------- */
.testi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.testi-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-sm);
}
.stars { color: #e0a92b; display: inline-flex; align-items: center; gap: 2px; }
.stars .ico { width: 16px; height: 16px; }

/* Hero inline rating cue */
.hero-rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; }
.hero-rating .stars .ico { width: 18px; height: 18px; }
.hero-rating b { font-weight: 800; }
.hero-rating .r-sub { color: var(--muted); font-size: 14px; }

/* Homepage featured bestsellers (built on the shared .pcard system) */
.pcard .pc-rating { color: #e0a92b; display: inline-flex; gap: 1px; }
.pcard .pc-rating .ico { width: 13px; height: 13px; }
.pcard .pc-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); margin-top: auto; }
.pcard .pc-lock .ico { width: 15px; height: 15px; }

.testi-card blockquote { margin: 12px 0; font-size: 15.5px; }
.testi-card cite { font-style: normal; font-weight: 700; font-size: 14px; }
.testi-card cite span { color: var(--muted); font-weight: 500; }

/* ----------------------- Category page banner -------------------- */
.cat-hero {
  background: linear-gradient(135deg, var(--berry), var(--berry-dark));
  color: #fff; border-radius: 24px; padding: 44px; text-align: center;
  margin-top: 24px; box-shadow: var(--shadow-sm);
}
.cat-hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; }
.cat-hero p { max-width: 62ch; margin: 12px auto 0; opacity: .92; }


/* Product list rows */
.product-list { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.product-row {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; grid-template-columns: 150px 1fr 300px; gap: 22px; align-items: center;
  padding: 20px; box-shadow: var(--shadow-sm);
}
.product-media {
  position: relative; background: var(--green-softer); border-radius: var(--radius-sm);
  aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
}
.product-media img { width: 82%; height: 82%; object-fit: contain; }
/* Phase 42D-5 — bolder but premium sale badge (consistent sitewide). */
.product-info h3 { font-size: 19px; }
.product-info .desc { color: var(--muted); font-size: 14.5px; margin-top: 8px; }
.product-info .readmore { display: inline-block; margin-top: 10px; color: var(--green-dark); font-weight: 700; font-size: 14px; text-decoration: underline; }
/* Phase 42D-4 — dual detail links (page + popup) on category cards */
.detail-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.detail-links .readmore { margin-top: 0; }
.readmore-btn { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }

.product-buy { display: flex; flex-direction: column; gap: 10px; }

/* Phase 42D-4 — V3 product detail page */
.product-detail { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: 34px; margin-top: 26px; align-items: start; }
@media (max-width: 820px) {
  .product-detail { grid-template-columns: 1fr; gap: 22px; }
  }

/* Compact quantity stepper + buy row (category, bestsellers, product modal) */
.buy-row { display: flex; align-items: stretch; gap: 8px; }
.buy-row .btn { flex: 1; }
.qstep { position: relative; display: inline-flex; align-items: center; flex: none; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; min-height: 42px; }
.qstep .qs-btn { display: grid; place-items: center; width: 40px; min-height: 40px; align-self: stretch; border: none; background: transparent; color: var(--ink); cursor: pointer; }
.qstep .qs-btn:hover { background: var(--green-softer); color: var(--green-dark); }
.qstep .qs-btn .ico { width: 16px; height: 16px; }
.qstep .qs-btn[data-qstep-action="minus"] span[data-ico="minus"]:empty::before { content: "−"; font-size: 18px; font-weight: 700; line-height: 1; }
.qstep .qs-btn[data-qstep-action="plus"] span[data-ico="plus"]:empty::before { content: "+"; font-size: 18px; font-weight: 700; line-height: 1; }
.qstep .qs-n { min-width: 36px; text-align: center; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; } /* DG-STOREFRONT-MICRO-POLISH-CART-FLAVOURS-30 (Mark): 600 */
/* qs-md = default comfortable size (explicit alias) */
.qstep.qs-md { min-height: 42px; }
/* qs-sm retained for legacy markup but no longer tiny (<36px) */
.qstep.qs-sm { min-height: 38px; }
.qstep.qs-sm .qs-btn { width: 36px; min-height: 36px; }
.qstep.qs-sm .qs-n { min-width: 28px; font-size: 14px; }
.qstep input[type="number"]::-webkit-outer-spin-button,
.qstep input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qstep input[type="number"] { -moz-appearance: textfield; }
.qstep input[type="number"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.price-box {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px; text-align: center; background: var(--green-softer);
}
.price-box .plabel { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.price-now { color: var(--green-dark); font-size: 26px; font-weight: 800; }
.price-was { color: var(--sale); text-decoration: line-through; font-size: 15px; margin-left: 8px; font-weight: 600; }
.flavour {
  appearance: none; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 14px; background: #fff; color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d685f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* Gated "see prices" state */
.gated {
  border: 1.5px dashed var(--green); border-radius: var(--radius-sm);
  padding: 16px; text-align: center; background: var(--green-soft);
}
.gated .lock { display: inline-flex; align-items: center; gap: 8px; color: var(--green-dark); font-weight: 700; font-size: 14px; }
.gated .lock .ico { width: 16px; height: 16px; }
.gated p { font-size: 13px; color: var(--muted); margin: 6px 0 12px; }

/* ----------------------------- Footer ---------------------------- */
.site-footer { background: var(--ink); color: #cfd6cf; margin-top: 48px; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px;
  padding: 46px 0 30px;
}
/* Onboarding focus mode drops the Shop and My account columns; keep the rest balanced. */
.footer-grid--focus { grid-template-columns: 1.4fr 1fr; }
.footer-grid h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.footer-grid a { display: block; padding: 5px 0; font-size: 14px; color: #cfd6cf; }
.footer-grid a:hover { color: #fff; }
.footer-brand .brand-logo { background: var(--green); }
.footer-brand p { margin-top: 14px; font-size: 14px; max-width: 34ch; }
.pay-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ---------------- Realistic payment logo badges -------------------
   Static, dependency-free badges styled to read like the real marks.
   Reused in the footer, cart and checkout. ------------------------ */
.paylogos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.paylogo {
  --pl-bg: #fff;
  height: 30px; min-width: 46px; padding: 0 9px;
  background: var(--pl-bg); border-radius: 6px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 2px rgba(0,0,0,.14);
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  font-weight: 800; font-size: 12px; line-height: 1; letter-spacing: .01em;
  flex: none; overflow: hidden;
}
.paylogo b, .paylogo span { line-height: 1; }
.paylogo.visa      { color: #1a1f71; font-style: italic; letter-spacing: .04em; font-size: 14px; }
.paylogo.amex      { --pl-bg: #1f72cd; color: #fff; font-size: 9.5px; text-align: center; letter-spacing: .02em; }
.paylogo.paypal    { font-style: italic; }
.paylogo.paypal .pp1 { color: #003087; } .paylogo.paypal .pp2 { color: #009cde; }
.paylogo.klarna    { --pl-bg: #ffb3c7; color: #17120f; font-size: 12.5px; }
.paylogo.applepay  { color: #111; font-size: 12.5px; }
.paylogo.applepay .a-mark { font-size: 13px; margin-right: 1px; }
.paylogo.gpay      { color: #5f6368; font-size: 12.5px; }
.paylogo.gpay .g-b { color: #4285f4; } .paylogo.gpay .g-r { color: #ea4335; }
.paylogo.gpay .g-y { color: #fbbc04; } .paylogo.gpay .g-g { color: #34a853; }
/* Mastercard interlocking circles */
.paylogo.mc { gap: 0; padding: 0 8px; }
.paylogo.mc .mc-c { width: 15px; height: 15px; border-radius: 50%; }
.paylogo.mc .mc-r { background: #eb001b; }
.paylogo.mc .mc-y { background: #f79e1b; margin-left: -6px; mix-blend-mode: multiply; }
/* On the dark footer, give badges a subtle light frame */
.site-footer .paylogo { box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: #9fa89f;
}
.footer-bottom .disclaimer { max-width: 70ch; }

/* ----------------------------- Modals ---------------------------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 25, 21, 0.55); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  width: 100%; max-width: 780px; background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 1fr 1fr;
  animation: pop .18s ease;
}
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-aside {
  position: relative; color: #fff; padding: 34px; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 420px;
  background: linear-gradient(155deg, rgba(142,21,102,.86), rgba(31,106,26,.90)), url("../img/v3/hero.png");
  background-size: cover; background-position: center;
}
.modal-aside h3 { font-size: 32px; font-weight: 800; }
.modal-aside p { margin-top: 10px; opacity: .96; font-size: 14.5px; }
.modal-aside .aside-link { margin-top: 18px; font-size: 14px; }
.modal-aside .aside-link a { text-decoration: underline; font-weight: 800; }
/* Commercially important header band — high contrast, clear hierarchy. */
.modal-body { margin: 20px 0px; padding: 0px 30px; position: relative; }
.modal-body .modal-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--green-soft); color: var(--green-dark);
  border-radius: var(--radius-pill); padding: 5px 12px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px;
}
.modal-body .modal-eyebrow .ico { width: 15px; height: 15px; }
.modal-body h2 { color: var(--ink); font-size: 27px; font-weight: 800; letter-spacing: -0.02em; }
.modal-body h2 em { color: var(--berry); font-style: normal; }
.modal-body .sub { color: var(--muted); font-size: 14.5px; }
.modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,.9);
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
}
.modal-close .ico { width: 20px; height: 20px; }
.form-field { margin-top: 16px; }
.form-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.form-field input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; font-size: 15px; outline: none; color: var(--ink);
}
.form-field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.form-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 13.5px; }
.form-row label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.form-row a { color: var(--green-dark); font-weight: 700; }
.modal-body .btn { margin-top: 18px; }

/* ----------------------- Mobile nav drawer ----------------------- */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(20,25,21,.5);
  display: none;
}
.drawer-overlay.open { display: block; }
.drawer {
  position: fixed; top: 0; left: 0; z-index: 95; height: 100%; width: min(95%, 360px);
  background: #fff; transform: translateX(-100%); transition: transform .22s ease;
  display: flex; flex-direction: column; overflow-y: auto;
}
.drawer.open { transform: none; }

/* ----------------------------- Mini-cart ------------------------- */
.minicart {
  position: fixed; top: 0; right: 0; z-index: 95; height: 100%; width: min(92%, 400px);
  background: #fff; transform: translateX(100%); transition: transform .24s ease;
  display: flex; flex-direction: column;
}
.minicart.open { transform: none; }
.mc-head { display: flex; align-items: center; justify-content: space-between; padding: 18px; border-bottom: 1px solid var(--line); }
.mc-head b { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; }
.mc-head b .ico { width: 26px; height: 26px; margin-top: 6px; color: var(--berry); }
.mc-body { flex: 1; overflow-y: auto; padding: 8px 16px; }
.mc-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mc-media { width: 64px; height: 64px; flex: none; border-radius: var(--radius-sm); background: var(--green-softer); overflow: hidden; display: grid; place-items: center; }
.mc-media img { width: 82%; height: 82%; object-fit: contain; }
.mc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mc-info b { font-size: 14.5px; }
.mc-price { font-weight: 800; color: var(--green-dark); font-size: 15px; }
.mc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.mc-remove { display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mc-remove:hover { color: var(--sale); }
.mc-remove .ico { width: 13px; height: 13px; }
.mc-foot { border-top: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--green-softer); }
/* The drawer JS hides the foot on an empty basket, but `display: flex` outranks the
   UA `[hidden]` rule, so an empty basket still showed a £0.00 total and a checkout
   CTA. Honour the attribute the JS already sets. */
.mc-foot[hidden] { display: none; }
.mc-subtotal { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
.mc-subtotal b { font-size: 20px; color: var(--green-dark); }
.mc-note { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.mc-note .ico { width: 16px; height: 16px; color: var(--green); }
.mc-empty { text-align: center; padding: 48px 20px; }
.mc-empty-ico { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--green-softer); color: var(--green-dark); margin-bottom: 14px; }
.mc-empty-ico .ico { width: 28px; height: 28px; }
.mc-empty b { display: block; font-size: 17px; }
.mc-empty p { font-size: 13.5px; color: var(--muted); margin: 8px 0 18px; }

/* Cart-icon bump when an item is added */
.cart-btn.bump { animation: cart-bump .4s ease; }
@keyframes cart-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.18) rotate(-6deg); }
  60% { transform: scale(.96) rotate(3deg); }
  100% { transform: scale(1); }
}

/* Sticky top zone: close control stays reachable while the group list scrolls. */
/* DG-BERRY-HEADER-DRAWER-MUTUAL-CLOSE-18D (Mark, exact): 10px 18px. */
.drawer-head { position: sticky; top: 0; z-index: 3; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.drawer-head b { font-size: 18px; }
.drawer .shop-cta { margin: 16px; }
.drawer-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px 8px; }
.drawer-tile {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 8px; text-align: center;
}
.drawer-tile .ico { width: 22px; height: 22px; color: var(--green-dark); margin: 0 auto 6px; }
.drawer-tile b { display: block; font-size: 13.5px; color: var(--berry-dark); }
.drawer-tile span { font-size: 11px; color: var(--muted); }
.drawer h5 { padding: 18px 18px 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.drawer-links a { display: block; padding: 14px 18px; border-top: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.drawer-links a:hover { background: var(--green-soft); }
/* Tinted, clearly-separated support/account zone so it reads differently from
   the product group list above it. */
.drawer-foot { margin-top: auto; padding: 12px 12px 18px; border-top: 1px solid var(--line); background: var(--green-softer); display: flex; flex-direction: column; gap: 2px; }
.drawer-foot-label { padding: 6px 10px 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.drawer-foot a { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; color: var(--ink); }
.drawer-foot a:hover { background: #fff; color: var(--green-dark); }
/* Explicit, compact icon size so injected inline SVGs never render oversized. */
.drawer-foot a .ico { width: 19px; height: 19px; flex: none; color: var(--green-dark); }
.drawer-foot a[data-signout] .ico { color: var(--sale); }

/* Toast */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 13px 20px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); z-index: 120;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  display: inline-flex; align-items: center; gap: 10px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .ico { width: 18px; height: 18px; color: #7fe0a2; }

/* --------------------- Demo state switcher ----------------------- */
.demo-switch {
  position: fixed; right: 16px; bottom: 16px; z-index: 130;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg); padding: 6px; display: flex; align-items: center; gap: 4px;
}
.demo-switch .dlabel { font-size: 11px; font-weight: 800; color: var(--muted); padding: 0 8px; text-transform: uppercase; letter-spacing: .05em; }
.demo-switch button {
  border: none; background: transparent; border-radius: var(--radius-pill);
  padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--muted);
}
.demo-switch button.active { background: var(--green); color: #fff; }

/* ----------------------------- Responsive ------------------------ */
@media (max-width: 960px) {
  .hero-card { grid-template-columns: 1fr; }
  .hero-media { min-height: 260px; order: -1; }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(3) { border-left: none; }
  .trust-item:nth-child(odd) { border-left: none; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tiles, .group-grid, .steps, .testi { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-row { grid-template-columns: 110px 1fr; }
  .product-buy { grid-column: 1 / -1; }
  .modal { grid-template-columns: 1fr; max-width: 460px; }
  .modal-aside { min-height: 150px; }
}

/* Tablet range: keep the desktop nav but tighten it so nothing wraps or
   collides between the phone drawer (<=720) and roomy desktop (>=981). */
@media (min-width: 721px) and (max-width: 980px) {
  .header-inner { gap: 12px; }
  .nav-desktop { gap: 2px; }
  .nav-desktop a { padding: 8px 9px; font-size: 13px; }
  .brand-name span { display: none; }
  .points-chip { padding: 8px 12px; }
  .acct-toggle .label-hide { display: none; }
  /* CP-010 — .cat-strip's own compacting no longer lives on this guessed
     721-980px breakpoint (which also left an untreated 981-991px gap):
     see .cat-strip.is-compact/.is-overflow below, applied against the
     real rendered label widths by v3-catnav-fit.js at every width above
     720px, not just this range. */
}

/* CP-010 — category-strip content-fit states, shared/portal-agnostic
   mechanics only (colours/spacing values for Portal 1 live in
   v3-design-overrides.css). v3-catnav-fit.js measures the real rendered
   .cat-strip against its container at every width above 720px and adds
   exactly one of these two classes when the spacious layout does not
   fit; without JS (or below 720px, where .cat-strip is not shown at
   all), neither class is ever present and the spacious style is the
   whole story — there is no separate guessed-breakpoint tier to drift
   out of sync with these. */
.cat-strip.is-compact .container { gap: 4px; }
.cat-strip.is-compact a { padding: 7px 10px; font-size: 12.5px; }
.cat-strip.is-overflow { display: none; }
.cat-select.is-forced-open {
  display: block;
  position: sticky;
  top: var(--chrome-top);
  z-index: 60;
}

@media (max-width: 720px) {
  /* Tighter, edge-safe gutters on phones. */
  .container { padding: 0 16px; }

  .nav-desktop, .cat-strip { display: none; }
  /* Mobile shows the dropdown category selector instead of the desktop tabs. */
  .cat-select {
    display: block;
    position: sticky;
    top: var(--chrome-top);
    z-index: 60;
    /* 44H: keep soft gradient from base .cat-select rule */
  }
  :root { --catbar-h: 68px; }
  /* On phones the caret is redundant — the avatar opens a compact menu. */
  .acct-caret { display: none; }
  .hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; margin-left: -10px;
    border-radius: 12px; border: 1px solid var(--line); background: var(--bg, #f5f6f1); flex: none;
  }
  .hamburger .ico { width: 30px; height: 30px; }

  /* Overflow-proof header row: allow children to shrink, tighten gaps. */
  .header-inner { gap: 10px; min-width: 0; }
  .brand { margin-right: auto; min-width: 0; }
  .brand-name { min-width: 0; }
  .brand-name b { font-size: 16px; }
  .header-actions { gap: 4px; }
  .header-actions .label-hide { display: none; }
  .points-chip { display: none; }
  /* Sign-out lives in the drawer on mobile; hide the empty icon button here. */
  .header-actions a.icon-btn[data-signout] { display: none; }
  .icon-btn { padding: 9px 10px; }

  /* Solid, always-visible sticky header on mobile (no translucent flicker). */
  .site-header { background: #fff; box-shadow: 0 2px 10px rgba(23,29,24,.06); }

  /* Search bar: 16px input prevents iOS auto-zoom; submit size comes from .searchbar-submit. */
  .searchbar form { margin: 6px 0; padding: 4px 5px 4px 18px; gap: 8px; }
  .searchbar input { font-size: 16px; }
  .search-wrap .searchbar-submit,
  .searchbar .searchbar-submit { font-size: 12px; padding: 10px 18px; flex: none; }

  .hero-copy { padding: 30px 24px; }
  .section { padding: 32px 0; }
  .welcome { flex-direction: column; align-items: flex-start; }
  .welcome .welcome-cta { margin-left: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .register-top, .steps, .register-form { padding-left: 22px; padding-right: 22px; }
  .cat-hero { padding: 30px 22px; }
}

/* =================================================================
   EXTENDED DESIGN SYSTEM
   Components for checkout, account, content & auth pages.
   All built on the same tokens as above.
   ================================================================= */

/* ----------------------------- Accessibility --------------------- */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  background: var(--green-dark); color: #fff; font-weight: 700; font-size: 14px;
  padding: 10px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  transform: translateY(-150%); transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--berry-soft); }
main:focus { outline: none; }

/* ----------------------------- Footer reassurance ---------------- */
.foot-reassure {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 22px 0; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.foot-reassure li { display: flex; align-items: center; gap: 12px; }
.foot-reassure .ico { width: 26px; height: 26px; color: #8fd8a8; flex: none; }
.foot-reassure b { display: block; font-size: 14px; color: #fff; }
.foot-reassure span { font-size: 12.5px; color: rgba(255,255,255,.7); }

@media (max-width: 860px) {
  .foot-reassure { grid-template-columns: repeat(2, 1fr); gap: 16px 8px; }
}
@media (max-width: 520px) {
  .xsell .xs-card { flex-basis: 150px; }
}

/* Cross-sell carousel (cart AOV) — horizontal scroll with arrow controls */
.xs-nav { display: inline-flex; align-items: center; gap: 10px; }
.xs-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .12s ease, opacity .12s ease; }
.xs-arrow:hover:not(:disabled) { background: var(--green-softer); color: var(--green-dark); }
.xs-arrow:disabled { opacity: .35; cursor: default; }
.xs-arrow .ico { width: 18px; height: 18px; }
.xs-prev { transform: rotate(180deg); }

.xsell { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.xsell::-webkit-scrollbar { height: 6px; }
.xsell::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.xsell .xs-card { flex: 0 0 168px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; }
.xsell .xs-media { width: 100%; height: 84px; border-radius: 10px; background: var(--green-softer); display: grid; place-items: center; overflow: hidden; }
.xsell .xs-media img { width: 70%; height: 70%; object-fit: contain; }
.xsell .xs-info b { font-size: 13.5px; display: block; }
.xsell .xs-info .xs-price { font-size: 13px; font-weight: 800; color: var(--green-dark); }
.xsell .xs-buy { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.xsell .xs-buy .qstep { flex: none; }
.xsell .xs-buy .xs-add-btn { flex: 1; padding: 8px 10px; font-size: 13px; }

/* ----------------------------- Page shell ----------------------- */
/* Only set vertical padding here. Using the `padding` shorthand would reset
   the horizontal padding to 0 and override .container's gutters, making cards,
   breadcrumbs and headings touch the viewport edge on mobile. */
.page { padding-top: 26px; padding-bottom: 10px; }
.page-head { margin: 8px 0 22px; }
.page-head h1 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; }
.page-head .lead-muted { color: var(--muted); font-size: 16px; margin-top: 8px; max-width: 64ch; }
.breadcrumb { font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--green-dark); font-weight: 600; }
.breadcrumb span { margin: 0 6px; }
/* The breadcrumb sat flush against the hero panel that follows it on every info page. */
.breadcrumb + .info-hero { margin-top: 16px; }

/* Content-page hero (green, softer than the berry category hero) */
.info-hero {
  /* DG-INFO-GREEN-PANEL-GRADIENT-32A (Mark): the shared info panel gradient (v3-design-tokens.css) — .info-hero is only the
     legal-page hero (info-page-hero.php: terms, privacy, cookies, delivery & returns); was a brighter flat green. */
  background: var(--d-info-panel-gradient);
  color: #fff; border-radius: 24px; padding: 44px; box-shadow: var(--d-info-panel-shadow); /* DG-INFO-PANEL-DEPTH-32B */
}
.info-hero .eyebrow { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
.info-hero h1 { font-size: clamp(28px, 4vw, 46px); font-weight: 800; margin-top: 14px; }
.info-hero p { max-width: 62ch; margin-top: 12px; opacity: .95; font-size: 16px; }
.info-hero .hero-actions { margin-top: 20px; }

/* Phase 45A — help / contact / delivery / policy shells */
.info-page { padding-bottom: 48px; }
.info-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 24px; align-items: start; }
.info-layout > * { min-width: 0; }
.info-aside { position: sticky; top: calc(var(--chrome-top) + 24px); }
.info-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.info-contact-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
.info-contact-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.info-contact-card .pill { margin-left: auto; flex: none; }
.info-toc { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.info-toc a { font-size: 13px; font-weight: 700; color: var(--green-dark); text-decoration: none; padding: 6px 10px; border-radius: 999px; background: var(--green-soft); }
.info-toc a:hover, .info-toc a:focus-visible { background: var(--green); color: #fff; outline: none; }
.info-prose { max-width: 72ch; font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.info-prose h2 { font-size: clamp(18px, 2.2vw, 22px); margin: 28px 0 10px; scroll-margin-top: calc(var(--chrome-top) + 16px); }
.info-prose h2:first-child { margin-top: 0; }
.info-prose p { margin: 0 0 12px; }
.info-prose ul { margin: 0 0 14px; padding-left: 1.2em; }
.info-prose li { margin: 0 0 6px; }
.info-prose a { color: var(--green-dark); font-weight: 600; }
.info-legal .info-hero { margin-bottom: 8px; }

@media (max-width: 900px) {
  .info-layout { grid-template-columns: 1fr; }
  .info-aside { position: static; }
  .info-contact-grid { grid-template-columns: 1fr; }
}

/* ----------------------------- Layout helpers -------------------- */
.layout-2col { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
/* Grid/flex children default to min-width:auto (= min-content), which lets wide
   content (tables, long strings, cards) push the 1fr track past the container and
   overflow the frame. Force shrinkable tracks/children for the order-process shell. */
.layout-2col > * { min-width: 0; }
.cart-main { min-width: 0; }
.sticky-aside { position: sticky; top: calc(var(--chrome-top) + 72px); min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.rowflex { display: flex; align-items: center; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { flex-wrap: wrap; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }

/* ----------------------------- Card ------------------------------ */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.card-head {
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-head h3 { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.card-head h3 .ico { width: 20px; height: 20px; color: var(--green-dark); }
.card-body { padding: 22px; }
.card-body.tight { padding: 0; }

/* ----------------------------- Checkout stepper ------------------ */
.cstep { display: flex; align-items: center; gap: 8px; margin: 6px 0 26px; }
.cstep .node { display: flex; align-items: center; gap: 10px; }
.cstep .dot {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; background: var(--line); color: var(--muted);
}
.cstep .node b { font-size: 14px; color: var(--muted); }
.cstep .bar { flex: 1; height: 2px; background: var(--line); border-radius: 2px; min-width: 20px; }
.cstep .node.done .dot { background: var(--green); color: #fff; }
.cstep .node.done b { color: var(--ink); }
.cstep .node.active .dot { background: var(--berry); color: #fff; box-shadow: 0 0 0 4px var(--berry-soft); }
.cstep .node.active b { color: var(--berry-dark); }
.cstep .bar.done { background: var(--green); }

/* ----------------------------- Cart lines ------------------------ */
.cline { display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.cline:last-child { border-bottom: none; }
.cline .cmedia { background: var(--green-softer); border-radius: var(--radius-sm); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.cline .cmedia img { width: 84%; height: 84%; object-fit: contain; }
.cline h4 { font-size: 16px; }
.cline .cmeta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.cline .cflav { margin-top: 8px; max-width: 220px; }
.cline .cright { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cline .cprice { font-weight: 800; color: var(--green-dark); font-size: 18px; }
.cline .cprice .price-was { font-size: 13px; }

/* free item row */
.cline.free .cprice { color: var(--green-dark); }
.freetag { display: inline-flex; align-items: center; gap: 6px; background: var(--green-soft); color: var(--green-dark); font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: var(--radius-pill); }

/* Quantity stepper */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.qty button { width: 34px; height: 34px; display: grid; place-items: center; background: #fff; border: none; color: var(--ink); }
.qty button:hover { background: var(--green-soft); color: var(--green-dark); }
.qty span { min-width: 34px; text-align: center; font-weight: 700; font-size: 14px; }
.qty .ico { width: 15px; height: 15px; }

.icon-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; background: none; border: none; }
.icon-link:hover { color: var(--sale); }
.icon-link .ico { width: 16px; height: 16px; }

/* ----------------------------- Free-shipping progress ------------ */
.shipbar { padding: 16px 22px; background: var(--green-softer); border-bottom: 1px solid var(--line); }
.shipbar p { font-size: 13.5px; font-weight: 600; }
.shipbar p b { color: var(--green-dark); }
.shiptrack { height: 8px; border-radius: 8px; background: #c9ddd0; border: 1px solid #a9c4b2; margin-top: 10px; overflow: hidden; }
.shipfill { height: 100%; background: var(--green-dark); border-radius: 8px; }

/* ----------------------------- Order summary --------------------- */
.summary .sum-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 14.5px; }
.summary .sum-row.discount b, .summary .sum-row.discount span { color: var(--green-dark); }
.summary .sum-row .sub { font-size: 12px; color: var(--muted); }
.summary hr { border: none; border-top: 1px solid var(--line); margin: 12px 0; }
.summary .sum-total { display: flex; align-items: baseline; justify-content: space-between; }
.summary .sum-total b { font-size: 15px; }
.summary .sum-total .amt { font-size: 28px; font-weight: 800; color: var(--berry-dark); }
.summary .sum-total .amt small { display: block; font-size: 13px; font-weight: 600; color: var(--sale); text-decoration: line-through; text-align: right; }
.earn-note { margin-top: 12px; background: #fff7e6; border: 1px solid #f0dcae; color: #8a6417; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.earn-note .ico { width: 18px; height: 18px; color: #c68a12; flex: none; }

.summary-lines { padding: 4px 0; }
.summary-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14px; border-bottom: 1px dashed var(--line); }
.summary-lines li:last-child { border-bottom: none; }
.summary-lines li span.opt { color: var(--muted); font-size: 12.5px; }

/* Coupon */
.coupon { display: flex; gap: 10px; margin-top: 6px; }
.coupon input { flex: 1; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; outline: none; }
.coupon input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

/* ----------------------------- Toggle switch --------------------- */
.switch { position: relative; display: inline-flex; align-items: center; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 52px; height: 30px; border-radius: 999px; background: var(--line); transition: background .15s ease; display: inline-block; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s ease; }
.switch input:checked + .track { background: var(--green); }
.switch input:checked ~ .knob { transform: translateX(22px); }

.points-toggle { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--green-softer); }
.points-toggle .points-badge { width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--green); color: #fff; display: grid; place-items: center; }
.points-toggle .points-badge .ico { width: 22px; height: 22px; }
.points-toggle .t-copy b { font-size: 14.5px; color: var(--green-dark); }
.points-toggle .t-copy p { font-size: 12.5px; color: var(--muted); }
.points-toggle .switch { margin-left: auto; }

/* ----------------------------- Payment options ------------------- */
.payopt { display: block; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 12px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.payopt:hover { border-color: var(--green); }
.payopt.sel { border-color: var(--berry); background: var(--berry-soft); }
.payopt .po-head { display: flex; align-items: center; gap: 12px; }
.payopt input { accent-color: var(--berry); width: 18px; height: 18px; }
.payopt .po-head b { font-size: 15px; }
.payopt .po-brands { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.pay-chip { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 11px; font-weight: 800; color: var(--ink); letter-spacing: .02em; }
.payopt .po-body { font-size: 13px; color: var(--muted); margin-top: 10px; padding-left: 30px; }
.payopt .po-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); padding-left: 0; }
#stripe-payment-element-card { width: 100%; }
#paypal-buttons-container { width: 100%; }
.pay-express { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 12px; background: #fff; }
.express-checkout-mount:empty { min-height: 0; }
/* Pending-payment live status. The reference is the one thing a waiting customer
   must be able to read out loud, so it is the most prominent element here. */
.attempt-status { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #f7faf6; text-align: left; }
.attempt-status-ref { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
.attempt-status-ref strong { display: block; margin-top: 2px; font-size: 18px; font-weight: 800; letter-spacing: .06em; color: var(--ink); }
.attempt-status-state { margin: 0; font-size: 14px; font-weight: 700; }
.attempt-status-spinner { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.attempt-status-slow { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: #fdf1dd; color: #8a4b09; font-size: 13px; font-weight: 700; }
.attempt-status-noref { margin: 10px 0 0; font-size: 13px; }
.payment-action-error { margin: 8px 0 0; font-size: 13px; color: var(--sale); font-weight: 800; }
.payment-paypal-sticky-helper { margin: 8px 0 0; font-size: 12px; }
.payment-terms-line { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }
.payment-terms-line a { color: var(--ink); font-weight: 700; text-decoration: underline; }
.payment-summary-checks { margin: 8px 0 0; }
.payment-checkline { margin: 0; }
/* The shared .modal is a two-column dialog (product/auth). Terms is a single
   scrolling column, and the body scrolls rather than the overlay so long legal
   copy cannot push the close control off screen. */
.terms-modal .terms-modal-dialog { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; max-width: 820px; max-height: min(86vh, 880px); }
.terms-modal-head { position: relative; padding: 22px 62px 14px 28px; border-bottom: 1px solid var(--line); }
.terms-modal-head h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.terms-modal-body { overflow-y: auto; padding: 4px 28px 20px; min-height: 0; }
.terms-modal-body:focus { outline: none; }
.terms-modal-body .info-toc { display: none; }
.terms-modal-body .info-prose h2 { font-size: 16px; margin-top: 20px; }
.terms-modal-body .info-prose p { font-size: 13.5px; }
.terms-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 28px 18px; border-top: 1px solid var(--line); }
.terms-modal-foot .btn { margin-top: 0; }
.terms-modal-fullpage { font-size: 12.5px; text-decoration: underline; }
@media (max-width: 560px) {
  .terms-modal .terms-modal-dialog { max-height: 92vh; }
  .terms-modal-head { padding: 18px 58px 12px 18px; }
  .terms-modal-body { padding: 4px 18px 16px; }
  .terms-modal-foot { flex-direction: column-reverse; align-items: stretch; padding: 12px 18px 16px; }
  .terms-modal-foot .terms-modal-fullpage { text-align: center; }
}
.payment-submit-hidden { display: none !important; }
.payment-protected-notice { margin-top: 12px; font-size: 12px; }
.payment-compact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.payment-compact-grid--single { grid-template-columns: minmax(0, 1fr); }
.payment-compact-card .card-head h3 { font-size: 15px; }
.payment-compact-body { font-size: 13px; }
.payment-compact-items { margin: 0 0 10px; padding-left: 16px; }
.payment-compact-items li { margin: 0 0 4px; }
.payment-compact-more { margin: 0 0 10px; font-size: 12px; }
.payment-compact-address p { margin: 0 0 4px; }
.payment-open-hero { text-align: center; padding: 30px 0 10px; }
.payment-open-hero .warn-ring { width: 92px; height: 92px; border-radius: 50%; background: #fff7ed; color: #c2410c; display: grid; place-items: center; margin: 0 auto 20px; }
.payment-open-hero h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
.payment-open-hero p { color: var(--muted); font-size: 16px; margin-top: 10px; }
.payment-retry-methods { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 760px) {
  .payment-compact-grid { grid-template-columns: 1fr; }
}
.btn.is-loading { position: relative; pointer-events: none; opacity: .92; }
.btn.is-loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: checkoutSpinner .75s linear infinite;
}
.checkout-loading-overlay[hidden] { display: none !important; }
.checkout-loading-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(21, 29, 36, .58);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: checkoutOverlayIn .22s ease;
}
.checkout-loading-panel {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(21, 29, 36, .18);
  padding: 28px 32px 24px;
  min-width: 260px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.checkout-loading-panel p {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.checkout-loading-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-softer, #e7f3e4);
  color: var(--green-dark);
}
.checkout-loading-leaf {
  width: 30px;
  height: 30px;
  animation: checkoutLeaf 1.2s ease-in-out infinite;
}
.checkout-loading-spinner { width: 22px; height: 22px; border: 3px solid #d9e2d6; border-top-color: var(--green-dark); border-radius: 999px; animation: checkoutSpinner .9s linear infinite; flex: none; }
@keyframes checkoutSpinner { to { transform: rotate(360deg); } }
@keyframes checkoutLeaf {
  0%, 100% { transform: scale(.92) rotate(-8deg); opacity: .86; }
  50% { transform: scale(1) rotate(8deg); opacity: 1; }
}
@keyframes checkoutOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-loading-leaf,
  .checkout-loading-spinner,
  .checkout-loading-overlay:not([hidden]) { animation: none; }
}

/* Secure badges */
.secure-badges { text-align: center; margin-top: 18px; }
.secure-badges .sb-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.secure-badges .sb-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.secure-badges .pay-chip { color: var(--muted); }
.secure-badges .sb-seals { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.pay-logo {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 26px; padding: 4px 9px; border: 1px solid #d8dee3; border-radius: 6px;
  background: #fff; font-size: 11px; font-weight: 800; letter-spacing: .01em; color: #1e2935;
}
.pay-logo-visa { color: #1434cb; border-color: #bfd0ff; }
.pay-logo-mastercard { color: #1f2937; border-color: #ffd8c8; }
.pay-logo-paypal,
.pay-logo-wallet { color: #003087; border-color: #c9dafc; }
.pay-logo-klarna { color: #8b1858; border-color: #f7cbe6; background: #fff7fc; }

/* ----------------------------- Forms (page-level) ---------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field-group { display: flex; flex-direction: column; }
.field-group label { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.field-group label .req { color: var(--sale); }
.field-group input, .field-group textarea, .field-group select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; font-size: 15px; outline: none; color: var(--ink); font-family: inherit; background: #fff;
}
.field-group textarea { resize: vertical; min-height: 120px; }
.field-group input:focus, .field-group textarea:focus, .field-group select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.field-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

.checkline { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; font-size: 14px; }
.checkline input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--green); }
.checkline a { color: var(--green-dark); font-weight: 700; text-decoration: underline; }
.checkline .sub { color: var(--muted); font-size: 12.5px; }

.radio-row { display: flex; align-items: center; gap: 22px; }
.radio-row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.radio-row input { accent-color: var(--berry); width: 18px; height: 18px; }

/* Auth pages (centred split card) */
.auth-wrap { max-width: 940px; margin: 0 auto; }
/* Phase 42D-4 — single-column (no side panel) auth/result pages centre nicely instead of
   sitting in the left half of a 2-col grid. */
.auth-wrap--solo { max-width: 560px; }
.auth-card { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-md); }
.auth-card--solo { grid-template-columns: 1fr; }
.auth-card--solo .auth-main { padding: 40px 44px; }
@media (max-width: 620px) {
  .auth-card--solo .auth-main { padding: 28px 22px; }
}
.auth-side { position: relative; color: #fff; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; min-height: 520px; background: linear-gradient(160deg, rgba(47,125,79,.35), rgba(36,95,61,.7)), url("../img/v3/hero.png"); background-size: cover; background-position: center; }
.auth-side h2 { font-size: 30px; }
.auth-side p { opacity: .95; margin-top: 10px; }
.auth-side .side-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.auth-side .side-list div { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; }
.auth-side .side-list .ico { width: 20px; height: 20px; color: #bff0cf; }
.auth-main { padding: 40px; }
.auth-main h1 { font-size: 26px; color: var(--green-dark); }
.auth-main .sub { color: var(--muted); margin-top: 6px; }
.auth-alt { margin-top: 18px; font-size: 14px; color: var(--muted); }
.auth-alt a { color: var(--green-dark); font-weight: 700; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 20px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ----------------------------- Alerts ---------------------------- */
.alert { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--radius-sm); padding: 14px 16px; font-size: 14px; border: 1px solid; }
.alert .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alert b { display: block; margin-bottom: 2px; }
.alert.success { background: var(--green-soft); border-color: #bfe0c8; color: var(--green-dark); }
.alert.info { background: #eaf1f7; border-color: #c5d8e8; color: #2b5a73; }
/* Phase B: warn and danger carried the same visual weight as info, so a failed coupon read as a
   neutral notice. Both now get a heavier left rule and darker text; success/info are unchanged. */
.alert.warn { background: #fff7e6; border-color: #e6c98a; border-left: 4px solid #c98f16; color: #7a5713; font-weight: 600; }
.alert.danger { background: #fbeceb; border-color: #e6a49f; border-left: 4px solid #c0392b; color: #8a2a24; font-weight: 600; }
.alert.warn b, .alert.danger b { font-weight: 800; }

/* ------------------- Discount bar (Phase B / B.1) ----------------- */
/* A thin sale-red bar pinned to the very top of the shell, above the header in the sticky chain. It
   uses the existing --sale tokens rather than a new red, stays one line on desktop, and is deliberately
   compact so an always-visible bar never turns into a banner.
   z-index sits just above the header (70) so the two cannot overlap on the way up, and well below the
   drawer/minicart (90-95) and modal (100) layers so overlays still cover it completely.
   Height is published to --discountbar-h by v3-discount-bar.js; hidden means no bar element, so that
   variable is 0 and nothing below reserves space. */
.discount-bar {
  position: sticky; top: 0; z-index: 71;
  background: linear-gradient(135deg, var(--sale-dark), var(--sale));
  color: #fff; font-size: 13.5px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.discount-bar[hidden] { display: none; }
.discount-bar-inner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 0; text-align: center; }
.discount-bar-ico { width: 17px; height: 17px; flex: none; opacity: .95; }
.discount-bar-ico .ico { width: 17px; height: 17px; }
.discount-bar-copy { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: center; }
.discount-bar-copy b { font-weight: 800; letter-spacing: .01em; }
.discount-bar-countdown { font-weight: 700; background: rgba(255, 255, 255, .18); border-radius: var(--radius-pill); padding: 1px 9px; white-space: nowrap; }
.discount-bar-countdown[hidden] { display: none; }
.discount-bar-detail { display: none; }
@media (max-width: 720px) {
  .discount-bar { font-size: 12px; }
  .discount-bar-inner { padding: 6px 14px; gap: 8px; }
  .discount-bar-copy { gap: 2px 8px; align-items: center; }
}

/* --------------------- Coupon block (Phase B) -------------------- */
.v3-coupon-flash { margin: 10px 0; }
.v3-coupon-flash[hidden] { display: none; }
.coupon-applied-note { font-size: 12.5px; margin-top: 6px; }
.coupon.is-loading, .cart-inline-form.is-loading { opacity: .65; pointer-events: none; }
.coupon-modal .modal-body { text-align: center; }
.coupon-modal-ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); margin-bottom: 12px; }
.coupon-modal-ico .ico { width: 24px; height: 24px; }
.coupon-modal .modal-body h2 { font-size: 20px; color: var(--green-dark); }
.coupon-modal .modal-body p { margin-top: 10px; font-size: 14px; }
.coupon-modal-note { font-size: 12.5px; }
.coupon-modal-note[hidden] { display: none; }
.coupon-modal .btn { margin-top: 18px; }
/* Phase B.1.2 — isolate from the generic two-column .modal grid (780px / 1fr 1fr). That grid is
   for product/login dialogs with a .modal-aside; the success dialog has one column of copy. */
.coupon-success-modal .modal,
.coupon-modal .coupon-success-dialog {
  display: block;
  width: min(100%, 560px);
  max-width: 560px;
  grid-template-columns: none;
  overflow: visible;
}
.coupon-success-body {
  margin: 0;
  padding: 26px 26px 22px;
  position: relative;
}
.coupon-success-header {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  min-height: 44px;
  padding-right: 8px;
}
.coupon-success-header .coupon-modal-ico { margin: 0 auto 0; }
.coupon-success-modal .modal-close {
  top: 16px;
  right: 16px;
}
.coupon-success-code {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .01em;
}
.coupon-success-expiry {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(192, 57, 43, .18);
  border-radius: 14px;
  background: #fbeceb;
  text-align: left;
}
.coupon-success-expiry[hidden] { display: none; }
.coupon-success-expiry [data-coupon-countdown] {
  font-size: 16px;
  font-weight: 800;
  color: var(--sale-dark);
  line-height: 1.2;
}
.coupon-success-expiry [data-coupon-modal-expiry-exact] {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
@media (max-width: 720px) {
  .coupon-success-modal .modal,
  .coupon-modal .coupon-success-dialog { width: 100%; max-width: 100%; }
  .coupon-success-body { padding: 20px 16px 16px; }
}

/* ------------- Coupon expiry / remove confirm (Phase B.1) --------- */
.coupon-expiry { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: var(--sale-dark); }
.coupon-expiry[hidden] { display: none; }
.coupon-expiry-exact { font-weight: 600; color: var(--muted); }
.coupon-modal-expiry { font-weight: 700; color: var(--sale-dark); }
.coupon-modal-expiry[hidden] { display: none; }
.coupon-remove-modal .modal {
  display: block;
  max-width: 420px;
  grid-template-columns: none;
  overflow: visible;
}
.coupon-remove-body {
  margin: 0;
  padding: 22px 22px 20px;
  position: relative;
}
.coupon-remove-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-right: 8px;
}
.coupon-remove-header h2,
.coupon-remove-modal .modal-body h2 {
  margin: 0;
  padding-right: 44px;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
}
.coupon-remove-modal .modal-close {
  top: 16px;
  right: 16px;
}
.coupon-remove-expiry {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(192, 57, 43, .18);
  border-radius: 14px;
  background: #fbeceb;
}
.coupon-remove-expiry-ico {
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--sale-dark);
}
.coupon-remove-expiry-ico .ico { width: 28px; height: 28px; }
.coupon-remove-expiry-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coupon-remove-modal [data-coupon-remove-countdown] {
  font-size: 16px;
  font-weight: 800;
  color: var(--sale-dark);
  line-height: 1.2;
}
.coupon-remove-modal [data-coupon-remove-exact] {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.coupon-remove-body-text {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
.coupon-remove-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.coupon-remove-actions .btn { margin-top: 0; flex: 1 1 140px; }
.coupon-ack[hidden] { display: none; }
@media (max-width: 720px) {
  .coupon-remove-modal .modal { max-width: 100%; }
  .coupon-remove-body { padding: 18px 16px 16px; }
}

/* ----------------------------- Badges / pills -------------------- */

/* ----------------------------- Badges / pills -------------------- */
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: 4px 11px; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.pill.green { background: var(--green-soft); color: var(--green-dark); }
.pill.berry { background: var(--berry-soft); color: var(--berry-dark); }
.pill.gold  { background: #f7edcf; color: #8a6417; }
.pill.grey  { background: #edefea; color: var(--muted); }
.pill.red   { background: #fbeceb; color: #9a322c; }
.pill.info  { background: #eaf1f7; color: #2b5a73; }

/* ----------------------------- Tables ---------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table thead th { text-align: left; background: var(--green-softer); color: var(--ink); font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.table tbody td { padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--green-softer); }
.table .t-right { text-align: right; }
.table a.tlink { color: var(--green-dark); font-weight: 700; text-decoration: underline; }
.table .prod-cell { display: flex; align-items: center; gap: 12px; }
.table .prod-cell .thumb { width: 40px; height: 40px; border-radius: 8px; background: var(--green-softer); display: grid; place-items: center; overflow: hidden; flex: none; }
.table .prod-cell .thumb img { width: 84%; height: 84%; object-fit: contain; }

/* ----------------------------- Account layout -------------------- */
.acct-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.acct-layout > * { min-width: 0; }
.acct-nav { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; position: sticky; top: calc(var(--chrome-top) + 72px); }
.acct-nav .acct-user { padding: 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.acct-nav .acct-user .avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--berry-soft); color: var(--berry-dark); display: grid; place-items: center; font-weight: 800; }
.acct-nav .acct-user b { font-size: 15px; } .acct-nav .acct-user span { font-size: 12.5px; color: var(--muted); }
.acct-nav a { display: flex; align-items: center; gap: 12px; padding: 13px 20px; font-weight: 600; font-size: 14.5px; color: var(--ink); border-left: 3px solid transparent; }
.acct-nav a .ico { width: 19px; height: 19px; color: var(--muted); }
.acct-nav a:hover { background: var(--green-softer); }
.acct-nav a.active { background: var(--green-soft); border-left-color: var(--green); color: var(--green-dark); }
.acct-nav a.active .ico { color: var(--green-dark); }
.acct-nav a.signout { color: var(--sale); border-top: 1px solid var(--line); }
.acct-nav a.signout .ico { color: var(--sale); }

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.stat .s-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--green-soft); color: var(--green-dark); display: grid; place-items: center; margin-bottom: 12px; }
.stat .s-val { font-size: 26px; font-weight: 800; }
.stat .s-label { font-size: 13px; color: var(--muted); }
.stat.gold .s-ico { background: #f7edcf; color: #8a6417; }
.stat.gold .s-val { color: #8a6417; }

/* ============================================================
   HerbaPoints + Rewards components
   Two separate currencies, kept visually distinct:
     - Points  = spendable, playful GREEN
     - Status  = Silver/Gold Club progress (never resets)
   ============================================================ */

/* Big HerbaPoints widget (spendable balance) */
.points-widget { background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-md); }
.points-widget .pw-top { display: flex; align-items: center; gap: 14px; }
.points-widget .pw-coin { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; flex: none; }
.points-widget .pw-coin .ico { width: 26px; height: 26px; }
.points-widget .pw-bal { font-size: 34px; font-weight: 800; margin-top: 12px; }
.points-widget .pw-bal small { font-size: 15px; font-weight: 700; opacity: .8; }
.points-widget p { opacity: .92; font-size: 14px; }
.points-widget .pw-link { display: inline-block; margin-top: 12px; color: #fff; font-weight: 700; text-decoration: underline; font-size: 14px; }
.points-widget.locked .pw-coin { background: rgba(255,255,255,.12); }

/* Spendable points card (lighter surface variant) */
.points-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px; }
.points-card .pc-head { display: flex; align-items: center; gap: 12px; }
.points-card .pc-ring { width: 46px; height: 46px; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); display: grid; place-items: center; flex: none; }
.points-card .pc-ring .ico { width: 24px; height: 24px; }
.points-card .pc-num { font-size: 30px; font-weight: 800; color: var(--green-dark); }
.points-card .pc-note { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* Club tier badges (never look like a discount %) */
.club-badge { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--radius-pill); padding: 6px 13px; font-weight: 800; font-size: 12.5px; letter-spacing: .02em; }
.club-badge .ico { width: 15px; height: 15px; }
.club-badge.silver { background: var(--silver-soft); color: var(--silver); }
.club-badge.gold { background: var(--gold-soft); color: var(--gold); }
.club-badge.locked { background: var(--bg); color: var(--muted); }

/* Status progress card (lifetime — only ever moves forward) */
.status-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px; }
.status-card .sc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.status-card .sc-title { font-size: 15px; font-weight: 800; }
.status-track { height: 12px; border-radius: 8px; background: var(--silver-soft); overflow: hidden; margin: 16px 0 8px; position: relative; }
.status-track span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--silver), var(--gold)); transition: width .4s ease; }
.status-card .sc-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-weight: 700; }
.status-card .sc-hint { font-size: 13px; color: var(--muted); margin-top: 12px; }
.status-card .sc-hint b { color: var(--ink); }

/* Rewards shelf (redeem points for gifts/samples/£off) */
.reward-shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.reward-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; }
.reward-item .ri-ico { width: 54px; height: 54px; border-radius: 14px; background: var(--green-soft); color: var(--green-dark); display: grid; place-items: center; }
.reward-item .ri-ico .ico { width: 26px; height: 26px; }
/* Product-backed reward: real imagery on a soft tile instead of a flat icon. */
.reward-item .ri-media { width: 84px; height: 84px; border-radius: 14px; background: var(--green-softer); display: grid; place-items: center; padding: 8px; }
.reward-item .ri-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.reward-item b { font-size: 14.5px; }
.reward-item .ri-cost { font-size: 12.5px; font-weight: 800; color: var(--green-dark); background: var(--green-softer); border-radius: var(--radius-pill); padding: 3px 10px; }
.reward-item .btn { margin-top: 4px; width: 100%; }
.reward-item.locked { opacity: .6; }

/* Reward-earned confirmation module */
.reward-earned { display: flex; align-items: center; gap: 16px; background: var(--green-softer); border: 1px solid var(--green-soft); border-radius: var(--radius); padding: 20px; }
.reward-earned .re-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; animation: pop .3s ease; }
.reward-earned .re-ico .ico { width: 28px; height: 28px; }
.reward-earned .re-num { font-size: 22px; font-weight: 800; color: var(--green-dark); }
.reward-earned p { font-size: 13.5px; color: var(--muted); }

/* Order again card */
.order-again { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.oa-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px; }
.oa-media { width: 64px; height: 64px; border-radius: 12px; background: var(--green-softer); display: grid; place-items: center; flex: none; overflow: hidden; }
.oa-media img { width: 84%; height: 84%; object-fit: contain; }
.oa-info { flex: 1; min-width: 0; }
.oa-info b { display: block; font-size: 14.5px; }
.oa-info .oa-meta { font-size: 12.5px; color: var(--muted); }
.oa-info .oa-price { font-size: 13.5px; font-weight: 800; color: var(--green-dark); }

/* Referral card */
.referral-card { background: var(--green-softer); border: 1px solid var(--green-soft); border-radius: var(--radius); padding: 22px; }
.referral-card .rc-code { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.referral-card .rc-code input { flex: 1; min-width: 200px; border: 1px dashed var(--green); background: #fff; border-radius: var(--radius-sm); padding: 12px 14px; font-weight: 700; color: var(--green-dark); }

/* Coach strip (Mark & Keely) — compact reusable support strip */
.coach-strip { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 18px; flex-wrap: wrap; }
.coach-strip .cs-avatars { display: flex; }
.coach-strip .cs-avatars img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.coach-strip .cs-avatars img:nth-child(2) { margin-left: -14px; }
.coach-strip .cs-copy { flex: 1; min-width: 200px; }
.coach-strip .cs-copy b { font-size: 14.5px; }
.coach-strip .cs-copy p { font-size: 13px; color: var(--muted); }
.coach-strip .btn-wa { flex: none; }

/* Coach feature (Mark & Keely) — one strong personal-support section */
.coach-feature { display: grid; grid-template-columns: 0.85fr 1fr; gap: 32px; align-items: center; background: var(--green-softer); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.coach-feature .cf-media { align-self: stretch; background: #fff; overflow: hidden; }
.coach-feature .cf-media img { width: 100%; height: auto; object-fit: cover; object-position: center center; display: block; }
.coach-feature .cf-copy { padding: 32px 36px 32px 4px; }
.coach-feature .cf-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--green-dark); text-transform: uppercase; letter-spacing: .05em; }
.coach-feature .cf-eyebrow .ico { width: 16px; height: 16px; }
.coach-feature .cf-copy h2 { font-size: 30px; margin-top: 10px; }
.coach-feature .cf-copy > p { color: var(--muted); font-size: 15.5px; margin-top: 12px; max-width: 52ch; }
.coach-feature .cf-points { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.coach-feature .cf-points li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
.coach-feature .cf-points .ico { width: 18px; height: 18px; color: var(--green); flex: none; }
.coach-feature .cf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.coach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.coach-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.coach-card .cc-media { aspect-ratio: 4/3; background: var(--green-softer); overflow: hidden; }
.coach-card .cc-media img { width: 100%; height: 100%; object-fit: cover; }
.coach-card .cc-body { padding: 20px; }
.coach-card .cc-role { font-size: 12.5px; font-weight: 800; color: var(--green-dark); text-transform: uppercase; letter-spacing: .05em; }
.coach-card .cc-body h3 { font-size: 20px; margin-top: 4px; }
.coach-card .cc-body p { color: var(--muted); font-size: 14px; margin-top: 8px; }
.coach-card .cc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.coach-card .cc-tags span { font-size: 12px; font-weight: 700; background: var(--green-soft); color: var(--green-dark); border-radius: var(--radius-pill); padding: 4px 12px; }

/* WhatsApp support button/block */
.btn-wa { display: inline-flex; align-items: center; gap: 8px; background: #25863f; color: #fff; border-radius: var(--radius-pill); padding: 10px 18px; font-weight: 700; font-size: 14px; border: none; box-shadow: 0 4px 14px rgba(37,134,63,.26); }
.btn-wa:hover { background: #1f7135; box-shadow: 0 6px 18px rgba(37,134,63,.32); }
.btn-wa.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-wa .ico { width: 18px; height: 18px; }
.btn-wa.btn-lg .ico { width: 20px; height: 20px; }
@media (max-width: 820px) {
  .coach-feature { grid-template-columns: 1fr; gap: 0; }
  .coach-feature .cf-copy { padding: 24px 22px 28px; }
  .coach-feature .cf-copy h2 { font-size: 24px; }
}
.wa-block { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; }
.wa-block .wa-ico { width: 52px; height: 52px; border-radius: 50%; background: #e7f4ea; color: #25863f; display: grid; place-items: center; flex: none; }
.wa-block .wa-ico .ico { width: 26px; height: 26px; }

/* Ways-to-order comparison */
.ways-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.way-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 26px; display: flex; flex-direction: column; }
.way-card.featured { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-soft), var(--shadow-md); }
.way-card .way-tag { align-self: flex-start; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-radius: var(--radius-pill); padding: 5px 12px; margin-bottom: 12px; }
.way-card.featured .way-tag { background: var(--green-soft); color: var(--green-dark); }
.way-card .way-tag.neutral { background: var(--bg); color: var(--muted); }
.way-card h3 { font-size: 20px; }
.way-card .way-sub { color: var(--muted); font-size: 14px; margin-top: 6px; }
.way-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 11px; }
.way-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.way-list li .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.way-list li.pro .ico { color: var(--green); }
.way-list li.con { color: var(--muted); }
.way-list li.con .ico { color: var(--silver); }
  .way-card .way-foot { margin-top: auto; padding-top: 18px; }
  /* Discount tier band on the direct-ordering card */
  .disc-band { display: flex; align-items: stretch; gap: 10px; margin-top: 16px; }
  .disc-step { flex: 1; text-align: center; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 8px; background: var(--bg); }
  .disc-step.alt { background: var(--green-softer); border-color: var(--green-soft); }
  .disc-step b { display: block; font-size: 22px; color: var(--green-dark); line-height: 1.1; }
  .disc-step span { font-size: 11.5px; color: var(--muted); }
  .disc-arrow { align-self: center; color: var(--muted); flex: none; }
  .disc-arrow .ico { width: 18px; height: 18px; }
  .way-fit { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 12px 14px; background: var(--bg); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink); }
  .way-fit .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--berry); }

/* No-selling-required reassurance block */
.reassure-block { display: flex; align-items: center; gap: 16px; background: var(--green-softer); border: 1px solid var(--green-soft); border-radius: var(--radius); padding: 22px; }
.reassure-block .rb-ico { width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--green-dark); display: grid; place-items: center; flex: none; box-shadow: var(--shadow-sm); }
.reassure-block .rb-ico .ico { width: 26px; height: 26px; }
.reassure-block b { font-size: 16px; }
.reassure-block p { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* Graduation panel (positive send-off when moving to direct ordering) */
.graduation { background: linear-gradient(135deg, var(--green-dark), var(--green)); color: #fff; border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-md); }
.graduation .gr-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.16); border-radius: var(--radius-pill); padding: 6px 14px; font-weight: 800; font-size: 12.5px; }
.graduation .gr-badge .ico { width: 15px; height: 15px; }
.graduation h3 { font-size: 24px; margin-top: 16px; }
.graduation p { opacity: .92; font-size: 14.5px; margin-top: 10px; }
.graduation .gr-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.graduation .gr-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.graduation .gr-list li .ico { width: 18px; height: 18px; flex: none; }
.graduation .gr-quote { margin-top: 18px; padding: 16px; background: rgba(255,255,255,.12); border-radius: var(--radius-sm); font-size: 14px; font-style: italic; }

/* Contextual dismissible guidance card (behaviour-gated) */
.guidance-card { position: relative; background: #fff; border: 1px dashed var(--green); border-radius: var(--radius); padding: 20px 22px; }
.guidance-card .gc-dismiss { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--bg); color: var(--muted); display: grid; place-items: center; }
.guidance-card .gc-dismiss .ico { width: 16px; height: 16px; }
.guidance-card .gc-eyebrow { font-size: 12px; font-weight: 800; color: var(--green-dark); text-transform: uppercase; letter-spacing: .05em; }
.guidance-card h4 { font-size: 16px; margin-top: 6px; }
.guidance-card p { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.guidance-card .gc-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ----------------------------- Product card (grid) --------------- */
.pcard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform .1s ease, box-shadow .15s ease; }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pcard .pc-media { position: relative; background: var(--green-softer); aspect-ratio: 1; display: grid; place-items: center; }
.pcard .pc-media img { width: 78%; height: 78%; object-fit: contain; }
.pcard .pc-fav { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); border: none; display: grid; place-items: center; box-shadow: var(--shadow-sm); color: var(--muted); }
.pcard .pc-fav.on { color: var(--berry); }
.pcard .pc-fav .ico { width: 18px; height: 18px; }
.pcard .pc-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pcard h4 { font-size: 15px; }
.pcard .pc-price { font-weight: 800; color: var(--green-dark); font-size: 17px; margin-top: auto; }
.pcard .pc-price .price-was { font-size: 13px; }
.pcard .btn { margin-top: 4px; }

/* ----------------------------- Empty state ----------------------- */
.empty { text-align: center; padding: 60px 24px; }
.empty .e-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); display: grid; place-items: center; margin: 0 auto 18px; }
.empty .e-ico .ico { width: 34px; height: 34px; }
.empty h3 { font-size: 22px; } .empty p { color: var(--muted); margin: 8px 0 20px; }

/* ----------------------------- Accordion (FAQ) ------------------- */
.acc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.acc details { border-bottom: 1px solid var(--line); }
.acc details:last-child { border-bottom: none; }
.acc summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 700; font-size: 15.5px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .plus { width: 26px; height: 26px; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); display: grid; place-items: center; flex: none; transition: transform .18s ease; }
.acc details[open] summary .plus { transform: rotate(45deg); }
.acc .acc-body { padding: 0 22px 20px; color: var(--muted); font-size: 14.5px; }
.acc summary .plus .ico { width: 15px; height: 15px; }

/* FAQ category chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 9px 16px; font-weight: 700; font-size: 13.5px; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.chip:hover, .chip.active { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); }
.chip .ico { width: 16px; height: 16px; }

/* ----------------------------- Choice / quiz cards --------------- */
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.choice { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 24px; text-align: center; cursor: pointer; transition: transform .1s ease, border-color .12s ease, box-shadow .15s ease; }
.choice:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green); }
.choice.sel { border-color: var(--berry); box-shadow: 0 0 0 3px var(--berry-soft); }
.choice .c-ico { width: 60px; height: 60px; border-radius: 16px; background: var(--green-soft); color: var(--green-dark); display: grid; place-items: center; margin: 0 auto 14px; }
.choice .c-ico .ico { width: 30px; height: 30px; }
.choice h3 { font-size: 18px; } .choice p { color: var(--muted); font-size: 13.5px; margin-top: 6px; }

/* Quiz progress */
.quiz-progress { height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; max-width: 420px; margin: 0 auto 6px; }
.quiz-progress span { display: block; height: 100%; background: var(--green); border-radius: 8px; transition: width .3s ease; }

/* ----------------------------- Success / timeline ---------------- */
.success-hero { text-align: center; padding: 30px 0 10px; }
.success-hero .check-ring { width: 92px; height: 92px; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); display: grid; place-items: center; margin: 0 auto 20px; animation: pop .3s ease; }
.success-hero .pending-ring,
.success-hero .warn-ring { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 20px; animation: pop .3s ease; }
.success-hero .pending-ring { background: #eef4ff; color: #1d4ed8; }
.success-hero .warn-ring { background: #fff4e8; color: #b45309; }
.success-hero .check-ring .ico,
.success-hero .pending-ring .ico,
.success-hero .warn-ring .ico { width: 46px; height: 46px; }
.payment-pending-hero { text-align: center; padding: 30px 0 10px; }
.payment-pending-hero .pending-ring { width: 92px; height: 92px; border-radius: 50%; background: #eef4ff; color: #1d4ed8; display: grid; place-items: center; margin: 0 auto 20px; }
.payment-pending-hero h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
.payment-pending-hero p { color: var(--muted); font-size: 16px; margin-top: 10px; }
.v3-cart-flash { margin: 0 0 16px; }
.v3-cart-flash[hidden] { display: none !important; }
.success-hero h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
.success-hero p { color: var(--muted); font-size: 16px; margin-top: 10px; }

.timeline { display: flex; gap: 0; margin: 8px 0; }
.timeline .tl { flex: 1; text-align: center; position: relative; padding-top: 34px; }
.timeline .tl::before { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 3px; background: var(--line); }
.timeline .tl:first-child::before { left: 50%; }
.timeline .tl:last-child::before { right: 50%; }
.timeline .tl .tdot { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--line); border: 3px solid var(--bg); }
.timeline .tl.done .tdot { background: var(--green); }
.timeline .tl.done::before { background: var(--green); }
.timeline .tl b { font-size: 13.5px; } .timeline .tl span { font-size: 12px; color: var(--muted); display: block; }

/* ----------------------------- CTA band -------------------------- */
.cta-band { background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff; border-radius: 24px; padding: 40px; text-align: center; box-shadow: var(--shadow-md); }
.cta-band h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; }
.cta-band p { opacity: .92; margin: 10px auto 20px; max-width: 56ch; }

/* Feature list with ticks */
.tick-list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 15px; }
.tick-list li .ico { width: 20px; height: 20px; color: var(--green); flex: none; margin-top: 2px; }

/* Numbered "how it works" */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.how-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.how-step .h-num { width: 44px; height: 44px; border-radius: 50%; background: var(--berry-soft); color: var(--berry-dark); display: grid; place-items: center; font-weight: 800; font-size: 18px; margin-bottom: 14px; }
.how-step h3 { font-size: 18px; } .how-step p { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* ----------------------------- Design-system page ---------------- */
.ds-nav { position: sticky; top: calc(var(--chrome-top) + 16px); }
.ds-section { padding: 30px 0; border-top: 1px solid var(--line); }
.ds-section > h2 { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.ds-section > .ds-desc { color: var(--muted); margin-bottom: 20px; }
.ds-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.swatch { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; width: 150px; }
.swatch .sw-color { height: 70px; }
.swatch .sw-meta { padding: 10px 12px; background: #fff; }
.swatch .sw-meta b { font-size: 13px; display: block; } .swatch .sw-meta span { font-size: 11px; color: var(--muted); }
.type-scale > * { margin: 6px 0; }
.spacing-demo { display: flex; align-items: flex-end; gap: 12px; }
.spacing-demo .sp { background: var(--green-soft); border: 1px solid var(--green); border-radius: 6px; }
.ds-tokrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 14px; }
.ds-kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .ds-kit-grid { grid-template-columns: 1fr; } }

/* ----------------------------- Extra responsive ------------------ */
@media (max-width: 980px) {
  .layout-2col { grid-template-columns: minmax(0, 1fr); }
  .acct-layout { grid-template-columns: 1fr; }
  .acct-nav { position: static; display: grid; grid-template-columns: 1fr 1fr; }
  .acct-nav .acct-user { grid-column: 1 / -1; }
  .pcard-grid { grid-template-columns: repeat(3, 1fr); }
  .sticky-aside { position: static; }
}
@media (max-width: 980px) {
  .ways-grid, .coach-grid { grid-template-columns: 1fr; }
  .reward-shelf { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .info-hero, .cta-band { padding: 28px 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .auth-card { grid-template-columns: 1fr; }
  .auth-side { min-height: 180px; }
  .stat-grid, .how-grid, .choice-grid { grid-template-columns: 1fr; }
  .pcard-grid { grid-template-columns: repeat(2, 1fr); }
  .acct-nav { grid-template-columns: 1fr; }
  .reward-shelf { grid-template-columns: 1fr; }
  .order-again { grid-template-columns: 1fr; }
  .cline { grid-template-columns: 72px 1fr; }
  .cline .cright { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .cstep .node b { display: none; }
  .cstep .node.active b { display: inline; }
}

/* =================================================================
   FINAL POLISH PASS — new components
   ================================================================= */

/* ---------------- Mobile product-discovery chips ----------------
   Sticky, horizontally-scrolling shortcuts that jump to homepage
   product sections. Desktop keeps the existing .cat-strip. -------- */
.cat-chips { display: none; }
/* position:relative so we can paint a right-edge fade that hints "scroll for more". */
.cat-chips .container { position: relative; display: flex; gap: 8px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.cat-chips .container::-webkit-scrollbar { display: none; }
.cat-chip { scroll-snap-align: start; white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: var(--radius-pill); background: var(--green-softer); color: var(--green-dark); font-weight: 800; font-size: 13px; border: 1px solid var(--green-soft); }
.cat-chip.lead { background: var(--berry); color: #fff; border-color: var(--berry); }
.cat-chip.lead .ico { width: 15px; height: 15px; }
.cat-chip:active { transform: translateY(1px); }
/* Trailing "more" chip with a chevron so the scroll affordance is explicit. */
.cat-chip.more { background: #fff; color: var(--muted); border-style: dashed; }
.cat-chip.more .ico { width: 15px; height: 15px; }
/* The old horizontal scrolling chips are replaced by the .cat-select dropdown
   in the header, so they stay hidden on every viewport now. */
/* Reusable inline group nav (non-sticky) for category pages, shown all widths. */
.group-nav { position: relative; }
.group-nav .container { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 0; scrollbar-width: none; scroll-snap-type: x proximity; }
.group-nav .container::-webkit-scrollbar { display: none; }
.group-nav::after { content: ""; position: absolute; top: 0; right: 0; width: 40px; height: 100%; pointer-events: none; background: linear-gradient(90deg, transparent, var(--bg) 80%); }
/* On mobile the header "Choose your products" dropdown replaces in-page chips,
   so this horizontal scroller is hidden to avoid duplicate scrolling chips. */
@media (max-width: 720px) { .group-nav { display: none; } }

/* ---------------- Logged-in home dashboard hero ------------------ */
.home-dash { margin-top: 22px; border-radius: 24px; overflow: hidden; background: linear-gradient(140deg, var(--green-dark), var(--green)); color: #fff; box-shadow: var(--shadow-md); }
.home-dash .hd-top { padding: 26px 28px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.home-dash .hd-avatar { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-weight: 800; font-size: 24px; flex: none; }
.home-dash .hd-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }
.home-dash .hd-eyebrow .ico { width: 15px; height: 15px; color: var(--green-bright); }
.home-dash h1 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; margin-top: 4px; }
.home-dash .hd-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.home-dash .hd-actions .btn-light { background: #fff; color: var(--green-dark); }
.home-dash .hd-actions .btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.home-dash .hd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 28px 26px; }
.hd-cell { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; padding: 18px; }
.hd-cell .hd-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .9; display: flex; align-items: center; gap: 7px; }
.hd-cell .hd-label .ico { width: 16px; height: 16px; }
.hd-cell .hd-val { font-size: 24px; font-weight: 800; margin-top: 8px; line-height: 1.1; }
.hd-cell .hd-note { font-size: 12.5px; opacity: .88; margin-top: 4px; }
.hd-bar { height: 9px; border-radius: 8px; background: rgba(255,255,255,.24); overflow: hidden; margin-top: 12px; }
.hd-bar span { display: block; height: 100%; background: #fff; border-radius: 8px; }
.hd-cell .hd-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-weight: 800; font-size: 13px; text-decoration: underline; }
@media (max-width: 720px) {
  .home-dash .hd-top { padding: 22px 20px 16px; }
  .home-dash .hd-actions { margin-left: 0; width: 100%; }
  .home-dash .hd-actions .btn { flex: 1; }
  .home-dash .hd-grid { grid-template-columns: 1fr; padding: 0 20px 22px; }
}

.home-hero-placeholder { background: linear-gradient(135deg, var(--green-soft), var(--green-softer)); }
.home-coach-placeholder { background: linear-gradient(160deg, var(--green-soft), #e8f5e6); min-height: 320px; }

/* ---------------- Logged-in promo / coupon band ----------------- */
.promo-band { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: center; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, var(--berry), var(--berry-dark)); color: #fff; box-shadow: var(--shadow-md); }
.promo-copy { padding: 30px 34px; }
.promo-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: rgba(255,255,255,.16); padding: 6px 12px; border-radius: var(--radius-pill); }
.promo-eyebrow .ico { width: 15px; height: 15px; }
.promo-band h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-top: 12px; }
.promo-band p { margin-top: 8px; opacity: .95; max-width: 48ch; }
.promo-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.promo-coupon { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; opacity: .95; }
.promo-coupon .ico { width: 15px; height: 15px; color: var(--green-bright); }
.promo-coupon b { background: rgba(255,255,255,.18); padding: 3px 9px; border-radius: 8px; letter-spacing: .06em; font-weight: 800; }
.promo-media { align-self: stretch; display: grid; place-items: center; background: rgba(255,255,255,.1); padding: 20px; }
.promo-media img { max-height: 190px; width: auto; object-fit: contain; }
@media (max-width: 720px) {
  .promo-band { grid-template-columns: 1fr; }
  .promo-copy { padding: 26px 22px; }
  .promo-media { display: none; }
  .promo-actions .btn { width: 100%; }
}

/* ---------------- Two ways to order (logged-in) ----------------- */
.order-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ow-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.ow-card .ow-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--green-soft); color: var(--green-dark); margin-bottom: 14px; }
.ow-card .ow-ico .ico { width: 22px; height: 22px; }
.ow-card h3 { font-size: 18px; font-weight: 800; }
.ow-card p { color: var(--muted); margin: 8px 0 18px; font-size: 14.5px; line-height: 1.55; }
.ow-direct { background: var(--green-softer); border-color: var(--green-soft); }
.ow-direct .ow-ico { background: #fff; }
@media (max-width: 720px) { .order-ways { grid-template-columns: 1fr; } }


/* ---------------- Reusable Free Starter Kit progress ------------- */
.kit { border-radius: var(--radius); padding: 18px 20px; border: 1px solid; }
.kit.progress { background: var(--green-softer); border-color: var(--green-soft); }
.kit.unlocked { background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff; border-color: transparent; box-shadow: var(--shadow-sm); }
.kit.includes { background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff; border-color: transparent; box-shadow: var(--shadow-sm); }
.kit.alt { background: var(--berry-soft); border-color: #f0cfe4; }
.kit .kit-top { display: flex; align-items: center; gap: 14px; }
.kit .kit-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.kit .kit-ico .ico { width: 24px; height: 24px; }
.kit.progress .kit-ico { background: var(--green); color: #fff; }
.kit.unlocked .kit-ico { background: rgba(255,255,255,.2); color: #fff; }
.kit.includes .kit-ico { background: rgba(255,255,255,.2); color: #fff; }
.kit.alt .kit-ico { background: var(--berry); color: #fff; }
.kit .kit-copy b { font-size: 15.5px; display: block; }
.kit .kit-copy p { font-size: 13px; margin-top: 2px; }
.kit.progress .kit-copy p { color: var(--muted); }
.kit.alt .kit-copy b { color: var(--berry-dark); }
.kit.alt .kit-copy p { color: var(--berry-dark); opacity: .85; }
.kit .kit-track { height: 10px; border-radius: 8px; overflow: hidden; margin-top: 14px; }
/* 44D: soft visible track (not white-on-white); solid fill for contrast */
.kit.progress .kit-track { background: #c9ddd0; border: 1px solid #a9c4b2; }
.kit.unlocked .kit-track { background: rgba(255,255,255,.28); }
.kit.includes .kit-track { background: rgba(255,255,255,.28); }
.kit .kit-fill { height: 100%; border-radius: 8px; transition: width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); }
.kit.progress .kit-fill { background: var(--green-dark); }
.kit.unlocked .kit-fill,
.kit.includes .kit-fill { background: #fff; }
.kit .kit-scale { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-top: 7px; }
.kit.progress .kit-scale { color: var(--muted); }
.kit .kit-scale b { font-weight: 800; }
/* Third state: kit already claimed this month — calm, informational, no bar. */
.kit.claimed { background: var(--card); border-color: var(--line); }
.kit.claimed .kit-ico { background: var(--green-soft); color: var(--green-dark); }
.kit.claimed .kit-copy p { color: var(--muted); }
.kit.claimed .kit-flag { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; font-weight: 800; color: var(--green-dark); background: var(--green-soft); padding: 6px 12px; border-radius: var(--radius-pill); }
.kit.claimed .kit-flag .ico { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) {
  .kit .kit-fill { transition: none; }
}

/* ---------------- Subtle "ways to order" footer teaser ----------- */
.ways-teaser { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 13.5px; color: rgba(255,255,255,.82); text-align: center; }
.ways-teaser .ico { width: 18px; height: 18px; color: #8fd8a8; flex: none; }
.ways-teaser a { color: #fff; font-weight: 800; text-decoration: underline; }

/* ================================================================= */
/* Phase 42D-5 — shop/product/cart polish                            */
/* ================================================================= */

/* --- Real brand logo (Herbalife) ---------------------------------- */
.brand-logo.brand-logo--img {
  width: auto; height: 34px; min-width: 34px; border-radius: 0;
  background: none; color: inherit; padding: 0;
}
.brand-logo.brand-logo--img img { height: 34px; width: auto; display: block; object-fit: contain; }
.footer-brand .brand-logo.brand-logo--img { background: none; }
@media (max-width: 640px) {
  .brand-logo.brand-logo--img, .brand-logo.brand-logo--img img { height: 28px; }
}

/* --- Product page premium spacing --------------------------------- */
.product-page { padding-top: 4px; padding-bottom: 40px; }

/* --- More information slide-out ----------------------------------- */
.slideout { overflow: hidden; transition: height .3s ease; }

/* --- Custom flavour selector (sitewide) --------------------------- */
.flavour-select { position: relative; }
.flavour-select .fs-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.fs-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 11px 14px; cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fs-btn:hover { border-color: var(--green-soft); }
.flavour-select.open .fs-btn { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-softer); }
.fs-btn-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fs-btn-txt b { font-size: 15px; font-weight: 700; }
.fs-btn-desc { font-size: 12px; color: var(--muted); margin-top: 1px; }
.fs-btn.is-placeholder b { color: var(--muted); font-weight: 600; }
.fs-caret { width: 18px; height: 18px; color: var(--muted); flex: none; transition: transform .2s ease; }
.flavour-select.open .fs-caret { transform: rotate(180deg); }
.fs-menu {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(20,40,20,.16); padding: 6px; display: none;
  max-height: 280px; overflow-y: auto;
  /* DG-FLAVOUR-ERROR-HERO-MICRO-POLISH-31A (Mark): scrolling inside a flavour menu never carries the page along at its top
     or bottom (standalone, Quick View and cart pack menus); a short menu that cannot scroll is covered by
     HerbaV3Flavour.containScroll (v3-flavour-select.js). */
  overscroll-behavior-y: contain;
}
.flavour-select.open .fs-menu { display: block; }
.fs-opt {
  width: 100%; display: block; text-align: left; background: none; border: none;
  border-radius: 10px; padding: 10px 12px; cursor: pointer; font-family: inherit;
}
.fs-opt:hover, .fs-opt:focus { background: var(--green-softer); outline: none; }
.fs-opt[aria-selected="true"] { background: var(--green-soft); }
.fs-opt-main { display: flex; flex-direction: column; line-height: 1.3; }
.fs-opt-main b { font-size: 14.5px; font-weight: 700; }
.fs-opt-desc { font-size: 12px; color: var(--muted); margin-top: 1px; }
.fs-opt.is-disabled { opacity: .5; cursor: not-allowed; }

/* --- Shared popups: near-full-width bottom sheet on phones (the Quick View owns its own geometry in v3-c-quickview.css) --- */
@media (max-width: 640px) {
  .modal-overlay { padding: 10px; align-items: flex-end; }
}

/* --- New-customer welcome gift + free shipping combined block ----- */
.welcome-gift.kit.progress { background: var(--berry-soft); border-color: #f0cfe4; }
.welcome-gift .kit-copy b { color: var(--berry-dark); }
.welcome-gift .kit-copy p { color: var(--berry-dark); opacity: .9; }
.welcome-gift.kit.progress .kit-ico { background: var(--berry); color: #fff; }
.welcome-gift.kit.progress {
  background: linear-gradient(135deg, #fff1f8 0%, #ffe6f3 45%, #ecf7df 100%);
  border-color: #e7b8d2;
  box-shadow: var(--shadow-sm);
}
.welcome-gift .wg-rows { margin-top: 10px; display: grid; gap: 6px; }
.welcome-gift .wg-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--berry-dark); }
.welcome-gift .wg-row .ico { width: 15px; height: 15px; }

/* Phase 42D-7 product hierarchy */
.product-row .cat-row-buy select { width: 100%; }

/* Flavour dropdown viewport behavior in modals */
.flavour-select .fs-menu { max-height: 260px; overflow: auto; }
.flavour-select.open-up .fs-menu { bottom: calc(100% + 6px); top: auto; }
.welcome-gift .wg-rows { display: grid; gap: 8px; margin-top: 6px; }
.welcome-gift .wg-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--berry-dark); }
.welcome-gift .wg-row .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--berry); }

/* --- Catalog V3 overview cards ------------------------------------ */
.cat-overview-hero { margin-top: 20px; }
.cat-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 22px; }
.cat-card {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green-soft); }
.cat-card .cc-eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--green-dark); }
.cat-card h3 { font-size: 20px; font-weight: 800; margin-top: 6px; }
.cat-card .cc-desc { color: var(--muted); font-size: 14px; line-height: 1.55; margin-top: 8px; flex: 1; }
.cat-card .cc-thumbs { display: flex; gap: 8px; margin-top: 16px; }
.cat-card .cc-thumb { width: 56px; height: 56px; border-radius: 12px; background: var(--green-softer); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; flex: none; }
.cat-card .cc-thumb img { width: 84%; height: 84%; object-fit: contain; }
.cat-card .cc-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 800; color: var(--green-dark); font-size: 14px; }
.cat-card .cc-more .ico { width: 16px; height: 16px; transition: transform .18s ease; }
.cat-card:hover .cc-more .ico { transform: translateX(3px); }
@media (max-width: 560px) { .cat-overview { grid-template-columns: 1fr; } }

/* --- Ajax search: images + bold category -------------------------- */
.sr-item .sr-media { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--green-softer); display: grid; place-items: center; flex: none; }
.sr-item .sr-media img { width: 84%; height: 84%; object-fit: contain; }
.sr-item .sr-cat { font-weight: 800; color: var(--green-dark); font-size: 12px; }

/* --- Phase 42D-6: checkout form, stepper links, mobile overflow -------- */
html, body.v3-storefront { overflow-x: clip; max-width: 100%; }

/* Short-page shell: keep the dark footer pinned to the bottom of the viewport instead of
   leaving page background visible underneath it. Every body-level overlay (.modal-overlay,
   .drawer-overlay, .minicart, .checkout-loading-overlay, .skip-link) is position:fixed, so
   they stay out of this flex flow and contribute no height. Long pages are unaffected:
   <main> only grows when there is leftover space. */
body.v3-storefront {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.v3-storefront > main { flex: 1 0 auto; }
@supports (min-height: 100dvh) {
  /* Avoids the mobile-browser toolbar gap that 100vh leaves behind. */
  body.v3-storefront { min-height: 100dvh; }
}
/* Phase 43D root-cause fix: 42D-6 set these to max-width:100% to fight mobile
   overflow, but that removed the normal desktop container cap on every
   .container.page (cart, checkout, payment-*, account, not-found …), making
   them span the full viewport. Restore the standard contained width; the
   overflow-x:clip above stays as the mobile safety net. Wide pages must
   opt in explicitly via .page--wide (none currently need it). */
.page.container, section.container.page { max-width: var(--container); margin-left: auto; margin-right: auto; }
.page.container.page--wide, section.container.page.page--wide { max-width: 100%; }

/* --- Phase 43C: order-process layout containment ---------------------- */
/* Keep cards/summaries inside the container on full-width and narrower desktop.
   Long values/strings wrap instead of forcing horizontal overflow. */
.layout-2col .card { max-width: 100%; }
.summary .sum-row, .summary .sum-total { min-width: 0; }
.summary .sum-row > span, .summary .sum-total .amt { overflow-wrap: anywhere; }
.payment-compact-address p { overflow-wrap: anywhere; }
.payment-open-hero, .payment-pending-hero, .success-hero { max-width: 100%; }
.payment-open-hero p, .payment-pending-hero p, .success-hero p { overflow-wrap: anywhere; }
.form-compact.form-grid { gap: 12px 14px; }
.form-compact .field-group label { margin-bottom: 0; font-size: 12.5px; }
.checkout-form-body { padding-top: 18px !important; padding-bottom: 18px !important; }
.delivery-toggle-wrap { margin: 14px 0 0; }
.delivery-toggle {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-weight: 700; font-size: 14px; padding: 10px 0;
}
.delivery-toggle input { width: 18px; height: 18px; accent-color: var(--green); }
.delivery-toggle .ico { width: 18px; height: 18px; color: var(--green-dark); }
.checkout-delivery-card { margin-top: 10px; }
.checkout-delivery-card .card-body { padding-top: 14px; }
.cstep { max-width: 100%; overflow: hidden; padding: 0 2px; }
.cstep a.node { text-decoration: none; color: inherit; border-radius: 8px; }
.cstep a.node:hover b { color: var(--green-dark); }
.topbar .container { flex-wrap: wrap; justify-content: center; text-align: center; line-height: 1.35; }
@media (max-width: 720px) {
  .brand-logo--img { flex: none; }
  .brand-name { display: none; }
  .brand { gap: 0; max-width: calc(100% - 150px); }
  .cstep { margin-left: 0; margin-right: 0; gap: 6px; }
  .cstep .bar { min-width: 12px; }
  .layout-2col, .checkout-layout { gap: 16px; }
  .acct-layout, .account-page .layout-2col { max-width: 100%; overflow: hidden; }
  }
@media (max-width: 390px) {
  .container { padding: 0 14px; }
  .topbar span { font-size: 11.5px; }
}

/* ============================================================
   Phase 43D — page container restoration + order/account polish
   (scoped; no global input/select/button margins)
   ============================================================ */

/* L — searchbar vertical rhythm lives on the base `.searchbar form` rule (margin: 6px 0). */

/* M — spacing between action button rows and sandbox/status notices */
.payment-retry-methods + .payment-sandbox-notice,
.payment-sandbox-notice { margin-top: 16px; }
.payment-open-hero .payment-sandbox-notice,
.payment-pending-hero .payment-sandbox-notice { margin-top: 14px; }

/* N — cart flavour selector top spacing, scoped to cart lines only */
.cline .cart-flavour-form { margin-top: 12px; }
.cline .cflav { margin-top: 12px; }

/* O — subtle contrast/lift for order + account summary/sidebar cards */
.cart-summary > .card,
.layout-2col > aside .card,
.acct-layout > aside .card {
  box-shadow: var(--shadow-md);
  border-color: #e3e8e0;
}

/* P — checkout action alignment: desktop primary right-aligned + auto width,
   mobile keeps full-width block. Address form labels are untouched. */
.checkout-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.checkout-actions .btn-block { width: auto; }
.checkout-back-links { margin-top: 12px; }
@media (max-width: 720px) {
  .checkout-actions { justify-content: stretch; }
  .checkout-actions .btn-block { width: 100%; }
}

/* ============================================================
   Phase 43E — payment retry UX, spacing polish, summary refine
   (scoped; no broad global .stack change)
   ============================================================ */

/* 5 — global polish: promo separation, modal glow, member-code tint.
   Searchbar height/margin is owned by the base `.searchbar form` + `--searchbar-h`. */
.searchbar .container { padding-top: 2px; padding-bottom: 2px; }
.promo-band { margin: 28px 0; }
.modal {
  box-shadow: 0 24px 60px rgba(20, 30, 25, .28), 0 0 0 1px rgba(255, 255, 255, .35) inset;
}
.login-member-code-panel {
  margin-top: 14px; background: var(--green-softer);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
}
.login-member-code-panel summary { color: var(--green-dark); }

/* 1 & 8 — outcome pages: tighter stack spacing + stronger icon contrast */
.order-outcome .stack { gap: 12px; }
.order-outcome .layout-2col { margin-top: 20px; }
.order-outcome .sticky-aside.stack { gap: 10px; }
.order-outcome .payment-sandbox-notice { margin-top: 14px; }
/* stronger, status-appropriate ring tints (replaces faint 43D accents) */
.payment-open-hero .warn-ring { background: #fdecea; color: #b91c1c; }          /* failed / cancelled */
.payment-open-hero.is-invalid .warn-ring { background: #fdf1dd; color: #b45309; } /* invalid_session amber */
.payment-pending-hero .pending-ring { background: #e6efff; color: #1e40af; }      /* pending blue */
.payment-open-hero .warn-ring .ico,
.payment-pending-hero .pending-ring .ico { width: 42px; height: 42px; }

/* 3 — payment context alert: keep inline copy inline (override .alert b block) */
.payment-context-alert b, .payment-context-alert strong { display: inline; font-weight: 700; }
.payment-context-alert .lead { display: block; font-weight: 800; margin-bottom: 3px; }
.payment-context-alert div { line-height: 1.5; }

/* 2 — retry as a real payment-step chooser (reuse payopt look as links) */
.payment-retry-options { display: grid; gap: 10px; margin: 6px 0 2px; }
.payment-retry-option {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px;
  color: var(--ink); transition: border-color .12s ease, background .12s ease;
}
.payment-retry-option:hover { border-color: var(--green); background: var(--green-softer); }
.payment-retry-option .pro-ico { width: 20px; height: 20px; color: var(--green-dark); flex: none; }
.payment-retry-option b { font-size: 15px; }
.payment-retry-option .pro-brands { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.payment-retry-cta { margin-top: 6px; }

/* 7 — payment compact overview: no bullets/left pad, all items, cleaner hierarchy */
.payment-compact-items { margin: 0 0 10px; padding-left: 0; list-style: none; }
.payment-compact-items li { margin: 0 0 6px; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.payment-compact-items li .pci-qty { color: var(--muted); flex: none; }
.payment-compact-card .card-head { padding: 14px 18px; }
.payment-compact-card .card-head h3 { font-size: 15px; }
.payment-compact-card .card-body { padding: 16px 18px; }

/* 6 — checkout summary refine: thumbnails + flavour line, smaller/cleaner */
.checkout-summary-sidebar .card-body.summary { padding: 18px; }
.summary-thumb-lines { display: flex; flex-direction: column; }
.summary-thumb-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.summary-thumb-line:last-child { border-bottom: none; }
.summary-thumb { width: 44px; height: 44px; border-radius: 8px; background: var(--green-softer); flex: none; overflow: hidden; display: grid; place-items: center; }
.summary-thumb img { width: 84%; height: 84%; object-fit: contain; }
.summary-thumb-info { flex: 1; min-width: 0; }
.summary-thumb-info .stl-name { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.summary-thumb-info .stl-flavour { font-size: 12px; color: var(--muted); margin-top: 1px; }
.summary-thumb-info .stl-qty { font-size: 12px; color: var(--muted); }
.summary-thumb-price { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.checkout-sidebar-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* ===================================================================
   Phase 43F — one-shot payment status icon animations
   Icons briefly animate on load, then hold a static state.
   Respect prefers-reduced-motion: reduce (no motion at all).
   =================================================================== */
@keyframes herba-status-pop {
    0%   { transform: scale(.55); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes herba-status-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
@keyframes herba-spin-once {
    from { transform: rotate(0deg); }
    to   { transform: rotate(720deg); }
}

.success-hero .check-ring,
.payment-open-hero .warn-ring,
.payment-pending-hero .pending-ring {
    animation: herba-status-pop .5s ease-out both;
}
/* failed/cancelled: pop, then a single short shake to signal the error */
.payment-open-hero.is-failed .warn-ring {
    animation: herba-status-pop .5s ease-out both, herba-status-shake .5s ease-in-out .5s 1 both;
}

/* pending/processing: clear blue processing icon with a spinner arc that
   makes ~2 turns on load, then stops (one-shot, not infinite). */
.payment-pending-hero .pending-ring {
    position: relative;
}
.payment-pending-hero .pending-ring::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #1e40af;
    border-right-color: #1e40af;
    animation: herba-spin-once 1.4s ease-in-out both;
}

@media (prefers-reduced-motion: reduce) {
    .success-hero .check-ring,
    .payment-open-hero .warn-ring,
    .payment-pending-hero .pending-ring,
    .payment-open-hero.is-failed .warn-ring {
        animation: none;
    }
    .payment-pending-hero .pending-ring::after {
        animation: none;
        opacity: .7;
    }
}

/* ===================================================================
   Phase 44B — overlay mechanics: body lock, drawer, minicart, product modal
   (+ Auditor follow-up: CTA center, vh→dvh order, minicart short-height, modal fallbacks)
   =================================================================== */

/* Named-lock body class (iOS-safe position:fixed applied via V3BodyLock JS). */
html.v3-scroll-locked,
body.v3-scroll-locked {
  overflow: hidden;
  overscroll-behavior: none;
}
/* Reduce layout shift when the scrollbar disappears under the lock.
   Prefer gutter reservation only — do NOT also pad sticky header bands (44C-F M1). */
html {
  scrollbar-gutter: stable;
}

/* Mobile drawer: internal scroll + no horizontal blowout */
.drawer {
  max-width: min(95vw, 360px);
  width: min(95%, 360px);
  max-height: 100vh;   /* fallback first */
  max-height: 100dvh;  /* modern */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.drawer .shop-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  align-self: stretch;
  margin: 12px 16px;
  min-height: 44px;
  padding: 12px 18px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-tiles,
.drawer-links,
.drawer-head,
.drawer-foot {
  max-width: 100%;
  box-sizing: border-box;
}
.drawer-closeout {
  margin: 8px 16px 24px;
  margin-top: auto;
  padding: 0 0 4px;
  background: transparent;
  border: none;
  box-sizing: border-box;
  max-width: calc(100% - 32px);
  flex: none;
}
.drawer-closeout-rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 8px 0 16px;
}
.drawer-closeout-title {
  margin: 0 0 4px;
  padding: 0 2px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
.drawer-closeout-text {
  margin: 0 0 10px;
  padding: 0 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.drawer-closeout-link {
  display: inline-flex;
  margin: 0 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--green-softer);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 800;
  color: var(--green-dark);
  text-decoration: none;
}

/* Minicart: panel fills viewport; body scrolls internally; foot stays reachable */
.minicart {
  max-height: 100vh;   /* fallback first */
  max-height: 100dvh;  /* modern */
  height: 100%;
  overflow: hidden;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
.minicart .mc-head,
.minicart .mc-foot {
  flex: none;
}
.minicart .mc-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
}
.minicart .mc-body {
  flex: 1 1 auto;
  min-height: 0; /* N3: allow flex child to shrink so foot is not clipped */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Short landscape / short viewport: keep foot visible, shrink scroll area */
@media (max-height: 420px) {
  .minicart .mc-foot {
    padding: 10px 12px;
    gap: 8px;
  }
  .minicart .mc-head {
    padding: 12px 14px;
  }
}

/* Featured / pcard mobile CTA short label */
.btn-label-short { display: none; }
@media (max-width: 560px) {
  .pcard .btn-add-label .btn-label-full { display: none; }
  .pcard .btn-add-label .btn-label-short { display: inline; }
}

/* ===================================================================
   Phase 43G — payment failure summary + pending help polish
   Own UI only (no Stripe iframe internals).
   =================================================================== */
.payment-error-summary {
    margin: 12px 0 0;
    border-radius: 12px;
    border: 1px solid #f1b4b4;
    background: #fdf0f0;
    color: #9b1c1c;
    overflow: hidden;
}
.payment-error-summary.is-decline {
    border-color: #e8a0a0;
    background: linear-gradient(180deg, #fdf2f2 0%, #fce8e8 100%);
}
.payment-error-summary-inner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
}
.payment-error-summary-ico {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f8d7d7;
    color: #b91c1c;
    display: grid;
    place-items: center;
}
.payment-error-summary-ico .ico { width: 16px; height: 16px; }
.payment-error-summary-body { flex: 1; min-width: 0; }
.payment-error-summary-title {
    display: block;
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 4px;
    color: #991b1b;
}
.payment-error-summary-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #7f1d1d;
}
.payment-error-help {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: #9a3412;
    font-weight: 600;
}
.payment-error-tech {
    margin: 8px 0 0;
    font-size: 11.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.payment-pending-help-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.payment-consent-retry-hint { line-height: 1.4; }

/* ===================================================================
   Phase 44D — cart + minicart visual hierarchy (layout/CSS only)
   =================================================================== */
.cline {
  align-items: start;
}
.cline h4 {
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}
.cline .cmeta {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}
.cline .cprice {
  font-weight: 800;
  font-size: 18px;
  color: var(--green-dark);
  line-height: 1.2;
}
.cline .cright {
  gap: 10px;
}
.cline-save-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: max-content;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: #7a3a12;
  background: #fff3e8;
  border: 1px solid #f0d0b0;
}
.cline-save-chip .price-was {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: line-through;
  opacity: .9;
}
.cart-remove-btn {
  min-height: 40px;
  min-width: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #6b7280;
  background: #f4f5f4;
  border: 1px solid var(--line);
  cursor: pointer;
}
.cart-remove-btn:hover {
  color: var(--sale);
  background: #fff1f0;
  border-color: #f0c9c6;
}
.cart-remove-btn .ico {
  width: 18px;
  height: 18px;
}
.cart-remove-label {
  font-size: 12.5px;
  font-weight: 700;
}

/* Minicart rows */
.minicart .mc-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 14px 0;
}
.minicart .mc-info {
  gap: 4px;
}
.minicart .mc-info b {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}
.minicart .mc-flavour {
  font-weight: 500;
}
.minicart .mc-price {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  align-items: flex-start;
}
.minicart .mc-unit-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--green-dark);
  line-height: 1.2;
}
.minicart .mc-line-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--green-dark);
}
.minicart .mc-price .price-was {
  font-size: 12px;
  font-weight: 500;
  text-decoration: line-through;
  color: var(--muted);
  margin-left: 0;
}
.minicart .mc-each {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.minicart .mc-scroll-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.minicart .mc-scroll-area .mc-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  position: relative;
}
.minicart .mc-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  pointer-events: none;
  z-index: 3;
}
.minicart .mc-fade-top {
  top: 0;
  background: linear-gradient(to bottom, #fff 15%, rgba(255,255,255,0) 100%);
}
.minicart .mc-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, #fff 15%, rgba(255,255,255,0) 100%);
}
/* 44H: remove body-pseudo fades (they scrolled away with content) */
.minicart .mc-body::before,
.minicart .mc-body::after {
  content: none;
  display: none;
}
.mc-extra[hidden],
.mc-extra:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.minicart .mc-save-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: max-content;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #7a3a12;
  background: #fff3e8;
  border: 1px solid #f0d0b0;
}
.minicart .mc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.minicart .mc-line-total,
.minicart .mc-total {
  font-size: 15px;
  font-weight: 700;
  color: var(--green-dark);
  text-align: right;
  white-space: nowrap;
  margin-left: auto;
}
.minicart .mc-remove-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #f4f5f4;
  color: #5b6470;
  cursor: pointer;
  flex: none;
}
.minicart .mc-remove-btn:hover {
  color: var(--sale);
  background: #fff1f0;
  border-color: #f0c9c6;
}
.minicart .mc-remove-btn .ico {
  width: 18px;
  height: 18px;
}
.minicart .mc-totals {
  display: grid;
  gap: 6px;
  padding: 4px 0 2px;
}
.minicart .mc-subtotal {
  font-weight: 600;
}
.minicart .mc-subtotal b {
  font-weight: 800;
}
.minicart .mc-delivery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 600;
}
/* 44H: informational status note — not a button/input card */
.minicart .mc-note-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 10px 8px 12px;
  border-radius: 10px;
  background: rgba(47, 143, 39, 0.08);
  border: none;
  border-left: 3px solid var(--green);
  box-shadow: none;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  cursor: default;
  pointer-events: none;
}
.minicart .mc-note-card .ico {
  width: 16px;
  height: 16px;
  color: var(--green-dark);
  flex: none;
  margin-top: 1px;
}

@media (max-width: 640px) {
  .cline .cright {
    flex-wrap: wrap;
    gap: 10px;
  }
  .cart-remove-label {
    display: none;
  }
}

/* ===================================================================
   Phase 44E / 44H — category/search sticky navigation
   =================================================================== */
@media (min-width: 721px) {
  :root { --catbar-h: 46px; }
}
.product-row,
[id^="product-"],
[id^="program-"] {
  scroll-margin-top: calc(var(--chrome-top) + var(--catbar-h) + var(--scroll-pad));
}
.search-toggle {
  display: inline-flex;
}
/* 44L: hide header search toggle while top .searchbar is in view (no flash; keep layout slot) */
#v3-open-search {
  visibility: hidden;
  pointer-events: none;
}
#v3-open-search.v3-search-toggle-visible {
  visibility: visible;
  pointer-events: auto;
}
/* 44H / 44M — expandable search under sticky header (one state: v3-search-open) */
.searchbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transform-origin: top center;
  transition: none;
}
.searchbar .search-wrap,
.searchbar form,
.searchbar input {
  animation: none !important;
  /* Content stays fully painted during expand/collapse — no delayed opacity */
  transition: none;
  opacity: 1;
  visibility: visible;
}
html.v3-search-open .searchbar,
html.v3-search-closing .searchbar {
  position: sticky;
  top: var(--chrome-top);
  z-index: 65;
  background: #fff;
  box-shadow: 0 6px 18px rgba(23, 29, 24, 0.08);
  opacity: 1;
  /* Clip reveal: content visible from frame 1 as max-height grows */
  max-height: var(--searchbar-h);
}
/* 44M: height-only fold when opening from scrolled (v3-search-animate). No opacity fade. */
html.v3-search-open.v3-search-animate .searchbar {
  animation: v3-searchbar-open .24s ease both;
}
html.v3-search-closing .searchbar {
  animation: v3-searchbar-close .24s ease both;
  pointer-events: none;
}
@keyframes v3-searchbar-open {
  from { max-height: 0; }
  to { max-height: var(--searchbar-h); }
}
@keyframes v3-searchbar-close {
  from { max-height: var(--searchbar-h); }
  to { max-height: 0; }
}
/* Cat bar offset matches searchbar height over the same 0.24s ease */
html.v3-search-open .cat-strip,
html.v3-search-open .cat-select {
  top: calc(var(--chrome-top) + var(--searchbar-h));
  transition: top .24s ease;
}
html.v3-search-closing .cat-strip,
html.v3-search-closing .cat-select {
  top: var(--chrome-top);
  transition: top .24s ease;
}
@media (max-width: 720px) {
  html.v3-search-open,
  html.v3-search-closing {
    --searchbar-h: 62px;
  }
  html.v3-search-open {
    --catbar-h: calc(68px + var(--searchbar-h));
  }
}
@media (prefers-reduced-motion: reduce) {
  html.v3-search-open.v3-search-animate .searchbar,
  html.v3-search-closing .searchbar {
    animation: none !important;
  }
  html.v3-search-open.v3-search-animate .searchbar {
    max-height: var(--searchbar-h);
  }
  html.v3-search-closing .searchbar {
    max-height: 0;
  }
  html.v3-search-open .cat-strip,
  html.v3-search-open .cat-select,
  html.v3-search-closing .cat-strip,
  html.v3-search-closing .cat-select {
    transition: none !important;
  }
}

/* Milestone A — finished V0 search chrome: sticky open searchbar must not clip
   the absolute results panel (overflow/max-height while sticky). */
html.v3-search-open:not(.v3-search-closing) .searchbar {
  overflow: visible;
  max-height: none;
}
html.v3-search-open .search-results:not([hidden]) {
  z-index: 80;
}

/* ===================================================================
   Phase 44F / 44H — homepage campaign banners + coach visual
   =================================================================== */
.home-campaigns {
  padding-top: 22px;
  padding-bottom: 8px;
}
.camp-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.camp-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  min-height: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.camp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.camp-main {
  background: linear-gradient(160deg, #1f5f28, #2f8f27 55%, #3aa63a);
  color: #fff;
  border: none;
}
.camp-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--green-softer);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.camp-main .camp-media {
  aspect-ratio: 1 / 1;
  min-height: 0;
  max-height: 320px;
}
.camp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.camp-media-contain {
  /* Phase homepage-refresh: no inner padding — image fills media frame */
  padding: 0;
}
.camp-media-contain img {
  object-fit: contain;
  object-position: center;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  height: 100%;
}
.camp-media-portrait {
  aspect-ratio: 4 / 5;
}
.camp-media-icon {
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--green-soft), #e8f5e6);
}
.camp-gift-ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-dark);
  box-shadow: var(--shadow-sm);
}
.camp-gift-ico .ico { width: 28px; height: 28px; }
.camp-copy {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.camp-main .camp-copy {
  padding: 16px 20px 20px;
}
.camp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--green-dark);
}
.camp-main .camp-eyebrow {
  color: rgba(255,255,255,.9);
}
.camp-eyebrow .ico { width: 14px; height: 14px; }
.camp-card h2,
.camp-card h3 {
  margin: 0;
  font-weight: 800;
  line-height: 1.2;
}
.camp-card h2 { font-size: clamp(20px, 2.2vw, 28px); }
.camp-card h3 { font-size: 17px; color: var(--ink); }
.camp-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
.camp-main p { color: rgba(255,255,255,.92); }
.camp-cta {
  margin-top: 8px;
  padding-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 14px;
}
.camp-cta .ico { width: 16px; height: 16px; }
.camp-flavour .camp-media,
.camp-tea .camp-media {
  background: #f7efe8;
}
/* Main starter media: white frame, hard 320px cap, image fully contained */
.camp-starter-main .camp-media {
  background: #fff;
  aspect-ratio: unset;
  height: 320px;
  max-height: 320px;
  overflow: hidden;
}
.camp-starter-main .camp-media img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}
.home-dash .hd-actions { display: none; }
@media (max-width: 900px) {
  .camp-grid {
    grid-template-columns: 1fr 1fr;
  }
  .camp-main {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .camp-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .camp-main .camp-media,
  .camp-starter-main .camp-media {
    max-height: 260px;
    height: 260px;
  }
}