/* =============================================================
   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; }
/* DG-MOBILE-CARD-TEXT-WRAP-26-FIX01 (Mark): normal wrapping site-wide (was pretty: Safari weighs the whole block and broke
   lines early with room left); the class name stays on the markup. */
.text-pretty { text-wrap: wrap; }

/* ----------------------------- 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); }
@media (hover: hover) and (pointer: fine) {
  .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; }
/* DG-SCROLL-CATEGORY-AVATAR-25 (Mark): padding 8px 10px (was 9px 12px; the mobile rule below says the same) */
.icon-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; color: var(--ink);
  font-weight: 600; font-size: 14px; padding: 8px 10px; 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); }
/* DG-SCROLL-CATEGORY-AVATAR-25 (Mark): the header account avatar is 30px (was 24px); the dropdown head (38px) and the drawer
   card (44px) keep their own sizes */
.acct-avatar {
  width: 30px; height: 30px; 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; color: #fff; }
.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; }
/* PLT-SEARCH-IDENTITY-RANKING-PRICE-15 — live search rows: a thin light line between rows, one "flavour · content" line,
   a proven reduction as a small struck-through regular price, a subtle highlight for the preferred product (no label). */
.sr-list > .sr-item { position: relative; }
.sr-list > .sr-item + .sr-item::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--line); pointer-events: none; }
.sr-detail { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-price.has-was { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.sr-price-was { font-size: 12px; font-weight: 600; color: var(--muted); }
.sr-item.is-preferred { background: var(--green-softer); box-shadow: inset 0 0 0 1px rgba(47, 143, 39, .2); }
.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: 8px 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;
}
/* DG-CART-MINICART-POLISH-25 (Mark): gap 4px (was 10px) */
.fs-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 4px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 10px 10px; 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; }
/* DG-DETAIL-FLAVOUR-PRESENTATION-27 E (Mark): the chevron icon points right; a flavour trigger points down when closed and up
   when open, wherever the list opens (the cart rules in v3-cart.css set the same two angles) */
.fs-caret { width: 18px; height: 18px; color: var(--muted); flex: none; transition: transform .2s ease; transform: rotate(90deg); }
.flavour-select.open .fs-caret { transform: rotate(-90deg); }
.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: 8px 10px; 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;
}

/* DG-CART-DROPDOWN-SAFARI-COMBINED-24 (Mark) — overlay surface. While any overlay holds a V3BodyLock lock (drawer, minicart,
   full product / pack detail, contact, sign-in, quick views, info / terms / coupon / points dialogs, celebration),
   v3-body-lock.js puts `v3-overlay-surface` on <html>. Working hypothesis (not proven; the grey in Mark's iPhone screenshots
   matches the dimmed backdrop over the page in Chrome, which makes it plausible): Safari (iPhone) colours the area under its
   toolbars after the fixed element at that viewport edge, which under an open overlay was the dimmed backdrop. So the page
   surface is the light-beige site token and, on touch screens, one opaque beige band is the topmost fixed element along the
   bottom edge (the home-indicator safe area, at least --v3-overlay-edge). Decorative only (no pointer events); modal content,
   the dim backdrop and every overlay's own layout stay as they are. Native toolbar colouring remains Safari's decision: this
   is progressive presentation, not a toolbar control, and only a physical iPhone check can confirm it. */
html.v3-overlay-surface,
html.v3-overlay-surface body.v3-storefront {
  background-color: var(--bg);
}
@media (hover: none) and (pointer: coarse) {
  html.v3-overlay-surface {
    --v3-overlay-edge: 8px;
  }
  html.v3-overlay-surface body.v3-storefront::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483000;
    height: max(env(safe-area-inset-bottom, 0px), var(--v3-overlay-edge));
    background-color: var(--bg);
    pointer-events: none;
  }
}

/* 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: 500;
}

/* 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;
  }
}

/* P8-ES COMPLETION02 (V20 retry CTA gap): on small screens the three retry actions stack full width in the same order
   (no truncation, no smaller type, every action kept). Wider screens keep the existing checkout-actions row. */
@media (max-width: 560px) {
  .checkout-actions.payment-retry-actions { flex-direction: column; align-items: stretch; }
  .checkout-actions.payment-retry-actions .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; }
}