/**
 * V3 DESIGN OVERLAY — Phases 1–2
 * ==============================
 * Loaded last, after v3-storefront.css, v3-auth.css, v3-cart.css,
 * and v3-design-tokens.css.
 *
 * Source: approved v0_design/css/design-overrides.css at d19bc3c,
 * adapted to CURRENT V2 selectors. Do not flatten-copy later sections.
 *
 * SCOPING CONTRACT
 * Every rule is scoped by one of:
 *   body.v3-storefront[data-v3-page="<family>"] ...
 *   .d-cta-* redesign-owned classes (opt-in)
 *
 * PROHIBITED
 * - generic .btn / .btn-primary / .card / .section / main / body restyles
 * - frozen token remapping
 * - V0 demo scoping (home-root id, design-family / design-state attributes)
 * - catalog / PDP / program / cart / payment / account redesigns (Phases 3–5)
 *
 * Phase 1 ports:
 *   §1  Shared shell wrap — V0 wrap NOT copied (see comment)
 *   §22 Global spacing / breadcrumbs
 *   §27 Dark-surface CTA family (opt-in classes + already-dark surfaces only)
 *   FINAL 2026-08-23 — Variant A frame tokens + portal-1 chrome/home frames
 *   (appended at file end; does not restyle portals 4/8)
 *
 * Phase 2 ports (home + support surfaces):
 *   §2  Guest homepage — editorial split hero
 *   §3  Guest homepage — trust strip
 *   §4  Logged-in homepage — dashboard (1/2/3-cell aware, see comment)
 *   §10 Guest homepage — testimonials
 *   §17 Contact / coach — human split hero
 *   §9  Info family — light polish only
 */

/* =============================================================
   1. SHARED SHELL — intentionally NOT redesigned
   =============================================================
   Approved V0 had a mobile wrap so #v3-cat-select (then inside
   .header-inner) would not crush the brand at 390px.

   CURRENT V2 already parks #v3-cat-select OUTSIDE .header-inner
   (header.php), overflow-proofs .header-inner at ≤720px, and
   offsets sticky chrome with --discountbar-h / --chrome-top.
   Copying the V0 wrap would fight the discount bar. No shell
   wrap is added in Phase 1.
   ============================================================= */

body.v3-storefront[data-storefront="unified"][data-v3-page="cart"] #v3-cat-select,
body.v3-storefront[data-storefront="unified"][data-v3-page="checkout"] #v3-cat-select,
body.v3-storefront[data-storefront="unified"][data-v3-page="payment"] #v3-cat-select {
  display: none;
}

/* =============================================================
   22. GLOBAL SPACING RHYTHM — breadcrumbs and section heads
   =============================================================
   Family-scoped only. No global .breadcrumb / .section / main
   margin bomb.
   ============================================================= */

body.v3-storefront[data-v3-page="catalog"] .breadcrumb,
body.v3-storefront[data-v3-page="product"] .breadcrumb,
body.v3-storefront[data-v3-page="program"] .breadcrumb,
body.v3-storefront[data-v3-page="cart"] .breadcrumb,
body.v3-storefront[data-v3-page="checkout"] .breadcrumb,
body.v3-storefront[data-v3-page="payment"] .breadcrumb,
body.v3-storefront[data-v3-page="account"] .breadcrumb,
body.v3-storefront[data-v3-page="info"] .breadcrumb {
  margin-bottom: 18px;
  color: var(--muted);
}

/* Families whose breadcrumb had no top spacing at all. */
body.v3-storefront[data-v3-page="cart"] .breadcrumb:not(.mt-24),
body.v3-storefront[data-v3-page="checkout"] .breadcrumb:not(.mt-24),
body.v3-storefront[data-v3-page="payment"] .breadcrumb:not(.mt-24),
body.v3-storefront[data-v3-page="account"] .breadcrumb:not(.mt-24) {
  margin-top: 22px;
}

/* Separators recede so the trail reads as steps, not as punctuation. */
body.v3-storefront[data-v3-page="catalog"] .breadcrumb span,
body.v3-storefront[data-v3-page="product"] .breadcrumb span,
body.v3-storefront[data-v3-page="program"] .breadcrumb span,
body.v3-storefront[data-v3-page="cart"] .breadcrumb span,
body.v3-storefront[data-v3-page="checkout"] .breadcrumb span,
body.v3-storefront[data-v3-page="payment"] .breadcrumb span,
body.v3-storefront[data-v3-page="account"] .breadcrumb span,
body.v3-storefront[data-v3-page="info"] .breadcrumb span {
  margin: 0 8px;
  color: #b3bdaf;
}

body.v3-storefront[data-v3-page="catalog"] .breadcrumb a:hover,
body.v3-storefront[data-v3-page="product"] .breadcrumb a:hover,
body.v3-storefront[data-v3-page="program"] .breadcrumb a:hover,
body.v3-storefront[data-v3-page="cart"] .breadcrumb a:hover,
body.v3-storefront[data-v3-page="checkout"] .breadcrumb a:hover,
body.v3-storefront[data-v3-page="payment"] .breadcrumb a:hover,
body.v3-storefront[data-v3-page="account"] .breadcrumb a:hover,
body.v3-storefront[data-v3-page="info"] .breadcrumb a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Heading → content: cart / checkout / payment / account. */
body.v3-storefront[data-v3-page="cart"] .page-head,
body.v3-storefront[data-v3-page="checkout"] .page-head,
body.v3-storefront[data-v3-page="payment"] .page-head,
body.v3-storefront[data-v3-page="account"] .page-head {
  margin-bottom: 20px;
}

/* Section heading → content. Matches frozen 22px; family-scoped so
   later phases can tighten without a global .section reset. */
body.v3-storefront[data-v3-page="home"] .section-head,
body.v3-storefront[data-v3-page="catalog"] .section-head,
body.v3-storefront[data-v3-page="info"] .section-head {
  margin-bottom: 22px;
}

/* Label → input on form families only. Scoped to main so the
   auth modal / coupon modal keep frozen field rhythm. */
body.v3-storefront[data-v3-page="checkout"] main .form-field > label,
body.v3-storefront[data-v3-page="account"] main .form-field > label,
body.v3-storefront[data-v3-page="payment"] main .form-field > label {
  display: block;
  margin-bottom: 8px;
}

/* =============================================================
   27. DARK-SURFACE CTA FAMILY — one button treatment
   =============================================================
   Two faces, one physics (lit top, shaded bottom, grounded shadow,
   hover lift, press).

   CRITICAL: no generic .btn / .btn-primary rule.
   Light-surface buttons (Add to cart, Search, coupon Apply,
   checkout Continue) stay on frozen V3 styles.

   Phase 1 ships the family as opt-in .d-cta-* classes so later
   phases can attach them when a surface is actually dark.
   Do NOT target current light gates, minicart footer, or guest
   hero buttons yet — those surfaces are still light in CURRENT V2.
   ============================================================= */

/* --- light face ------------------------------------------------------- */
.d-cta-light {
  background: var(--d-btn-face);
  color: var(--berry);
  border: 0;
  box-shadow: var(--d-btn-lift);
  transition:
    background 0.16s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    color 0.16s ease;
}

.d-cta-light:hover {
  background: var(--d-btn-face-hover);
  box-shadow: var(--d-btn-lift-hover);
  transform: translateY(-1px);
}

.d-cta-light:active {
  box-shadow: var(--d-btn-lift-active);
  transform: translateY(1px);
}

/* --- berry face ------------------------------------------------------- */
.d-cta-berry {
  background: var(--d-btn-berry-face);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: var(--d-btn-berry-lift);
  transition:
    background 0.16s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    border-color 0.16s ease;
}

.d-cta-berry:hover {
  background: var(--d-btn-berry-face-hover);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow: var(--d-btn-berry-lift-hover);
  transform: translateY(-1px);
}

.d-cta-berry:active {
  box-shadow: var(--d-btn-lift-active);
  transform: translateY(1px);
}

/* --- quiet face: secondary action on a dark surface -------------------- */
.d-cta-quiet {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 6px 16px rgba(9, 32, 13, 0.24);
  transition:
    background 0.16s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    border-color 0.16s ease;
}

.d-cta-quiet:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 10px 22px rgba(9, 32, 13, 0.28);
  transform: translateY(-1px);
}

.d-cta-quiet:active {
  box-shadow: inset 0 2px 4px rgba(9, 32, 13, 0.26);
  transform: translateY(1px);
}

/* =============================================================
   2. GUEST HOMEPAGE — editorial split hero
   =============================================================
   `.hero.only-out` is the guest-only hero and only the homepage
   template renders it, so the family scope can never reach another
   page or the logged-in dashboard. CURRENT V2 structure
   (.hero-card > .hero-copy + .hero-media) and the frozen 960px
   stacking breakpoint are preserved; only colour, type and
   proportion change.
   ============================================================= */

body.v3-storefront[data-v3-page="home"] .hero.only-out .hero-card {
  background: linear-gradient(148deg, #16241b 0%, var(--d-hero-ink) 52%, #1b2b20 100%);
  box-shadow: 0 26px 60px rgba(15, 23, 18, 0.22);
}

body.v3-storefront[data-v3-page="home"] .hero.only-out .hero-copy {
  padding: clamp(32px, 3.6vw, 56px) clamp(24px, 3.2vw, 52px);
  color: #fff;
  gap: 20px;
}

/* The frozen eyebrow is a white pill with a shadow, built for the light
   hero. On the dark editorial hero it needs the inverse treatment —
   scoped to this one element, not the global .eyebrow component. */
body.v3-storefront[data-v3-page="home"] .hero.only-out .eyebrow {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--d-hero-eyebrow);
  box-shadow: none;
  text-transform: uppercase;
  letter-spacing: var(--d-tracking-eyebrow);
  font-size: 11px;
}

body.v3-storefront[data-v3-page="home"] .hero.only-out h1 {
  color: #fff;
  font-size: clamp(38px, 4.4vw, 58px);
  letter-spacing: var(--d-tracking-tight);
  line-height: 1.04;
}

body.v3-storefront[data-v3-page="home"] .hero.only-out h1 em {
  color: var(--green-bright);
}

body.v3-storefront[data-v3-page="home"] .hero.only-out .lead {
  color: var(--d-hero-ink-soft);
  font-size: 17.5px;
  max-width: 42ch;
}

/* Berry primary CTA is already the frozen .btn-primary — unchanged.
   The secondary needs to invert for the dark panel. */
body.v3-storefront[data-v3-page="home"] .hero.only-out .hero-actions .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

body.v3-storefront[data-v3-page="home"] .hero.only-out .hero-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

body.v3-storefront[data-v3-page="home"] .hero.only-out .hero-rating b {
  color: #fff;
}

body.v3-storefront[data-v3-page="home"] .hero.only-out .hero-rating .r-sub {
  color: rgba(255, 255, 255, 0.68);
}

body.v3-storefront[data-v3-page="home"] .hero.only-out .hero-rating .stars {
  color: #f2c14e;
}

/* Taller editorial proportion + lifestyle framing, desktop only. Below
   960px the frozen rules stack the hero and put the image first; that
   behaviour is left untouched. */
@media (min-width: 961px) {
  body.v3-storefront[data-v3-page="home"] .hero.only-out .hero-card {
    min-height: var(--d-hero-min-h);
  }

  body.v3-storefront[data-v3-page="home"] .hero.only-out .hero-media img {
    object-position: center 22%;
  }
}

/* =============================================================
   3. GUEST HOMEPAGE — trust / reassurance strip
   =============================================================
   The white card, 4-column grid, dividers and shadow are kept.
   Desktop only: lift the strip so it sits across the base of the
   hero, which is the editorial device Mark approved.
   ============================================================= */

@media (min-width: 961px) {
  body.v3-storefront[data-v3-page="home"] .hero.only-out .trust {
    position: relative;
    z-index: 2;
    margin-top: -30px;
    margin-left: 24px;
    margin-right: 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 18, 0.14);
  }
}

/* =============================================================
   4. LOGGED-IN HOMEPAGE — dashboard
   =============================================================
   The frozen `.hd-grid` is a fixed `repeat(3, 1fr)`, but CURRENT V2
   renders 1, 2 or 3 `.hd-cell` children depending on runtime flags
   (`show_status_card`, `show_free_kit_card`), so the fixed template
   leaves empty tracks and makes the cells read as fragments. The
   template publishes the real child count as `data-cells`, and each
   arrangement is composed explicitly below — no phantom column in
   any state.

   Tonal structure: a deep-green frame, a translucent light card for
   the primary metric, and darker inset panels for the secondary
   cells, so the dashboard is never one flat rectangle.
   ============================================================= */

body.v3-storefront[data-v3-page="home"] .home-dash {
  position: relative;
  background: var(--d-surface-glow), var(--d-surface-frame);
  box-shadow: var(--shadow-lg);
}

/* Hairline lifts the panel edge off the warm canvas behind it. */
body.v3-storefront[data-v3-page="home"] .home-dash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--d-green-hairline);
  pointer-events: none;
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-top {
  padding: 30px 30px 22px;
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-avatar {
  background: var(--d-cream);
  color: var(--d-green-ink);
  box-shadow: 0 6px 16px rgba(4, 24, 8, 0.32);
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-eyebrow {
  letter-spacing: var(--d-tracking-eyebrow);
  font-size: 11.5px;
  opacity: 1;
  color: rgba(219, 240, 208, 0.9);
}

body.v3-storefront[data-v3-page="home"] .home-dash h1 {
  letter-spacing: var(--d-tracking-tight);
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid {
  gap: 16px;
  padding: 0 30px 30px;
  align-items: stretch;
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell {
  padding: 20px 22px;
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-body {
  min-width: 0;
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-label {
  text-transform: uppercase;
  letter-spacing: var(--d-tracking-eyebrow);
  font-size: 11.5px;
  opacity: 1;
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-val {
  letter-spacing: var(--d-tracking-tight);
}

/* Secondary cells state a fact, not a figure, so they stay at label
   scale rather than competing with the points number. */
body.v3-storefront[data-v3-page="home"] .home-dash .hd-val-sm {
  font-size: 18px;
}

/* --- cell arrangements ------------------------------------------------ */
/* Every arrangement is behind the 721px breakpoint so the frozen
   single-column mobile stack keeps winning below it. */

@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Three cells below ~1000px would give each metric a column too narrow
     for the points figure, so the primary metric takes the full first
     row and the two secondary cells pair underneath. */
  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="3"] .hd-cell-points {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="3"] .hd-cell-points {
    grid-column: auto;
  }
}

/* --- primary metric: translucent light card --------------------------- */
/* A flat opaque cream rectangle reads as a white slab punched into the
   green. This is a translucent light surface instead — the frame tone
   shows through just enough to tint it, with a lit top edge and a
   green-tinted shadow underneath, so it reads as inlaid glass. */

body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-points {
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(168deg, rgba(255, 255, 255, 0.97) 0%, rgba(238, 247, 230, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.66);
  color: var(--d-green-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 36px rgba(12, 42, 16, 0.3);
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-points .hd-label {
  color: var(--green-dark);
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-points .hd-label .ico {
  color: var(--d-reward-gold);
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-points .hd-val {
  font-size: clamp(34px, 3.6vw, 46px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-top: 10px;
}

/* The pound value is the part a customer actually understands, so it
   gets its own chip rather than sitting in the muted note line. */
body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-points .hd-note {
  align-self: flex-start;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 12.5px;
  font-weight: 700;
  opacity: 1;
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-points .hd-link {
  margin-top: auto;
  padding-top: 16px;
  color: var(--green-dark);
  text-decoration: none;
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-points .hd-link span {
  transition: transform 0.18s ease;
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-points .hd-link:hover span {
  transform: translateX(3px);
}

/* Whenever the metric card owns a whole row it would otherwise stretch
   into a mostly empty box, so it becomes a banner instead: label and
   figure lead, value chip and link close the row. That is the single-cell
   dashboard, and the three-cell dashboard while it is still paired. */
@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="1"] .hd-cell-points,
  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="3"] .hd-cell-points {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(20px, 3vw, 44px);
    padding: 24px 28px;
  }

  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="1"] .hd-cell-points .hd-label,
  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="3"] .hd-cell-points .hd-label {
    grid-area: 1 / 1;
  }

  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="1"] .hd-cell-points .hd-val,
  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="3"] .hd-cell-points .hd-val {
    grid-area: 2 / 1;
    margin-top: 4px;
  }

  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="1"] .hd-cell-points .hd-note,
  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="3"] .hd-cell-points .hd-note {
    grid-area: 1 / 2;
    align-self: end;
    justify-self: end;
    margin-top: 0;
  }

  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="1"] .hd-cell-points .hd-link,
  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="3"] .hd-cell-points .hd-link {
    grid-area: 2 / 2;
    align-self: start;
    justify-self: end;
    margin-top: 6px;
    padding-top: 0;
  }
}

/* At three real columns the metric card is a column again, not a row. */
@media (min-width: 1000px) {
  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="3"] .hd-cell-points {
    display: flex;
    align-items: stretch;
    padding: 20px 22px;
  }

  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="3"] .hd-cell-points .hd-val {
    margin-top: 10px;
  }

  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="3"] .hd-cell-points .hd-note {
    align-self: flex-start;
    margin-top: 12px;
  }

  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="3"] .hd-cell-points .hd-link {
    margin-top: auto;
    padding-top: 16px;
  }
}

/* --- secondary cells: inset panels below the frame tone --------------- */
/* They sit *below* the frame tone, not above it, so the cells are never
   mistaken for equal-weight siblings of the metric card. */

body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-status,
body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-perk {
  display: grid;
  align-content: center;
  background:
    radial-gradient(90% 130% at 92% 8%, rgba(154, 219, 124, 0.16) 0%, rgba(154, 219, 124, 0) 62%),
    var(--d-green-inset);
  border-color: var(--d-green-hairline-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-status .hd-label,
body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-perk .hd-label {
  color: rgba(198, 233, 180, 0.95);
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-status .hd-label .ico,
body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-perk .hd-label .ico {
  color: var(--green-bright);
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-status .hd-note,
body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-perk .hd-note {
  opacity: 0.82;
  max-width: 44ch;
}

/* The starter set is the same perk the basket reward band shows, so it
   gets the same face here: one product photo, one message. The photo
   sits on the outer edge and bookends the composition — light metric
   card inside, product photo outside — while the points cell keeps the
   bigger figure, so the hierarchy between them is unchanged. */
body.v3-storefront[data-v3-page="home"] .home-dash .hd-cell-perk {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: center;
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-perk-media {
  order: 2;
  width: clamp(96px, 9vw, 124px);
  aspect-ratio: 1;
  flex: none;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 12px 26px rgba(9, 32, 13, 0.34);
}

body.v3-storefront[data-v3-page="home"] .home-dash .hd-perk-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Three columns leave the perk text too little room for a 124px photo. */
@media (min-width: 1000px) {
  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells="3"] .hd-perk-media {
    width: clamp(72px, 6vw, 92px);
    border-radius: 14px;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="home"] .home-dash .hd-top {
    padding: 24px 20px 18px;
  }

  body.v3-storefront[data-v3-page="home"] .home-dash .hd-grid[data-cells] {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 20px 22px;
  }

  body.v3-storefront[data-v3-page="home"] .home-dash .hd-perk-media {
    width: 84px;
    border-radius: 14px;
  }
}

/* =============================================================
   10. GUEST HOMEPAGE — testimonials (editorial composition)
   =============================================================
   The frozen section was three identical white cards, which read as
   the weakest block on a page whose hero is the strongest. The
   markup keeps `.testi` / `.testi-card` / `blockquote` / `cite`
   semantics; the redesign promotes the first quote to a featured
   panel and demotes the other two to supporting quotes. Scoped to
   `.d-testi-section` so the frozen three-column `.testi` grid is
   untouched everywhere else.
   ============================================================= */

body.v3-storefront[data-v3-page="home"] .d-testi-head {
  align-items: flex-end;
  gap: 20px;
}

body.v3-storefront[data-v3-page="home"] .d-testi-score {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

body.v3-storefront[data-v3-page="home"] .d-testi-score-txt {
  display: grid;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}

body.v3-storefront[data-v3-page="home"] .d-testi-score-txt b {
  font-size: 14.5px;
  color: var(--ink);
}

/* The frozen .section-head row never wraps, and the nowrap score badge
   is wide enough to crush the heading to one word per line on phones. */
@media (max-width: 700px) {
  body.v3-storefront[data-v3-page="home"] .d-testi-head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  body.v3-storefront[data-v3-page="home"] .d-testi-score {
    justify-content: flex-start;
    padding: 10px 14px;
  }
}

/* Featured quote spans two rows; the two supporting quotes stack in the
   second column. Child count (3 figures) is fixed by the template. */
@media (min-width: 861px) {
  body.v3-storefront[data-v3-page="home"] .d-testi {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: stretch;
  }

  body.v3-storefront[data-v3-page="home"] .d-testi .d-testi-feature {
    grid-row: 1 / span 2;
  }
}

body.v3-storefront[data-v3-page="home"] .d-testi .testi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.v3-storefront[data-v3-page="home"] .d-testi .d-quote-mark {
  font-size: 84px;
  line-height: 0.72;
  font-weight: 800;
  color: var(--green-soft);
  height: 34px;
  overflow: hidden;
}

body.v3-storefront[data-v3-page="home"] .d-testi .d-testi-feature {
  padding: clamp(26px, 2.6vw, 40px);
  background: linear-gradient(155deg, #ffffff 0%, var(--d-surface-quiet) 100%);
  box-shadow: 0 18px 40px rgba(15, 23, 18, 0.09);
}

body.v3-storefront[data-v3-page="home"] .d-testi .d-testi-feature .d-quote-mark {
  color: var(--green);
  opacity: 0.34;
}

/* The featured panel is taller than its quote, so the quote is centred
   in the free space with stars pinned top and the author pinned bottom
   — otherwise the two-row span leaves a dead gap under the quote. */
body.v3-storefront[data-v3-page="home"] .d-testi .d-testi-feature blockquote {
  margin: auto 0;
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: var(--d-tracking-tight);
  color: var(--ink);
  max-width: 30ch;
}

body.v3-storefront[data-v3-page="home"] .d-testi .d-testi-support blockquote {
  margin: 2px 0 auto;
  font-size: 15.5px;
  line-height: 1.5;
}

/* Author block: initial avatar + name over location, replacing the
   frozen inline "Name · Place" run. */
body.v3-storefront[data-v3-page="home"] .d-testi cite {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

body.v3-storefront[data-v3-page="home"] .d-testi .d-testi-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 15px;
  font-weight: 800;
}

body.v3-storefront[data-v3-page="home"] .d-testi .d-testi-who {
  display: grid;
  gap: 1px;
  min-width: 0;
}

body.v3-storefront[data-v3-page="home"] .d-testi .d-testi-who b {
  font-size: 14.5px;
}

body.v3-storefront[data-v3-page="home"] .d-testi .d-testi-who span {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}

/* =============================================================
   17. CONTACT / COACH — human split hero
   =============================================================
   The frozen contact page was a flat green rectangle above white
   cards with no photograph anywhere, so the one page whose whole job
   is human trust read as the most anonymous on the site. The hero
   becomes a split composition: deep-green editorial copy against the
   real team photograph, with the fastest configured contact route
   promoted out of the card row.

   The photo already ships in this runtime and is used on the
   homepage — nothing is fetched and no person is invented. The hero
   only applies where the template opts in with `.d-coach-hero`, so
   help / delivery / terms / privacy keep the frozen `.info-hero`.
   ============================================================= */

body.v3-storefront[data-v3-page="info"] .d-coach-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  padding: clamp(28px, 3vw, 48px);
  background: var(--d-surface-glow-left), var(--d-surface-frame);
  box-shadow: var(--shadow-lg);
}

body.v3-storefront[data-v3-page="info"] .d-coach-hero .eyebrow {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--d-green-hairline);
  letter-spacing: var(--d-tracking-eyebrow);
  font-size: 11.5px;
  text-transform: uppercase;
}

body.v3-storefront[data-v3-page="info"] .d-coach-hero h1 {
  letter-spacing: var(--d-tracking-tight);
}

body.v3-storefront[data-v3-page="info"] .d-coach-hero p {
  max-width: 46ch;
  color: var(--d-hero-ink-soft);
  opacity: 1;
}

/* --- hero CTA: the fastest contact route, promoted out of the card row */

body.v3-storefront[data-v3-page="info"] .d-coach-hero-cta {
  display: flex;
  align-items: center;
  gap: 16px 20px;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* Face and elevation come from the dark-surface CTA family (§27); this
   rule only carries the icon layout and weight. */
body.v3-storefront[data-v3-page="info"] .d-coach-hero-cta .d-cta-light {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
}

body.v3-storefront[data-v3-page="info"] .d-coach-hero-cta .d-cta-light .ico {
  width: 18px;
  height: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-coach-hero-reply {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(206, 236, 190, 0.92);
}

body.v3-storefront[data-v3-page="info"] .d-coach-hero-reply .ico {
  width: 15px;
  height: 15px;
  color: var(--green-bright);
}

/* --- hero photograph -------------------------------------------------- */

body.v3-storefront[data-v3-page="info"] .d-coach-hero-media {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--d-green-inset);
  box-shadow: 0 22px 50px rgba(4, 24, 8, 0.42);
}

body.v3-storefront[data-v3-page="info"] .d-coach-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 340px;
  object-fit: cover;
  object-position: 50% 22%;
}

/* Caption sits on a scrim so it stays legible over any crop. */
body.v3-storefront[data-v3-page="info"] .d-coach-hero-media figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 26px 18px 14px;
  background: linear-gradient(180deg, rgba(6, 26, 10, 0) 0%, rgba(6, 26, 10, 0.82) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

body.v3-storefront[data-v3-page="info"] .d-coach-hero-media figcaption .ico {
  width: 15px;
  height: 15px;
  color: var(--green-bright);
}

/* --- contact route cards ---------------------------------------------- */
/* Frozen pinned `.pill` to `margin-left:auto` on the same row as the
   text, so the longer labels ("Same-day when we can") were clipped by
   the card. The pill drops to its own row instead. */

body.v3-storefront[data-v3-page="info"] .info-contact-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 18px 20px 16px;
}

body.v3-storefront[data-v3-page="info"] .info-contact-card .s-ico {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--green-dark);
}

body.v3-storefront[data-v3-page="info"] .info-contact-card .s-ico .ico {
  width: 20px;
  height: 20px;
}

body.v3-storefront[data-v3-page="info"] .info-contact-card > div {
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .info-contact-card > div b {
  font-size: 15px;
}

body.v3-storefront[data-v3-page="info"] .info-contact-card > div p {
  margin-top: 2px;
  font-size: 13.5px;
}

body.v3-storefront[data-v3-page="info"] .info-contact-card .pill {
  grid-column: 2;
  justify-self: start;
  margin-left: 0;
  margin-top: 8px;
}

body.v3-storefront[data-v3-page="info"] .info-contact-card:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-md);
}

/* --- aside: photo-led local team card --------------------------------- */

body.v3-storefront[data-v3-page="info"] .d-coach-team-media {
  margin: 0 0 4px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--d-surface-media);
}

body.v3-storefront[data-v3-page="info"] .d-coach-team-media img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: 50% 20%;
}

body.v3-storefront[data-v3-page="info"] .d-coach-team > b {
  font-size: 16px;
  letter-spacing: -0.01em;
}

/* --- mobile: stack, photo leads --------------------------------------- */
/* The split holds down to ~768px; below that both columns get too
   narrow and the headline breaks to one word per line. */

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-coach-hero {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* Photo first on small screens — the faces are the point of this page. */
  body.v3-storefront[data-v3-page="info"] .d-coach-hero-media {
    order: -1;
  }

  body.v3-storefront[data-v3-page="info"] .d-coach-hero-media img {
    max-height: 200px;
    object-position: 50% 18%;
  }

  body.v3-storefront[data-v3-page="info"] .d-coach-hero p {
    max-width: none;
  }

  body.v3-storefront[data-v3-page="info"] .d-coach-hero-cta {
    margin-top: 20px;
  }

  body.v3-storefront[data-v3-page="info"] .d-coach-hero-cta .d-cta-light {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================================
   9. INFO FAMILY — light polish only
   =============================================================
   Help / delivery / terms / privacy keep their structure, surfaces
   and copy. Only heading rhythm, reading measure and focus clarity
   change, plus the same light-catching layer the redesign uses on
   every other coloured hero.
   ============================================================= */

body.v3-storefront[data-v3-page="info"] .info-hero h1 {
  letter-spacing: var(--d-tracking-tight);
}

body.v3-storefront[data-v3-page="info"] .info-hero .eyebrow {
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
  font-size: 11.5px;
}

/* Long-form policy copy: a slightly tighter measure and more air above
   each heading so the sections read as sections. */
body.v3-storefront[data-v3-page="info"] .info-prose {
  max-width: 68ch;
}

body.v3-storefront[data-v3-page="info"] .info-prose h2 {
  margin-top: 34px;
  letter-spacing: -0.01em;
}

body.v3-storefront[data-v3-page="info"] .info-prose h2:first-child {
  margin-top: 0;
}

body.v3-storefront[data-v3-page="info"] .info-layout {
  gap: 28px;
}

body.v3-storefront[data-v3-page="info"] .card-head h2 {
  letter-spacing: -0.01em;
}

/* =============================================================
   FINAL PHASE 1 (2026-08-23 freeze) — Variant A foundation
   Portal 1 / HerbaOnline UK only.
   Scope of THIS block: chrome + homepage frames only. It changes no
   catalog density, cart, checkout, payment, auth architecture or
   campaign eligibility.
   JS contracts (search ids, html.v3-search-open, cat-select ids,
   body-lock names) are not redefined here.

   Later sections in this file do go wider: §31 adds the catalog
   density family and §32/§33 add search-results and PDP states.
   Cart, checkout, payment and auth architecture remain untouched.
   ============================================================= */

/* --- guest homepage frame ------------------------------------------ */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-card {
  background: var(--d-brand-frame-guest);
  border: 1px solid var(--d-green-hairline);
  box-shadow:
    inset 0 2px 0 var(--d-brand-edge-green),
    0 26px 60px rgba(15, 23, 18, 0.22);
  overflow: hidden;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out h1 em {
  color: #8fe05a;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-actions .btn-primary {
  background: var(--d-btn-berry-face);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: var(--d-btn-berry-lift);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-actions .btn-primary:hover {
  background: var(--d-btn-berry-face-hover);
  box-shadow: var(--d-btn-berry-lift-hover);
}

/* --- logged-in homepage frame (shared 2px edge) -------------------- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-dash {
  background: var(--d-brand-frame-dash);
  box-shadow:
    inset 0 2px 0 var(--d-brand-edge-green),
    var(--shadow-lg);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-dash .hd-eyebrow {
  background: linear-gradient(180deg, var(--berry-bright) 0%, var(--berry) 100%);
  color: #fff;
  border: 1px solid var(--d-brand-hairline-berry);
  box-shadow: none;
}

/* HerbaPoints card: leave the approved light inlaid treatment.
   Only keep starter-set artwork from being cropped. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-dash .hd-perk-media img {
  object-fit: contain;
  background: #fff;
}

/* --- global chrome (visual only) ----------------------------------- */
body.v3-storefront[data-storefront="unified"] .site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: rgba(31, 95, 40, 0.1);
}

/* DG-FULL-RECON-VISUAL-POLISH-04: a clearly visible hover surface with dark-green text. */
body.v3-storefront[data-storefront="unified"] .nav-desktop a:hover {
  background: var(--green-soft);
  color: var(--green-dark);
}

/* Guest sign-in matches V0 outline control, not a berry slab. */
body.v3-storefront[data-storefront="unified"] .btn-login {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}

body.v3-storefront[data-storefront="unified"] .btn-login:hover {
  border-color: var(--green);
  color: var(--green-dark);
  background: var(--green-softer);
}

/* Header points chip: recognition, not a second HerbaPoints card. */
body.v3-storefront[data-storefront="unified"] .points-chip {
  background: #f4ead0;
  color: #8a6a12;
  box-shadow: none;
}

body.v3-storefront[data-storefront="unified"] .points-chip:hover {
  background: #efe1c0;
  color: #6f5410;
}

body.v3-storefront[data-storefront="unified"] .points-chip .ico {
  color: #c49a2a;
}

body.v3-storefront[data-storefront="unified"] .acct-toggle {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}

body.v3-storefront[data-storefront="unified"] .acct-toggle:hover {
  background: var(--green-softer);
  filter: none;
}

body.v3-storefront[data-storefront="unified"] .acct-avatar {
  background: var(--green);
}

/* DG-NAV-HEADER-SEARCH-01 — the search pill joins the shared field system
   (edge, lift, focus ring) while keeping its own pill geometry. */
body.v3-storefront[data-storefront="unified"] .searchbar form {
  border-radius: var(--radius-pill);
  background: #fff;
  border-color: var(--d-field-border, var(--line));
  box-shadow: var(--d-field-shadow-rest);
}

body.v3-storefront[data-storefront="unified"] .searchbar form:focus-within {
  border-color: var(--green);
  box-shadow: var(--d-field-glow);
}

body.v3-storefront[data-storefront="unified"] #v3-site-search {
  font-family: inherit;
  color: var(--d-field-text, var(--ink));
}

body.v3-storefront[data-storefront="unified"] .searchbar .btn-green {
  background: var(--green);
}

body.v3-storefront[data-storefront="unified"] .cat-strip a:hover,
body.v3-storefront[data-storefront="unified"] .cat-strip a:focus-visible {
  color: var(--berry-dark);
  background: var(--berry-soft);
  border-color: var(--berry);
}
body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active {
  color: #fff;
  background: var(--berry);
  border-color: var(--berry);
}
body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active:hover,
body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active:focus-visible {
  color: #fff;
  background: var(--berry-dark);
  border-color: var(--berry-dark);
}

/* CP-010 — Concept A: remove the inherited base-stylesheet green gradient
   behind the mobile trigger (CP-009's root-cause finding) — the white pill
   was sitting inside a still-visible coloured band belonging to
   .cat-select itself, not something JS added or removed. The native
   <select> automatically gets the same fix since it shares this
   background; no separate no-JS patch is needed.
   DG-MOBILE-CATEGORY-BRAND-02 — berry identity for the mobile/tablet
   selector (supersedes DG-01's quiet-grey zone and green states in place).
   Only the canonical --berry / --berry-dark / --berry-soft tokens
   (v3-storefront.css :root) are used; the rgba() hairlines/shadows below
   are --berry (#8e1566 = 142,21,102) and --berry-dark (#6b0f4d = 107,15,77)
   at low alpha, the same convention as the drawer tiles further down.
   Hierarchy: soft berry band -> white pill with berry-dark text/icon ->
   berry-dark only for the two "this one" states (open trigger, current
   category row), so the strongest colour always means something.
   Contrast (WCAG): berry-dark on white/berry-soft 11.7/9.6:1, white on
   berry-dark/berry 11.7/8.6:1, ink on berry-soft 14.1:1, muted on
   berry-soft 5.3:1. */
body.v3-storefront[data-storefront="unified"] .cat-select {
  background: var(--berry-soft);
  border-bottom: 1px solid rgba(142, 21, 102, 0.16);
}

body.v3-storefront[data-storefront="unified"] .cat-select-btn {
  border-radius: 12px;
  /* Compact, not the old 14px/16px — still comfortably above the 44px
     touch-target floor once the icon/line-height are added in. */
  padding: 11px 14px;
  gap: 10px;
  background: #fff;
  color: var(--berry-dark);
  border-color: rgba(142, 21, 102, 0.24);
  box-shadow: 0 1px 2px rgba(107, 15, 77, 0.08);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, color .14s ease;
}

@media (hover: hover) {
  body.v3-storefront[data-storefront="unified"] .cat-select-btn:hover {
    border-color: var(--berry);
    box-shadow: 0 2px 8px rgba(107, 15, 77, 0.14);
  }
}

/* Pressed: a brief soft-berry fill, distinct from hover (border only) and
   from open (full berry-dark). */
body.v3-storefront[data-storefront="unified"] .cat-select-btn:active {
  background: var(--berry-soft);
  border-color: var(--berry-dark);
}

/* Open: the one strong state of the trigger — white label, icon and caret
   on berry-dark. Beats the base .open green border/ring. */
body.v3-storefront[data-storefront="unified"] .cat-select.open .cat-select-btn {
  background: var(--berry-dark);
  border-color: var(--berry-dark);
  color: #fff;
  box-shadow: 0 4px 14px rgba(107, 15, 77, 0.24);
}

/* Keyboard-only ring, independent of .open (mouse activation never shows
   this). A white gap + berry-dark outer ring reads on the soft band and
   stays distinguishable from the solid open fill. */
body.v3-storefront[data-storefront="unified"] .cat-select-btn:focus-visible,
body.v3-storefront[data-storefront="unified"] .cat-select.open .cat-select-btn:focus-visible {
  outline: none;
  border-color: var(--berry-dark);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--berry-dark);
}

/* Truncation room for the caret: only the label text may shrink to an
   ellipsis (see .csb-text in v3-storefront.css); the icon and the caret
   never do. */
body.v3-storefront[data-storefront="unified"] .csb-label {
  min-width: 0;
  flex: 1 1 auto;
}

/* Icon and caret inherit the trigger's foreground, so they follow every
   state (berry-dark closed, white open) without per-state colour rules. */
body.v3-storefront[data-storefront="unified"] .csb-label .ico.cat-ico {
  width: 20px;
  height: 20px;
  color: inherit;
}

body.v3-storefront[data-storefront="unified"] .csb-caret .ico {
  width: 20px;
  height: 20px;
  color: inherit;
}

/* Native <select> (no-JS fallback): same berry language, same icons —
   the base data-URI glyphs re-drawn with the berry-dark stroke. */
body.v3-storefront[data-storefront="unified"] .cat-select-native {
  color: var(--berry-dark);
  border-color: rgba(142, 21, 102, 0.24);
  box-shadow: 0 1px 2px rgba(107, 15, 77, 0.08);
  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='%236b0f4d' 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='%236b0f4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

body.v3-storefront[data-storefront="unified"] .cat-select-native:focus {
  border-color: var(--berry-dark);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--berry-dark);
}

/* Open menu: white surface (keeps the base CP-010 white scroll-shadow
   layers valid), berry hairline and a berry-tinted lift. */
body.v3-storefront[data-storefront="unified"] .cat-select-menu {
  border-color: rgba(142, 21, 102, 0.18);
  box-shadow: 0 18px 40px rgba(107, 15, 77, 0.18), 0 2px 6px rgba(23, 29, 24, 0.06);
}

body.v3-storefront[data-storefront="unified"] .cat-select-menu a {
  position: relative;
  transition: background .12s ease, color .12s ease;
}

body.v3-storefront[data-storefront="unified"] .cat-select-menu .csm-row .ico.cat-ico {
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .cat-select-menu a:hover,
body.v3-storefront[data-storefront="unified"] .cat-select-menu a:active {
  background: transparent;
}

@media (hover: hover) {
  body.v3-storefront[data-storefront="unified"] .cat-select-menu a:not(.is-active):hover {
    background: var(--berry-soft);
  }
  body.v3-storefront[data-storefront="unified"] .cat-select-menu a:not(.is-active):hover b {
    color: var(--berry-dark);
  }
}

body.v3-storefront[data-storefront="unified"] .cat-select-menu a:not(.is-active):active {
  background: var(--berry-soft);
  box-shadow: inset 0 0 0 1px var(--berry);
}

body.v3-storefront[data-storefront="unified"] .cat-select-menu a:focus-visible {
  outline: 2px solid var(--berry-dark);
  outline-offset: -2px;
}

/* Current category: berry-dark row, white label/icon/sub-label, plus a
   drawn check so "selected" never rests on colour alone. */
body.v3-storefront[data-storefront="unified"] .cat-select-menu a.is-active,
body.v3-storefront[data-storefront="unified"] .cat-select-menu a.is-active:hover,
body.v3-storefront[data-storefront="unified"] .cat-select-menu a.is-active:active {
  background: var(--berry-dark);
}

body.v3-storefront[data-storefront="unified"] .cat-select-menu a.is-active b,
body.v3-storefront[data-storefront="unified"] .cat-select-menu a.is-active .csm-row .ico.cat-ico {
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .cat-select-menu a.is-active .csm-sub {
  color: rgba(255, 255, 255, 0.82);
}

body.v3-storefront[data-storefront="unified"] .cat-select-menu a.is-active .csm-row::after {
  content: "";
  flex: none;
  width: 6px;
  height: 11px;
  margin: -3px 4px 0 auto;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (hover: hover) {
  body.v3-storefront[data-storefront="unified"] .cat-select-menu a.is-active:hover {
    background: var(--berry);
  }
}

/* Keyboard focus on the current row: an inner white ring on the berry
   fill (the berry-dark outline above would vanish against it). */
body.v3-storefront[data-storefront="unified"] .cat-select-menu a.is-active:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  body.v3-storefront[data-storefront="unified"] .cat-select-btn,
  body.v3-storefront[data-storefront="unified"] .cat-select-menu a {
    transition: none;
  }
}

body.v3-storefront[data-storefront="unified"] .site-footer {
  background: var(--d-brand-frame-deep);
}

body.v3-storefront[data-storefront="unified"] .drawer-tile[href*="register"],
body.v3-storefront[data-storefront="unified"] .drawer-tile[data-open="signup"] {
  border-color: rgba(142, 21, 102, 0.18);
}

/* --- campaign artwork: never crop burnt-in type -------------------- */
/* Measured sources: starter-set.jpg 799×800 (~1:1), mango-tea-glass.jpg
   and dubai-pack.jpg 800×1000 (4:5). contain + matching aspect-ratio
   fills the box; a wrong ratio letterboxes instead of clipping type. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-grid {
  grid-template-columns: 1.25fr 1fr 1fr;
  align-items: stretch;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-card {
  display: flex;
  flex-direction: column;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-media img {
  object-fit: contain;
  object-position: center;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-starter-main .camp-media {
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: none;
  background: #fff;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-tea .camp-media,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-flavour .camp-media {
  aspect-ratio: 4 / 5;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-top: auto;
  justify-content: flex-end;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-cta {
  margin-top: auto;
  padding-top: 8px;
}

@media (max-width: 900px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   PHASE 1B — FINAL V0 FIDELITY CORRECTION (2026-08-23)
   Portal 1 / HerbaOnline UK only.
   =============================================================
   Phase 1A ported the Variant A frame tokens but left the older
   overlay proportions, chrome alignment and section treatments in
   place. This block supersedes those rules for portal 1 only; the
   §2/§3/§10/.coach-feature rules above stay untouched so portals
   4/8 keep the frozen V3 look.

   Nothing here redefines a JS contract: search ids, cat-select ids,
   html.v3-search-open, minicart hooks and auth modal ids/selectors
   are not selected on.
   ============================================================= */

/* --- A. HEADER — nav sits beside the brand, not at the right edge --
   Frozen `.brand { margin-right: auto }` pushed the nav AND the
   actions to the right edge. Final V0 keeps the nav next to the
   brand and pushes only the account/cart cluster right. */
body.v3-storefront[data-storefront="unified"] .brand {
  margin-right: 0;
}

body.v3-storefront[data-storefront="unified"] .nav-desktop {
  margin-left: 14px;
  gap: 2px;
}

body.v3-storefront[data-storefront="unified"] .header-actions {
  margin-left: auto;
}

/* V0 uses an icon + label per nav item. */
body.v3-storefront[data-storefront="unified"] .nav-desktop a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

body.v3-storefront[data-storefront="unified"] .nav-desktop a [data-ico],
body.v3-storefront[data-storefront="unified"] .nav-desktop a .ico {
  display: block;
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .nav-desktop a:hover .ico {
  color: var(--green-dark);
}

/* Search row and category row surfaces, per final V0: a quiet tinted
   search band, a white category band. Desktop: the search row still
   scrolls away and the reveal icon follows visibility. Portal 1 mobile
   collapses the row until #v3-open-search opens it. */
body.v3-storefront[data-storefront="unified"] .searchbar {
  background: var(--d-surface-quiet);
}

body.v3-storefront[data-storefront="unified"] .cat-strip {
  background: #fff;
}

body.v3-storefront[data-storefront="unified"] .cat-strip a {
  border: 1px solid transparent;
  color: var(--berry);
  font-size: 13.5px;
  font-weight: 800;
}

/* --- B. TYPOGRAPHY — final V0 heading rhythm ----------------------
   Family/weights already match (Plus Jakarta Sans 400–800). What was
   missing is the shared optical tightening on headings and the
   sentence-case eyebrow. Scoped to portal 1 chrome + home/info
   headings; functional families are not touched. */
body.v3-storefront[data-storefront="unified"] h1,
body.v3-storefront[data-storefront="unified"] h2,
body.v3-storefront[data-storefront="unified"] h3,
body.v3-storefront[data-storefront="unified"] h4 {
  letter-spacing: var(--d-tracking-tight);
}

/* --- C. GUEST HERO — final V0 proportion --------------------------
   Root cause of "visibly too tall": the Phase 1A rule pinned the card
   to --d-hero-min-h (min(78vh, 660px)). Final V0 has no viewport
   min-height; the card is sized by the copy column, with the media
   column carrying a 480px floor. Measured V0 card height at 1280px:
   544px. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out {
  padding: 24px 0 0;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-card {
  border-radius: var(--d-radius-lg);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-copy {
  gap: 20px;
}

/* DG-PORTAL-HELP-PARITY-USP-INVENTORY-36 (Mark): Portal 8's shared-composition guest hero shows the official white logo
   (Portal 1's asset) above the copy instead of the eyebrow pill — the same widths and breakpoints as Portal 1's
   .d-ghf-logo (128px phones, 160px 561-960px, 176px from 961px); no backing, no pill. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-hero-logo {
  display: block;
  align-self: flex-start;
  width: 128px;
  line-height: 0;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-hero-logo img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 561px) and (max-width: 960px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-hero-logo {
    width: 160px;
  }
}

@media (min-width: 961px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-hero-logo {
    width: 176px;
  }
}

/* Final V0 eyebrow is a sentence-case pill, not an uppercase micro-label. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .eyebrow {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out h1 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.02;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .lead {
  font-size: 16px;
  line-height: 1.625;
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.8);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-actions {
  gap: 12px;
  margin-top: 0;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-actions .btn-lg {
  /* DG-MOBILE-STOREFRONT-POLISH-20F: the sitewide large button (52px). */
  padding: 13px 28px;
  font-size: 16px;
  line-height: 1.2;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-rating {
  margin-top: 0;
  gap: 12px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-rating .r-sub {
  font-size: 13.5px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-rating .stars .ico {
  width: 17px;
  height: 17px;
}

/* Final V0 mobile leads with the copy panel and drops the photo below it
   (public/review/mobile/home-guest.png). The frozen rule hoists the media
   with `order: -1`, so portal 1 restores document order. */
@media (max-width: 960px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-media {
    order: 0;
  }
}

@media (min-width: 961px) {
  /* Supersedes the Phase 1A viewport min-height. Column split and the
     deep copy padding stay desktop-only — below 961px the frozen rules
     stack the hero, which is what final V0 mobile does too. */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-card {
    min-height: 0;
    grid-template-columns: 1.05fr 0.95fr;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-copy {
    padding: 48px 48px 96px;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-media {
    min-height: 480px;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-media img {
    object-position: center top;
  }

  /* Trust strip bridges the hero: final V0 lifts it 56px and insets it
     32px, with the large shadow so it reads as a card on top. */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .trust {
    margin: -56px 32px 0;
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
  }
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .trust-item {
  padding: 20px;
  gap: 12px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .trust-ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--green-softer);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .trust-item b {
  font-size: 14px;
}

/* 12px keeps every note on one line at the final V0 column width, so
   the strip cannot grow a second row and push the page down. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .trust-item span {
  font-size: 12px;
  line-height: 1.35;
}

/* --- H. PROMO / CAMPAIGN CARDS — final V0 promo language ----------
   Final V0 uses one promo card shape for all three: white card, a
   ratio-matched media box with the artwork CONTAINED, and a tinted
   caption footer. Artwork carries burnt-in typography, so `contain`
   plus the measured source ratio is mandatory — the ratios and the
   1.25fr lead column are the approved layout and stay as set above.
   Measured: starter-set.jpg 799x800 (1:1), mango-tea-glass.jpg and
   dubai-pack.jpg 800x1000 (4:5). */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns {
  padding: clamp(28px, 4vw, 44px) 0 0;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 24px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-head-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #fff;
  color: var(--green-dark);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-head-eyebrow .ico {
  width: 15px;
  height: 15px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-head-title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
}

/* The lead card is a normal promo card in final V0 — not a green slab. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-card,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-main {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-media {
  background: var(--d-surface-media);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-copy {
  padding: 14px 16px 16px;
  gap: 5px;
  background: var(--green-softer);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-flavour .camp-copy {
  background: var(--berry-soft);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-flavour .camp-eyebrow {
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-main-title,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-card h3 {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-card p {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-cta {
  font-size: 14px;
  font-weight: 800;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .home-campaigns .camp-card:hover {
  border-color: rgba(90, 177, 32, 0.4);
  box-shadow: var(--shadow-md);
}

/* --- D. REGISTER — final V0 "See your customer prices" ------------
   Two columns: a tinted reason column and a white action column.
   The action column keeps the existing V2 auth-modal trigger; no new
   registration form is introduced (see register-prices.php). */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-md);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(28px, 3vw, 40px);
  background: var(--green-softer);
  border-right: 1px solid var(--line);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--berry-soft);
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-eyebrow .ico {
  width: 14px;
  height: 14px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-lead {
  max-width: 28rem;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-reasons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-reasons li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: #fff;
  color: var(--green-dark);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-ico .ico {
  width: 19px;
  height: 19px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-reason {
  display: grid;
  gap: 2px;
  line-height: 1.35;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-reason b {
  font-size: 14.5px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-reason span {
  font-size: 13px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(28px, 3vw, 40px);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-action .btn-lg {
  padding: 15px 28px;
  font-size: 16px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-note {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-alt {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 13.5px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-alt a {
  font-weight: 800;
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-why {
  margin: 0;
  text-align: center;
  font-size: 13px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-why a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 900px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-copy {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* --- E. REVIEWS — final V0 testimonial composition ----------------
   Final V0: rating chip above heading, no lead paragraph, featured +
   nested supporting stack (lg 1.3fr / 1fr, gap 16px). Gold stars.
   Portal 1 only; §10 still serves portals 4/8. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi-head {
  display: block;
  margin-bottom: 28px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi-head > p {
  display: none;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #fff;
  color: var(--green-dark);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi-eyebrow .ico {
  width: 14px;
  height: 14px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  gap: 16px;
  align-items: stretch;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi-stack {
  display: grid;
  gap: 16px;
  min-width: 0;
}

/* The cards are <figure> elements, so the UA stylesheet's 1em block margin
   is added on top of the 16px grid gap and every gap renders as ~48px. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .testi-card {
  margin: 0;
}

@media (min-width: 1024px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  /* Two-column only: the three supporting cards share the featured card's
     height in equal rows so the column fills instead of leaving dead space
     under a short stack. Below this breakpoint the stack is a single column
     and equal rows would pad every card with unwanted vertical slack. */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi-stack {
    grid-auto-rows: 1fr;
    align-content: stretch;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi-stack > .d-testi-support {
    height: 100%;
  }
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-feature {
  grid-row: auto;
  align-self: stretch;
  height: 100%;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 36px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-quote-mark {
  height: auto;
  overflow: visible;
  font-size: 40px;
  line-height: 1;
  color: var(--berry-soft);
  opacity: 1;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-feature blockquote {
  margin: 0;
  max-width: none;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.625;
  letter-spacing: 0;
  color: var(--ink);
}

@media (min-width: 641px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-feature blockquote {
    font-size: 22px;
  }
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-feature cite {
  margin: 0;
  padding: 0;
  border-top: 0;
  gap: 12px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-feature .d-testi-avatar {
  width: 44px;
  height: 44px;
  background: var(--berry);
  color: #fff;
  font-size: 16px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-feature .d-testi-who b {
  font-size: 15px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-stars,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-stars span,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-support .stars,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-support .stars span {
  color: #f2c94c;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-stars {
  margin-left: auto;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-stars .ico {
  width: 16px;
  height: 16px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-support {
  gap: 12px;
  padding: 20px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-support .stars .ico {
  width: 14px;
  height: 14px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-support blockquote {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.625;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-support cite {
  margin: 0;
  padding: 0;
  border-top: 0;
  font-size: 13px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-support .d-testi-who {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-support .d-testi-who b {
  font-size: 13px;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-testi .d-testi-support .d-testi-who b::after {
  content: " · ";
  color: var(--muted);
  font-weight: 500;
}

/* --- F. SUPPORT — final V0 dark split composition -----------------
   Final V0 puts this block on the same dark brand surface as the
   hero: media left, copy right on green, check bullets in soft green
   discs, one WhatsApp CTA plus a bright-green text link. Portals 4/8
   keep the frozen light `.coach-feature`. */
body.v3-storefront[data-storefront="unified"] .coach-feature.d-support {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--d-green-hairline);
  border-radius: var(--d-radius-lg);
  background: var(--d-brand-frame-guest);
  box-shadow:
    inset 0 2px 0 var(--d-brand-edge-green),
    var(--shadow-lg);
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-media {
  position: relative;
  min-height: 320px;
  background: var(--d-brand-frame-deep);
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: clamp(28px, 3vw, 40px);
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-eyebrow {
  align-self: flex-start;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-copy h2 {
  margin-top: 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-copy > p {
  margin-top: 0;
  max-width: none;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-points {
  margin-top: 0;
  gap: 10px;
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-points li {
  gap: 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: rgba(143, 224, 90, 0.2);
  color: #8fe05a;
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-check .ico {
  width: 14px;
  height: 14px;
  color: #8fe05a;
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-actions {
  align-items: center;
  gap: 12px 20px;
  margin-top: 4px;
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: #8fe05a;
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-link:hover {
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-link .ico {
  width: 16px;
  height: 16px;
}

@media (max-width: 900px) {
  body.v3-storefront[data-storefront="unified"] .coach-feature.d-support {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- G. FOOTER — final V0 composition ------------------------------
   Phase 1A only recoloured the background. Final V0 uses the near-black
   brand ink (not the green frame), icon tiles rather than bare icons on
   the trust row, and a quieter link/label scale. Links and data stay
   exactly as the template renders them. */
body.v3-storefront[data-storefront="unified"] .site-footer {
  background: var(--d-hero-ink);
  color: rgba(255, 255, 255, 0.8);
  margin-top: 60px;
}

/* Block padding only — these rows are `.container` elements, so a
   shorthand would drop the inline gutter and let mobile text hit the
   viewport edge. */
body.v3-storefront[data-storefront="unified"] .foot-reassure {
  gap: 40px; /* DG-USP-COPY-LINK-FOOTER-GAP-36A (Mark): was 20px */
  padding-block: 32px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* DG-FOOTER-MOBILE-GAP-36B (Mark): phones keep the earlier 20px; 40px from 721px. */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .foot-reassure {
    gap: 20px;
  }
}

body.v3-storefront[data-storefront="unified"] .foot-reassure li {
  align-items: flex-start;
  gap: 12px;
}

/* The [data-ico] span is the icon's own box, so it can carry the tile. */
body.v3-storefront[data-storefront="unified"] .foot-reassure li > [data-ico] {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #bfe6a6;
}

body.v3-storefront[data-storefront="unified"] .foot-reassure .ico {
  width: 20px;
  height: 20px;
  color: #bfe6a6;
}

body.v3-storefront[data-storefront="unified"] .foot-reassure b {
  font-size: 14px;
}

body.v3-storefront[data-storefront="unified"] .foot-reassure span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

body.v3-storefront[data-storefront="unified"] .footer-grid {
  gap: 32px;
  padding-block: 40px;
}

body.v3-storefront[data-storefront="unified"] .footer-grid h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

body.v3-storefront[data-storefront="unified"] .footer-grid a {
  padding: 4px 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
}

body.v3-storefront[data-storefront="unified"] .footer-grid a:hover {
  color: #bfe6a6;
}

/* DG-ACCOUNT-NAME-FOCUS-PARITY-19B — mandatory focus page: the footer menu items are plain text (no anchors), set in
   the same rhythm and colour as the links so the footer looks unchanged, without any link affordance. */
body.v3-storefront .footer-grid .d-foot-static {
  display: block;
  padding: 4px 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
  cursor: default;
}

body.v3-storefront[data-storefront="unified"] .footer-brand {
  max-width: 22rem;
}

body.v3-storefront[data-storefront="unified"] .footer-brand .d-footer-brand {
  margin-right: 0;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}

body.v3-storefront[data-storefront="unified"] .d-footer-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 36px;
  max-width: min(100%, 240px);
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 768px) {
  body.v3-storefront[data-storefront="unified"] .d-footer-logo {
    max-height: 32px;
  }
}

@media (max-width: 390px) {
  body.v3-storefront[data-storefront="unified"] .d-footer-logo {
    max-height: 28px;
    max-width: min(100%, 210px);
  }
}

@media (max-width: 320px) {
  body.v3-storefront[data-storefront="unified"] .d-footer-logo {
    max-height: 24px;
    max-width: min(100%, 188px);
  }
}

body.v3-storefront[data-storefront="unified"] .footer-brand p {
  margin-top: 12px;
  max-width: none;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

body.v3-storefront[data-storefront="unified"] .footer-brand .d-paymarks {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 100%;
}

body.v3-storefront[data-storefront="unified"] .footer-brand .d-paymarks-label {
  color: rgba(255, 255, 255, 0.55);
}

body.v3-storefront[data-storefront="unified"] .footer-brand .d-paymark {
  background: #fff;
  border-color: rgba(20, 28, 18, 0.08);
}

@media (max-width: 360px) {
  body.v3-storefront[data-storefront="unified"] .footer-brand .d-paymark {
    width: 40px;
    height: 27px;
  }
}

body.v3-storefront[data-storefront="unified"] .footer-bottom {
  display: block;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}

body.v3-storefront[data-storefront="unified"] .footer-bottom > span {
  display: block;
  width: 100%;
  max-width: none;
  line-height: 1.55;
}

/* ==================================================================
   PHASE 1B — J. AUTH MODAL (V0 sign-in treatment on V2 architecture)
   ------------------------------------------------------------------
   Final V0 reference: app/login/page.tsx + globals.css `.auth-shell`
   / `.auth-aside` / `.auth-panel` / `.field__*`.

   Presentation only. The V2 modal markup, ids (#v3-modal-login,
   #v3-modal-signup, #v3-login-email, …), form actions, csrf inputs
   and data-auth-ajax hooks are untouched.
   ================================================================== */

/* V0 uses one green brand frame for the auth aside — the berry photo
   collage was an earlier V2 overlay, not the final freeze. */
body.v3-storefront[data-storefront="unified"] .auth-modal .modal-aside.auth-side,
body.v3-storefront[data-storefront="unified"] .auth-modal--login .modal-aside,
body.v3-storefront[data-storefront="unified"] .auth-modal--signup .modal-aside {
  background: radial-gradient(
    120% 120% at 85% 0%,
    var(--d-green-600) 0%,
    var(--d-green-800) 45%,
    var(--d-green-900) 100%
  );
  border-right: 1px solid var(--d-green-hairline);
  color: var(--d-on-green-ink);
  justify-content: flex-start;
  gap: 18px;
  padding: clamp(28px, 3.4vw, 44px);
}

/* V0 stacks eyebrow → title → lede from the top and pins the closing
   line to the foot; the frozen rule pushed the whole block down. */
body.v3-storefront[data-storefront="unified"] .auth-modal .aside-badge {
  margin-bottom: 0;
}

body.v3-storefront[data-storefront="unified"] .auth-modal .modal-aside h3 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .auth-modal .modal-aside p {
  margin-top: 0;
  opacity: 1;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(233, 246, 226, 0.86);
}

body.v3-storefront[data-storefront="unified"] .auth-modal .modal-aside .aside-link {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--d-green-hairline);
  font-size: 16px;
}

body.v3-storefront[data-storefront="unified"] .auth-modal .modal-aside .aside-link a {
  color: #fff;
}

/* Form panel — V0 `.auth-panel` rhythm and field styling. */
body.v3-storefront[data-storefront="unified"] .auth-modal .modal-body {
  margin: 0;
  padding: clamp(26px, 3.2vw, 40px);
}

/* DG-STOREFRONT-CONSOLIDATION-CORRECTION-11A (Mark) — the signup dialog's form body starts 20px under its header;
   login/forgot keep the rule above (same specificity, later in the file, signup overlay only). */
body.v3-storefront[data-storefront="unified"] .auth-modal--signup .modal-body {
  padding-top: 20px;
}

body.v3-storefront[data-storefront="unified"] .auth-modal .auth-modal-header h2,
body.v3-storefront[data-storefront="unified"] .auth-modal .modal-body h2 {
  font-size: 26px;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

body.v3-storefront[data-storefront="unified"] .auth-modal .auth-modal-header {
  padding: clamp(26px, 3.2vw, 40px) clamp(26px, 3.2vw, 40px) 0;
  padding-right: calc(clamp(26px, 3.2vw, 40px) + 44px);
}

body.v3-storefront[data-storefront="unified"] .auth-cross--mobile {
  margin-top: 24px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

body.v3-storefront[data-storefront="unified"] .auth-cross--mobile a {
  color: #1d6fd8;
  font-weight: 700;
  text-decoration: none;
}

@media (min-width: 721px) {
  body.v3-storefront[data-storefront="unified"] .auth-cross--mobile {
    display: none !important;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .auth-modal--login .aside-link,
  body.v3-storefront[data-storefront="unified"] .auth-modal--signup .aside-link {
    display: none !important;
  }

  body.v3-storefront[data-storefront="unified"] .auth-modal--login .aside-badge,
  body.v3-storefront[data-storefront="unified"] .auth-modal--signup .aside-badge {
    display: none !important;
  }

  body.v3-storefront[data-storefront="unified"] .auth-modal .auth-modal-header {
    padding: 18px 22px 10px;
    padding-right: 58px;
  }
}

body.v3-storefront[data-storefront="unified"] .auth-modal .modal-body .sub {
  font-size: 14.5px;
  line-height: 1.55;
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field {
  margin-top: 18px;
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field label {
  font-size: 13.5px;
  margin-bottom: 6px;
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input {
  border-width: 1px;
  border-color: var(--d-field-border, var(--line));
  border-radius: var(--d-field-radius);
  padding: var(--d-field-pad);
  font-family: inherit;
  font-size: var(--d-field-font-size);
  color: var(--d-field-text, var(--ink));
  box-shadow: var(--d-field-shadow-rest);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input::placeholder {
  color: var(--d-field-placeholder);
  opacity: 1;
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input:hover:not(:disabled):not(:focus):not([aria-invalid="true"]) {
  border-color: var(--d-field-border-hover, var(--muted));
  box-shadow: var(--d-field-shadow-hover);
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input:focus {
  border-color: var(--green);
  box-shadow: var(--d-field-glow);
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input[aria-invalid="true"] {
  border-color: var(--d-status-fail);
  background-color: #fff;
  box-shadow: var(--d-field-error-ring);
}

/* DG-FORM-FIELD-VISUAL-01 — base-owned .form-field / .field-group text fields
   (password setup, confirm email, name setup, coupon/VIP code, standalone
   login/register/forgot, non-Portal-1 checkout address) take the shared
   size and colours. Text-like types only via :where(), so the product/
   program quantity number inputs inside .form-field keep their geometry.
   Border and focus ring stay with the base rules. */
body.v3-storefront[data-storefront="unified"] .form-field input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])),
body.v3-storefront[data-storefront="unified"] .field-group input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])),
body.v3-storefront[data-storefront="unified"] .field-group textarea,
body.v3-storefront[data-storefront="unified"] .field-group select {
  padding: var(--d-field-pad);
  border: 1px solid var(--d-field-border, var(--line));
  border-radius: var(--d-field-radius);
  background-color: #fff;
  font-family: inherit;
  font-size: var(--d-field-font-size);
  color: var(--d-field-text, var(--ink));
  box-shadow: var(--d-field-shadow-rest);
  outline: none;
}

body.v3-storefront[data-storefront="unified"] .form-field input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):focus,
body.v3-storefront[data-storefront="unified"] .field-group input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):focus,
body.v3-storefront[data-storefront="unified"] .field-group textarea:focus,
body.v3-storefront[data-storefront="unified"] .field-group select:focus {
  border-color: var(--green);
  box-shadow: var(--d-field-glow);
}

/* The non-Portal-1 checkout marks errors with .field-invalid on the wrapper;
   v3-cart.css paints that with !important, so the F2 edge must match it. */
body.v3-storefront[data-storefront="unified"] .form-field input[aria-invalid="true"],
body.v3-storefront[data-storefront="unified"] .field-group input[aria-invalid="true"],
body.v3-storefront[data-storefront="unified"] .field-invalid input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])),
body.v3-storefront[data-storefront="unified"] .field-invalid textarea {
  border-color: var(--d-status-fail) !important;
  background-color: #fff;
  box-shadow: var(--d-field-error-ring) !important;
}

body.v3-storefront[data-storefront="unified"] .form-field input::placeholder,
body.v3-storefront[data-storefront="unified"] .field-group input::placeholder,
body.v3-storefront[data-storefront="unified"] .field-group textarea::placeholder {
  color: var(--d-field-placeholder);
  opacity: 1;
}

/* DG-LAUNCH-STOREFRONT-POLISH-01A — the cart coupon code field was the last
   storefront text field outside the shared system (12px 14px, 14px text on
   touch devices too, so iOS zoomed the page on focus). It now takes the F2
   size, colours, edge, lift and green focus; its inline row and Apply
   button are unchanged. autocomplete="off", so no autofill owner needed. */
body.v3-storefront[data-storefront="unified"] .coupon input:where([type="text"], :not([type])) {
  min-height: var(--d-field-min-h);
  padding: var(--d-field-pad);
  border: 1px solid var(--d-field-border, var(--line));
  border-radius: var(--d-field-radius);
  background-color: #fff;
  font-family: inherit;
  font-size: var(--d-field-font-size);
  color: var(--d-field-text, var(--ink));
  box-shadow: var(--d-field-shadow-rest);
  outline: none;
}

body.v3-storefront[data-storefront="unified"] .coupon input:where([type="text"], :not([type])):focus {
  border-color: var(--green);
  box-shadow: var(--d-field-glow);
}

/* Read-only (e.g. the locked email/country on the non-Portal-1 checkout)
   gets the same quiet locked look as .d-field-input[readonly]. */
body.v3-storefront[data-storefront="unified"] .form-field input[readonly]:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])),
body.v3-storefront[data-storefront="unified"] .field-group input[readonly]:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])) {
  background: var(--d-surface-quiet);
  color: var(--muted);
  box-shadow: none;
}

/* Secondary member-code route reads as V0's inactive method switch. */
body.v3-storefront[data-storefront="unified"] .auth-modal .login-member-code-panel > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--radius);
  background: var(--green-softer);
  color: var(--green-dark);
  font-size: 14px;
  border: 0;
}

body.v3-storefront[data-storefront="unified"] .auth-modal .login-member-code-panel[open] > summary {
  margin-bottom: 2px;
}

/* V0 `.auth-points` — reassurance rows in the brand aside. */
body.v3-storefront[data-storefront="unified"] .auth-modal .aside-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-storefront="unified"] .auth-modal .aside-points li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.45;
  color: #eaf7e1;
}

body.v3-storefront[data-storefront="unified"] .auth-modal .aside-points .ico {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--d-on-green-accent);
}


/* =============================================================
   PHASE 1C — DIRECT SOURCE PARITY (2026-08-23)
   Portal 1 / HerbaOnline UK only.
   =============================================================
   Phase 1A was technically safe but visually incomplete.
   Phase 1B improved the overall look but was still an interpretive
   overlay. Phase 1C ports final-V0 structure/styling as literally
   as V2 markup allows, then injects V2 data/routes/actions.

   Does not restyle portals 4/8. Does not redefine JS contracts
   (#v3-open-search, #v3-site-search, html.v3-search-open,
   minicart hooks, #v3-modal-login / signup / forgot).
   ============================================================= */

/* --- Header chrome: official Independent Member logo, Sign in pill, circular cart ----- */
body.v3-storefront[data-storefront="unified"] .brand.d-brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
  align-items: flex-start;
  overflow: hidden;
}

/* DG-MOBILE-CATEGORY-BRAND-01 — the one piece of real portal-name text this
   header was missing (the logo graphic itself carries "Independent
   Member" visually already, so this line is deliberately just the name,
   not a second "Independent Member" restatement). Small and muted enough
   to read as a caption under the mark, not a second logo. */
body.v3-storefront[data-storefront="unified"] .d-brand-identity {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 390px) {
  body.v3-storefront[data-storefront="unified"] .d-brand-identity {
    font-size: 10px;
  }
}

body.v3-storefront[data-storefront="unified"] .d-brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 34px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 1024px) {
  body.v3-storefront[data-storefront="unified"] .d-brand-logo {
    max-height: 30px;
  }
}

@media (max-width: 390px) {
  body.v3-storefront[data-storefront="unified"] .d-brand-logo {
    max-height: 26px;
  }
}

@media (max-width: 320px) {
  body.v3-storefront[data-storefront="unified"] .d-brand-logo {
    max-height: 20px;
  }
}

/* DG-PRODUCT-PROGRAM-UX-04 — the plain white/grey outline pill was reported as
   disappearing against the white header. A green-tinted surface with a hairline
   green border and dark-green icon/text keeps it clearly visible while staying
   secondary to the primary green register/purchase CTAs (no fill, no shadow-free
   flatness). Size, icon, label, route and the auth-modal `data-open` hook are
   unchanged. */
body.v3-storefront[data-storefront="unified"] .d-signin {
  border-radius: 999px;
  border: 1px solid var(--d-price-edge, #cde3c1);
  padding: 6px 12px;
  gap: 8px;
  background: var(--green-softer, #f1f9ec);
  color: var(--green-dark);
  /* DG-MOBILE-STOREFRONT-POLISH-20 (Mark): 700 label weight; DG-STOREFRONT-MICRO-POLISH-CART-FLAVOURS-30 (Mark): the
     former second base rule (2px edge + 700) is merged here — one base rule, 1px edge, 6px 12px padding. */
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(27, 33, 29, 0.05);
}

/* DG-STOREFRONT-MICRO-POLISH-CART-FLAVOURS-30 (Mark): only the user icon inside this button sits 4px lower. */
body.v3-storefront[data-storefront="unified"] .d-signin span[data-ico="user"] {
  padding-top: 4px;
}

body.v3-storefront[data-storefront="unified"] .d-signin:hover {
  border-color: var(--green);
  color: var(--green-dark);
  background: var(--green-soft);
}

body.v3-storefront[data-storefront="unified"] .d-signin:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 2px;
}

/* DG-SHARED-STOREFRONT-POLISH-01 — exact cart delta (Mark): 48px, berry, white. */
body.v3-storefront[data-storefront="unified"] .cart-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--berry);
  color: white;
  display: grid;
  place-items: center;
}

/* DG-SEARCH-FORMS-STOREFRONT-CLOSEOUT-02 — the reported follow-up: hover stays the commerce
   accent (darker berry, white icon) instead of turning pale green. */
body.v3-storefront[data-storefront="unified"] .cart-btn:hover {
  background: var(--berry-dark);
  color: white;
  box-shadow: 0 0 0 4px rgba(142, 21, 102, 0.16);
}

body.v3-storefront[data-storefront="unified"] .cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--green-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .searchbar {
  background: var(--d-surface-quiet, #f3f5f0);
}

body.v3-storefront[data-storefront="unified"] .searchbar form {
  background: #fff;
  border-color: var(--d-field-border, var(--line));
}

@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .searchbar {
    max-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
  }

  body.v3-storefront[data-storefront="unified"] .searchbar .container {
    padding-top: 0;
    padding-bottom: 0;
  }

  html.v3-search-open body.v3-storefront[data-storefront="unified"] .searchbar,
  html.v3-search-closing body.v3-storefront[data-storefront="unified"] .searchbar {
    max-height: var(--searchbar-h);
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
  }

  html.v3-search-open body.v3-storefront[data-storefront="unified"] .searchbar .container,
  html.v3-search-closing body.v3-storefront[data-storefront="unified"] .searchbar .container {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  body.v3-storefront[data-storefront="unified"] #v3-open-search {
    visibility: visible;
    pointer-events: auto;
  }
}

body.v3-storefront[data-storefront="unified"] .cat-strip a {
  border-radius: 999px;
  padding: 10px 16px;
}

/* CP-010 — desktop distribution: the first category aligns with the
   container's own left edge, the last with its right edge, and the rest
   spread across whatever width is left — instead of the old fixed
   min-width:992px gap, which left short label sets floating inward at
   every narrower width. Replaces that gap rule and the max-width:840px
   zoom hack together, which also left an untreated 981-991px gap between
   the two. The compact/dropdown-fallback states themselves
   (.is-compact/.is-overflow) are measured against the real rendered
   labels by v3-catnav-fit.js, not a guessed breakpoint; their shared,
   portal-agnostic display/sizing mechanics live in v3-storefront.css. */
body.v3-storefront[data-storefront="unified"] .cat-strip .container {
  justify-content: space-between;
}

/* CP-010A — safe no-JS/not-yet-measured fallback for the "uncertain
   middle" width band. Below 720px the dropdown is already the
   unconditional CSS baseline; above 1024px seven short-to-medium labels
   reliably fit the plain spacious strip (the CP-010 measurement log in
   the handoff records real thresholds around 896-991px for the live
   label set, so 1024px keeps a safety margin above that). In between —
   where whether the strip fits genuinely depends on actual label content
   this stylesheet cannot know — default conservatively to the dropdown
   until v3-catnav-fit.js has actually measured and marked the strip
   `.is-js-measured`. A visitor with JS disabled therefore never sees the
   possibly-overflowing spacious strip with nothing left to catch it: at
   every width in this band they get the same dropdown mobile uses,
   unconditionally. Once `.is-js-measured` is present these two rules stop
   matching entirely and the ordinary `.is-compact`/`.is-overflow`/
   `.is-forced-open` cascade (declared once, unconditionally, in
   v3-storefront.css) takes over exactly as it already does above
   1024px — there is no separate "undo" rule to keep in sync.
   DG-CATALOG-NAV-ICON-ORDER-01 — ceiling raised 1024px -> 1099px. The
   server-rendered category icons widen the spacious strip by ~150px; it
   was measured to overflow its container by 36px at 1030px and to fit
   again from ~1066px (live label set). 1099px is one pixel below the
   CP-010C >=1100px grid rail, so a no-JS visitor never sees an
   overflowing pill strip and the two bands still never overlap. With JS
   nothing changes: v3-catnav-fit.js keeps measuring as before. */
@media (min-width: 721px) and (max-width: 1099px) {
  body.v3-storefront[data-storefront="unified"] .cat-strip:not(.is-js-measured) {
    display: none;
  }
  body.v3-storefront[data-storefront="unified"] .cat-select:not(.is-js-measured) {
    display: block;
    position: sticky;
    top: var(--chrome-top);
    z-index: 60;
  }
  /* Matches the dropdown's real height, not the strip's, while it is the
     conservative default. Targets :root (via :has(), to stay Portal-1
     scoped) — the same element v3-catnav-fit.js sets an inline
     --catbar-h override on once it runs (setProperty on
     documentElement.style). An inline style always wins over this rule
     regardless of selector specificity, so JS transparently replaces
     this conservative guess with the exact real measured height the
     instant it measures; this rule only ever matters before that, or
     with JS disabled. It applies to the shared `[data-storefront="unified"]`
     family (Portals 1, 4 and 8 since PLT-SHARED-PORTAL-RUNTIME-01). */
  html:has(body.v3-storefront[data-storefront="unified"]) {
    --catbar-h: 68px;
  }
}

/* CP-010C — wide desktop (>=1100px): a full-width segmented tab rail,
   replacing the pill-tabs-plus-justify-content:space-between look that
   left too much visually empty white space between labels at 1280/1440
   (Mark's one remaining note after otherwise approving the nav). 1024px
   and below are completely unchanged: this block only ever applies at
   1100px+, a safety margin above both the real measured spacious-fit
   threshold (~991-1024px, see the CP-010 handoff) and the no-JS
   conservative-fallback band's own max-width boundary above (1099px since
   DG-CATALOG-NAV-ICON-ORDER-01), so
   the two never overlap or compete. Every selector is scoped to the shared
   `[data-storefront="unified"]` family (Portals 1, 4 and 8). */
@media (min-width: 1100px) {
  /* grid-auto-columns: minmax(max-content, 1fr) is the load-bearing
     part. Each category gets an equal 1fr share of the container's
     width, but a column can never shrink below its own label's real,
     unshrunk (max-content) width. So when everything genuinely fits,
     the columns expand evenly to fill the bar edge to edge — fixing the
     reported gap. When it does NOT fit (a longer label set, or a future
     extra category), the max-content minimums win instead, the grid
     overflows exactly as the old flex layout did, and
     v3-catnav-fit.js's real container.scrollWidth > container.clientWidth
     check still fires correctly. No min-width:0-plus-clipped-text
     shrink trick that could fake a false "it fits" is used anywhere
     here. grid-auto-flow:column with grid-auto-columns (rather than a
     literal grid-template-columns: repeat(7, ...)) also means this
     works for however many categories the portal actually has, not a
     hardcoded count. */
  body.v3-storefront[data-storefront="unified"] .cat-strip {
    padding: 0;
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip .container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(max-content, 1fr);
    justify-content: normal;
    align-items: stretch;
    gap: 0;
  }
  /* Full-height, full-width cell: the whole tab area is clickable, not
     just the label text. text-align/justify-content center the label
     within whatever width the column ends up at. border:none and
     border-radius:0 avoid the old pill shape — restrained flat cells,
     not a button bar. */
  body.v3-storefront[data-storefront="unified"] .cat-strip a {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 15px 20px;
    border: none;
    border-radius: 0;
    position: relative;
  }
  /* Restrained divider between adjacent cells only (the a + a selector
     naturally excludes the first cell, and nothing is ever drawn after
     the last one) — inset top/bottom so it reads as a subtle rule, not
     a heavy full-height column border. */
  body.v3-storefront[data-storefront="unified"] .cat-strip a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 26%;
    bottom: 26%;
    width: 1px;
    background: var(--line);
  }
  /* Hover/focus respond across the whole cell with a light tint rather
     than the old bordered-pill ring. Focus additionally gets a clear
     inset ring, since the flat cells no longer have a border to help
     carry that signal. */
  body.v3-storefront[data-storefront="unified"] .cat-strip a:hover {
    background: var(--berry-soft);
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip a:focus-visible {
    background: var(--berry-soft);
    outline: none;
    box-shadow: inset 0 0 0 2px var(--berry);
  }
  /* Active: a soft berry-tinted surface plus a deliberate bottom
     indicator bar, instead of the oversized solid-fill pill. */
  body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active,
  body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active:hover,
  body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active:focus-visible {
    background: var(--berry-soft);
    color: var(--berry-dark);
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--berry);
  }
}

@media (max-width: 960px) {
  body.v3-storefront[data-storefront="unified"] .d-signin .label-hide {
    display: none;
  }
}

/* --- Guest promo stack (1 + 3 + 2 + 4), artwork never cropped ----- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-promos {
  padding: clamp(28px, 4vw, 44px) 0 0;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-promo-head {
  margin-bottom: 24px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-promo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #fff;
  color: var(--green-dark);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-promo-head h2 {
  margin-top: 8px;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: var(--d-tracking-tight);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 24px);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-spot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-decoration: none;
  color: #fff;
  background:
    radial-gradient(120% 120% at 85% 0%, var(--d-green-600) 0%, var(--d-green-800) 45%, var(--d-green-900) 100%);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-spot__media {
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.04);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-spot__media img {
  display: block;
  max-width: 100%;
  max-height: 360px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-spot__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(22px, 3vw, 40px);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-spot__title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-spot__text {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-spot__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #8fe05a;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-row {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-row[data-per="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-row[data-per="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-row[data-per="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(90, 177, 32, 0.4);
}

/* Guest campaign only. `.promo-media` is shared with the logged-in
   offer band in v3-storefront.css (padding: 20px; img max-height: 190px;
   hidden below 720px). Reset those leftovers here so the ratio box is
   sized to the artwork — contain, never crop, never a tiny image in a
   huge sage pad. Do not touch `.promo-band .promo-media`. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-promos .promo-media,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-worth .promo-media {
  position: relative;
  display: grid;
  place-items: stretch;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--d-surface-media, #eef2ea);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-promos .promo-media[data-ratio="4x5"],
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-worth .promo-media[data-ratio="4x5"] { aspect-ratio: 4 / 5; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-promos .promo-media[data-ratio="1x1"],
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-worth .promo-media[data-ratio="1x1"] { aspect-ratio: 1 / 1; }

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-promos .promo-media img,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-worth .promo-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-promos .promo-media,
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-worth .promo-media {
    display: grid;
  }
}

/* --- member "Worth a look this week" (final V0 `.worth-row`) ----------- */
/* 1.25fr lead column: a 1x1 card there is exactly as tall as a 4x5 card in
   a 1fr column, so the three media boxes match and the footers align with
   no per-card height hacks. */

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-worth-title {
  margin: 0 0 20px;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: var(--d-tracking-tight);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .worth-row {
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: 1.25fr minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .worth-row > :first-child .promo-media {
  background: var(--green-softer);
}

/* The caption fills the leftover height and pins its CTA to the bottom, so
   differing copy lengths cannot stagger the row. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .worth-row .promo-copy { flex: 1; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .worth-row .promo-cta {
  margin-top: auto;
  padding-top: 6px;
}

@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .worth-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px 16px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-copy[data-tone="green"] { background: var(--green-softer); }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-copy[data-tone="berry"] { background: var(--berry-soft); }

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-eyebrow--onDark {
  color: #bfe6a6;
  text-transform: uppercase;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--berry);
}

@media (max-width: 900px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-row[data-per="3"],
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-row[data-per="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-spot {
    grid-template-columns: 1fr;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-row[data-per="2"] {
    grid-template-columns: 1fr;
  }
}

/* --- Bestsellers: 8 cards, 2 × 4, V0 product treatment ------------ */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-product:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(90, 177, 32, 0.4);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-product .pc-media {
  aspect-ratio: 1 / 1;
  background: #fff;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-product .pc-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-product .pc-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  flex: 1;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-product-gate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--berry);
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-product-gate:hover {
  color: var(--berry-dark, #6b0f4d);
  text-decoration: underline;
}

@media (max-width: 900px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Register visual form (handoff only — no new POST) ------------ */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-pips {
  display: flex;
  gap: 6px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-pips i {
  display: block;
  width: 32px;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-pips i.is-on {
  background: var(--berry);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-field input {
  border: 1px solid var(--d-field-border, var(--line));
  border-radius: var(--d-field-radius);
  background-color: #fff;
  box-shadow: var(--d-field-shadow-rest);
  padding: var(--d-field-pad);
  font-family: inherit;
  font-size: var(--d-field-font-size);
  font-weight: 500;
  color: var(--d-field-text, var(--ink));
  outline: none;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-field input::placeholder {
  color: var(--d-field-placeholder);
  opacity: 1;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-field input:focus {
  border-color: var(--green);
  box-shadow: var(--d-field-glow);
}

/* --- Support play overlay (decorative; no fake player) ------------ */
body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-play [data-ico] {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--berry);
  box-shadow: var(--shadow-lg);
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-play .ico {
  width: 30px;
  height: 30px;
  margin-left: 3px;
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(6px);
}

body.v3-storefront[data-storefront="unified"] .coach-feature.d-support .cf-quiet {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Auth method switch (Email me a link | Use a password) -------- */
body.v3-storefront[data-storefront="unified"] .auth-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0 16px;
  padding: 5px;
  border-radius: 16px;
  background: var(--green-softer, #f1f9ec);
  border: 1px solid var(--line);
}

body.v3-storefront[data-storefront="unified"] .auth-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

body.v3-storefront[data-storefront="unified"] .auth-switch__btn[data-active="true"] {
  background: #fff;
  color: var(--green-dark);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"] .d-field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

body.v3-storefront[data-storefront="unified"] .d-field-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--berry);
}

/* =============================================================
   30. MEMBER HOMEPAGE — final V0 `home-member` dashboard + offer
   =============================================================
   Source: `_handoff/v0app_final_design_2026-08-23/`
     components/home/dashboard-hero.tsx  -> .dash-hero
     components/dashboard.tsx            -> .tile family
     components/home/customer-offer.tsx  -> .offer

   Ported under `d-dash*` / `d-tile*` rather than V0's bare `.tile`,
   because CURRENT V2 already owns a `.tile` component in the
   "Where would you like to start?" routing block. Reusing the name
   would restyle that block on every portal.

   Portal-scoped: portals 4/8 keep the frozen `.home-dash` / `.hd-*`
   markup and section 4 above, which is why the template branches
   instead of rewriting the shared block.
   ============================================================= */

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-sec {
  padding-bottom: 0;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--d-radius-lg);
  border: 1px solid var(--d-green-hairline);
  background: var(--d-brand-frame-dash);
  /* Bright green top edge matches the guest hero so both homes read as
     one brand — the "brand bridge" the freeze is built around. */
  box-shadow:
    inset 0 2px 0 var(--d-brand-edge-green),
    var(--shadow-lg);
  color: var(--d-on-green-ink);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-intro {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-intro-copy {
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--green-bright, #8fe05a), var(--green-dark));
  color: #06210a;
  font-weight: 800;
  font-size: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(219, 240, 208, 0.9);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-title {
  margin: 2px 0 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--d-tracking-tight);
  color: #fff;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-sub {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: rgba(233, 246, 226, 0.75);
}

/* Final V0 `.dash-hero__banner`. Solid berry rather than a low-alpha wash:
   at 0.28 over dark green this reads as muddy brown, losing the brand accent
   it exists to carry. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--berry) 0%, var(--berry-dark) 100%);
  border: 1px solid var(--d-brand-hairline-berry, rgba(255, 255, 255, 0.16));
  color: #fbe9f4;
  font-size: 14px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-banner .ico {
  flex: none;
  color: #f2b8dc;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-banner b { color: #fff; }

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex: none;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 860px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-banner {
    flex-wrap: wrap;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-banner-cta {
    margin-left: 0;
  }
}

/* --- tile grid -------------------------------------------------------- */
/* The tile count is runtime-dependent (a customer with no orders has no
   "Latest order" tile), so each arrangement is composed explicitly. A
   fixed repeat(3, 1fr) would leave a phantom column — the same defect
   section 4 documents for the frozen `.hd-grid`. */

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.5vw, 18px);
  margin-top: 18px;
}

@media (min-width: 721px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-grid[data-cells="2"],
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-grid[data-cells="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-dash-grid[data-cells="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- tile ------------------------------------------------------------- */

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 8px;
  margin: 0;
  padding: 20px 22px;
  border-radius: 18px;
  background:
    radial-gradient(90% 130% at 92% 8%, rgba(154, 219, 124, 0.16) 0%, rgba(154, 219, 124, 0) 62%),
    var(--d-green-inset);
  color: var(--d-on-green-ink);
  border: 1px solid var(--d-green-hairline-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bfe6a6;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-label [data-ico] {
  display: inline-flex;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-val {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--d-tracking-tight);
  color: #fff;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-val-sm {
  font-size: 22px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] a.d-tile-val {
  color: inherit;
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] a.d-tile-val:hover,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] a.d-tile-val:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--d-on-green-ink);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-chip {
  align-self: flex-start;
  margin: 0;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  font-size: 12.5px;
  font-weight: 600;
  color: #eaf7e1;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-points {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-unit {
  font-size: 14px;
  font-weight: 700;
  color: #2c4a2a;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: auto;
  gap: 6px;
  margin-top: auto;
  padding: 0;
  padding-top: 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-link [data-ico] {
  display: inline-flex;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-link:hover {
  color: #d9f2c8;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: auto;
  padding-top: 10px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-actions .d-tile-link {
  margin-top: 0;
  padding-top: 0;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-link-soft {
  color: #3f6b3a;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-link-soft:hover {
  text-decoration: underline;
}

/* One bright tile in the frame carries the primary metric. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-primary {
  background: linear-gradient(180deg, #fbfdf8 0%, #eef6e6 100%);
  border-color: rgba(31, 74, 27, 0.14);
  color: var(--d-green-900);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-primary .d-tile-label {
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-primary .d-tile-val {
  color: var(--d-green-900);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-primary .d-tile-note {
  color: #2c4a2a;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-primary .d-tile-chip {
  background: var(--green-soft);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-primary .d-tile-link {
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-primary .d-tile-link-soft {
  color: var(--green-dark);
}

/* Split tile: contained thumbnail beside the body. The starter-set pack is
   finished artwork, so it is contained and never cropped. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-split {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-split .d-tile-thumb {
  display: grid;
  place-items: center;
  width: 40%;
  min-width: 118px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
  border-right: 1px solid var(--d-green-hairline-strong);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-split .d-tile-thumb img {
  max-width: 100%;
  max-height: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-split .d-tile-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 20px;
  flex: 1;
  min-width: 0;
}

/* Status cue + compact meta list (latest order). */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: rgba(154, 219, 124, 0.16);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #bfe6a6;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-bright, #8fe05a);
  box-shadow: 0 0 0 3px rgba(143, 224, 90, 0.25);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 2px 0 0;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-meta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-meta dt {
  color: #a9c9a0;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-meta dd {
  margin: 0;
  font-weight: 700;
  color: #fff;
  text-align: right;
}

@media (max-width: 560px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-split {
    flex-direction: column;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-tile-split .d-tile-thumb {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--d-green-hairline-strong);
  }
}

/* --- this month's customer offer -------------------------------------- */

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  overflow: hidden;
  border-radius: var(--d-radius-lg);
  border: 1px solid var(--d-green-hairline);
  background:
    radial-gradient(120% 120% at 12% 0%, var(--d-green-600) 0%, var(--d-green-800) 48%, var(--d-green-900) 100%);
  box-shadow: var(--shadow-lg);
}

/* V0 fills this cell with a lifestyle photograph, where `cover` is correct.
   CURRENT V2 supplies the offer artwork from the Phase 1E packshot resolver,
   so the image is a product on a light canvas — `cover` would crop the
   product. Contained on the shared media surface, consistent with every
   other packshot surface. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-media {
  position: relative;
  min-height: 260px;
  background: var(--d-surface-media);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 18px;
  object-fit: contain;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 3.2vw, 44px);
  color: var(--d-on-green-ink);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--berry);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-badge [data-ico] {
  display: inline-flex;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: var(--d-tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(219, 240, 208, 0.9);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-title {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: var(--d-tracking-tight);
  color: #fff;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-text {
  margin: 0;
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(233, 246, 226, 0.85);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-cta {
  background: var(--d-btn-berry-face);
  border: 1px solid var(--brand-hairline-berry, var(--d-brand-hairline-berry));
  box-shadow: var(--d-btn-berry-lift);
  color: #fff;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-cta:hover {
  background: var(--d-btn-berry-face-hover);
  box-shadow: var(--d-btn-berry-lift-hover);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-cta [data-ico] {
  display: inline-flex;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-meta {
  font-size: 13px;
  font-weight: 600;
  color: rgba(233, 246, 226, 0.7);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-meta b {
  color: #fff;
}

@media (max-width: 760px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-offer-media {
    min-height: 200px;
  }
}

/* =============================================================
   31. CATALOG / SHOP SHELL + CARDS — final V0 source port
   =============================================================
   Source: `_handoff/v0app_final_design_2026-08-23/`
     app/shop/page.tsx                   -> StoreHero + .store-main + CatalogGrid
     app/search/page.tsx                 -> same shell, chips hidden
     components/store/store-hero.tsx     -> .store-hero / .store-crumbs / .store-status
     components/store/catalog-grid.tsx   -> CompactCard / ComfortCard / ListRow
     app/globals.css                     -> .product, .pcard2, .prow, .viewsw,
                                            .catalog-toolbar, .catalog-chip

   REPLACES the earlier density layer, which re-flowed CURRENT V2's
   `.product-row` with CSS. That produced the right 4/2/1 mechanics but never
   V0's card CONTENT, so each density is now its own V0 card component and the
   `.product-row` re-flow rules are gone rather than layered over.

   V0 class names are prefixed `d-` so the frozen `.product-*` namespace in
   v3-storefront.css is untouched, and every rule stays scoped to portal 1.

   Desktop: Compact 4 / Comfortable 2 (production default) / List 1.
   Mobile: always one per row, no density selector.
   ============================================================= */

/* ---------- page shell ---------- */

body.v3-storefront[data-storefront="unified"] .d-store-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3vw, 40px);
  background:
    radial-gradient(120% 100% at 88% -10%, var(--d-green-600) 0%, var(--d-green-800) 46%, var(--d-green-900) 100%);
  color: var(--d-on-green-ink);
}

/* DG-CATEGORY-HERO-COMPACT-34 (Mark): a lower hero on category pages, desktop only (>=1001px, the complement of the
   existing 1000px tablet breakpoint). Category pages = the catalog page family plus the category grid hook
   (.d-catalog.is-category): the shop overview and search have no such grid, and the All page renders as
   data-v3-page="other". Tablet and phone keep the clamp above; no fixed height. */
@media (min-width: 1001px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] #main:has(.d-catalog.is-category) .d-store-hero {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

body.v3-storefront[data-storefront="unified"] .d-store-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 6px; /* DG-CATEGORY-HERO-COMPACT-34 (Mark): was 10px */
}

body.v3-storefront[data-storefront="unified"] .d-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(233, 246, 226, 0.7);
}

body.v3-storefront[data-storefront="unified"] .d-crumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body.v3-storefront[data-storefront="unified"] .d-crumb-sep .ico {
  width: 14px;
  height: 14px;
}

body.v3-storefront[data-storefront="unified"] .d-crumbs a {
  color: rgba(233, 246, 226, 0.85);
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-crumbs a:hover {
  color: #fff;
  text-decoration: underline;
}

body.v3-storefront[data-storefront="unified"] .d-store-title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700; /* DG-CATEGORY-HERO-COMPACT-34 (Mark): was 800 */
  color: #fff;
  line-height: 1.05;
}

body.v3-storefront[data-storefront="unified"] .d-store-lede {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.55;
  color: rgba(233, 246, 226, 0.85);
}

body.v3-storefront[data-storefront="unified"] .d-store-main {
  padding-block: clamp(24px, 3vw, 40px);
}

/* member / guest price status row */
body.v3-storefront[data-storefront="unified"] .d-store-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px; /* DG-CATEGORY-HERO-COMPACT-34 (Mark): was 10px 14px */
  margin-top: 14px;
  padding: 8px 16px; /* DG-CATEGORY-HERO-COMPACT-34 (Mark): was 12px 16px */
  border-radius: var(--radius);
  font-size: 14px;
}

body.v3-storefront[data-storefront="unified"] .d-store-status .ico {
  flex: none;
  width: 18px;
  height: 18px;
}

body.v3-storefront[data-storefront="unified"] .d-store-status b {
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .d-store-status.is-guest {
  background: rgba(142, 21, 102, 0.28);
  border: 1px solid rgba(233, 165, 209, 0.35);
  color: #fbe9f4;
}

body.v3-storefront[data-storefront="unified"] .d-store-status.is-member {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #eaf7e1;
}

/* DG-CATEGORY-HERO-COMPACT-34 (Mark): the member badge icon (the [data-ico="badge-check"] span; no .badge-check class exists) */
body.v3-storefront[data-storefront="unified"] .d-store-status.is-member [data-ico="badge-check"] {
  margin-bottom: -5px;
}

body.v3-storefront[data-storefront="unified"] .d-store-status-cta {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-store-status-cta:hover {
  text-decoration: underline;
}

body.v3-storefront[data-storefront="unified"] .d-store-status-cta .ico {
  width: 15px;
  height: 15px;
}

@media (max-width: 560px) {
  body.v3-storefront[data-storefront="unified"] .d-store-status-cta {
    margin-left: 0;
  }
}

/* ---------- controls row: chips + count + sort + view switch ---------- */

body.v3-storefront[data-storefront="unified"] .d-cat-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

body.v3-storefront[data-storefront="unified"] .d-cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-cat-filters[hidden],
body.v3-storefront[data-storefront="unified"] .d-cat-filters.is-redundant {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .d-cat-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

body.v3-storefront[data-storefront="unified"] .d-cat-chip:hover {
  border-color: var(--green);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-cat-chip.is-on {
  border-color: var(--green);
  background: var(--green-softer);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-cat-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

body.v3-storefront[data-storefront="unified"] .d-cat-count {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cat-count b {
  color: var(--ink);
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-cat-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-cat-select .ico {
  width: 15px;
  height: 15px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cat-select select {
  min-height: 0;
  padding: 0 4px 0 0;
  border: none;
  background: none;
  box-shadow: none;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

body.v3-storefront[data-storefront="unified"] .d-cat-select select:focus {
  outline: none;
}

body.v3-storefront[data-storefront="unified"] .d-cat-select-go {
  border: none;
  background: none;
  font: inherit;
  font-weight: 800;
  color: var(--green-dark);
  cursor: pointer;
}

body.v3-storefront[data-storefront="unified"] .d-viewsw {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
}

body.v3-storefront[data-storefront="unified"] .d-viewsw-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 36px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}

body.v3-storefront[data-storefront="unified"] .d-viewsw-btn:hover {
  background: var(--green-softer);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-viewsw-btn.is-on {
  background: var(--green-softer);
  color: var(--green-dark);
  box-shadow: inset 0 0 0 1.5px var(--green);
}

body.v3-storefront[data-storefront="unified"] .d-viewsw-btn .ico {
  width: 17px;
  height: 17px;
}

/* ---------- shared card atoms (V0 .product-cat / .product-price / gate) ---------- */

body.v3-storefront[data-storefront="unified"] .d-pcard-cat {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-pcard-variant {
  font-size: 13px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
}

body.v3-storefront[data-storefront="unified"] .d-price-was {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: line-through;
}

body.v3-storefront[data-storefront="unified"] .d-price-save {
  flex-basis: 100%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--berry);
}

/* V0 `.product-gate` — plain text link (home grid). */
body.v3-storefront[data-storefront="unified"] .d-gate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--berry);
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-gate:hover {
  color: var(--berry-dark);
  text-decoration: underline;
}

/* V0 `.product-gate--btn` — pill flavour (catalog / category / search grids). */
body.v3-storefront[data-storefront="unified"] .d-gate.is-btn {
  align-self: flex-start;
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  background: var(--berry-soft);
}

body.v3-storefront[data-storefront="unified"] .d-gate.is-btn:hover {
  background: #f5d6e9;
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-gate .ico {
  width: 14px;
  height: 14px;
}

body.v3-storefront[data-storefront="unified"] .d-pcard-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--berry);
  box-shadow: var(--shadow-sm);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  /* DG-STOREFRONT-POLISH-PACK-BANNER-19: the sale tag icon sits before the percentage. */
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.v3-storefront[data-storefront="unified"] .d-pcard-badge-ico {
  display: inline-flex;
  flex: none;
}

body.v3-storefront[data-storefront="unified"] .d-pcard-badge-ico .ico {
  width: 1.15em;
  height: 1.15em;
}

/* Cards carry their own add form, so it must not add layout of its own. */
body.v3-storefront[data-storefront="unified"] .d-pcard-form {
  display: contents;
}

/* ---------- MODE A — Compact, four per row (V0 CompactCard / .product) ---------- */

body.v3-storefront[data-storefront="unified"] .d-catalog[data-density="compact"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}

body.v3-storefront[data-storefront="unified"] .d-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body.v3-storefront[data-storefront="unified"] .d-pcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(90, 177, 32, 0.4);
}

body.v3-storefront[data-storefront="unified"] .d-pcard-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
}

body.v3-storefront[data-storefront="unified"] .d-pcard-media a {
  display: block;
  width: 100%;
  height: 100%;
}

body.v3-storefront[data-storefront="unified"] .d-pcard-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}

body.v3-storefront[data-storefront="unified"] .d-pcard-quick {
  position: absolute;
  inset-inline: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  background: rgba(23, 29, 24, 0.86);
  color: #fff;
  backdrop-filter: blur(4px);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

body.v3-storefront[data-storefront="unified"] .d-pcard:hover .d-pcard-quick {
  opacity: 1;
  transform: translateY(0);
}

body.v3-storefront[data-storefront="unified"] .d-pcard-quick:hover {
  background: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-pcard-quick .ico {
  width: 16px;
  height: 16px;
}

/* touch: no hover, so keep quick view reachable */
@media (hover: none) {
  body.v3-storefront[data-storefront="unified"] .d-pcard-quick {
    opacity: 1;
    transform: none;
  }
}

body.v3-storefront[data-storefront="unified"] .d-pcard-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px 16px;
  flex: 1;
}

body.v3-storefront[data-storefront="unified"] .d-pcard-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-pcard-name:hover {
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-pcard-buy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}

body.v3-storefront[data-storefront="unified"] .d-pcard-add {
  flex: none;
  padding: 9px 14px;
  font-size: 13.5px;
}

body.v3-storefront[data-storefront="unified"] .d-pcard-add .ico {
  width: 16px;
  height: 16px;
}

/* ---------- MODE B — Comfortable, two per row, production default ---------- */

body.v3-storefront[data-storefront="unified"] .d-catalog[data-density="comfort"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  align-items: stretch;
}

body.v3-storefront[data-storefront="unified"] .d-pcard2 {
  display: grid;
  grid-template-columns: minmax(150px, 38%) minmax(0, 1fr);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

body.v3-storefront[data-storefront="unified"] .d-pcard2:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: rgba(90, 177, 32, 0.4);
}

/* Normal Portal 1 product-card media uses the design token, not white.
   Mark supplied a white alternative too; the only proven white media
   context is `.d-skit.d-skit-on .d-skit-media` below. */
body.v3-storefront[data-storefront="unified"] .d-pcard2-media {
  position: relative;
  display: grid;
  place-items: center;
  align-self: start;
  width: 100%;
  min-height: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

body.v3-storefront[data-storefront="unified"] .d-pcard2-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--d-radius-lg);
}

body.v3-storefront[data-storefront="unified"] .d-pcard2-media .d-pcard-badge,
body.v3-storefront[data-storefront="unified"] .d-prow-media .d-pcard-badge {
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  padding: 4px 9px;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v3-storefront[data-storefront="unified"] .d-pcard2-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(14px, 1.8vw, 20px);
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"] .d-pcard2-name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-pcard2-name:hover {
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-pcard2-desc {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-pcard2-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}

/* The gate is a block link elsewhere; inside the footer it must not push the row.
   V0 writes this as `.pcard2__foot .product-gate { margin-top:0; padding-top:0 }`,
   which out-specifies `.product-gate--btn { padding: 9px 15px }` and left the pill
   flavour with 0 top / 9px bottom padding — visibly lopsided, and the reported
   defect in Comfortable and List (Compact was fine because it has no such
   ancestor). The stated intent is only "must not push the row", so the vertical
   reset is scoped to the plain text-link flavour. */
body.v3-storefront[data-storefront="unified"] .d-pcard2-foot .d-gate {
  margin-top: 0;
}

body.v3-storefront[data-storefront="unified"] .d-pcard2-foot .d-gate:not(.is-btn) {
  padding-top: 0;
}

body.v3-storefront[data-storefront="unified"] .d-pcard2-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}

body.v3-storefront[data-storefront="unified"] .d-pcard2-quick {
  padding: 9px 13px;
  font-size: 13px;
}

body.v3-storefront[data-storefront="unified"] .d-pcard2-actions .ico {
  width: 15px;
  height: 15px;
}

/* ---------- MODE C — List, one per row (V0 ListRow / .prow) ---------- */

body.v3-storefront[data-storefront="unified"] .d-catalog[data-density="list"] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.v3-storefront[data-storefront="unified"] .d-prow {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 224px;
  gap: clamp(16px, 2.4vw, 28px);
  margin: 0; /* the buyable row is a <form>; drop the UA block margin */
  padding: clamp(14px, 1.8vw, 20px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

body.v3-storefront[data-storefront="unified"] .d-prow:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(90, 177, 32, 0.4);
}

body.v3-storefront[data-storefront="unified"] .d-prow-media {
  position: relative;
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--d-surface-media);
  overflow: hidden;
}

body.v3-storefront[data-storefront="unified"] .d-prow-media img {
  max-width: 100%;
  max-height: 168px;
  width: auto;
  height: auto;
  object-fit: contain;
}

body.v3-storefront[data-storefront="unified"] .d-prow-info {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"] .d-prow-name {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.18;
  color: var(--ink);
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-prow-name:hover {
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-prow-desc {
  margin: 0;
  max-width: 56ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-prow-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.5px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-prow-meta span {
  position: relative;
}

body.v3-storefront[data-storefront="unified"] .d-prow-meta span + span::before {
  content: '·';
  position: absolute;
  left: -11px;
}

/* V0 renders flavour as inline chips here, not a select. */
body.v3-storefront[data-storefront="unified"] .d-prow-flavours {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: none;
}

body.v3-storefront[data-storefront="unified"] .d-prow-flavlabel {
  padding: 10px 0 5px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-prow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* V0 ships two chip sizes: `.chip` (PDP + quick view variant picker) and
   `.chip--sm` (the catalog list row). The base atom is the full-size one. */
body.v3-storefront[data-storefront="unified"] .d-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 9px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 14px;
  font-weight: 600; /* DG-MOBILE-STOREFRONT-POLISH-20H (Mark): was 700 */
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

body.v3-storefront[data-storefront="unified"] .d-chip.is-sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--muted);
}

/* V0 renders the check glyph only on the selected chip. */
body.v3-storefront[data-storefront="unified"] .d-chip-check {
  display: none;
  color: var(--green);
}

body.v3-storefront[data-storefront="unified"] .d-chip:has(input:checked) .d-chip-check {
  display: inline-flex;
}

body.v3-storefront[data-storefront="unified"] .d-chip-check .ico {
  width: 15px;
  height: 15px;
}

/* The radio stays a real form control; it is only visually replaced. */
body.v3-storefront[data-storefront="unified"] .d-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

body.v3-storefront[data-storefront="unified"] .d-chip:hover {
  border-color: var(--green);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-chip:has(input:checked) {
  border-color: var(--green);
  background: var(--green-softer);
  color: var(--green-dark);
  box-shadow: inset 0 0 0 1px var(--green);
}

body.v3-storefront[data-storefront="unified"] .d-chip:has(input:focus-visible) {
  outline: 2px solid var(--green-dark);
  outline-offset: 2px;
}

body.v3-storefront[data-storefront="unified"] .d-chip.is-off {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

body.v3-storefront[data-storefront="unified"] .d-prow-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 1px solid var(--line);
}

/* Same scoping as the Comfortable footer: keep the pill's symmetric padding. */
body.v3-storefront[data-storefront="unified"] .d-prow-buy .d-gate {
  margin-top: 0;
}

body.v3-storefront[data-storefront="unified"] .d-prow-buy .d-gate:not(.is-btn) {
  padding-top: 0;
}

body.v3-storefront[data-storefront="unified"] .d-prow-buy .qstep {
  align-self: flex-start;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
}

body.v3-storefront[data-storefront="unified"] .d-prow-add {
  width: 100%;
  justify-content: center;
  padding: 12px 18px;
}

/* ---------- responsive: V0 breakpoints ---------- */

/* Compact steps down before it becomes unreadable. */
@media (max-width: 1219px) {
  body.v3-storefront[data-storefront="unified"] .d-catalog[data-density="compact"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 999px) {
  body.v3-storefront[data-storefront="unified"] .d-catalog[data-density="compact"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.v3-storefront[data-storefront="unified"] .d-prow {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  body.v3-storefront[data-storefront="unified"] .d-prow-buy {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 0;
    padding-top: 14px;
    border-left: none;
    border-top: 1px solid var(--line);
  }

  body.v3-storefront[data-storefront="unified"] .d-prow-buy .qstep {
    align-self: center;
    width: max-content;
    flex: 0 0 auto;
  }

  body.v3-storefront[data-storefront="unified"] .d-prow-add {
    width: auto;
    flex: 1;
    min-width: 170px;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-catalog[data-density="comfort"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mobile: always one per row, and no density selector at all. */
@media (max-width: 620px) {
  body.v3-storefront[data-storefront="unified"] .d-viewsw {
    display: none;
  }

  body.v3-storefront[data-storefront="unified"] .d-catalog[data-density="compact"] {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v3-storefront[data-storefront="unified"] .d-cat-sort {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }
}

@media (max-width: 560px) {
  /* image on top: the side-by-side card cannot hold price + two actions at 390px */
  body.v3-storefront[data-storefront="unified"] #main .d-catalog[data-density="compact"],
  body.v3-storefront[data-storefront="unified"] #main .d-catalog[data-density="comfort"] {
    align-items: start;
  }

  body.v3-storefront[data-storefront="unified"] .d-pcard2 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: span 2;
  }

  body.v3-storefront[data-storefront="unified"] .d-pcard2-media {
    align-self: stretch;
    width: 100%;
    min-height: 0;
    padding: 0;
    background: #fff;
  }

  body.v3-storefront[data-storefront="unified"] .d-pcard2-media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  body.v3-storefront[data-storefront="unified"] .d-pcard2-foot {
    align-items: stretch;
  }

  body.v3-storefront[data-storefront="unified"] .d-pcard2-actions {
    flex: 1;
  }

  body.v3-storefront[data-storefront="unified"] .d-pcard2-actions .btn,
  body.v3-storefront[data-storefront="unified"] .d-pcard2-actions form,
  body.v3-storefront[data-storefront="unified"] .d-pcard2-actions form .btn {
    flex: 1;
    justify-content: center;
  }

  body.v3-storefront[data-storefront="unified"] .d-prow {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 14px;
  }

  body.v3-storefront[data-storefront="unified"] .d-prow-media {
    padding: 8px;
    align-self: start;
    aspect-ratio: 1 / 1;
  }

  body.v3-storefront[data-storefront="unified"] .d-prow-media img {
    max-height: 100%;
  }

  body.v3-storefront[data-storefront="unified"] .d-prow-name {
    font-size: 17px;
  }

  body.v3-storefront[data-storefront="unified"] .d-prow-desc {
    font-size: 13.5px;
  }

  /* List-row chips only — the PDP / quick-view picker keeps V0's tap target. */
  body.v3-storefront[data-storefront="unified"] .d-chip.is-sm {
    min-height: 42px;
    padding: 5px 10px;
    font-size: 12.5px;
  }

  /* stack the buy controls so the CTA is never clipped on a narrow screen */
  body.v3-storefront[data-storefront="unified"] .d-prow-buy {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  body.v3-storefront[data-storefront="unified"] .d-prow:not(.is-pack) .d-prow-buy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
    column-gap: 12px;
    row-gap: 12px;
  }

  body.v3-storefront[data-storefront="unified"] .d-prow:not(.is-pack) .d-prow-buy .d-price {
    grid-column: 1;
    justify-self: start;
  }

  body.v3-storefront[data-storefront="unified"] .d-prow:not(.is-pack) .d-prow-buy .qstep {
    grid-column: 2;
    justify-self: end;
    align-self: start;
    width: max-content;
  }

  body.v3-storefront[data-storefront="unified"] .d-prow:not(.is-pack) .d-prow-buy .d-gate,
  body.v3-storefront[data-storefront="unified"] .d-prow:not(.is-pack) .d-prow-buy .d-prow-add {
    grid-column: 1 / -1;
  }

  body.v3-storefront[data-storefront="unified"] .d-prow-add {
    width: 100%;
    flex: none;
    min-width: 0;
    padding: 13px 16px;
    font-size: 15px;
  }

  /* one meta fact per line — the inline dot separator does not survive wrapping */
  body.v3-storefront[data-storefront="unified"] .d-prow-meta {
    flex-direction: column;
    gap: 3px;
  }

  body.v3-storefront[data-storefront="unified"] .d-prow-meta span + span::before {
    content: none;
  }
}
/* ==========================================================================
   31b. DG-PRODUCT-PROGRAM-UX-07 — canonical card refinements promoted from
   the gated design-preview stylesheet (v3-design-preview.css), moved here
   in full rather than duplicated, per that file's own long-standing header
   comment ("Promotion moves these rules into their canonical component
   owner and deletes the file" — see v3-main.php). These rules originally
   shipped as DG-PRODUCT-PROGRAM-UX-02/03/04/06 refinements on top of the
   base card geometry in section 31 above (.d-pcard/.d-prow/.d-pcard2,
   .d-catalog[data-density]); nothing in section 31 changed. Needed
   unconditionally now that DG-PRODUCT-PROGRAM-UX-07 renders this exact
   card grammar on the seven promoted goal/story pages, with no
   `design_preview` flag and no gated stylesheet loaded. Still also applies,
   unchanged, to the remaining gated `*-design-preview` routes (their body
   always also carries `.v3-storefront[data-storefront="unified"]`), so
   moving these rules here does not affect the still-gated PDP/pack-PDP
   preview routes' own styling — this section-31b block covers the
   catalogue-card grammar, gate/CTA/actions, the mobile Compact/List
   toolbar switcher, and the DG-PRODUCT-PROGRAM-UX-06 role/why card slots;
   a few PDP-page-only selectors from the same original contiguous source
   range are included verbatim for move-safety (never matching outside the
   still-gated PDP preview, so inert here) rather than hand-split further.
   ========================================================================== */

/* =========================================================== CATEGORY CARDS */
/* The accepted card geometries (.d-pcard / .d-prow / .d-pcard2) keep owning layout.
   Only the elements the preview changes carry their own `dgp-card-*` classes. */

/* Identity: variant line outranks the description (measured live problem:
   variant 13px/400/--muted vs description 14.5px/400/--muted). */
body.v3-storefront[data-storefront="unified"] .dgp-card-variant {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--d-green-ink, #17381a);
}
body.v3-storefront[data-storefront="unified"] .dgp-card-desc {
  margin: 6px 0 0;
  max-width: 56ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* DG-UX-02B — missing/invalid card image. When a packshot is missing the card's
   `onerror` swaps in the established `product-placeholder.svg`. That SVG only has a
   viewBox (no intrinsic width/height), and the comfortable (`.d-pcard2-media`) and
   list (`.d-prow-media`) geometries size the image with width/height:auto inside an
   auto-sized link, so it resolved to 0x0 while the media column kept its width: a
   blank half card. Compact was unaffected (its media has aspect-ratio:1/1).
   Scoped to the placeholder state only — `img[src*=...]` also matches after the
   onerror swap — so a real packshot keeps the accepted geometry untouched, and the
   placeholder gets the same square box a real square packshot gets. */
body.v3-storefront[data-storefront="unified"] .dgp-card :is(.d-pcard2-media, .d-prow-media):has(img[src*="product-placeholder.svg"]) {
  aspect-ratio: 1 / 1;
  align-self: start;
}
body.v3-storefront[data-storefront="unified"] .dgp-card :is(.d-pcard2-media, .d-prow-media) a:has(> img[src*="product-placeholder.svg"]) {
  display: block;
  width: 100%;
  height: 100%;
}
body.v3-storefront[data-storefront="unified"] .dgp-card :is(.d-pcard2-media, .d-prow-media) img[src*="product-placeholder.svg"] {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

/* Saving badge: berry family, same language as the PDP badge. */
body.v3-storefront[data-storefront="unified"] .dgp-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  border: 1px solid rgba(142, 21, 102, 0.18);
  border-radius: var(--radius-pill);
  background: var(--berry-soft);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--berry-dark);
}

/* One guest gate everywhere (products and packs, every density). UX-03: a solid
   dark-green pill — registering is the progression step, so it is the strongest
   action on a guest card (never berry). "Register to see price" shortens to
   "See prices" at the established <=560px phone breakpoint; the hidden variant is
   display:none, so the accessible name always equals the visible text. */
body.v3-storefront[data-storefront="unified"] .dgp-card-gate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--green-dark);
  border-radius: var(--radius-pill);
  background: var(--green-dark);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
body.v3-storefront[data-storefront="unified"] .dgp-card-gate:hover { background: var(--d-green-ink, #17381a); border-color: var(--d-green-ink, #17381a); color: #fff; }
body.v3-storefront[data-storefront="unified"] .dgp-card-gate:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; }
body.v3-storefront[data-storefront="unified"] .dgp-gate-short { display: none; }
body.v3-storefront[data-storefront="unified"] .d-pcard-body > .dgp-card-gate { margin-top: auto; }

/* Primary / secondary card actions share one control height (40px). */
body.v3-storefront[data-storefront="unified"] .dgp-card-cta.btn,
body.v3-storefront[data-storefront="unified"] .dgp-card-secondary.btn {
  min-height: 40px;
  max-height: 40px;
  padding: 0 16px;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
body.v3-storefront[data-storefront="unified"] .dgp-card-cta.btn:focus-visible,
body.v3-storefront[data-storefront="unified"] .dgp-card-secondary.btn:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; }

/* Comfortable footer: primary first, then Quick view, on ONE row and one baseline;
   every item (button, form-wrapped button, gate) is exactly 40px tall. */
body.v3-storefront[data-storefront="unified"] .dgp-card-foot { align-items: center; }
body.v3-storefront[data-storefront="unified"] .dgp-card-actions {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 0;
}
/* Both actions grow to share the row; when the card is too narrow they wrap into
   two full-width rows of the same 40px height instead of a ragged pair. */
body.v3-storefront[data-storefront="unified"] .dgp-card-actions > * { flex: 1 1 auto; justify-content: center; }
body.v3-storefront[data-storefront="unified"] .dgp-card-actions > form { display: flex; margin: 0; }
body.v3-storefront[data-storefront="unified"] .dgp-card-actions > form .btn { flex: 1 1 auto; justify-content: center; }
body.v3-storefront[data-storefront="unified"] .dgp-card-actions .dgp-card-gate { align-self: center; padding: 0 14px; }
body.v3-storefront[data-storefront="unified"] .dgp-card-actions .dgp-card-secondary.btn { padding: 0 14px; }

/* List buy column (UX-03): 20px rhythm; gate and Quick view are full-width actions
   in the column; quantity + CTA stay one aligned unit. The loose "View details"
   row is gone (details live in the Quick View and on the name/image links). */
body.v3-storefront[data-storefront="unified"] .d-prow-buy.dgp-list-buy { gap: 20px; align-items: stretch; }
body.v3-storefront[data-storefront="unified"] .dgp-list-buy > .dgp-card-gate {
  width: 100%;
  gap: 0;
  margin-top: 8px;
}
body.v3-storefront[data-storefront="unified"] .dgp-list-buy > .dgp-card-gate [data-ico] { margin-inline-end: 7px; }
body.v3-storefront[data-storefront="unified"] .dgp-list-buy > .dgp-list-quick.btn,
body.v3-storefront[data-storefront="unified"] .dgp-list-buy > .dgp-card-cta.btn { width: 100%; justify-content: center; }
body.v3-storefront[data-storefront="unified"] .dgp-list-buy > .d-price { align-self: flex-start; }
body.v3-storefront[data-storefront="unified"] .dgp-list-inline { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; }
/* The shared stepper has a 42px floor; the list CTA matches it. */
body.v3-storefront[data-storefront="unified"] .dgp-card-qty.qstep { min-height: 42px; }
body.v3-storefront[data-storefront="unified"] .dgp-list-inline .dgp-card-cta.btn { flex: 1 1 140px; min-height: 42px; justify-content: center; }

/* Member list, 5+ flavours: one compact select instead of a chip wall.
   UX-04 — the wrapper's own top margin plus the shared `.form-field label`
   bottom-margin stacked on top of `.d-prow-flavlabel`'s own padding, so
   "Choose Flavour" sat at a different rhythm above a select than above the
   chip fieldset (which owns none of its spacing independently — only its
   legend's padding and the fieldset's own gap). Zeroing this wrapper's margin
   and matching its gap to the fieldset's gives both variants the same
   top-before-label and label-to-control spacing, without doubling either. */
/* Zero gap: `<legend>` never participates in a fieldset's flex gap (a fixed
   HTML rendering rule, not a bug), so the chip variant's ENTIRE visible
   label-to-control space is the shared label's own 5px padding-bottom, with
   no wrapper-level contribution. Matching that here (rather than adding a
   second, wrapper-level gap on top of the same padding) is what removes the
   doubling — not a arbitrary number tuned to look right. */
body.v3-storefront[data-storefront="unified"] .dgp-list-select { display: flex; flex-direction: column; gap: 0; margin: 0; max-width: 340px; }
body.v3-storefront[data-storefront="unified"] .dgp-list-select .d-prow-flavlabel { margin-bottom: 0; }
body.v3-storefront[data-storefront="unified"] .dgp-list-select .dgp-select-compact { min-height: 42px; font-size: 14px; background-position: calc(100% - 20px) 18px, calc(100% - 14px) 18px; }

/* Category media (UX-03): the same soft media surface on every density, with no
   visible edge. Catalogue packshots ship on a white ground, which drew a hard white
   box on the tinted panel; multiply lets that ground take the panel colour. The
   missing-image placeholder keeps its own 02B sizing below. */
body.v3-storefront[data-storefront="unified"] .dgp-card :is(.d-pcard-media, .d-pcard2-media, .d-prow-media) {
  background: var(--d-surface-media, #eef2ea);
  border: 0;
  box-shadow: none;
}
/* List keeps its own row-stretch geometry (unrelated to item 7's mobile fix
   below); Compact/Comfort media must never stretch to the card's full
   content-driven height in the first place. */
body.v3-storefront[data-storefront="unified"] .dgp-card .d-prow-media { height: 100%; }
body.v3-storefront[data-storefront="unified"] .dgp-card .d-pcard2-media { border-radius: var(--d-radius-lg, 22px); }
body.v3-storefront[data-storefront="unified"] .dgp-card :is(.d-pcard-media, .d-pcard2-media, .d-prow-media) img { mix-blend-mode: multiply; }
/* Compact Quick view overlay: text only (no eye icon). */
body.v3-storefront[data-storefront="unified"] .dgp-card .d-pcard-quick { justify-content: center; }

/* ------------------------------------------------------------ touch targets */
/* Standalone text actions keep their link look but get a >= 32px hit area, and
   breadcrumb links reach the 24px minimum (WCAG 2.5.8), measured at 390px where
   they were 17-22px. */
body.v3-storefront[data-storefront="unified"] .dgp-gate-signin,
body.v3-storefront[data-storefront="unified"] .dgp-contact-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
/* 28px, not 24px: the existing temporary <=560px compact layer (DG-001) renders the
   page at roughly 0.85x, so 28 CSS px lands at ~24px on a phone. */
body.v3-storefront[data-storefront="unified"] .dgp-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

@media (max-width: 560px) {
  body.v3-storefront[data-storefront="unified"] .dgp-gate-long { display: none; }
  body.v3-storefront[data-storefront="unified"] .dgp-gate-short { display: inline; }
  body.v3-storefront[data-storefront="unified"] .dgp-list-select { max-width: none; }
  body.v3-storefront[data-storefront="unified"] .d-prow.dgp-card .dgp-list-buy > :not(.d-price) { grid-column: 1 / -1; }
  /* The accepted <=560px list grid sets its own 12px gaps at a higher specificity;
     the preview keeps the 20px buy-column rhythm at every width. */
  body.v3-storefront[data-storefront="unified"] .d-prow.dgp-card:not(.is-pack) .d-prow-buy.dgp-list-buy,
  body.v3-storefront[data-storefront="unified"] .d-prow.dgp-card.is-pack .d-prow-buy.dgp-list-buy { gap: 20px; }
  body.v3-storefront[data-storefront="unified"] .dgp-list-buy > .dgp-card-gate { margin-top: 4px; }
}

/* A long "Add pack to basket" label never wraps inside the button: it takes its
   own full-width row when it no longer fits beside the quantity control. */
body.v3-storefront[data-storefront="unified"] .dgp-pack-submit .dgp-actions .dgp-cta { flex: 1 1 210px; max-width: 300px; white-space: nowrap; }
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .dgp-buy { padding: 16px; border-radius: var(--radius); }
  body.v3-storefront[data-storefront="unified"] .dgp-gallery-main { padding: 18px; }
  /* Quantity stays beside the CTA on phones (it fits at 390pt); the CTA only
     drops to its own full-width row on very narrow screens. */
  body.v3-storefront[data-storefront="unified"] .dgp-actions .dgp-cta { flex: 1 1 150px; }
  body.v3-storefront[data-storefront="unified"] .dgp-intro,
  body.v3-storefront[data-storefront="unified"] .dgp-desc { max-width: none; }
  body.v3-storefront[data-storefront="unified"] .dgp-gate-actions { gap: 12px; }
  body.v3-storefront[data-storefront="unified"] .dgp-gate-actions .dgp-cta { flex: 1 1 100%; }
  body.v3-storefront[data-storefront="unified"] .dgp-pack { margin-top: 32px; padding: 16px; border-radius: var(--radius); }
  body.v3-storefront[data-storefront="unified"] .dgp-pack-unit { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  body.v3-storefront[data-storefront="unified"] .dgp-jump { align-self: stretch; }
}

/* ======================================================= REGISTER CTA (UX-03) */
/* Guest register actions in the preview are one dark-green treatment (progression,
   never berry), stronger than the regular green purchase CTA it precedes. */
body.v3-storefront[data-storefront="unified"] .dgp-cta-register.btn,
body.v3-storefront[data-storefront="unified"] a.dgp-cta-register {
  border: 1px solid var(--green-dark);
  background: var(--green-dark);
  color: #fff;
}
body.v3-storefront[data-storefront="unified"] .dgp-cta-register.btn:hover,
body.v3-storefront[data-storefront="unified"] a.dgp-cta-register:hover {
  border-color: var(--d-green-ink, #17381a);
  background: var(--d-green-ink, #17381a);
  color: #fff;
}

/* ================================================== QUICK VIEW (UX-03) */
/* Separate preview dialog (`#dgp-qv`); the shared `#v3-modal-product` is untouched.
   z-index 99: above the header/drawers, below `.modal-overlay` (100) so the
   Ingredients and auth dialogs stack on top of it. */
body.v3-storefront[data-storefront="unified"] .dgp-qv {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 25, 21, 0.5);
}
body.v3-storefront[data-storefront="unified"] .dgp-qv[hidden] { display: none; }
body.v3-storefront[data-storefront="unified"] .dgp-qv-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(900px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  border-radius: var(--d-radius-lg, 22px);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* The dialog container takes focus on open only so the screen reader announces its
   label; it is not a control, so it draws no ring (controls inside keep theirs). */
body.v3-storefront[data-storefront="unified"] .dgp-qv-dialog:focus,
body.v3-storefront[data-storefront="unified"] .dgp-qv-dialog:focus-visible { outline: none; }
body.v3-storefront[data-storefront="unified"] .dgp-qv-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
body.v3-storefront[data-storefront="unified"] .dgp-qv-close:hover { border-color: var(--green); color: var(--green-dark); }
body.v3-storefront[data-storefront="unified"] .dgp-qv-close:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; }
body.v3-storefront[data-storefront="unified"] .dgp-qv-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.v3-storefront[data-storefront="unified"] .dgp-qv-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 28px;
  padding: 24px;
}
body.v3-storefront[data-storefront="unified"] .dgp-qv-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  aspect-ratio: 1 / 1;
  padding: 24px;
  border-radius: var(--d-radius-lg, 22px);
  background: var(--d-surface-media, #eef2ea);
  overflow: hidden;
}
body.v3-storefront[data-storefront="unified"] .dgp-qv-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
body.v3-storefront[data-storefront="unified"] .dgp-qv-info { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }
body.v3-storefront[data-storefront="unified"] .dgp-qv-identity { margin-bottom: 14px; padding-right: 44px; }
body.v3-storefront[data-storefront="unified"] .dgp-qv-title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: var(--d-tracking-tight, -0.02em);
  color: var(--ink);
}
body.v3-storefront[data-storefront="unified"] .dgp-qv-desc { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
body.v3-storefront[data-storefront="unified"] .dgp-qv-doc { margin: 0 0 16px; }
body.v3-storefront[data-storefront="unified"] .dgp-qv-action { display: flex; flex-direction: column; gap: 16px; }
body.v3-storefront[data-storefront="unified"] .dgp-qv-action .dgp-gate-actions .dgp-cta { flex: 1 1 auto; white-space: nowrap; }
body.v3-storefront[data-storefront="unified"] .dgp-qv-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--d-pack-tint, #f6faf3);
  border: 1px solid var(--d-pack-guide, #cfe4c2);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
body.v3-storefront[data-storefront="unified"] .dgp-qv-note [data-ico] { color: var(--green-dark); flex: 0 0 auto; }
/* "View full product details" / "View & configure pack": a real, prominent action
   right under the purchase area, never a small trailing link. */
body.v3-storefront[data-storefront="unified"] .dgp-qv-details.btn {
  min-height: 46px;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 700;
}
body.v3-storefront[data-storefront="unified"] .dgp-qv-configure.btn { width: 100%; }
body.v3-storefront[data-storefront="unified"] .dgp-qv-configure.is-guest { border-width: 1px; }
body.v3-storefront[data-storefront="unified"] .dgp-qv-facts {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
body.v3-storefront[data-storefront="unified"] .dgp-qv-facts li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink); }
body.v3-storefront[data-storefront="unified"] .dgp-qv-facts li [data-ico] { color: var(--green); flex: 0 0 auto; }

@media (max-width: 767px) {
  body.v3-storefront[data-storefront="unified"] .dgp-qv-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  body.v3-storefront[data-storefront="unified"] .dgp-qv-media {
    aspect-ratio: auto;
    height: min(260px, 32vh);
    height: min(260px, 32dvh);
    padding: 14px;
    border-radius: var(--radius);
  }
  body.v3-storefront[data-storefront="unified"] .dgp-qv-identity { padding-right: 0; }
}
/* Phones: bottom sheet, full width, scrolls inside; short screens shrink the image
   first so the heading and the first action stay reachable without a page scroll. */
@media (max-width: 560px) {
  body.v3-storefront[data-storefront="unified"] .dgp-qv { align-items: flex-end; padding: 8px 0 0; }
  body.v3-storefront[data-storefront="unified"] .dgp-qv-dialog {
    width: 100%;
    max-height: calc(100vh - 8px);
    max-height: calc(100dvh - 8px);
    border-radius: var(--d-radius-lg, 22px) var(--d-radius-lg, 22px) 0 0;
  }
  body.v3-storefront[data-storefront="unified"] .dgp-qv-close { top: 10px; right: 10px; }
}
@media (max-width: 560px) and (max-height: 700px) {
  body.v3-storefront[data-storefront="unified"] .dgp-qv-media { height: min(180px, 26vh); height: min(180px, 26dvh); }
}

/* CORRECTION-11 — editorial grids (How It Works goals, Mark's Story) now render the shop's own cards. The
   recommendation role takes the `.d-pcard-cat` eyebrow slot with a role accent ("Start here" reads distinctly;
   uniform card size), and the goal-specific reason takes the description slot — since DG-MOBILE-STOREFRONT-POLISH-20Q
   (Mark) styled exactly like the card description (its own .d-pcard-why rule and class are removed). */
body.v3-storefront[data-storefront="unified"] .d-pcard-role-start { color: var(--green-dark, #1f4a1b); }
body.v3-storefront[data-storefront="unified"] .d-pcard-role-optional { color: var(--muted); }



/* ---- .dgp-select base (shared with the still-gated PDP/pack-PDP preview
   picker) — moved alongside the card list-view flavour select that reuses
   this exact class. ---- */
body.v3-storefront[data-storefront="unified"] .dgp-select {
  width: 100%;
  min-height: 48px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--d-input-border, #c3cebb);
  border-radius: var(--radius-sm);
  background-color: var(--card);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  appearance: none;
}
body.v3-storefront[data-storefront="unified"] .dgp-select:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 1px;
  border-color: var(--green);
}

body.v3-storefront[data-storefront="unified"] .dgp-select:disabled { background-color: var(--d-surface-quiet, #f3f5f0); color: var(--muted); cursor: not-allowed; }
body.v3-storefront[data-storefront="unified"] .dgp-pack-choice.field-invalid .dgp-select,
body.v3-storefront[data-storefront="unified"] .dgp-select:user-invalid { border-color: var(--sale); box-shadow: 0 0 0 1px var(--sale); }


/* ---- UX-04 mobile catalog toolbar/grid/list rules (this exact section was
   dropped from the first move pass and is being added back here, verified
   against git HEAD, before this task's commit — not left as a silent gap). ---- */
/* ==================================================== UX-04 — MOBILE CATALOG */

/* -------------------------------------------- toolbar: two views, not three */
/* Desktop/tablet (>720px) keeps the existing three-mode switcher unchanged;
   the new mobile-only group stays out of the layout entirely. */
body.v3-storefront[data-storefront="unified"] .dgp-viewsw-mobile { display: none; }

/* DG-PRODUCT-PROGRAM-UX-07A — where the mobile Grid/List switch is offered
   (.dgp-two-view: the UX-07 goal/story grid and the category preview), Grid
   means two per row across the whole range the switch is visible (<=720px).
   Without this the shared <=620px "mobile is always one per row" rule made
   Grid identical to List at 561-620px. Category/search (no switch, no class)
   keep that shared rule untouched. */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-catalog.dgp-two-view[data-density="compact"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  /* The unscoped shared rule already hides `.d-viewsw` at <=620px; this closes
     the 621-720px gap for the preview only — the live category/search toolbar
     is untouched outside this class scope. Matches the live rule's own
     specificity (body + 2 classes/attr + class) so it reliably wins instead of
     losing to it on source order alone. */
  body.v3-storefront[data-storefront="unified"][data-portal] .d-viewsw { display: none; }
  body.v3-storefront[data-storefront="unified"] .dgp-viewsw-mobile {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    background: #fff;
  }
  body.v3-storefront[data-storefront="unified"] .dgp-viewsw-mobile-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 36px;
    border-radius: var(--radius-pill);
    color: var(--muted);
    text-decoration: none;
    transition: background 0.14s ease, color 0.14s ease;
  }
  body.v3-storefront[data-storefront="unified"] .dgp-viewsw-mobile-btn:hover { background: var(--green-softer); color: var(--green-dark); }
  body.v3-storefront[data-storefront="unified"] .dgp-viewsw-mobile-btn.is-on {
    background: var(--green-softer);
    color: var(--green-dark);
    box-shadow: inset 0 0 0 1.5px var(--green);
  }
  body.v3-storefront[data-storefront="unified"] .dgp-viewsw-mobile-btn:focus-visible {
    outline: 3px solid var(--green-bright);
    outline-offset: 2px;
  }
  body.v3-storefront[data-storefront="unified"] .dgp-viewsw-mobile-btn .ico { width: 17px; height: 17px; }
}

/* ------------------------------------------------- mobile saving copy (#5) */
/* Cards only: the berry "Save N%" media badge already communicates the saving,
   so the price row drops the extra "Save £x.xx" pill on narrow screens. The
   PDP, pack PDP, Quick View and cart/minicart use their own `.dgp-save`/
   `.dgp-price-save` classes and are untouched; desktop card price is unchanged. */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .dgp-card .d-price-save { display: none; }
}

/* ------------------------------------------------ mobile Grid (#4): equal   */
/* neighbour heights, bottom-aligned buy row. `.d-pcard` is already a grid item
   under `.d-catalog[data-density="compact"] { align-items: stretch }`, and
   `.d-pcard-buy` already carries `margin-top: auto`; the guest gate needed the
   same rule so a guest row's flexible space also collects above the action,
   never between price and button. */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-pcard.dgp-card { height: 100%; }
  body.v3-storefront[data-storefront="unified"] .d-pcard-body.dgp-card-body,
  body.v3-storefront[data-storefront="unified"] .d-pcard .d-pcard-body { display: flex; flex-direction: column; }
  /* DG-PRODUCT-PROGRAM-UX-05 — media geometry must be identical for every
     neighbouring card regardless of title/variant length. Comfort is always
     normalised to List at this width (UX-04A), so Compact is the only grid
     density in play here. The shared base gives `.d-pcard-media` its own
     `aspect-ratio: 1/1`; a fixed square from the card's own (equal) grid-column
     width, never from content, is exactly what that already computes once
     nothing else forces an explicit `height` on it — `flex: 0 0 auto` keeps it
     out of the row-stretch distribution entirely, so only `.d-pcard-body` can
     absorb a taller neighbour's extra height (via its existing bottom-aligned
     buy row), never the image. No per-product class, no measured height. */
  body.v3-storefront[data-storefront="unified"] .d-pcard.dgp-card .d-pcard-media {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard-body.dgp-card-body,
  body.v3-storefront[data-storefront="unified"] .d-pcard .d-pcard-body { flex: 1 1 auto; }
}

/* ------------------------------------------------------- mobile List (#6/#7) */
@media (max-width: 720px) {
  /* Media keeps a deliberate, stable share of the row instead of shrinking to
     whatever text leaves over; 150px sits inside the requested 140-170px band.
     The shared responsive rules narrow `.d-prow`'s own media TRACK to 108px
     below 560px, which is narrower than the media box itself and pushed it
     into the text column — override the track for the whole mobile range so
     150px is the actual column width, not just the item's own box. */
  body.v3-storefront[data-storefront="unified"][data-portal] .d-prow.dgp-card {
    grid-template-columns: 150px minmax(0, 1fr);
  }
  body.v3-storefront[data-storefront="unified"] .d-prow.dgp-card .d-prow-media {
    flex: 0 0 150px;
    width: 150px;
    height: 150px;
    /* Leaves a visible soft-background frame while giving the image the rest:
       (150 - 2*7)/150 = 90.7% usable — the top of the requested 75-90% band. */
    padding: 7px;
  }
  /* UX-04A — root cause: `.d-prow-media` is `display:grid; place-items:center`
     (inherited, live), which does not stretch a grid item to its cell; the
     link and image were sized only by the "auto" width/height + max-width/
     max-height interaction the base/responsive rules happen to produce. That
     is engine-dependent, not guaranteed. Force both explicitly instead, so
     the image deterministically fills the full padded media area on every
     browser — real photo or the 02B placeholder alike — never smaller than
     the box regardless of how any engine resolves "auto" sizing on a
     non-stretched grid item. `object-fit: contain` and the image's own
     aspect ratio (every real packshot is a square crop) still govern the
     final visible pixels; this only removes the CSS's OWN shrinkage. */
  body.v3-storefront[data-storefront="unified"] .d-prow.dgp-card .d-prow-media a {
    display: block;
    width: 100%;
    height: 100%;
  }
  body.v3-storefront[data-storefront="unified"] .d-prow.dgp-card .d-prow-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }
  /* "View product": a plain full-width secondary link, not a modal trigger. */
  body.v3-storefront[data-storefront="unified"] .dgp-list-view-product.btn { width: 100%; justify-content: center; }
}
@media (min-width: 721px) {
  /* Desktop List keeps its accepted secondary column width for the link. */
  body.v3-storefront[data-storefront="unified"] .dgp-list-view-product.btn { width: 100%; justify-content: center; }
}


/* ===================================================== end 31b ===== */


/* ==========================================================================
   32. SEARCH RESULTS — final V0 `app/search` summary + empty state
   The results grid reuses the catalog cards above. Prefixed `d-search-*`
   because `.search-empty` already belongs to the live-search dropdown in
   v3-storefront.css.
   ========================================================================== */

body.v3-storefront[data-storefront="unified"] .d-search-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}

body.v3-storefront[data-storefront="unified"] .d-search-summary-count {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-search-summary-count b {
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(40px, 7vw, 80px) 20px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--d-radius-lg);
  background: var(--d-surface-quiet);
}

body.v3-storefront[data-storefront="unified"] .d-search-empty-ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: var(--green-softer);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-search-empty-ico .ico {
  width: 28px;
  height: 28px;
}

body.v3-storefront[data-storefront="unified"] .d-search-empty-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-search-empty-text {
  margin: 0;
  max-width: 44ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-search-suggest {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

body.v3-storefront[data-storefront="unified"] .d-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-search-chip:hover {
  border-color: var(--green);
  background: var(--green-softer);
  color: var(--green-dark);
}

/* ==========================================================================
   32b. CP-010 — virtual "All" catalogue page, one section per active
   category. Reuses .d-catalog/.d-store-main/the card partials as-is; only
   the section wrapper/heading are new.
   ========================================================================== */
body.v3-storefront[data-storefront="unified"] .d-catalog-all-sections {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-catalog-all-section {
  /* DG-STOREFRONT-POLISH-PACK-BANNER-19 (Mark): exact section margin. */
  margin: 10px 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--chrome-top) + var(--catbar-h) + 16px);
}

body.v3-storefront[data-storefront="unified"] .d-catalog-all-section:first-child {
  padding-top: 0;
  border-top: none;
}

/* DG-STOREFRONT-POLISH-PACK-BANNER-19 (Mark): name, intro and count stack on every viewport; the section name is
   clearly larger (restrained responsive size). */
body.v3-storefront[data-storefront="unified"] .d-catalog-all-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 18px;
}

body.v3-storefront[data-storefront="unified"] .d-catalog-all-heading h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.15;
  font-weight: 800;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-catalog-all-sub {
  flex-basis: 100%;
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 62ch;
}

body.v3-storefront[data-storefront="unified"] .d-catalog-all-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

/* DG-CATEGORY-BANNER-MINICART-AUTH-POPUP-19A — the selected compact pack banner (DG-19 direction A, "pack shelf")
   above the grid of an ordinary product category: real pack shelf · one message · two actions. Never a hero. */
body.v3-storefront[data-storefront="unified"] .d-cpb {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 0 0 18px;
  padding: 12px 16px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"] .d-cpb-shelf {
  display: flex;
  align-items: flex-end;
  height: 64px;
  padding: 4px 6px 0;
  border-radius: 12px;
  background: var(--d-surface-quiet);
}

body.v3-storefront[data-storefront="unified"] .d-cpb-shelf img {
  width: 64px;
  height: 60px;
  object-fit: contain;
  margin-left: -16px;
  filter: drop-shadow(0 2px 3px rgba(23, 29, 24, 0.18));
}

body.v3-storefront[data-storefront="unified"] .d-cpb-shelf img:first-child {
  margin-left: 0;
}

body.v3-storefront[data-storefront="unified"] .d-cpb-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"] .d-cpb-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-cpb-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-cpb-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cpb-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-cpb-primary {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  white-space: nowrap;
}

body.v3-storefront[data-storefront="unified"] .d-cpb-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-cpb-secondary:hover {
  border-color: var(--green);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-cpb-secondary .ico {
  width: 18px;
  height: 18px;
  color: #1f9d55;
}

@media (max-width: 1100px) {
  body.v3-storefront[data-storefront="unified"] .d-cpb {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.v3-storefront[data-storefront="unified"] .d-cpb-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-cpb {
    gap: 10px 12px;
    padding: 12px;
    border-radius: 16px;
  }

  body.v3-storefront[data-storefront="unified"] .d-cpb-shelf {
    height: 52px;
  }

  body.v3-storefront[data-storefront="unified"] .d-cpb-shelf img {
    width: 48px;
    height: 46px;
    margin-left: -14px;
  }

  body.v3-storefront[data-storefront="unified"] .d-cpb-title {
    font-size: 15px;
  }

  body.v3-storefront[data-storefront="unified"] .d-cpb-actions > * {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 10px;
    font-size: 13.5px;
  }
}

/* ==========================================================================
   33. PDP — final V0 `pdp-related` strip
   Same-category products under the detail card, rendered with the shared
   catalog card at compact density so four sit in one row on desktop.
   ========================================================================== */

/* ==========================================================================
   34. FINAL V0 PDP — full page composition, portal 1
   Source: app/product/[id]/page.tsx, components/store/product-gallery.tsx,
   product-buy-panel.tsx, price-block.tsx + globals.css `.pdp*` / `.priceblock*`
   / `.pricegate*`.
   The frozen `.product-detail.pd-card` box in v3-storefront.css still serves
   portals 4/8, which is why views/pages/product.php branches instead of being
   restyled: V0's page is a two-column split with a bordered buy card inside the
   info column, not one card containing everything.
   ========================================================================== */

body.v3-storefront[data-storefront="unified"] .d-pdp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: clamp(18px, 2.4vw, 28px) 0 clamp(18px, 2.4vw, 26px);
  font-size: 13px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-pdp-crumbs a {
  color: var(--muted);
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-pdp-crumbs a:hover {
  color: var(--green-dark);
  text-decoration: underline;
}

body.v3-storefront[data-storefront="unified"] .d-pdp-crumbs [aria-current] {
  color: var(--ink);
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-pdp-crumbs .ico {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ---- price block (member) — V0 PriceBlock in its `--lg` size ---- */

body.v3-storefront[data-storefront="unified"] .d-priceblock {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-priceblock-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

body.v3-storefront[data-storefront="unified"] .d-priceblock-now {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-priceblock.is-lg .d-priceblock-now {
  font-size: clamp(28px, 3vw, 34px);
}

body.v3-storefront[data-storefront="unified"] .d-priceblock-was {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: line-through;
}

body.v3-storefront[data-storefront="unified"] .d-priceblock-save {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--berry-soft);
  font-size: 12px;
  font-weight: 800;
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .d-priceblock-meta {
  font-size: 12.5px;
  color: var(--muted);
}

/* ==========================================================================
   FINAL V0 VARIANT PICKER — PDP + quick-view flavour chips
   Source: components/store/variant-picker.tsx (`.variant`) + globals.css `.chip`.
   Replaces the V2 flavour dropdown on portal 1; the chip atom itself is the
   shared `.d-chip`.
   ========================================================================== */

body.v3-storefront[data-storefront="unified"] .d-variant {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-variant-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

body.v3-storefront[data-storefront="unified"] .d-variant-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-variant-current {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-variant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-variant.field-invalid .d-chip,
body.v3-storefront[data-storefront="unified"] .d-prow-flavours.field-invalid .d-chip {
  border-color: var(--berry);
}

/* ==========================================================================
   FINAL V0 MEMBER HOME — "There's more than one way to order"
   Source: components/home/ways-to-order.tsx + globals.css `.route*`.
   Portal 1 only: portals 4/8 keep the frozen `.order-ways` / `.ow-card`
   block, which is why the partial branches instead of restyling it.
   ========================================================================== */

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-ways-head {
  max-width: 62ch;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-ways-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 1024px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-ways-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--d-radius-lg);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route-featured {
  border-color: rgba(90, 177, 32, 0.45);
  box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, var(--green-softer) 0%, #fff 34%);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route-ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--green-softer);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route-ico .ico {
  width: 22px;
  height: 22px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route-tag {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route-tag-green {
  background: var(--green-soft);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route-tag-berry {
  background: var(--berry-soft);
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route-title {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 800;
  line-height: 1.15;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route-lede {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* Reset the shared list defaults: this is an icon list, not a bulleted one. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route-points .ico {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  color: var(--green);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route-cta {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 620px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route-cta {
    align-self: stretch;
  }
}

/* =====================================================================
   MINI-CART DRAWER — FINAL V0 source port (portal 1 only)
   =====================================================================
   Source: components/cart/mini-cart.tsx + app/globals.css `.mc__*`.
   V2 class names are kept (the drawer's JS, scroll shell and body-lock all
   key off `.minicart` / `.mc-body` / `.mc-item`), so the V0 composition is
   expressed through the new `d-mc-*` children plus scoped corrections to the
   shell. PLT-SHARED-PORTAL-RUNTIME-01: every rule below is scoped to the shared
   `[data-storefront="unified"]` family, so Portals 1, 4 and 8 share one drawer.
   Money is never styled into existence here: each figure is a server field.
 */
body.v3-storefront[data-storefront="unified"] .minicart .mc-head {
  padding: 8px 18px;
}

body.v3-storefront[data-storefront="unified"] .minicart .mc-head b {
  gap: 9px;
  font-size: 17px;
  font-weight: 800;
}

/* `display` outranks the UA `[hidden]` rule, so every element the drawer JS
   toggles with the attribute needs its own hidden guard. */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-count[hidden],
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-totals[hidden] {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-count {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--berry);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* V0 `.mc__x`. The shared `.hamburger` is `display:none` above mobile, which
   left the drawer with no visible close control on desktop. */
body.v3-storefront[data-storefront="unified"] .minicart .mc-head .hamburger {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

body.v3-storefront[data-storefront="unified"] .minicart .mc-head .hamburger:hover {
  border-color: var(--green);
  color: var(--green-dark);
}

/* The drawer moves focus here on open, which Chrome treats as focus-visible, so
   the ring is on screen every time. Use the brand ring instead of the UA default. */
body.v3-storefront[data-storefront="unified"] .minicart .mc-head .hamburger:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 2px;
}

body.v3-storefront[data-storefront="unified"] .minicart .mc-head .hamburger .ico {
  width: 18px;
  height: 18px;
}

body.v3-storefront[data-storefront="unified"] .minicart .mc-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px;
}

/* ---------- line ---------- */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line.is-added {
  border-color: var(--green);
  background: var(--green-softer);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 6px;
  overflow: hidden;
  background: var(--d-surface-media);
  border-radius: var(--radius-sm);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  grid-column: 1 / -1;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-added {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-added .ico {
  width: 12px;
  height: 12px;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-variant {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-remove {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: none;
  background: none;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-remove:hover {
  background: var(--berry-soft);
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-remove .ico {
  width: 24px;
  height: 24px;
  margin-top: 3px;
}

/* Discounted line: the price paid leads, the RRP is struck, the saving is a cue. */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prices .d-mc-price {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--ink);
  text-align: right;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-was {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: line-through;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-save {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--berry);
  white-space: nowrap;
}

/* ---------- pack = one purchased unit ---------- */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-pack {
  padding: 9px;
  border: 2px solid var(--d-green-700);
  border-radius: var(--radius);
  background: var(--green-softer);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packtag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packtag .ico {
  width: 13px;
  height: 13px;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-pack .d-mc-line {
  border-color: transparent;
}

/* The children are indented, unpriced and control-free, so they can never be
   mistaken for separately purchasable lines. */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packkids {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 8px 4px 2px;
  padding-left: 11px;
  border-left: 2px solid var(--d-green-hairline-strong);
  list-style: none;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packkid {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 8px;
  align-items: center;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packkid-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 2px;
  overflow: hidden;
  background: #fff;
  border-radius: 5px;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packkid-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packkid-name {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packkid-note {
  font-weight: 500;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packkid-qty {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green-dark);
  white-space: nowrap;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packfoot {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packfoot b {
  color: var(--berry);
  font-weight: 800;
}

/* ---------- rewards: free delivery and Starter Set stay separate rows ---------- */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-rewards {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 2px;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-reward {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--d-surface-quiet);
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-reward .ico {
  width: 17px;
  height: 17px;
  flex: none;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-reward b {
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-reward.is-on {
  background: var(--green-soft);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-reward.is-on b {
  color: var(--green-dark);
}

/* DG-CATEGORY-BANNER-MINICART-AUTH-POPUP-19A — the ONE calm progress block (Starter Kit or free delivery), drawn
   only from the server's progress_block; derived from the cart's .d-skit direction at minicart scale. */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 12px 12px;
  border-radius: var(--radius-sm);
  background: var(--d-surface-quiet);
  font-size: 13px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-title .ico {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-title b {
  font-size: 13.5px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-line {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-track {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(23, 29, 24, 0.09);
  overflow: hidden;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transition: width 0.3s ease;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog.is-on {
  background: var(--green-soft);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog.is-on .d-mc-prog-title b {
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog.is-on .d-mc-prog-fill {
  background: var(--green-dark);
}

@media (prefers-reduced-motion: reduce) {
  body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-fill {
    transition: none;
  }
}

/* ---------- empty ---------- */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 32px 24px;
  text-align: center;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-empty .mc-empty-ico {
  width: 56px;
  height: 56px;
  margin: 0;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-empty b {
  font-size: 18px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-empty p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- foot ---------- */
body.v3-storefront[data-storefront="unified"] .minicart .mc-foot {
  gap: 9px;
  padding: 8px 18px 10px 18px;
  background: var(--d-surface-quiet);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-totrow {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-totrow strong {
  font-weight: 700;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-totrow.is-discount,
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-totrow.is-discount strong {
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-subtotal strong {
  font-size: 23px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-vat {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-cta {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  font-size: 15.5px;
}

/* TEMP: minicart <=560px overrides disabled during layout unification */
/*
@media (max-width: 560px) {
  body.v3-storefront[data-storefront="unified"] .minicart {
    width: 100%;
  }

  body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line {
    grid-template-columns: 56px 1fr;
  }

  body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prices {
    grid-column: 2;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    margin-top: -2px;
  }
}
*/

/* =====================================================================
   ACCEPTED PAYMENT MARKS — shared by the drawer and the checkout rows
   ===================================================================== */
.d-paymarks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.d-paymarks-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.d-paymarks-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.d-paymark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  padding: 0;
  flex: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}

.d-paymark img,
.d-paymark svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.d-paymarks-row--bare {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
}

.po-brands .d-paymark,
.pro-brands .d-paymark {
  width: 42px;
  height: 28px;
}

/* ==========================================================================
   Basket page — FINAL V0 source port
   Source: components/cart/{basket-view,cart-line,cart-pack,starter-kit-reward,
   cart-summary,empty-basket}.tsx + globals.css `.cart* .cline* .cpack* .skit*
   .csum* .cnotice* .cempty*`.

   Scoped to portal 1 so the frozen portal 4/8 basket keeps its own chrome. The
   V2 hook classes that cart-ajax.js diffs and repaints (line, lines container,
   pack group, price, unit price) stay on the elements, but none of them are
   restyled here: the V0 geometry rides on the `d-` classes next to them, so no
   shared V3 rule had to be widened.
   ========================================================================== */

/* ---------- page grid ---------- */
body.v3-storefront[data-storefront="unified"] .layout-2col.d-cart,
body.v3-storefront[data-storefront="unified"] .layout-2col.d-copay-layout {
  display: grid;
  grid-template-columns: 1fr 366px;
  gap: clamp(18px, 2.4vw, 30px);
  align-items: start;
}

body.v3-storefront[data-storefront="unified"] .d-cart-main {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 16px);
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"] .d-cart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.v3-storefront[data-storefront="unified"] .d-cart-count {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}

/* V0 has no card around the lines: each line is its own card in a gap stack.
   The container keeps `.cart-lines-card` because cart-ajax.js diffs its direct
   children, so the card chrome is removed rather than the class. */
body.v3-storefront[data-storefront="unified"] .cart-lines-card.d-cart-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.v3-storefront[data-storefront="unified"] .d-cart-foot {
  display: flex;
  justify-content: flex-end;
}

body.v3-storefront[data-storefront="unified"] .d-cart-clear,
body.v3-storefront[data-storefront="unified"] .d-cart-readonly {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 2px;
  background: none;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

body.v3-storefront[data-storefront="unified"] .d-cart-readonly {
  font-weight: 600;
  cursor: default;
}

body.v3-storefront[data-storefront="unified"] .d-cart-clear:hover {
  color: var(--berry);
  text-decoration: underline;
}

/* ---------- standalone line ---------- */
body.v3-storefront[data-storefront="unified"] .d-cline {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr 150px 110px;
  gap: clamp(12px, 1.8vw, 20px);
  align-items: center;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: opacity 0.2s ease, box-shadow 0.16s ease;
}

body.v3-storefront[data-storefront="unified"] .d-cline-toolbar {
  display: contents;
}

body.v3-storefront[data-storefront="unified"] .d-cline-removewrap {
  position: absolute;
  right: 14px;
  bottom: 10px;
  grid-column: 4;
  grid-row: 1;
  z-index: 1;
}

body.v3-storefront[data-storefront="unified"] .d-cart-continue {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-cart-continue-shop {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

/* DG-HERO-CATALOG-CART-POLISH-30A (Mark): cart and address summaries share --d-summary-sticky-top (v3-design-tokens.css). */
body.v3-storefront[data-storefront="unified"] .d-cart-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
  position: sticky;
  top: var(--d-summary-sticky-top);
}

body.v3-storefront[data-storefront="unified"] .d-cart-side aside.d-csum {
  position: static;
  top: auto;
}

body.v3-storefront[data-storefront="unified"] .d-csum-coupon-card {
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* CORRECTION-11 (Mark, central product decision): the customer coupon card stays hidden on every cart view until
   the legacy-coupon strategy is worked out. Presentation only — the markup, coupon routes, activation, validation,
   pricing and totals are untouched; display:none also removes its controls from the tab order. */
body.v3-storefront[data-storefront="unified"] .d-csum-coupon-card {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .d-cline-qv,
body.v3-storefront[data-storefront="unified"] .d-cline-qv-name {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

body.v3-storefront[data-storefront="unified"] .d-cline-qv-name {
  font-size: inherit;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-cline-qv-name:hover,
body.v3-storefront[data-storefront="unified"] .d-cline-qv:hover {
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-cline.is-saving {
  box-shadow: 0 0 0 2px var(--green-soft), var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"] .d-cline-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 10px;
  overflow: hidden;
  background: var(--d-surface-media);
  border-radius: var(--radius-sm);
}

body.v3-storefront[data-storefront="unified"] .d-cline-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

body.v3-storefront[data-storefront="unified"] .d-cline-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"] .d-cline-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

body.v3-storefront[data-storefront="unified"] .d-cline-variant {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-cline-note {
  font-size: 12.5px;
  color: var(--muted);
}

/* The flavour select sits where V0 shows the variant name, so it is styled as
   text with an affordance rather than a form field in a money row. */
body.v3-storefront[data-storefront="unified"] .d-cline-flavour {
  margin: 0;
}

body.v3-storefront[data-storefront="unified"] .d-cline-flavour .cflav {
  max-width: 100%;
  padding: 3px 26px 3px 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green-dark);
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

body.v3-storefront[data-storefront="unified"] .d-cline-unit {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}

body.v3-storefront[data-storefront="unified"] .d-cline-unitprice {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cline-unitwas {
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: line-through;
}

body.v3-storefront[data-storefront="unified"] .d-cline-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-cline-controls form {
  margin: 0;
}

body.v3-storefront[data-storefront="unified"] .d-cline-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cline-remove:hover {
  color: var(--berry);
  text-decoration: underline;
}

body.v3-storefront[data-storefront="unified"] .d-cline-remove svg {
  width: 15px;
  height: 15px;
}

body.v3-storefront[data-storefront="unified"] .d-cline-remove .cart-remove-label {
  display: inline;
}

body.v3-storefront[data-storefront="unified"] .d-cline-qtystatic {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cpack-qtystatic {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .d-cline-money {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}

/* `.cprice` paints money green in the V3 basket; V0 keeps the line total in ink
   so the berry saving underneath is the only coloured figure on the row. */
body.v3-storefront[data-storefront="unified"] .d-cline-total {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}

body.v3-storefront[data-storefront="unified"] .d-cline-save {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--berry);
}

/* ---------- program / pack group ---------- */
body.v3-storefront[data-storefront="unified"] .d-cpack {
  border: 2px solid var(--d-green-700);
  border-radius: var(--d-radius-lg);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-md);
}

body.v3-storefront[data-storefront="unified"] .d-cpack-head {
  padding: 12px 14px 14px;
  background: radial-gradient(120% 140% at 90% -20%, var(--d-green-600) 0%, var(--d-green-800) 48%, var(--d-green-900) 100%);
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}

body.v3-storefront[data-storefront="unified"] .d-cpack-tag svg {
  width: 13px;
  height: 13px;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-parent {
  display: grid;
  grid-template-columns: 96px 1fr 150px 130px;
  gap: clamp(12px, 1.8vw, 20px);
  align-items: center;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 8px;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-sm);
}

body.v3-storefront[data-storefront="unified"] .d-cpack-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-name {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-note {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
}

body.v3-storefront[data-storefront="unified"] .d-cpack-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-controls form {
  margin: 0;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-controls .d-cline-remove,
body.v3-storefront[data-storefront="unified"] .d-cpack-qtystatic {
  color: rgba(255, 255, 255, 0.82);
}

body.v3-storefront[data-storefront="unified"] .d-cpack-controls .d-cline-remove:hover {
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-money {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-money .d-cline-total {
  color: #fff;
  font-size: 21px;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-was {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

body.v3-storefront[data-storefront="unified"] .d-cpack-money .d-cline-save {
  color: #bfe6a6;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-body {
  padding: 14px;
  background: var(--d-surface-quiet);
}

body.v3-storefront[data-storefront="unified"] .d-cpack-inclabel {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cpack-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

body.v3-storefront[data-storefront="unified"] .d-cpack-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 4px;
  overflow: hidden;
  background: var(--d-surface-media);
  border-radius: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-itemtext {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-itemname {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-itemnote {
  font-size: 12px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cpack-foot {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- Starter Set reward ---------- */
body.v3-storefront[data-storefront="unified"] .d-skit {
  display: grid;
  grid-template-columns: 156px 1fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: center;
  padding: 16px;
  border: 1.5px dashed var(--line);
  border-radius: var(--d-radius-lg);
  background: var(--card);
}

body.v3-storefront[data-storefront="unified"] .d-skit.d-skit-on {
  border-style: solid;
  border-color: var(--green);
  background: var(--green-softer);
}

/* Hard rule from V0: the Starter Set art is never cropped. */
body.v3-storefront[data-storefront="unified"] .d-skit-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 12px;
  overflow: hidden;
  background: var(--d-surface-media);
  border-radius: var(--radius);
}

body.v3-storefront[data-storefront="unified"] .d-skit.d-skit-on .d-skit-media {
  background: #fff;
}

body.v3-storefront[data-storefront="unified"] .d-skit-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

body.v3-storefront[data-storefront="unified"] .d-skit-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"] .d-skit-status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--d-surface-quiet);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
}

body.v3-storefront[data-storefront="unified"] .d-skit-status svg {
  width: 13px;
  height: 13px;
}

body.v3-storefront[data-storefront="unified"] .d-skit-status.d-skit-status-on {
  color: #fff;
  background: var(--green);
}

body.v3-storefront[data-storefront="unified"] .d-skit-name {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

body.v3-storefront[data-storefront="unified"] .d-skit-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
}

body.v3-storefront[data-storefront="unified"] .d-skit.d-skit-on .d-skit-text {
  color: #35543a;
}

body.v3-storefront[data-storefront="unified"] .d-skit-prog {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

body.v3-storefront[data-storefront="unified"] .d-skit-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--d-surface-media);
  overflow: hidden;
}

body.v3-storefront[data-storefront="unified"] .d-skit.d-skit-on .d-skit-track {
  background: rgba(31, 106, 26, 0.16);
}

body.v3-storefront[data-storefront="unified"] .d-skit-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--green), var(--green-bright));
  transition: width 0.3s ease;
}

body.v3-storefront[data-storefront="unified"] .d-skit-scale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 12.5px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-skit-left b {
  color: var(--berry);
  font-size: 14px;
}

body.v3-storefront[data-storefront="unified"] .d-skit-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-skit-goal {
  font-size: 12px;
}

/* ---------- summary ---------- */
body.v3-storefront[data-storefront="unified"] aside.d-csum {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(16px, 2vw, 22px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: var(--d-summary-sticky-top);
}

body.v3-storefront[data-storefront="unified"] .d-csum-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 800;
}

/* V0's coupon area is a visual slot; V2's real coupon + HerbaPoints forms live
   inside it and stay visually secondary to subtotal and checkout. */
body.v3-storefront[data-storefront="unified"] .d-csum-coupon {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

body.v3-storefront[data-storefront="unified"] .d-csum-coupon .coupon-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-csum-coupon .preview-note {
  margin: 8px 0 0;
  font-size: 12px;
}

body.v3-storefront[data-storefront="unified"] .d-csum-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

body.v3-storefront[data-storefront="unified"] .d-csum-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
}

body.v3-storefront[data-storefront="unified"] .d-csum-rows dt,
body.v3-storefront[data-storefront="unified"] .d-csum-rows .sub {
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-csum-rows dd {
  margin: 0;
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-csum-row-minus dd {
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .d-csum-free {
  color: var(--green-dark);
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-csum-later {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-csum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-csum-total strong {
  font-size: 26px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-csum-saving {
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] #v3-cart-savings-amount,
body.v3-storefront[data-storefront="unified"] .v3-cart-savings-amount {
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-csum-ship {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 15px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--d-surface-quiet);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-csum-ship svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

body.v3-storefront[data-storefront="unified"] .d-csum-ship.d-csum-ship-on {
  background: var(--green-softer);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-csum-cta {
  margin-top: 2px;
}

body.v3-storefront[data-storefront="unified"] .d-csum-cta svg {
  width: 18px;
  height: 18px;
}

body.v3-storefront[data-storefront="unified"] .d-csum-keep {
  align-self: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--berry);
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-csum-keep:hover {
  text-decoration: underline;
}

/* ---------- stale / error notice ---------- */
body.v3-storefront[data-storefront="unified"] .d-cnotice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.45;
}

body.v3-storefront[data-storefront="unified"] .d-cnotice-warn {
  background: var(--gold-soft);
  border: 1px solid rgba(169, 121, 31, 0.28);
  color: #5c4211;
}

body.v3-storefront[data-storefront="unified"] .d-cnotice svg {
  width: 17px;
  height: 17px;
  flex: none;
}

body.v3-storefront[data-storefront="unified"] .d-cnotice-text {
  flex: 1;
  min-width: 180px;
}

body.v3-storefront[data-storefront="unified"] .d-cnotice-text p {
  margin: 0;
}

body.v3-storefront[data-storefront="unified"] .d-cnotice-text p + p {
  margin-top: 4px;
}

/* ---------- empty basket ---------- */
body.v3-storefront[data-storefront="unified"] .d-cempty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(32px, 5vw, 60px) 24px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"] .d-cempty-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--green-softer);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-cempty-icon svg {
  width: 26px;
  height: 26px;
}

body.v3-storefront[data-storefront="unified"] .d-cempty-title {
  margin: 0;
  font-size: clamp(21px, 3vw, 27px);
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-cempty-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 48ch;
}

body.v3-storefront[data-storefront="unified"] .d-cempty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

body.v3-storefront[data-storefront="unified"] .d-cempty-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 520px;
}

body.v3-storefront[data-storefront="unified"] .d-cempty-linkslabel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cempty-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-storefront="unified"] .d-cempty-links a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 7px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-cempty-links a:hover {
  border-color: var(--green);
  color: var(--green-dark);
  background: var(--green-softer);
}

/* ---------- basket responsive (V0 breakpoints) ---------- */
@media (max-width: 1000px) {
  body.v3-storefront[data-storefront="unified"] .layout-2col.d-cart,
  body.v3-storefront[data-storefront="unified"] .layout-2col.d-copay-layout {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-storefront="unified"] aside.d-csum,
  body.v3-storefront[data-storefront="unified"] .d-cart-side {
    position: static;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-cline {
    grid-template-columns: 76px 1fr;
    gap: 12px;
    row-gap: 12px;
    align-items: start;
  }

  body.v3-storefront[data-storefront="unified"] .d-cline:has(.d-cline-removewrap) {
    padding-bottom: 14px;
  }

  body.v3-storefront[data-storefront="unified"] .d-cline-media {
    align-self: start;
  }

  body.v3-storefront[data-storefront="unified"] .d-cline-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    grid-column: 1 / -1;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }

  body.v3-storefront[data-storefront="unified"] .d-cline-controls {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 0;
    border-top: 0;
    flex: 0 0 auto;
  }

  body.v3-storefront[data-storefront="unified"] .d-cline-money {
    align-items: flex-start;
    text-align: left;
    margin-top: 0;
    flex: 0 1 auto;
    min-width: 0;
  }

  body.v3-storefront[data-storefront="unified"] .d-cline-removewrap {
    position: static;
    margin-left: auto;
    flex: 0 0 auto;
  }

  body.v3-storefront[data-storefront="unified"] .d-cline-remove .cart-remove-label {
    display: none;
  }

  /* DG-HERO-CATALOG-CART-POLISH-30A (Mark): one mobile icon zoom for every remove control (standalone lines and packs),
     1.3 on the painted [data-ico] wrapper only — zooming the wrapper AND its svg compounded to 1.5 × 1.5. */
  body.v3-storefront[data-storefront="unified"] .d-cline-remove [data-ico] {
    zoom: 1.3;
  }

  /* DG-HERO-CATALOG-CART-POLISH-30A (Mark): on phones the pack's remove control sits to the right of its price, as on a
     standalone line — no separate controls row, divider or empty space. Desktop keeps its 4-column layout. */
  body.v3-storefront[data-storefront="unified"] .d-cpack-parent {
    grid-template-columns: 76px 1fr auto;
    row-gap: 12px;
    align-items: start;
  }

  body.v3-storefront[data-storefront="unified"] .d-cpack-info {
    grid-column: 2 / -1;
  }

  body.v3-storefront[data-storefront="unified"] .d-cpack-money {
    grid-column: 1 / 3;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: flex-start;
    gap: 4px 10px;
    text-align: left;
  }

  body.v3-storefront[data-storefront="unified"] .d-cpack-money .d-cline-total,
  body.v3-storefront[data-storefront="unified"] .d-cpack-money .d-cpack-was {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body.v3-storefront[data-storefront="unified"] .d-cpack-money .d-cline-save {
    flex: 0 0 100%;
    width: 100%;
  }

  body.v3-storefront[data-storefront="unified"] .d-cpack-controls {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    padding: 0;
    border: 0;
  }

  /* ≥ 44px visual tap target under the phone page zoom (0.95, v3-mobile-compact.css): 47 CSS px. */
  body.v3-storefront[data-storefront="unified"] .d-cpack-controls .d-cline-remove {
    justify-content: center;
    min-width: 47px;
    min-height: 47px;
  }

  body.v3-storefront[data-storefront="unified"] .d-cpack-list {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-storefront="unified"] .d-skit {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-storefront="unified"] .d-skit-media {
    max-width: 240px;
    margin-inline: auto;
    width: 100%;
  }
}

/* `display` on a summary row would beat the `hidden` attribute, and the coupon
   acknowledgement row is always in the DOM so coupon AJAX can reveal it. */
body.v3-storefront[data-storefront="unified"] .d-csum-rows > div[hidden] {
  display: none;
}

/* ============================================================================
   CHECKOUT — FINAL V0 source port (details step + order summary)

   V0 source: components/checkout/details-step.tsx, checkout-summary.tsx and the
   `.costep / .cocard / .field__* / .cotoggle / .codelivery / .coalert /
   .coactions / .cofoot / .cosum__*` rules in app/globals.css.

   Scoped to portal 1. The V2 hook classes stay on the elements (one form id,
   `.field-group` / `.field-msg` for the client validator, the delivery toggle
   ids) and are not restyled; the V0 geometry rides on the `d-` classes.
   ========================================================================== */

body.v3-storefront[data-storefront="unified"] .d-cohead {
  margin-bottom: clamp(14px, 2vw, 20px);
}

body.v3-storefront[data-storefront="unified"] .d-cohead-title {
  font-size: clamp(27px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.1;
}

body.v3-storefront[data-storefront="unified"] .d-cohead-lede {
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-costep {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 16px);
}

/* One V2 form, three V0 cards inside it. */
body.v3-storefront[data-storefront="unified"] .d-coform {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 16px);
}

body.v3-storefront[data-storefront="unified"] .d-cocard-ship[hidden] {
  display: none !important;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-ship-meta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* Shared cart/checkout/payment delivery value stack: fee + meta both right-aligned. */
body.v3-storefront[data-storefront="unified"] .d-osum-ship {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
}

body.v3-storefront[data-storefront="unified"] .d-osum-ship-value {
  display: block;
  text-align: right;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="cart"] .d-osum-ship-meta {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .d-osum-ship-meta,
body.v3-storefront[data-storefront="unified"] .d-cosum-ship-meta {
  display: block;
  margin-top: 0;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cocard {
  padding: clamp(16px, 2vw, 24px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"] .d-cocard-quiet {
  background: var(--d-surface-quiet);
  box-shadow: none;
}

body.v3-storefront[data-storefront="unified"] .d-cocard-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

body.v3-storefront[data-storefront="unified"] .d-cocard-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--green-softer);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-cocard-icon svg {
  width: 17px;
  height: 17px;
}

body.v3-storefront[data-storefront="unified"] .d-cocard-title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
}

body.v3-storefront[data-storefront="unified"] .d-cocard-sub {
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* Two columns at most: three-across fields get unreadable. */
body.v3-storefront[data-storefront="unified"] .d-cogrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
}

body.v3-storefront[data-storefront="unified"] .d-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.v3-storefront[data-storefront="unified"] .field-group label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 0px;
}

body.v3-storefront[data-storefront="unified"] .d-field-full {
  grid-column: 1 / -1;
}

body.v3-storefront[data-storefront="unified"] .d-field-label {
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-field-req,
body.v3-storefront[data-storefront="unified"] .d-field-opt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.v3-storefront[data-storefront="unified"] .d-field-req {
  margin-left: 0;
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .d-field-opt {
  margin-left: 7px;
  color: var(--muted);
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-field-input {
  width: 100%;
  min-height: var(--d-field-min-h);
  border: 1px solid var(--d-field-border, var(--line));
  border-radius: var(--d-field-radius);
  background: #fff;
  padding: var(--d-field-pad);
  font-size: var(--d-field-font-size);
  color: var(--d-field-text, var(--ink));
  font-family: inherit;
  box-shadow: var(--d-field-shadow-rest);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.v3-storefront[data-storefront="unified"] .d-field-input::placeholder {
  color: var(--d-field-placeholder);
  opacity: 1;
}

body.v3-storefront[data-storefront="unified"] .d-field-input:hover:not([readonly]):not(:disabled):not(:focus):not(.d-field-bad) {
  border-color: var(--d-field-border-hover, var(--muted));
  box-shadow: var(--d-field-shadow-hover);
}

body.v3-storefront[data-storefront="unified"] .d-field-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: var(--d-field-glow);
}

body.v3-storefront[data-storefront="unified"] .d-field-input[readonly] {
  background: var(--d-surface-quiet);
  color: var(--muted);
  border-color: var(--line);
  box-shadow: none;
}

body.v3-storefront[data-storefront="unified"] .d-field-input:disabled {
  background: var(--d-surface-quiet);
  color: var(--muted);
  border-color: var(--line);
  box-shadow: none;
  opacity: 0.65;
  cursor: not-allowed;
}

body.v3-storefront[data-storefront="unified"] .d-coform-note {
  font-size: 12.5px;
  color: var(--muted);
  margin: -6px 0 2px;
}

body.v3-storefront[data-storefront="unified"] .d-field-short {
  max-width: 190px;
}

body.v3-storefront[data-storefront="unified"] .d-field-bad {
  border-color: var(--d-status-fail);
  background-color: #fff;
  box-shadow: var(--d-field-error-ring);
}

body.v3-storefront[data-storefront="unified"] .d-field-hint {
  font-size: 12.5px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--d-status-fail);
}

body.v3-storefront[data-storefront="unified"] .d-field-error svg {
  width: 13px;
  height: 13px;
  flex: none;
}

body.v3-storefront[data-storefront="unified"] .d-coalert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--d-status-fail-tint);
  border: 1px solid rgba(163, 32, 32, 0.24);
  color: var(--d-status-fail);
}

body.v3-storefront[data-storefront="unified"] .d-coalert-ico svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
}

body.v3-storefront[data-storefront="unified"] .d-coalert-title {
  font-size: 15px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-coalert-body {
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
}

/* The address choice is a full-size control, never small print. */
body.v3-storefront[data-storefront="unified"] .d-cotoggle-wrap {
  margin: 0;
}

body.v3-storefront[data-storefront="unified"] .d-cotoggle {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 16px;
  padding: 13px 15px;
  cursor: pointer;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--d-surface-quiet);
}

body.v3-storefront[data-storefront="unified"] .d-cotoggle:hover {
  border-color: var(--green);
}

body.v3-storefront[data-storefront="unified"] .d-cotoggle input {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--green);
}

body.v3-storefront[data-storefront="unified"] .d-cotoggle > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14.5px;
}

body.v3-storefront[data-storefront="unified"] .d-cotoggle-note {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cobilling {
  margin-top: 16px;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

body.v3-storefront[data-storefront="unified"] .d-cobilling-title {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-codelivery {
  padding: 13px 15px;
  border-radius: var(--radius);
  background: var(--green-softer);
  border: 1px solid rgba(90, 177, 32, 0.28);
}

body.v3-storefront[data-storefront="unified"] .d-codelivery-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

body.v3-storefront[data-storefront="unified"] .d-codelivery-name {
  font-size: 15px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-codelivery-free {
  font-size: 15px;
  font-weight: 800;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-codelivery-amount {
  font-size: 15px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-codelivery-note {
  margin-top: 3px;
  font-size: 13px;
  color: var(--green-dark);
}

/* Neutral, not green: nothing has been unlocked yet at this point. */
body.v3-storefront[data-storefront="unified"] .d-codelivery-paid {
  background: var(--d-surface-quiet);
  border-color: var(--line);
}

body.v3-storefront[data-storefront="unified"] .d-codelivery-pending {
  padding: 13px 15px;
  border-radius: var(--radius);
  background: var(--d-surface-quiet);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-coactions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

body.v3-storefront[data-storefront="unified"] .d-coactions-utility {
  align-self: flex-end;
  min-height: 28px;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-coactions-utility:hover {
  color: var(--ink);
  text-decoration: underline;
}

body.v3-storefront[data-storefront="unified"] .d-coactions-next {
  width: 100%;
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"] .d-coactions-back {
  min-height: 36px;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-coactions-back:hover {
  text-decoration: underline;
}

/* ---- checkout order summary ---- */
body.v3-storefront[data-storefront="unified"] .checkout-summary-sidebar.d-cosum {
  /* DG-HERO-CATALOG-CART-POLISH-30A: the address summary uses the same offset as the cart (was .sticky-aside's
     --chrome-top + 72px, a fixed guess for the category row). Its ≤1000px static/stacked layout is unchanged. */
  top: var(--d-summary-sticky-top);
}
body.v3-storefront[data-storefront="unified"] .d-cosum {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: clamp(16px, 2vw, 22px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--shadow-md);
}

/* The collapse control is mobile-only; desktop always shows the detail. */
body.v3-storefront[data-storefront="unified"] .d-cosum-toggle {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-edit {
  font-size: 13px;
  font-weight: 700;
  color: var(--berry);
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-edit:hover {
  text-decoration: underline;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

body.v3-storefront[data-storefront="unified"] .d-cosum-item {
  display: flex;
  align-items: center;
  gap: 11px;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-thumb {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 4px;
  overflow: visible;
  background: var(--d-surface-media);
  border-radius: 10px;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--berry);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-itemtext {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-itemname {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-itemvar {
  font-size: 12.5px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cosum-itemprice {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  margin-top: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-rows > div[hidden] {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-rows dt {
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cosum-rows dd {
  margin: 0;
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-row-minus dd {
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .d-cosum-free {
  color: var(--green-dark);
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-later {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cosum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-total strong {
  font-size: 25px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-saving {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .d-cosum-cue {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--d-surface-quiet);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cosum-cue svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-cue-on {
  background: var(--green-softer);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-cosum-trust {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cosum-trust svg {
  width: 14px;
  height: 14px;
  flex: none;
}

@media (max-width: 1000px) {
  /* Summary above the form, collapsed to a total-first bar. */
  body.v3-storefront[data-storefront="unified"] .checkout-layout.d-cart > .d-cosum {
    order: -1;
  }

  body.v3-storefront[data-storefront="unified"] .d-cosum-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    min-height: 44px;
  }

  body.v3-storefront[data-storefront="unified"] .d-cosum-togglelabel {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--berry);
  }

  body.v3-storefront[data-storefront="unified"] .d-cosum-togglecount {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
  }

  body.v3-storefront[data-storefront="unified"] .d-cosum-toggleright {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
  }

  body.v3-storefront[data-storefront="unified"] .d-cosum-chev svg {
    width: 18px;
    height: 18px;
    color: var(--muted);
    transition: transform 0.18s ease;
  }

  body.v3-storefront[data-storefront="unified"] .d-cosum-chev-on svg {
    transform: rotate(180deg);
  }

  body.v3-storefront[data-storefront="unified"] .d-cosum-panel {
    display: none;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
  }

  body.v3-storefront[data-storefront="unified"] .d-cosum-panel[data-open="true"] {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  /* The total row is redundant next to the always-visible toggle figure. */
  body.v3-storefront[data-storefront="unified"] .d-cosum-total {
    display: none;
  }
}

@media (max-width: 560px) {
  body.v3-storefront[data-storefront="unified"] .d-cogrid {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-storefront="unified"] .d-field-short {
    max-width: none;
  }

  body.v3-storefront[data-storefront="unified"] .d-coactions-utility {
    align-self: flex-end;
  }
}

/* ---- payment step (portal 1) — FINAL V0 components/checkout/payment-step.tsx ----
   V0 order: retry alert -> quiet "Delivering to" recap -> method rows with a tick
   mark, name, marks and blurb -> total sitting with the pay action -> back link.
   The V2 payment runtime keeps its own hooks: `.payopt[data-method-tile]` and the
   `.sel` class stripe-payment.js toggles are reused, not replaced. */

body.v3-storefront[data-storefront="unified"] .d-coalert-soft {
  background: var(--gold-soft);
  border-color: rgba(169, 121, 31, 0.3);
  color: #5c4211;
}

body.v3-storefront[data-storefront="unified"] .d-coalert-cancel {
  background: #f7f1e4;
  border: 3px solid rgba(169, 121, 31, 0.55);
  color: #5c4211;
}

body.v3-storefront[data-storefront="unified"] .d-coalert-cancel .d-coalert-ico svg {
  width: 26px;
  height: 26px;
}

body.v3-storefront[data-storefront="unified"] .d-coalert-cancel .d-coalert-title {
  font-size: 17px;
}

body.v3-storefront[data-storefront="unified"] .d-coalert-warn {
  background: #fff6e8;
  border: 2px solid rgba(184, 114, 12, 0.45);
  color: #7a4a08;
}

body.v3-storefront[data-storefront="unified"] .d-coalert-error {
  background: var(--d-status-fail-tint);
  border: 2px solid rgba(163, 32, 32, 0.42);
  color: var(--d-status-fail);
}

body.v3-storefront[data-storefront="unified"] .d-coalert-support {
  background: #f3e8ea;
  border: 3px solid #8b1e2d;
  color: #5c1018;
}

body.v3-storefront[data-storefront="unified"] .d-coalert-support .d-coalert-title,
body.v3-storefront[data-storefront="unified"] .d-coalert-error .d-coalert-title {
  font-size: 17px;
}

body.v3-storefront[data-storefront="unified"] .d-corecap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body.v3-storefront[data-storefront="unified"] .d-corecap-title {
  font-size: 12px;
  /* DG-STOREFRONT-POLISH-PACK-BANNER-19 (Mark): one weight for the recap title. */
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-corecap-body {
  margin-top: 5px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

body.v3-storefront[data-storefront="unified"] .d-corecap-meta {
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-corecap-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 36px;
  padding: 6px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--berry);
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-corecap-edit:hover {
  border-color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .d-copay {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row {
  margin: 0;
  padding: 15px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: none;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row:hover {
  border-color: var(--green);
}

/* V0 marks the chosen method in green, not berry: berry is for actions. */
body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row.sel {
  border-color: var(--green);
  background: var(--green-softer);
  box-shadow: 0 0 0 3px var(--green-soft);
}

body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row .po-head {
  display: grid;
  grid-template-columns: 24px minmax(0, auto) 1fr;
  align-items: center;
  column-gap: 13px;
  row-gap: 8px;
}

body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row .po-head .d-copay-mark {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row .po-head b {
  grid-column: 2;
  align-self: center;
}

body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row .po-head .po-brands {
  grid-column: 3;
  justify-self: end;
}

/* The native radio is replaced by V0's tick circle, but stays in the DOM and
   focusable so keyboard and screen-reader behaviour is unchanged. */
body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row .po-head input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

body.v3-storefront[data-storefront="unified"] .d-copay-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .d-copay-mark > *,
body.v3-storefront[data-storefront="unified"] .d-copay-mark svg {
  width: 15px;
  height: 15px;
  stroke-width: 3;
  opacity: 0;
}

body.v3-storefront[data-storefront="unified"] .payopt.sel .d-copay-mark,
body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row:has(input[type="radio"]:checked) .d-copay-mark {
  border-color: var(--green);
  background: var(--green);
}

body.v3-storefront[data-storefront="unified"] .payopt.sel .d-copay-mark > *,
body.v3-storefront[data-storefront="unified"] .payopt.sel .d-copay-mark svg,
body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row:has(input[type="radio"]:checked) .d-copay-mark > *,
body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row:has(input[type="radio"]:checked) .d-copay-mark svg {
  opacity: 1;
}

body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row .po-head b {
  font-size: 15.5px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row .po-body {
  margin-top: 2px;
  padding-left: 37px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row .po-detail {
  margin-top: 12px;
  background: var(--green-softer);
}

body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row .po-detail-klarna {
  margin-top: 8px;
  padding: 8px 10px;
}

body.v3-storefront[data-storefront="unified"] .d-copay-klarna-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-copay-klarna-copy {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row .po-brands {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Total + pay action + trust. V0 `.copayfoot` sits under the methods in the
   main column. The error summary, confirm button and Terms line move with it
   as one wired group — they are not duplicated in the summary. */
body.v3-storefront[data-storefront="unified"] .d-costep > .d-copayfoot {
  margin-top: 2px;
}

/* On mobile the methods and the confirm card must come before the summary: a
   customer scrolling a stacked page should reach the decision, not a recap of
   what they already chose. The cart page does the opposite (`.d-cart > .d-cosum
   { order: -1 }`), so state the payment page's order rather than relying on the
   cart rule staying scoped. */
@media (max-width: 1000px) {
  body.v3-storefront[data-storefront="unified"] .d-copay-layout > .d-costep {
    order: 0;
  }

  body.v3-storefront[data-storefront="unified"] .d-copay-layout > .d-cosum {
    order: 1;
  }
}

body.v3-storefront[data-storefront="unified"] .d-copayfoot .d-copayfoot-inner {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: clamp(16px, 2vw, 22px);
  background: var(--card);
  border: 2px solid var(--green);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--shadow-md);
}

body.v3-storefront[data-storefront="unified"] .d-paysum {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

body.v3-storefront[data-storefront="unified"] .d-copayfoot-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
}

/* PLT-SHARED-PORTAL-RUNTIME-01 — no total is repeated between the payment blocks and the
   actions on any width; the order summary owns the total (element no longer rendered). */

body.v3-storefront[data-storefront="unified"] .d-copayfoot-total strong {
  font-size: 27px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-copayfoot-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

body.v3-storefront[data-storefront="unified"] .d-copayfoot-trust svg {
  width: 14px;
  height: 14px;
  flex: none;
}

body.v3-storefront[data-storefront="unified"] .d-paysum-back {
  align-self: center;
}

/* The green selected state is toggled by stripe-payment.js via `.sel`. This
   `:has()` pair makes the row follow the radio even before that script is
   wired (a provider can be gated off), so the tick never contradicts the
   control the customer just used. */
body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row:has(input[type="radio"]:checked) {
  border-color: var(--green);
  background: var(--green-softer);
  box-shadow: 0 0 0 3px var(--green-soft);
}

body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row:has(input[type="radio"]:checked) .d-copay-mark {
  border-color: var(--green);
  background: var(--green);
}

body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row:has(input[type="radio"]:checked) .d-copay-mark svg {
  opacity: 1;
}

body.v3-storefront[data-storefront="unified"] .payopt.d-copay-row:focus-within {
  outline: 3px solid var(--berry-soft);
  outline-offset: 2px;
}

/* Payment outcome — FINAL V0 `.pout` on existing V2 routes. */
body.v3-storefront[data-storefront="unified"] .d-pout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(16px, 2.4vw, 26px);
  align-items: start;
  max-width: 1000px;
  margin-inline: auto;
  --pstat: var(--green-dark);
  --pstat-soft: var(--green-softer);
  --pstat-line: rgba(90, 177, 32, 0.32);
}

body.v3-storefront[data-storefront="unified"] .d-pout-pending {
  --pstat: #8a6413;
  --pstat-soft: #f6edd4;
  --pstat-line: rgba(169, 121, 31, 0.32);
}

body.v3-storefront[data-storefront="unified"] .d-pout-failed {
  --pstat: var(--red);
  --pstat-soft: var(--red-soft);
  --pstat-line: rgba(163, 32, 32, 0.26);
}

body.v3-storefront[data-storefront="unified"] .d-pout-cancelled {
  --pstat: var(--muted);
  --pstat-soft: var(--d-surface-quiet);
  --pstat-line: var(--line);
}

body.v3-storefront[data-storefront="unified"] .d-pout-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(22px, 3vw, 36px);
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--pstat);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--shadow-md);
}

body.v3-storefront[data-storefront="unified"] .d-pout-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--pstat-soft);
  color: var(--pstat);
  border: 1px solid var(--pstat-line);
  box-shadow: 0 0 0 8px rgba(90, 177, 32, 0.08);
}

body.v3-storefront[data-storefront="unified"] .d-pout-pending .d-pout-icon,
body.v3-storefront[data-storefront="unified"] .d-pout-failed .d-pout-icon,
body.v3-storefront[data-storefront="unified"] .d-pout-cancelled .d-pout-icon {
  box-shadow: 0 0 0 8px var(--pstat-soft);
}

body.v3-storefront[data-storefront="unified"] .d-pout-icon svg {
  width: 30px;
  height: 30px;
}

body.v3-storefront[data-storefront="unified"] .d-pout-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pstat);
}

body.v3-storefront[data-storefront="unified"] .d-pout-title {
  font-size: clamp(25px, 3.4vw, 36px);
  font-weight: 800;
  line-height: 1.12;
}

body.v3-storefront[data-storefront="unified"] .d-pout-lede {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 54ch;
}

body.v3-storefront[data-storefront="unified"] .d-pout-ref {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 4px 0 0;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--d-surface-quiet);
  border: 1px solid var(--line);
}

body.v3-storefront[data-storefront="unified"] .d-pout-ref dt {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-pout-ref dd {
  margin: 3px 0 0;
  font-size: 16px;
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-pout-success .d-pout-ref > div:first-child dd {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.v3-storefront[data-storefront="unified"] .d-pout-ref-ok {
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-coalert-error {
  background: var(--d-status-fail-tint);
  border-color: rgba(163, 32, 32, 0.24);
  color: var(--d-status-fail);
}

body.v3-storefront[data-storefront="unified"] .d-pout-actions {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;
  margin-top: 6px;
}

body.v3-storefront[data-storefront="unified"] .d-pout-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}

body.v3-storefront[data-storefront="unified"] .d-pout-link {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--berry);
  text-decoration: none;
  padding-block: 5px;
}

body.v3-storefront[data-storefront="unified"] .d-pout-link:hover {
  text-decoration: underline;
}

body.v3-storefront[data-storefront="unified"] .d-pout-next {
  padding: clamp(18px, 2.2vw, 24px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"] .d-pout-nexttitle {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 14px;
}

body.v3-storefront[data-storefront="unified"] .d-pout-steps {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-storefront="unified"] .d-pout-step {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

body.v3-storefront[data-storefront="unified"] .d-pout-stepicon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--pstat-soft);
  color: var(--pstat);
}

body.v3-storefront[data-storefront="unified"] .d-pout-steptitle {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
}

body.v3-storefront[data-storefront="unified"] .d-pout-stepbody {
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Account family — FINAL V0 `.acct` / `.acgrid` / `.orow` / `.rew` / `.addr`. */
body.v3-storefront[data-storefront="unified"] .d-acct {
  background: var(--d-cream);
  min-height: 60vh;
  padding-bottom: clamp(32px, 5vw, 60px);
}

body.v3-storefront[data-storefront="unified"] .d-acct-band {
  background: var(--green-dark);
  color: #fff;
  padding: clamp(22px, 3vw, 34px) 0;
}

body.v3-storefront[data-storefront="unified"] .d-acct-bandinner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

body.v3-storefront[data-storefront="unified"] .d-acct-who {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"] .d-acct-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 18px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-acct-hello {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(200, 232, 186, 0.9);
}

body.v3-storefront[data-storefront="unified"] .d-acct-name {
  margin: 3px 0 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .d-acct-meta {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--d-on-green-ink, #d7ecd0);
}

body.v3-storefront[data-storefront="unified"] .d-acct-points {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

body.v3-storefront[data-storefront="unified"] .d-acct-points b {
  font-size: 17px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-acct-points:hover {
  background: rgba(255, 255, 255, 0.18);
}

body.v3-storefront[data-storefront="unified"] .d-acct-body {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: clamp(18px, 2.6vw, 32px);
  align-items: start;
  padding-top: clamp(20px, 2.6vw, 30px);
}

body.v3-storefront[data-storefront="unified"] .d-acctnav {
  position: sticky;
  top: calc(var(--header-h, 72px) + 16px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.v3-storefront[data-storefront="unified"] .d-acctnav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"] .d-acctnav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-acctnav-link:hover {
  background: var(--green-softer);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-acctnav-link.is-on {
  background: var(--berry);
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .d-acctnav-out {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-acctnav-out:hover {
  color: var(--berry);
  text-decoration: underline;
}

body.v3-storefront[data-storefront="unified"] .d-acct-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 20px);
}

body.v3-storefront[data-storefront="unified"] .d-acct-title {
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 800;
  line-height: 1.15;
}

body.v3-storefront[data-storefront="unified"] .d-acct-lede {
  margin: 5px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
}

body.v3-storefront[data-storefront="unified"] .d-acgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
  align-items: start;
}

body.v3-storefront[data-storefront="unified"] .d-acmod {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"] .d-acmod-wide {
  grid-column: 1 / -1;
}

body.v3-storefront[data-storefront="unified"] .d-acmod-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.v3-storefront[data-storefront="unified"] .d-acmod-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-acmod-glyph {
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-acmod-more,
body.v3-storefront[data-storefront="unified"] .d-acmod-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--berry);
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-acmod-more:hover,
body.v3-storefront[data-storefront="unified"] .d-acmod-link:hover {
  text-decoration: underline;
}

body.v3-storefront[data-storefront="unified"] .d-acmod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.v3-storefront[data-storefront="unified"] .d-aclive {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

body.v3-storefront[data-storefront="unified"] .d-ostat {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--green-softer);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-acmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin: 0;
}

body.v3-storefront[data-storefront="unified"] .d-acmeta dt {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-acmeta dd {
  margin: 3px 0 0;
  font-size: 16px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-acmeta-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

body.v3-storefront[data-storefront="unified"] .d-acpoints-num {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .d-acpoints-unit,
body.v3-storefront[data-storefront="unified"] .d-acpoints-worth {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-acaddr-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-acaddr-lines {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.6;
}

body.v3-storefront[data-storefront="unified"] .d-achelp-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-achelp-cta {
  align-self: flex-start;
}

body.v3-storefront[data-storefront="unified"] .d-acmod-points {
  background: linear-gradient(180deg, #fffdf8 0%, var(--card) 72%);
}

body.v3-storefront[data-storefront="unified"] .d-acmod-help {
  background: var(--green-softer);
}

body.v3-storefront[data-storefront="unified"] .d-orows,
body.v3-storefront[data-storefront="unified"] .d-addr-list,
body.v3-storefront[data-storefront="unified"] .d-rew-act {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-storefront="unified"] .d-orow,
body.v3-storefront[data-storefront="unified"] .d-addr-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 17px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"] .d-orow-top,
body.v3-storefront[data-storefront="unified"] .d-addr-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

body.v3-storefront[data-storefront="unified"] .d-orow-date {
  font-size: 13px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-orow-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body.v3-storefront[data-storefront="unified"] .d-orow-id {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

body.v3-storefront[data-storefront="unified"] .d-orow-summary {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-orow-figs {
  text-align: right;
}

body.v3-storefront[data-storefront="unified"] .d-orow-total {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-orow-count {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-rew-bal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: var(--green-dark);
  color: #fff;
  border-radius: var(--d-radius-lg);
}

body.v3-storefront[data-storefront="unified"] .d-rew-ballabel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(200, 232, 186, 0.9);
}

body.v3-storefront[data-storefront="unified"] .d-rew-balnum {
  margin: 6px 0 0;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}

body.v3-storefront[data-storefront="unified"] .d-rew-balunit {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-rew-balworth {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--d-on-green-ink, #d7ecd0);
}

body.v3-storefront[data-storefront="unified"] .d-rew-act li {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

body.v3-storefront[data-storefront="unified"] .d-addr-label {
  font-size: 15px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-addr-tag {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-addr-tag.is-on {
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-acempty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 22px;
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--d-radius-lg);
}

body.v3-storefront[data-storefront="unified"] .d-acempty-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-softer);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-acempty-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-acempty-body {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
  max-width: 48ch;
}

body.v3-storefront[data-storefront="unified"] .d-ostat-test {
  background: #fff6e5;
  color: #8a6413;
}

body.v3-storefront[data-storefront="unified"] .d-acquick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-acquick a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--green-softer);
  color: var(--green-dark);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-orow-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .d-ohist,
body.v3-storefront[data-storefront="unified"] .d-pout-card .d-ohist {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-ohist-hp {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--green-softer);
}

body.v3-storefront[data-storefront="unified"] .d-ohist-hp-earn {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-ohist-hp-earn span,
body.v3-storefront[data-storefront="unified"] .d-ohist-hp-use {
  font-weight: 600;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-ohist-hp-use {
  margin: 4px 0 0;
  font-size: 13.5px;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-addrlines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.45;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

body.v3-storefront[data-storefront="unified"] .d-ohist-media {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--green-softer);
  overflow: hidden;
  display: grid;
  place-items: center;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-media img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-meta {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-ohist-price {
  text-align: right;
  font-size: 14.5px;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-was {
  display: block;
  color: var(--muted);
  font-weight: 600;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-save {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-ohist-totals {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14.5px;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-paid {
  font-weight: 800;
  font-size: 16px;
}

body.v3-storefront[data-storefront="unified"] .d-odetail-num {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-odetail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 8px 0 16px;
  font-size: 14px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-addr-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.v3-storefront[data-storefront="unified"] .d-addr-flash {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--green-softer);
  color: var(--green-dark);
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-addr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

body.v3-storefront[data-storefront="unified"] .d-addr-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

/* DG-FORM-FIELD-VISUAL-01 — joins the shared field system (was 10px 12px /
   15px on the ~1.1:1 --line border); text-like inputs only. */
body.v3-storefront[data-storefront="unified"] .d-addr-grid input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])),
body.v3-storefront[data-storefront="unified"] .d-addr-grid select {
  min-height: var(--d-field-min-h);
  padding: var(--d-field-pad);
  border: 1px solid var(--d-field-border, var(--line));
  border-radius: var(--d-field-radius);
  background-color: #fff;
  font-family: inherit;
  font-size: var(--d-field-font-size);
  color: var(--d-field-text, var(--ink));
  box-shadow: var(--d-field-shadow-rest);
}

body.v3-storefront[data-storefront="unified"] .d-addr-grid input::placeholder {
  color: var(--d-field-placeholder);
  opacity: 1;
}

body.v3-storefront[data-storefront="unified"] .d-addr-grid input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):focus,
body.v3-storefront[data-storefront="unified"] .d-addr-grid select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: var(--d-field-glow);
}

body.v3-storefront[data-storefront="unified"] .d-addr-field.is-invalid input {
  border-color: var(--d-status-fail);
  background-color: #fff;
  box-shadow: var(--d-field-error-ring);
}

body.v3-storefront[data-storefront="unified"] .d-addr-full {
  grid-column: 1 / -1;
}

body.v3-storefront[data-storefront="unified"] .d-addr-same {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .d-rew-balnext {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-ostat-1 {
  background: #fff6e5;
  color: #8a6413;
}

body.v3-storefront[data-storefront="unified"] .d-ostat-3 {
  background: var(--berry-soft, #f8e8ee);
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .d-ostat-4 {
  background: var(--d-surface-quiet, #f3f1ec);
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-acthumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-storefront="unified"] .d-acthumbs-item {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 4px;
  background: var(--d-surface-media, var(--green-softer));
  border-radius: 10px;
}

body.v3-storefront[data-storefront="unified"] .d-acthumbs-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body.v3-storefront[data-storefront="unified"] .d-aclive-summary,
body.v3-storefront[data-storefront="unified"] .d-acpoints-note,
body.v3-storefront[data-storefront="unified"] .d-acaddr-note,
body.v3-storefront[data-storefront="unified"] .d-addr-note,
body.v3-storefront[data-storefront="unified"] .d-addr-hint,
body.v3-storefront[data-storefront="unified"] .d-addr-foot {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 600;
}

body.v3-storefront[data-storefront="unified"] .d-rew-bal {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 18px 30px;
  align-items: center;
  padding: clamp(18px, 2.2vw, 26px);
  background: linear-gradient(150deg, var(--green-dark) 0%, #3d7a34 100%);
}

body.v3-storefront[data-storefront="unified"] .d-rew-balnum {
  font-size: clamp(34px, 4.6vw, 48px);
}

body.v3-storefront[data-storefront="unified"] .d-rew-balrate {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--d-on-green-ink, #d7ecd0);
}

body.v3-storefront[data-storefront="unified"] .d-rew-balnext {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

body.v3-storefront[data-storefront="unified"] .d-rew-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
}

body.v3-storefront[data-storefront="unified"] .d-rew-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-storefront="unified"] .d-rew-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-rew-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

body.v3-storefront[data-storefront="unified"] .d-rew-act {
  gap: 0;
}

body.v3-storefront[data-storefront="unified"] .d-rew-actrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

body.v3-storefront[data-storefront="unified"] .d-rew-actrow:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

body.v3-storefront[data-storefront="unified"] .d-rew-actmark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--green-softer);
  color: var(--green-dark);
  font-size: 15px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-rew-actmark.is-out {
  background: var(--berry-soft, #f8e8ee);
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .d-rew-acttext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"] .d-rew-actlabel {
  font-size: 14px;
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-rew-actdate,
body.v3-storefront[data-storefront="unified"] .d-rew-actdate a {
  font-size: 12.5px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-rew-actdate a {
  color: var(--berry);
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-rew-actfigs {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  color: var(--green-dark);
  white-space: nowrap;
}

body.v3-storefront[data-storefront="unified"] .d-rew-actfigs strong {
  font-size: 15px;
}

body.v3-storefront[data-storefront="unified"] .d-rew-actfigs span {
  font-size: 12px;
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-rew-actfigs.is-out {
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .d-addr-locked,
body.v3-storefront[data-storefront="unified"] .d-addr-grid input.d-addr-locked {
  background: var(--d-surface-quiet, #f3f1ec);
  color: var(--muted);
  cursor: not-allowed;
}

body.v3-storefront[data-storefront="unified"] .d-addr-country {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-addr-country strong {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--d-surface-quiet, #f3f1ec);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 15px;
}

body.v3-storefront[data-storefront="unified"] .d-addr-note-card {
  background: var(--green-softer);
  box-shadow: none;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-addr-hero {
  padding: 16px 18px;
  background: linear-gradient(180deg, #fffdf8 0%, var(--green-softer) 100%);
  border: 1px solid var(--line);
  border-radius: var(--d-radius-lg);
}

body.v3-storefront[data-storefront="unified"] .d-ohist-compact .d-ohist-addr-hero .d-ohist-addrlines {
  font-size: 16px;
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-sum {
  padding-top: 4px;
}

body.v3-storefront[data-storefront="unified"] .d-acempty-inline {
  border-style: solid;
  padding: 18px 8px 8px;
  background: transparent;
  box-shadow: none;
}

body.v3-storefront[data-storefront="unified"] .d-rew {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 18px);
}

@media (max-width: 1000px) {
  body.v3-storefront[data-storefront="unified"] .d-pout,
  body.v3-storefront[data-storefront="unified"] .d-acct-body,
  body.v3-storefront[data-storefront="unified"] .d-acgrid,
  body.v3-storefront[data-storefront="unified"] .d-rew-cols,
  body.v3-storefront[data-storefront="unified"] .d-rew-bal {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-storefront="unified"] .d-acctnav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
  }

  body.v3-storefront[data-storefront="unified"] .d-acctnav-list {
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
  }

  body.v3-storefront[data-storefront="unified"] .d-acctnav-out {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
    padding-left: 12px;
    border-left: 1px solid var(--line);
    color: var(--berry);
    flex: 0 0 auto;
  }

  body.v3-storefront[data-storefront="unified"] .d-addr-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-orow-body,
  body.v3-storefront[data-storefront="unified"] .d-rew-actrow,
  body.v3-storefront[data-storefront="unified"] .d-ohist-line,
  body.v3-storefront[data-storefront="unified"] .d-rew-bal,
  body.v3-storefront[data-storefront="unified"] .d-rew-cols {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  body.v3-storefront[data-storefront="unified"] .d-acctnav-list {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  body.v3-storefront[data-storefront="unified"] .d-acctnav-link {
    white-space: nowrap;
  }
}

/* =============================================================
   PORTAL 1 STOREFRONT COMPLETION — help / FAQ / how-it-works /
   catalog trust / empty states. Tokens only. No new palette.
   ============================================================= */

body.v3-storefront[data-storefront="unified"] .d-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-storefront="unified"] .d-trust-strip li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg, #fff);
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-storefront="unified"] .d-trust-strip b {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

body.v3-storefront[data-storefront="unified"] .d-trust-strip .ico {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--green-dark);
  margin-top: 2px;
}

body.v3-storefront[data-storefront="unified"] .d-store-main .d-paymarks {
  margin: -12px 0 24px;
}

body.v3-storefront[data-v3-page="info"] .d-help-grid,
body.v3-storefront[data-v3-page="info"] .d-help-faq-more,
body.v3-storefront[data-v3-page="info"] .d-faq-foot-actions,
body.v3-storefront[data-v3-page="info"] .d-how-cta-actions,
body.v3-storefront[data-storefront="unified"] .d-how-teaser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 28px 0 24px;
}

body.v3-storefront[data-v3-page="info"] .d-help-card,
body.v3-storefront[data-v3-page="info"] .d-how-tile,
body.v3-storefront[data-v3-page="info"] .d-how-cta,
body.v3-storefront[data-storefront="unified"] .d-how-teaser-card {
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-help-card h2,
body.v3-storefront[data-v3-page="info"] .d-faq-group h2,
body.v3-storefront[data-v3-page="info"] .d-how-tile h2,
body.v3-storefront[data-v3-page="info"] .d-help-faq-head h2,
body.v3-storefront[data-v3-page="info"] .d-how-cta h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

body.v3-storefront[data-v3-page="info"] .d-help-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-help-list li,
body.v3-storefront[data-v3-page="info"] .d-help-channel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

body.v3-storefront[data-v3-page="info"] .d-help-channels {
  display: grid;
  gap: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-help-channel {
  text-decoration: none;
}

body.v3-storefront[data-v3-page="info"] .d-help-channel b {
  display: block;
}

body.v3-storefront[data-v3-page="info"] .d-help-note,
body.v3-storefront[data-v3-page="info"] .d-help-legal,
body.v3-storefront[data-v3-page="info"] .d-faq-foot p,
body.v3-storefront[data-v3-page="info"] .d-how-intro p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-help-faq,
body.v3-storefront[data-v3-page="info"] .d-faq-group,
body.v3-storefront[data-v3-page="info"] .d-faq-foot,
body.v3-storefront[data-v3-page="info"] .d-how-cta {
  margin: 36px 0 28px;
}

body.v3-storefront[data-v3-page="info"] .d-help-faq-head p,
body.v3-storefront[data-v3-page="info"] .d-how-intro p + p {
  margin-top: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-faq-tools {
  display: grid;
  gap: 14px;
  margin: 8px 0 28px;
}

body.v3-storefront[data-v3-page="info"] .d-faq-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-faq-search input {
  flex: 1;
  border: 0;
  outline: none;
  font: inherit;
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-faq-jump a {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

body.v3-storefront[data-v3-page="info"] .d-how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0 28px;
}

body.v3-storefront[data-v3-page="info"] .d-how-ico,
body.v3-storefront[data-v3-page="info"] .d-help-list .ico,
body.v3-storefront[data-v3-page="info"] .d-help-channel .ico {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--green-dark);
}

body.v3-storefront[data-v3-page="info"] .d-how-tile p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-storefront="unified"] .d-how-teaser {
  padding-top: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-how-teaser-card {
  background:
    radial-gradient(120% 100% at 88% -10%, var(--d-green-600) 0%, var(--d-green-800) 46%, var(--d-green-900) 100%);
  color: var(--d-on-green-ink, #e9f6e2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-md);
}

body.v3-storefront[data-storefront="unified"] .d-how-teaser-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 2px rgba(12, 28, 16, 0.18);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #eaf7e1;
}

body.v3-storefront[data-storefront="unified"] .d-how-teaser-badge svg {
  width: 14px;
  height: 14px;
  flex: none;
}

body.v3-storefront[data-storefront="unified"] .d-how-teaser-card h2 {
  margin: 0 0 10px;
  color: inherit;
}

body.v3-storefront[data-storefront="unified"] .d-how-teaser-card p {
  max-width: 62ch;
  color: rgba(233, 246, 226, 0.86);
}

body.v3-storefront[data-storefront="unified"] .d-how-teaser-card .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

body.v3-storefront[data-storefront="unified"] .d-empty-page {
  padding-bottom: 48px;
}

body.v3-storefront[data-storefront="unified"] .cat-overview {
  margin-top: 8px;
}

@media (max-width: 860px) {
  body.v3-storefront[data-storefront="unified"] .d-trust-strip,
  body.v3-storefront[data-v3-page="info"] .d-help-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  body.v3-storefront[data-storefront="unified"] .d-trust-strip li,
  body.v3-storefront[data-v3-page="info"] .d-help-card,
  body.v3-storefront[data-v3-page="info"] .d-how-tile {
    padding: 14px;
  }

  body.v3-storefront[data-v3-page="info"] .d-help-hero .btn-lg {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================================
   HELP / FAQ / GOAL GUIDES — visual finishing pass.
   Screenshot-driven spacing. Tokens only. No new palette.
   ============================================================= */

body.v3-storefront[data-v3-page="info"] .d-finish {
  padding-bottom: 72px;
}

body.v3-storefront[data-v3-page="info"] .d-section {
  margin: 40px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-section-intro {
  padding: 22px 24px 20px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: #fff;
  max-width: 72ch;
}

body.v3-storefront[data-v3-page="info"] .d-prose {
  max-width: 62ch;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-section h2,
body.v3-storefront[data-v3-page="info"] .d-goal-hero h1 {
  margin: 0 0 12px;
}

body.v3-storefront[data-v3-page="info"] .d-section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin: 40px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-help-hero {
  margin-bottom: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-help-hero .d-coach-hero-cta {
  margin-top: 22px;
}

body.v3-storefront[data-storefront="unified"] .d-trust-strip {
  margin: 40px 0 8px;
}

body.v3-storefront[data-v3-page="info"] .d-how-grid {
  margin: 28px 0 8px;
  gap: 18px;
}

body.v3-storefront[data-v3-page="info"] a.d-how-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  min-height: 100%;
  box-shadow: none;
  transition: border-color .15s ease, transform .15s ease;
}

body.v3-storefront[data-v3-page="info"] a.d-how-tile:hover {
  border-color: var(--green);
}

body.v3-storefront[data-v3-page="info"] .d-how-tile-go {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
}

body.v3-storefront[data-v3-page="info"] .d-section-cta,
body.v3-storefront[data-v3-page="info"] .d-help-faq-more,
body.v3-storefront[data-v3-page="info"] .d-faq-foot,
body.v3-storefront[data-v3-page="info"] .d-how-cta {
  margin: 40px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-cta {
  padding: 28px 24px 24px;
}

body.v3-storefront[data-v3-page="info"] .d-help-faq-more,
body.v3-storefront[data-v3-page="info"] .d-faq-foot-actions,
body.v3-storefront[data-v3-page="info"] .d-how-cta-actions,
body.v3-storefront[data-v3-page="info"] .d-form-actions,
body.v3-storefront[data-v3-page="info"] .d-rec-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-legal-note,
body.v3-storefront[data-v3-page="info"] .d-help-legal {
  margin: 36px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-help-faq-head {
  margin-bottom: 20px;
}

body.v3-storefront[data-v3-page="info"] .d-faq-tools {
  margin: 28px 0 12px;
  gap: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-faq-group {
  margin: 36px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-faq-acc details {
  margin-bottom: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-def-list {
  margin: 16px 0 18px;
  display: grid;
  gap: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-def-list dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-def-list dd {
  margin: 2px 0 0;
  color: var(--ink);
}

body.v3-storefront[data-v3-page="info"] .d-help-details .d-help-list {
  margin-top: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-help-form .d-form-row {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
}

/* display:grid above outranks the UA [hidden] rule (author stylesheet beats
   user-agent regardless of specificity), so the conditional order-number row
   needs its own explicit override to actually disappear when hidden. */
body.v3-storefront[data-v3-page="info"] .d-help-form .d-form-row[hidden] {
  display: none;
}

body.v3-storefront[data-v3-page="info"] .d-help-form label {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
}

body.v3-storefront[data-v3-page="info"] .d-form-note {
  font-size: 12.5px;
  color: var(--muted);
  margin: -4px 0 14px;
}

/* CP-008 dependent order block: Topic -> (select ->) manual field. No
   display rule here beyond spacing between its nested .d-form-rows, so the
   UA [hidden] rule (topic-gated visibility, applied by JS only) is never
   fought the way .d-form-row's own display:grid fights it elsewhere in
   this file. */
body.v3-storefront[data-v3-page="info"] .d-order-block > .d-form-row + .d-form-row {
  margin-top: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-order-block-note {
  font-size: 12.5px;
  color: var(--muted);
  margin: -6px 0 12px;
}

body.v3-storefront[data-v3-page="info"] .d-order-loading,
body.v3-storefront[data-v3-page="info"] .d-order-fetch-error {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
}

/* The display:flex above is an author rule, so it otherwise beats the UA
   [hidden]{display:none} rule regardless of the hidden attribute/property
   — the exact gotcha already documented elsewhere in this file. Both
   messages are toggled by JS via .hidden, so they need their own
   [hidden] override to actually disappear. */
body.v3-storefront[data-v3-page="info"] .d-order-loading[hidden],
body.v3-storefront[data-v3-page="info"] .d-order-fetch-error[hidden] {
  display: none;
}

body.v3-storefront[data-v3-page="info"] .d-order-spinner {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--d-field-border, var(--line));
  border-top-color: var(--green, #2f8f27);
  animation: d-order-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.v3-storefront[data-v3-page="info"] .d-order-spinner {
    animation-duration: 1.6s;
  }
}

@keyframes d-order-spin {
  to {
    transform: rotate(360deg);
  }
}

body.v3-storefront[data-v3-page="info"] .d-req,
body.v3-storefront[data-v3-page="info"] .d-opt {
  font-size: 12px;
  font-weight: 600;
  margin-left: 4px;
}

/* Decorative only — the real required semantics stay on the input's HTML
   `required` attribute, so this never gets announced twice by a screen reader. */
body.v3-storefront[data-v3-page="info"] .d-req {
  color: var(--berry, var(--d-status-fail));
}

body.v3-storefront[data-v3-page="info"] .d-opt {
  color: var(--muted);
}

/* DG-FORM-FIELD-VISUAL-01 — text-like inputs only (:where adds no
   specificity, so every hover/focus/invalid/readonly rule below still wins
   exactly as before); the become-member checkboxes no longer pick up the
   text-field box. */
body.v3-storefront[data-v3-page="info"] .d-help-form input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])),
body.v3-storefront[data-v3-page="info"] .d-help-form select,
body.v3-storefront[data-v3-page="info"] .d-help-form textarea {
  width: 100%;
  min-height: var(--d-field-min-h);
  padding: var(--d-field-pad);
  border: 1px solid var(--d-field-border, var(--line));
  border-radius: var(--d-field-radius);
  font: inherit;
  font-size: var(--d-field-font-size);
  background: #fff;
  color: var(--d-field-text, var(--ink));
  box-shadow: var(--d-field-shadow-rest);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.v3-storefront[data-v3-page="info"] .d-help-form input::placeholder,
body.v3-storefront[data-v3-page="info"] .d-help-form textarea::placeholder {
  color: var(--d-field-placeholder);
  opacity: 1;
}

body.v3-storefront[data-v3-page="info"] .d-help-form textarea {
  min-height: 120px;
}

body.v3-storefront[data-v3-page="info"] .d-help-form input:hover:not([readonly]):not(:disabled):not(:focus):not([aria-invalid="true"]),
body.v3-storefront[data-v3-page="info"] .d-help-form select:hover:not(:focus),
body.v3-storefront[data-v3-page="info"] .d-help-form textarea:hover:not(:focus):not([aria-invalid="true"]) {
  border-color: var(--d-field-border-hover, var(--muted));
  box-shadow: var(--d-field-shadow-hover);
}

body.v3-storefront[data-v3-page="info"] .d-help-form input:focus,
body.v3-storefront[data-v3-page="info"] .d-help-form select:focus,
body.v3-storefront[data-v3-page="info"] .d-help-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: var(--d-field-glow);
}

body.v3-storefront[data-v3-page="info"] .d-help-form input[readonly],
body.v3-storefront[data-v3-page="info"] .d-help-form input:disabled,
body.v3-storefront[data-v3-page="info"] .d-help-form select:disabled,
body.v3-storefront[data-v3-page="info"] .d-help-form textarea:disabled {
  background: var(--d-surface-quiet);
  color: var(--muted);
  border-color: var(--line);
  box-shadow: none;
}

body.v3-storefront[data-v3-page="info"] .d-help-form input:disabled,
body.v3-storefront[data-v3-page="info"] .d-help-form select:disabled,
body.v3-storefront[data-v3-page="info"] .d-help-form textarea:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

body.v3-storefront[data-v3-page="info"] .d-help-form [aria-invalid="true"] {
  border-color: var(--d-status-fail);
  background-color: #fff;
  box-shadow: var(--d-field-error-ring);
}

/* DG-FORM-FIELD-VISUAL-02 (concept F2, Mark) — field icon layer. Icons are
   decorative CSS background layers (no markup, no JS): a leading icon only
   in the auth modal (login / signup / forgot), a trailing tick or alert on
   every standard text field. Read-only and disabled fields set their own
   background, which drops the layers on purpose.
   DG-SHARED-STOREFRONT-POLISH-01: the empty leading layer is a transparent
   gradient, not `none`. Chrome cannot hold a background-image list that
   starts with `none` during the central autofill transition, so every field
   without a leading icon (help, contact, account, checkout, home register)
   lost its tick/alert on autofill; an invisible image layer keeps it. */
body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input,
body.v3-storefront[data-storefront="unified"] .d-field-input,
body.v3-storefront[data-v3-page="info"] .d-help-form input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])),
body.v3-storefront[data-storefront="unified"] .d-addr-grid input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])),
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-field input,
body.v3-storefront[data-storefront="unified"] .form-field input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])),
body.v3-storefront[data-storefront="unified"] .field-group input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])) {
  min-height: var(--d-field-min-h);
  padding-right: var(--d-field-icon-gap);
  background-image: var(--fi-lead, linear-gradient(transparent, transparent)), var(--fi-trail, none);
  background-repeat: no-repeat;
  background-position: left var(--d-field-icon-inset) center, right var(--d-field-icon-inset) center;
  background-size: 18px 18px, 18px 18px;
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input[type="email"] {
  --fi-lead: var(--d-field-ico-mail);
  padding-left: var(--d-field-icon-gap);
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input[type="email"]:focus {
  --fi-lead: var(--d-field-ico-mail-focus);
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input[type="email"][aria-invalid="true"] {
  --fi-lead: var(--d-field-ico-mail-error);
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input[type="password"] {
  --fi-lead: var(--d-field-ico-lock);
  padding-left: var(--d-field-icon-gap);
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input[type="password"]:focus {
  --fi-lead: var(--d-field-ico-lock-focus);
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input[type="password"][aria-invalid="true"] {
  --fi-lead: var(--d-field-ico-lock-error);
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field #v3-signup-name {
  --fi-lead: var(--d-field-ico-user);
  padding-left: var(--d-field-icon-gap);
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field #v3-signup-name:focus {
  --fi-lead: var(--d-field-ico-user-focus);
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field #v3-signup-name[aria-invalid="true"] {
  --fi-lead: var(--d-field-ico-user-error);
}

/* Tick: only after the visitor has left the field (:user-valid), only on
   required fields, never on passwords, read-only or server-flagged fields.
   Browsers without :user-valid simply show no tick. */
body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input:user-valid[required]:not([type="password"]):not([aria-invalid="true"]),
body.v3-storefront[data-storefront="unified"] .d-field-input:user-valid[required]:not([readonly]):not(.d-field-bad),
body.v3-storefront[data-v3-page="info"] .d-help-form input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):user-valid[required]:not([readonly]):not([aria-invalid="true"]),
body.v3-storefront[data-storefront="unified"] .d-addr-grid label:not(.is-invalid) > input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):user-valid[required]:not([readonly]),
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-field input:user-valid[required],
body.v3-storefront[data-storefront="unified"] .form-field input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):user-valid[required]:not([type="password"]):not([readonly]):not([aria-invalid="true"]),
body.v3-storefront[data-storefront="unified"] .field-group:not(.field-invalid) input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):user-valid[required]:not([type="password"]):not([readonly]):not([aria-invalid="true"]) {
  --fi-trail: var(--d-field-ico-tick);
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input:user-valid[required]:not([type="password"]):not([aria-invalid="true"]):not(:focus),
body.v3-storefront[data-storefront="unified"] .d-field-input:user-valid[required]:not([readonly]):not(.d-field-bad):not(:focus),
body.v3-storefront[data-v3-page="info"] .d-help-form input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):user-valid[required]:not([readonly]):not([aria-invalid="true"]):not(:focus),
body.v3-storefront[data-storefront="unified"] .d-addr-grid label:not(.is-invalid) > input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):user-valid[required]:not([readonly]):not(:focus),
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-field input:user-valid[required]:not(:focus),
body.v3-storefront[data-storefront="unified"] .form-field input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):user-valid[required]:not([type="password"]):not([readonly]):not([aria-invalid="true"]):not(:focus),
body.v3-storefront[data-storefront="unified"] .field-group:not(.field-invalid) input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):user-valid[required]:not([type="password"]):not([readonly]):not([aria-invalid="true"]):not(:focus) {
  border-color: var(--d-field-ok-border);
}

body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input[aria-invalid="true"],
body.v3-storefront[data-storefront="unified"] .d-field-input.d-field-bad,
body.v3-storefront[data-v3-page="info"] .d-help-form input[aria-invalid="true"],
body.v3-storefront[data-storefront="unified"] .d-addr-field.is-invalid input,
body.v3-storefront[data-storefront="unified"] .form-field input[aria-invalid="true"],
body.v3-storefront[data-storefront="unified"] .field-group input[aria-invalid="true"],
body.v3-storefront[data-storefront="unified"] .field-invalid input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])) {
  --fi-trail: var(--d-field-ico-alert);
}

/* DG-NAV-HEADER-SEARCH-01 — one autofill-safe owner for every standard text
   field. Chrome's own autofill style sets background-color AND
   background-image to !important UA values, which removed the F2 icons
   (envelope, lock, tick, alert); the old 1000px white inset shadow painted
   over them too. Transitions sit above even UA !important in the cascade,
   so an effectively endless transition keeps the white field and the icon
   layers exactly as they were when autofill kicked in. Text stays ink. */
body.v3-storefront[data-storefront="unified"] .auth-modal .form-field input:-webkit-autofill,
body.v3-storefront[data-storefront="unified"] .d-field-input:-webkit-autofill,
body.v3-storefront[data-v3-page="info"] .d-help-form input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):-webkit-autofill,
body.v3-storefront[data-storefront="unified"] .d-addr-grid input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):-webkit-autofill,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-reg-field input:-webkit-autofill,
body.v3-storefront[data-storefront="unified"] .form-field input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):-webkit-autofill,
body.v3-storefront[data-storefront="unified"] .field-group input:where([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], :not([type])):-webkit-autofill {
  -webkit-text-fill-color: var(--d-field-text, var(--ink));
  caret-color: var(--d-field-text, var(--ink));
  transition: background-color 600000s 0s, background-image 600000s 0s allow-discrete;
}

body.v3-storefront[data-v3-page="info"] .d-field-hint,
body.v3-storefront[data-v3-page="info"] .d-field-error {
  font-size: 12px;
  line-height: 1.4;
}

body.v3-storefront[data-v3-page="info"] .d-field-error {
  color: var(--d-status-fail);
  font-weight: 700;
}

body.v3-storefront[data-v3-page="info"] .d-form-actions {
  margin-top: 8px;
  padding-top: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-form-banner,
body.v3-storefront[data-v3-page="info"] .d-form-success {
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-form-banner {
  background: #fff4f0;
  border: 1px solid #f0c2b6;
}

body.v3-storefront[data-v3-page="info"] .d-form-success {
  background: #f3f8ef;
  border: 1px solid var(--line);
}

body.v3-storefront[data-v3-page="info"] .d-form-success h3 {
  margin: 0 0 8px;
}

body.v3-storefront[data-v3-page="info"] .d-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

body.v3-storefront[data-v3-page="info"] .d-signal-list,
body.v3-storefront[data-v3-page="info"] .d-day-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  max-width: 62ch;
}

body.v3-storefront[data-v3-page="info"] .d-signal-list li,
body.v3-storefront[data-v3-page="info"] .d-day-list li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-size: 14px;
  line-height: 1.45;
}

body.v3-storefront[data-v3-page="info"] .d-day-list b {
  display: block;
  margin-bottom: 4px;
}

body.v3-storefront[data-v3-page="info"] .d-goal-hero {
  padding: 28px 28px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  max-width: none;
}

body.v3-storefront[data-v3-page="info"] .d-goal-not li {
  background: #f7f6f3;
}

body.v3-storefront[data-v3-page="info"] .d-rec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-rec-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-rec-media img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: #f7f6f3;
  border-radius: var(--radius);
}

body.v3-storefront[data-v3-page="info"] .d-rec-body h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

body.v3-storefront[data-v3-page="info"] .d-rec-flag {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--green-dark);
}

body.v3-storefront[data-v3-page="info"] .d-rec-price {
  margin: 10px 0 14px;
}

body.v3-storefront[data-v3-page="info"] .d-section-more {
  margin: 16px 0 0;
}

body.v3-storefront[data-storefront="unified"] .d-cta-on-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--d-green-900, #14301c);
  border: 1.5px solid #fff;
  font-weight: 700;
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-cta-on-green:hover {
  background: #f3f8ef;
  color: var(--d-green-900, #14301c);
}

body.v3-storefront[data-storefront="unified"] .d-how-teaser-actions {
  margin-top: 20px;
}

@media (max-width: 1280px) {
  body.v3-storefront[data-v3-page="info"] .d-rec-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  body.v3-storefront[data-v3-page="info"] .d-section-split,
  body.v3-storefront[data-v3-page="info"] .d-rec-card {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-cta-actions .btn-lg,
  body.v3-storefront[data-v3-page="info"] .d-help-faq-more .btn,
  body.v3-storefront[data-v3-page="info"] .d-faq-foot-actions .btn {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  body.v3-storefront[data-v3-page="info"] .d-finish {
    padding-bottom: 56px;
  }

  body.v3-storefront[data-v3-page="info"] .d-section,
  body.v3-storefront[data-v3-page="info"] .d-section-split {
    margin-top: 32px;
  }

  body.v3-storefront[data-v3-page="info"] .d-goal-hero,
  body.v3-storefront[data-v3-page="info"] .d-section-intro {
    padding: 18px 16px;
  }
}

@media (max-width: 390px) {
  body.v3-storefront[data-v3-page="info"] .d-rec-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-cta-actions .btn,
  body.v3-storefront[data-v3-page="info"] .d-rec-actions .btn {
    width: 100%;
  }
}

/* =============================================================
   FINAL VISUAL + CONTACT + FAQ POLISH
   Shared gutters, trust strip, Help details, How-it-works family.
   Tokens only. No new palette. No global rewrite.
   ============================================================= */

body.v3-storefront {
  --page-gutter: 20px;
  --section-gap: 48px;
}

@media (min-width: 768px) {
  body.v3-storefront {
    --page-gutter: 24px;
  }
}

@media (min-width: 1280px) {
  body.v3-storefront {
    --page-gutter: 28px;
  }
}

body.v3-storefront .container {
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

body.v3-storefront[data-v3-page="info"] .eyebrow,
body.v3-storefront[data-v3-page="info"] .d-def-list dt {
  letter-spacing: .08em;
  font-weight: 800;
  color: var(--green-dark, #1f4d2a);
}

body.v3-storefront[data-v3-page="info"] .d-def-list {
  gap: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-def-list dd {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.45;
}

body.v3-storefront[data-v3-page="info"] .d-contact-link {
  color: var(--green-dark, #1f4d2a);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.v3-storefront[data-v3-page="info"] .d-contact-link:hover,
body.v3-storefront[data-v3-page="info"] .d-contact-link:focus-visible {
  color: var(--green, #2f8f27);
  outline: 2px solid var(--green, #2f8f27);
  outline-offset: 2px;
}

body.v3-storefront[data-v3-page="info"] address.d-postal {
  font-style: normal;
  display: block;
  line-height: 1.45;
}

body.v3-storefront[data-v3-page="info"] .d-help-col {
  display: grid;
  gap: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-help-tips h2 {
  margin-bottom: 12px;
}

body.v3-storefront[data-storefront="unified"] .d-trust-strip {
  margin: 36px 0 16px;
  padding: 8px;
  border-radius: calc(var(--radius) + 8px);
  background: #f3f8ef;
  border: 1px solid rgba(47, 143, 39, 0.16);
  box-shadow: 0 8px 24px rgba(20, 48, 28, 0.06);
}

body.v3-storefront[data-storefront="unified"] .d-trust-strip li {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(47, 143, 39, 0.14);
  align-items: flex-start;
}

body.v3-storefront[data-storefront="unified"] .d-trust-strip b {
  overflow-wrap: anywhere;
}

body.v3-storefront[data-storefront="unified"] .d-trust-strip .ico {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 8px;
  background: #e7f3e4;
  color: var(--green-dark, #1f4d2a);
}

body.v3-storefront[data-storefront="unified"] .d-how-teaser {
  padding-top: 48px;
  padding-bottom: 8px;
  margin: 0 0 8px;
}

body.v3-storefront[data-storefront="unified"] .d-cta-ghost-on-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  color: #f4faf0;
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  font-weight: 700;
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-cta-ghost-on-green:hover,
body.v3-storefront[data-storefront="unified"] .d-cta-ghost-on-green:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .d-store-main .d-catalog-ranges {
  margin-top: 8px;
}

/* DG-HERO-CATALOG-CART-POLISH-30A (Mark) — catalog discovery strip above the ranges: the homepage How It Works surface
   (cream → light green, hairline green edge, round icon well) as one compact full-width row; wraps naturally on phones. */
body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] .d-catalog-howstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 18px;
  padding: 10px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f7f5ee 0%, #eef6ea 100%);
  border: 1px solid rgba(31, 74, 27, 0.1);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] .d-catalog-howstrip-ico {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e3f0de;
  color: var(--green-dark, #1f4a1b);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] .d-catalog-howstrip-ico svg {
  width: 17px;
  height: 17px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] .d-catalog-howstrip-text {
  margin: 0;
  color: var(--ink, #1c2a1a);
  font-size: 15px;
  font-weight: 600;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] .d-catalog-howstrip-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-left: auto;
  color: var(--green-dark, #1f4a1b);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] .d-catalog-howstrip-link [data-ico],
body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] .d-catalog-howstrip-link svg {
  width: 16px;
  height: 16px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] .d-catalog-howstrip-link:focus-visible {
  outline: 3px solid var(--green, #2f8f27);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (max-width: 560px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] .d-catalog-howstrip-link {
    margin-left: 44px;
  }
}

body.v3-storefront[data-v3-page="info"] .d-how-hero {
  padding: 28px 28px 24px;
  border-radius: calc(var(--radius) + 8px);
  background:
    radial-gradient(120% 100% at 88% -10%, var(--d-green-600, #2f6b38) 0%, var(--d-green-800, #1c3f24) 46%, var(--d-green-900, #14301c) 100%);
  color: #e9f6e2;
  border: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-hero h1,
body.v3-storefront[data-v3-page="info"] .d-how-hero .eyebrow,
body.v3-storefront[data-v3-page="info"] .d-how-hero p {
  color: inherit;
}

body.v3-storefront[data-v3-page="info"] .d-goal-hero-family {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(160px, 220px);
  gap: 24px;
  align-items: center;
  padding: 28px 28px 24px;
  border-radius: calc(var(--radius) + 8px);
  background:
    radial-gradient(120% 100% at 88% -10%, var(--d-green-600, #2f6b38) 0%, var(--d-green-800, #1c3f24) 46%, var(--d-green-900, #14301c) 100%);
  color: #e9f6e2;
  border: 0;
  max-width: none;
}

body.v3-storefront[data-v3-page="info"] .d-goal-hero-family h1,
body.v3-storefront[data-v3-page="info"] .d-goal-hero-family .eyebrow,
body.v3-storefront[data-v3-page="info"] .d-goal-hero-family .d-prose {
  color: inherit;
}

body.v3-storefront[data-v3-page="info"] .d-goal-hero-visual,
body.v3-storefront[data-v3-page="info"] .d-day-visual,
body.v3-storefront[data-v3-page="info"] .d-how-intro-media {
  display: grid;
  place-items: center;
  min-height: 180px;
  border-radius: calc(var(--radius) + 4px);
  background: rgba(255, 255, 255, 0.08);
}

body.v3-storefront[data-v3-page="info"] .d-goal-hero-visual img,
body.v3-storefront[data-v3-page="info"] .d-how-intro-media img {
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
}

body.v3-storefront[data-v3-page="info"] .d-goal-visual-ph,
body.v3-storefront[data-v3-page="info"] .d-day-visual-mark {
  width: 64px;
  height: 64px;
  color: #e9f6e2;
}

body.v3-storefront[data-v3-page="info"] .d-split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--d-info-grid-gap, 20px);
  margin-top: var(--section-gap);
}

body.v3-storefront[data-v3-page="info"] .d-panel,
body.v3-storefront[data-v3-page="info"] .d-panel-wide {
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-grid,
body.v3-storefront[data-v3-page="info"] .d-how-index .d-section-cta {
  margin-top: var(--section-gap);
}

body.v3-storefront[data-v3-page="info"] .d-day-visual {
  background: #f3f8ef;
  color: var(--ink);
  text-align: center;
  padding: 28px 22px;
}

body.v3-storefront[data-v3-page="info"] .d-day-visual-mark {
  color: var(--green-dark, #1f4d2a);
  margin-bottom: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-how-intro-media {
  background: #f3f8ef;
  overflow: hidden;
}

body.v3-storefront[data-v3-page="info"] .d-how-intro-media figcaption {
  padding: 10px 14px 14px;
  font-size: 13px;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-how-cta-panel {
  padding: 0;
}

body.v3-storefront[data-v3-page="info"] .d-rec-grid {
  align-items: stretch;
}

body.v3-storefront[data-v3-page="info"] .d-rec-card {
  min-height: 100%;
  box-shadow: 0 6px 18px rgba(20, 48, 28, 0.05);
}

body.v3-storefront[data-v3-page="info"] .d-rec-body {
  display: flex;
  flex-direction: column;
}

body.v3-storefront[data-v3-page="info"] .d-rec-actions {
  margin-top: auto;
}

body.v3-storefront[data-v3-page="info"] .d-faq-search {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-faq-search input {
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-faq-clear,
body.v3-storefront[data-v3-page="info"] .d-faq-chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
}

body.v3-storefront[data-v3-page="info"] .d-faq-chip.is-active,
body.v3-storefront[data-v3-page="info"] .d-faq-chip[aria-pressed="true"] {
  background: #e7f3e4;
  border-color: rgba(47, 143, 39, 0.28);
  color: var(--green-dark, #1f4d2a);
}

body.v3-storefront[data-v3-page="info"] .d-faq-count {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .is-faq-active > summary,
body.v3-storefront .sr-item.is-active {
  background: var(--green-softer, #e7f3e4);
  outline: 2px solid var(--green, #2f8f27);
  outline-offset: -2px;
}

@media (max-width: 860px) {
  body.v3-storefront[data-v3-page="info"] .d-split-2,
  body.v3-storefront[data-v3-page="info"] .d-goal-hero-family {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  body.v3-storefront[data-v3-page="info"] .d-how-hero,
  body.v3-storefront[data-v3-page="info"] .d-goal-hero-family,
  body.v3-storefront[data-v3-page="info"] .d-panel,
  body.v3-storefront[data-v3-page="info"] .d-panel-wide {
    padding: 18px 16px;
  }
}

/* =============================================================
   HELP / INFO FAMILY — final visual system
   ============================================================= */

html {
  scroll-padding-top: var(--v2-anchor-offset, calc(var(--chrome-top, 80px) + 16px));
}

.d-anchor {
  scroll-margin-top: var(--v2-anchor-offset, calc(var(--chrome-top, 80px) + 16px));
}

/* Shared WhatsApp CTA — one implementation for every V2 page.
   Markup comes from views/partials/v3/whatsapp-button.php, the glyph from the
   official Meta asset in assets/img/v3/brand/whatsapp/ (see its SOURCE.md).
   Mark chose white label text on #25D366. That pair is ~1.98:1 (below WCAG AA
   for body text); the official white glyph and the brand green stay as-is.
   --wa-ink is kept for the focus ring, not for the label. */
:root {
  --wa-green: #25d366;
  --wa-green-hover: #3add7a;
  --wa-green-active: #1cb757;
  --wa-ink: #052e1c;
  --wa-label: #ffffff;
}

.btn.d-cta-whatsapp,
.d-cta-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wa-green);
  color: var(--wa-label);
  border: 0;
  font-weight: 700;
  /* The green fill alone is only 1.83:1 on the page canvas, so the rim carries
     the button edge there: 3.07:1 on the canvas and 3.32:1 on a white card. On
     the dark CTA bands the fill itself is 3.87:1 and needs no help. The outer
     shadow only lifts the button; it is not load-bearing for contrast. */
  box-shadow: inset 0 0 0 1px rgba(5, 46, 28, 0.3), 0 4px 12px rgba(5, 46, 28, 0.16);
}

.btn.d-cta-whatsapp:hover,
.d-cta-whatsapp:hover {
  background: var(--wa-green-hover);
  color: var(--wa-label);
}

.btn.d-cta-whatsapp:active,
.d-cta-whatsapp:active {
  background: var(--wa-green-active);
  color: var(--wa-label);
}

.btn.d-cta-whatsapp:disabled,
.d-cta-whatsapp:disabled,
.btn.d-cta-whatsapp[aria-disabled="true"],
.d-cta-whatsapp[aria-disabled="true"] {
  background: var(--wa-green);
  color: var(--wa-label);
  opacity: 0.72;
}

/* Dual ring so focus stays visible on the light page canvas and on the dark
   green CTA bands alike. */
.btn.d-cta-whatsapp:focus-visible,
.d-cta-whatsapp:focus-visible {
  color: var(--wa-label);
  outline: 3px solid var(--wa-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(5, 46, 28, 0.3);
}

.btn.d-cta-whatsapp,
.btn.d-cta-whatsapp:hover,
.btn.d-cta-whatsapp:active,
.btn.d-cta-whatsapp:focus-visible,
.d-cta-whatsapp span:not([data-ico]):not(.d-wa-glyph):not(.ico) {
  color: var(--wa-label);
}

.d-cta-whatsapp .ico,
.d-cta-whatsapp .d-wa-glyph,
.d-cta-whatsapp [data-ico="whatsapp"] {
  width: 20px;
  height: 20px;
  flex: none;
  /* Official white glyph variant on the official green. */
  color: #ffffff;
}

.d-cta-whatsapp.btn-lg .ico,
.d-cta-whatsapp.btn-lg .d-wa-glyph,
.d-cta-whatsapp.btn-lg [data-ico="whatsapp"] {
  width: 22px;
  height: 22px;
}

/* Standalone WhatsApp channel icons keep the official green variant rather
   than inheriting the surrounding ink colour. */
.d-channel-row .d-icon-well [data-ico="whatsapp"] {
  color: var(--wa-green);
}

body.v3-storefront[data-v3-page="info"] {
  /* DG-MOBILE-STOREFRONT-POLISH-20G: every info page reads the one storefront section gap (v3-design-tokens.css). */
  --d-info-section: var(--d-section-gap);
  --d-info-section-sm: clamp(32px, 4vw, 48px);
  --d-info-card-pad: clamp(20px, 2.4vw, 28px);
  --d-info-measure: 62ch;
  --d-info-grid-gap: clamp(22px, 3vw, 36px);
  --d-info-head-gap: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-link-underline {
  color: var(--green, #2f8f27);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

body.v3-storefront[data-v3-page="info"] .d-link-underline:hover {
  color: var(--green-dark, #1f6a1a);
}

body.v3-storefront[data-v3-page="info"] .d-link-underline:focus-visible {
  outline: 2px solid var(--green, #2f8f27);
  outline-offset: 3px;
  border-radius: 2px;
}

body.v3-storefront[data-v3-page="info"] .d-info-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0 0 10px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: rgba(232, 244, 220, 0.94);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.v3-storefront[data-v3-page="info"] .d-info-eyebrow .ico {
  width: 14px;
  height: 14px;
  opacity: 0.92;
}

body.v3-storefront[data-v3-page="info"] .d-section {
  margin-top: var(--d-info-section);
}

body.v3-storefront[data-v3-page="info"] .d-section-tight {
  margin-top: clamp(22px, 3vw, 36px);
}

body.v3-storefront[data-v3-page="info"] .d-channel-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-official-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

body.v3-storefront[data-v3-page="info"] .d-official-links a {
  font-weight: 700;
  color: var(--berry, #b31e82);
}

body.v3-storefront[data-v3-page="info"] .d-prose {
  max-width: var(--d-info-measure);
}

body.v3-storefront[data-v3-page="info"] .d-help-card,
body.v3-storefront[data-v3-page="info"] .d-panel {
  padding: var(--d-info-card-pad);
}

body.v3-storefront[data-v3-page="info"] .d-panel-tint {
  background: #eef6ea;
  border-color: rgba(47, 143, 39, 0.14);
}

body.v3-storefront[data-v3-page="info"] .d-how-tile {
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body.v3-storefront[data-v3-page="info"] .d-how-tile:nth-child(3n+1) .d-how-ico,
body.v3-storefront[data-v3-page="info"] .d-how-tile:nth-child(3n+2) .d-how-ico,
body.v3-storefront[data-v3-page="info"] .d-how-tile:nth-child(3n) .d-how-ico {
  background: color-mix(in srgb, var(--tone, #2f8f27) 16%, #fff);
}

body.v3-storefront[data-v3-page="info"] .d-how-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(20, 48, 28, 0.08);
  border-color: rgba(47, 143, 39, 0.28);
}

body.v3-storefront[data-v3-page="info"] .d-how-tile-go {
  color: var(--berry, #b31e82);
  font-weight: 800;
}

body.v3-storefront[data-v3-page="info"] .d-rec-media img {
  width: 100%;
  height: 168px;
  object-fit: contain;
}

body.v3-storefront[data-v3-page="info"] .d-help-faq-head {
  margin-bottom: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-def-list dt {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-def-list dd {
  font-weight: 700;
}

body.v3-storefront[data-v3-page="info"] .d-finish {
  padding-bottom: clamp(40px, 6vw, 72px);
}

/* =============================================================
   HELP / INFO FAMILY — post-QA v0 visual system
   ============================================================= */

body.v3-storefront[data-v3-page="info"] {
  --d-info-gutter: clamp(20px, 3vw, 28px);
}

body.v3-storefront[data-v3-page="info"] .info-page.d-page-gutter {
  padding-inline: var(--d-info-gutter);
}

body.v3-storefront[data-v3-page="info"] .d-info-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0;
  margin: 0 0 10px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #9fe07a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.v3-storefront[data-v3-page="info"] .d-info-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.5;
}

body.v3-storefront[data-v3-page="info"] .d-info-eyebrow .ico,
body.v3-storefront[data-v3-page="info"] .d-info-eyebrow [data-ico] {
  display: none;
}

body.v3-storefront[data-v3-page="info"] .d-info-eyebrow-ink {
  color: var(--green-dark, #1f4a1b);
}

/* Cream hover flickered because `.btn` transitions `background` (0.15s) while
   `.d-btn-cream` uses a linear-gradient. Gradient → solid `#fff` cannot
   interpolate, so the browser flashed (often through transparent) and the
   hover colour never held. Keep a solid fallback colour and do not transition
   background-image. */
body.v3-storefront[data-v3-page="info"] .d-btn-cream {
  background-color: #f0f7e9;
  background-image: linear-gradient(180deg, #ffffff 0%, #f0f7e9 100%);
  color: var(--d-green-900, #1f4a1b);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 16px rgba(10, 36, 14, 0.28);
  transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

body.v3-storefront[data-v3-page="info"] .d-btn-cream:hover,
body.v3-storefront[data-v3-page="info"] .d-btn-cream:focus-visible {
  background-color: #ffffff;
  background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  color: var(--d-green-900, #1f4a1b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 20px rgba(10, 36, 14, 0.22);
}

body.v3-storefront[data-v3-page="info"] .d-btn-cream:active {
  background-color: #eaf3e2;
  background-image: linear-gradient(180deg, #eaf3e2 0%, #eaf3e2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 10px rgba(10, 36, 14, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  body.v3-storefront[data-v3-page="info"] .d-btn-cream {
    transition: none;
  }
}

body.v3-storefront[data-v3-page="info"] .d-surf-dark {
  position: relative;
  overflow: hidden;
  color: #fff;
  border: 1px solid var(--d-green-hairline, rgba(255, 255, 255, 0.18));
  border-radius: var(--d-radius-lg, 22px);
  background: var(--d-info-panel-gradient); /* DG-INFO-GREEN-PANEL-GRADIENT-32A: the shared info panel gradient (tokens) */
  box-shadow: var(--d-info-panel-shadow); /* DG-INFO-PANEL-DEPTH-32B: one shared soft lift (tokens) */
}

body.v3-storefront[data-v3-page="info"] .d-hero-split {
  display: grid;
  align-items: stretch;
  grid-template-columns: 1.05fr 0.95fr;
}

body.v3-storefront[data-v3-page="info"] .d-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(28px, 4vw, 48px);
}

body.v3-storefront[data-v3-page="info"] .d-hero-copy h1 {
  color: #fff;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.04;
}

body.v3-storefront[data-v3-page="info"] .d-hero-copy p {
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}

body.v3-storefront[data-v3-page="info"] .d-hero-media {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  background: var(--d-green-900, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-hero-split .d-hero-media {
  min-height: 0;
}

body.v3-storefront[data-v3-page="info"] .d-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.v3-storefront[data-v3-page="info"] .d-hero-split .d-hero-media img {
  position: absolute;
  inset: 0;
}

/* DG-INFO-HERO-FADE-HELP-SIZE-32 (Mark): info-page hero photos are clean — the former 42% green left fade
   (.d-hero-media::after) is removed at source on every breakpoint; the copy keeps its own panel. */

body.v3-storefront[data-v3-page="info"] .d-info-head {
  display: flex;
  flex-direction: column;
  gap: var(--d-info-head-gap, 10px);
  margin-bottom: clamp(18px, 2.4vw, 28px);
  max-width: 64ch;
}

body.v3-storefront[data-v3-page="info"] .d-info-head-center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

body.v3-storefront[data-v3-page="info"] .d-info-head h2 {
  font-size: var(--d-h2-section);
  line-height: 1.1;
}

body.v3-storefront[data-v3-page="info"] .d-info-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--d-info-card-pad, clamp(20px, 2.6vw, 30px));
  background: #fff;
  border: 1px solid var(--line, #e4e8df);
  border-radius: var(--d-radius-lg, 22px);
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-v3-page="info"] .d-info-card-soft {
  background: #eef6ea;
  border-color: rgba(47, 143, 39, 0.16);
}

body.v3-storefront[data-v3-page="info"] .d-info-card-lg {
  padding: clamp(24px, 3vw, 40px);
}

body.v3-storefront[data-v3-page="info"] .d-key-panel {
  border-radius: var(--d-radius-lg, 22px);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(90, 177, 32, 0.12) 0%, transparent 60%),
    #eef6ea;
  border: 1px solid rgba(47, 143, 39, 0.16);
  padding: clamp(22px, 3vw, 36px);
}

body.v3-storefront[data-v3-page="info"] .d-icon-well {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 15px;
  background: #e7f3e4;
  color: var(--d-green-900, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-icon-well-sm {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

body.v3-storefront[data-v3-page="info"] .d-icon-well-berry {
  background: #f6e8f1;
  color: var(--berry, #b31e82);
}

body.v3-storefront[data-v3-page="info"] .d-icon-well-white {
  background: #fff;
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-v3-page="info"] .d-step-grid,
body.v3-storefront[data-v3-page="info"] .d-tip-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr);
}

body.v3-storefront[data-v3-page="info"] .d-step-kicker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-green-900, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-goal-grid {
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: repeat(4, 1fr);
}

body.v3-storefront[data-v3-page="info"] .d-goal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 22px 22px 20px;
  border-radius: var(--d-radius-lg, 22px);
  background: #fff;
  border: 1px solid var(--line, #e4e8df);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body.v3-storefront[data-v3-page="info"] .d-goal-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--tone, #2f8f27);
}

body.v3-storefront[data-v3-page="info"] .d-goal-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

body.v3-storefront[data-v3-page="info"] .d-goal-card-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tone, #2f8f27) 16%, #fff);
  color: color-mix(in srgb, var(--tone, #2f8f27) 72%, #000);
}

body.v3-storefront[data-v3-page="info"] .d-goal-card h2 {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
}

body.v3-storefront[data-v3-page="info"] .d-goal-card p {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-goal-card-go {
  font-size: 13.5px;
  font-weight: 800;
  color: color-mix(in srgb, var(--tone, #2f8f27) 72%, #000);
}

body.v3-storefront[data-v3-page="info"] .d-cta-band {
  overflow: hidden;
  border-radius: var(--d-radius-lg, 22px);
  padding: clamp(28px, 4vw, 52px);
  color: #fff;
  border: 1px solid var(--d-green-hairline, rgba(255, 255, 255, 0.18));
  background: var(--d-info-panel-gradient); /* DG-INFO-GREEN-PANEL-GRADIENT-32A */
  box-shadow: var(--d-info-panel-shadow); /* DG-INFO-PANEL-DEPTH-32B */
}

body.v3-storefront[data-v3-page="info"] .d-cta-band-split {
  display: grid;
  align-items: center;
  gap: 32px;
  grid-template-columns: 1.4fr 0.9fr;
}

body.v3-storefront[data-v3-page="info"] .d-cta-band-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.v3-storefront[data-v3-page="info"] .d-cta-band h2 {
  color: #fff;
  font-size: clamp(24px, 3.2vw, 36px);
}

body.v3-storefront[data-v3-page="info"] .d-cta-band p {
  max-width: 54ch;
  color: rgba(255, 255, 255, 0.8);
}

body.v3-storefront[data-v3-page="info"] .d-cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-cta-band-media {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

body.v3-storefront[data-v3-page="info"] .d-cta-band-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.v3-storefront[data-v3-page="info"] .d-editorial {
  display: grid;
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  grid-template-columns: 1fr 1fr;
}

body.v3-storefront[data-v3-page="info"] .d-takeaway {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-height: 100%;
  padding: 32px;
  border-radius: var(--d-radius-lg, 22px);
  color: #fff;
  background: linear-gradient(160deg, var(--tone, #2f8f27) 0%, color-mix(in srgb, var(--tone, #2f8f27) 55%, #0f1712) 100%);
}

body.v3-storefront[data-v3-page="info"] .d-route-pair {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

body.v3-storefront[data-v3-page="info"] .d-route-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 100%;
}

body.v3-storefront[data-v3-page="info"] .d-route-price {
  margin-top: auto;
  border-radius: 14px;
  border: 1px solid var(--line, #e4e8df);
  background: #eef6ea;
  padding: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-route-price b {
  font-size: 26px;
}

body.v3-storefront[data-v3-page="info"] .d-member-faq .acc {
  margin-top: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-signpost {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-signpost-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 1000px) {
  body.v3-storefront[data-v3-page="info"] .d-hero-split,
  body.v3-storefront[data-v3-page="info"] .d-cta-band-split,
  body.v3-storefront[data-v3-page="info"] .d-editorial,
  body.v3-storefront[data-v3-page="info"] .d-route-pair,
  body.v3-storefront[data-v3-page="info"] .d-step-grid,
  body.v3-storefront[data-v3-page="info"] .d-tip-grid,
  body.v3-storefront[data-v3-page="info"] .d-goal-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-hero-split,
  body.v3-storefront[data-v3-page="info"] .d-cta-band-split,
  body.v3-storefront[data-v3-page="info"] .d-editorial,
  body.v3-storefront[data-v3-page="info"] .d-route-pair,
  body.v3-storefront[data-v3-page="info"] .d-step-grid,
  body.v3-storefront[data-v3-page="info"] .d-tip-grid,
  body.v3-storefront[data-v3-page="info"] .d-goal-grid,
  body.v3-storefront[data-v3-page="info"] .d-section-split,
  body.v3-storefront[data-v3-page="info"] .d-split-2 {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-hero-media,
  body.v3-storefront[data-v3-page="info"] .d-hero-split .d-hero-media {
    min-height: 280px;
    max-height: 280px;
  }

  body.v3-storefront[data-v3-page="info"] .d-hero-split .d-hero-media img {
    position: absolute;
    inset: 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-cta-band-media {
    display: none;
  }

  /* CP-012A: Mark's Story CTA band keeps its together-photo visible on
     mobile; every other .d-cta-band-media stays hidden per the rule above. */
  /* DG-MOBILE-STOREFRONT-POLISH-20B: the frame follows the photo's 7/8 (no fixed 1/1 box). */
  #d-story-together .d-cta-band-media {
    display: block;
  }

  body.v3-storefront[data-v3-page="info"] .d-signpost {
    align-items: stretch;
  }
}

body.v3-storefront[data-v3-page="info"] .d-surf-dark .btn-outline,
body.v3-storefront[data-v3-page="info"] .d-cta-band .btn-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}

body.v3-storefront[data-v3-page="info"] .d-surf-dark .btn-outline:hover,
body.v3-storefront[data-v3-page="info"] .d-surf-dark .btn-outline:focus-visible,
body.v3-storefront[data-v3-page="info"] .d-cta-band .btn-outline:hover,
body.v3-storefront[data-v3-page="info"] .d-cta-band .btn-outline:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-step-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

body.v3-storefront[data-v3-page="info"] .d-section > .d-info-head + .d-section-split,
body.v3-storefront[data-v3-page="info"] .d-editorial.d-split-2 {
  margin-top: 0;
}

body.v3-storefront[data-v3-page="info"] .d-faq .d-faq-tools,
body.v3-storefront[data-v3-page="info"] .d-faq #d-faq-results,
body.v3-storefront[data-v3-page="info"] .d-faq .d-faq-empty {
  max-width: 820px;
  margin-inline: auto;
}

body.v3-storefront[data-v3-page="info"] .d-faq-acc details[open] {
  background: #f7fbf4;
}

body.v3-storefront[data-v3-page="info"] .d-key-panel {
  --tone-mix: color-mix(in srgb, var(--tone, #2f8f27) 16%, transparent);
  background:
    radial-gradient(120% 130% at 100% 0%, var(--tone-mix) 0%, transparent 60%),
    #eef6ea;
}

@media (max-width: 1000px) {
  body.v3-storefront[data-v3-page="info"] .d-step-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-step-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  body.v3-storefront[data-v3-page="info"] .info-page.d-page-gutter {
    padding-inline: 20px;
  }

  body.v3-storefront[data-v3-page="info"] .d-hero-copy,
  body.v3-storefront[data-v3-page="info"] .d-cta-band {
    padding: 24px 20px;
  }
}

/* =============================================================
   POST-PREVIEW QA — goal recommendation module (not a leftover hero)
   ============================================================= */

body.v3-storefront[data-v3-page="info"] .d-section-products.d-rec-module {
  display: block;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  align-items: unset;
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-info-eyebrow-ink {
  color: var(--green-dark, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-prose,
body.v3-storefront[data-v3-page="info"] .d-rec-module h2 {
  color: var(--ink, #171d18);
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
  align-items: stretch;
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid[data-count="1"] {
  max-width: 720px;
}

@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid[data-count="3"],
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid[data-count="4"],
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid[data-count="5"],
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid[data-count="6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid[data-count="3"],
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid[data-count="4"],
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid[data-count="5"],
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid[data-count="6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line, #e4e7df);
  border-radius: calc(var(--radius, 16px) + 4px);
  box-shadow: 0 8px 22px rgba(20, 48, 28, 0.06);
}

@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid[data-count="1"] .d-rec-card {
    grid-template-columns: 168px minmax(0, 1fr);
    align-items: center;
  }
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 168px;
  aspect-ratio: 1;
  margin: 0 auto;
  background: #f7f6f3;
  border-radius: var(--radius, 16px);
}

@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid[data-count="1"] .d-rec-media {
    margin: 0;
  }
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-media img {
  width: 140px;
  height: 140px;
  max-width: 100%;
  object-fit: contain;
  background: transparent;
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-body h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-body p {
  margin: 0;
  line-height: 1.5;
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-actions .btn {
  width: auto;
  min-width: 0;
}

@media (max-width: 390px) {
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-actions .btn {
    width: 100%;
  }
}

/* Help recent-order smart picker */
.d-help-order-picker {
  position: relative;
}

.d-help-order-picker .d-hop-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.d-hop-btn {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--d-field-border, var(--line, #e4e7df));
  border-radius: var(--radius-sm, 10px);
  padding: 11px 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-shadow: var(--d-field-shadow-rest);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.d-hop-btn:hover:not(:disabled) {
  border-color: var(--d-field-border-hover, var(--muted));
  box-shadow: var(--d-field-shadow-hover);
}

.d-help-order-picker.is-open .d-hop-btn,
.d-hop-btn:focus-visible {
  outline: none;
  border-color: var(--green, #2f8f27);
  box-shadow: var(--d-field-glow);
}

.d-hop-btn-txt {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--d-field-text, var(--ink));
}

.d-hop-btn.is-placeholder .d-hop-btn-txt {
  color: var(--muted, #5b6358);
  font-weight: 600;
}

.d-hop-caret {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted, #5b6358);
}

.d-help-order-picker.is-open .d-hop-caret {
  transform: rotate(180deg);
}

.d-hop-list {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: none;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line, #e4e7df);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(20, 40, 20, 0.16);
}

.d-help-order-picker.is-open .d-hop-list {
  display: block;
}

.d-help-order-picker.is-open-up .d-hop-list {
  top: auto;
  bottom: calc(100% + 6px);
}

.d-hop-opt {
  width: 100%;
  display: block;
  text-align: left;
  background: none;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink, #171d18);
}

.d-hop-opt:hover,
.d-hop-opt:focus,
.d-hop-opt[aria-selected="true"] {
  background: var(--green-softer, #e7f3e4);
  outline: none;
}

/* =============================================================
   GOAL GUIDE LOCAL POLISH — editorial rhythm, FAQ canvas, nav
   Scoped to .d-how-goal / header-drawer. No product logic change.
   ============================================================= */

body.v3-storefront[data-v3-page="info"] .d-how-goal {
  --d-goal-section: var(--d-info-section);
  --d-goal-section-tight: var(--d-info-section-sm);
  --d-goal-grid-gap: clamp(28px, 3.6vw, 48px);
  --d-goal-measure: 70ch;
  --d-how-space-follow: 20px;
  --d-how-space-sub: clamp(32px, 3.6vw, 44px);
  --d-how-space-major: var(--d-goal-section);
}

body.v3-storefront[data-v3-page="info"] .d-how-goal > .d-section {
  margin-top: var(--d-goal-section);
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--d-goal-grid-gap);
  align-items: start;
  margin-top: var(--d-goal-section);
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-pair-day {
  margin-top: var(--d-goal-section-tight);
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-pair-notes {
  padding-top: 4px;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-section h2 {
  margin: 0 0 var(--d-info-head-gap, 12px);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.2;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-prose {
  max-width: var(--d-goal-measure);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* Who this is for — scan list, not pill controls */
body.v3-storefront[data-v3-page="info"] .d-how-goal .d-who-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
  max-width: 46ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-who-list li {
  position: relative;
  padding: 1px 0 1px 26px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink, #171d18);
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-who-list li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.42em;
  width: 6px;
  height: 10px;
  border-right: 2px solid color-mix(in srgb, var(--tone, #2f8f27) 80%, #1f4a1b);
  border-bottom: 2px solid color-mix(in srgb, var(--tone, #2f8f27) 80%, #1f4a1b);
  transform: rotate(40deg);
}

/* The simple idea — text-led, does not compete with cards */
body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-idea {
  padding-top: 2px;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-idea .d-prose {
  max-width: var(--d-goal-measure);
}

/* A simple day — light timeline, not nested form rows */
body.v3-storefront[data-v3-page="info"] .d-how-goal .d-routine {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-routine li {
  position: relative;
  padding: 13px 0 13px 22px;
  border: 0;
  border-radius: 0;
  background: none;
  border-left: 2px solid color-mix(in srgb, var(--green, #2f8f27) 26%, transparent);
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-routine li:first-child {
  padding-top: 2px;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-routine li:last-child {
  padding-bottom: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-routine li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 1.35em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green, #2f8f27);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg, #f5f6f1) 70%, #fff);
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-routine li:first-child::before {
  top: 0.7em;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-routine b {
  display: block;
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-routine span {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink, #171d18);
}

/* Key takeaway — editorial emphasis, not a stretched colour slab */
body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-takeaway {
  align-self: start;
  min-height: 0;
  justify-content: flex-start;
  gap: 10px;
  padding: 20px 22px;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-takeaway p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
}

/* Recommendations — curated, one-product is a horizontal editorial card */
body.v3-storefront[data-v3-page="info"] .d-how-goal .d-rec-module .d-prose {
  max-width: 62ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-rec-module .d-rec-grid {
  gap: var(--d-info-grid-gap, 20px);
  margin-top: 20px;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-rec-module .d-rec-grid[data-count="1"] {
  max-width: 840px;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-rec-module .d-rec-grid[data-count="1"] .d-rec-card {
  padding: 22px 24px;
  background: linear-gradient(180deg, #fff 0%, #faf8f3 100%);
  box-shadow: 0 10px 28px rgba(20, 48, 28, 0.07);
}

@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] .d-how-goal .d-rec-module .d-rec-grid[data-count="1"] .d-rec-card {
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 22px;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-goal .d-rec-module .d-rec-grid[data-count="1"] .d-rec-media {
    max-width: 176px;
  }
}

/* Optional extras / honest expectations — content-height, not twin boxes */
body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-note {
  padding: 2px 0 0;
  background: none;
  border: 0;
  box-shadow: none;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-pair-notes .d-goal-note + .d-goal-note {
  padding-left: 0;
}

@media (min-width: 861px) {
  body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-pair-notes .d-goal-note + .d-goal-note {
    border-left: 1px solid rgba(47, 48, 36, 0.1);
    padding-left: 28px;
  }
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-expect-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 46ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-expect-list li {
  position: relative;
  padding: 0 0 0 16px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 15px;
  line-height: 1.5;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-expect-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--muted, #5b6358);
}

/* Common questions — warm page canvas, white accordion */
body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-faq {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: clamp(8px, 1.4vw, 12px) 0 0;
  border-top: 1px solid rgba(47, 48, 36, 0.1);
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-faq .d-faq-acc {
  background: #fff;
  max-width: 820px;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-faq .d-faq-acc details[open] {
  background: #faf8f3;
}

body.v3-storefront[data-v3-page="info"] .d-how-index > .d-section {
  margin-top: var(--d-info-section);
}

@media (max-width: 860px) {
  body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-pair {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-goal .d-goal-pair-notes .d-goal-note + .d-goal-note {
    padding-left: 0;
    border-left: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(47, 48, 36, 0.1);
  }
}

/* How it works — first-class primary nav, no wrap on tablet */
body.v3-storefront .nav-desktop {
  flex-wrap: nowrap;
}

@media (min-width: 721px) and (max-width: 1180px) {
  body.v3-storefront .nav-desktop,
  body.v3-storefront[data-storefront="unified"] .nav-desktop {
    gap: 1px;
  }

  body.v3-storefront .nav-desktop a,
  body.v3-storefront[data-storefront="unified"] .nav-desktop a {
    padding: 8px 8px;
    font-size: 13px;
    gap: 6px;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  body.v3-storefront .nav-desktop a [data-ico],
  body.v3-storefront .nav-desktop a .ico,
  body.v3-storefront[data-storefront="unified"] .nav-desktop a [data-ico],
  body.v3-storefront[data-storefront="unified"] .nav-desktop a .ico {
    display: none;
  }
}

.drawer-primary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 12px;
  max-width: 100%;
  box-sizing: border-box;
}

.drawer-primary a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px 14px;
  background: var(--bg, #f5f6f1);
  border: 1px solid var(--line, #e4e7df);
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ink, #171d18);
}

.drawer-primary a:hover,
.drawer-primary a:focus-visible {
  background: #fff;
  border-color: rgba(47, 143, 39, 0.28);
  color: var(--green-dark, #1f4a1b);
}

.drawer-primary a .ico,
.drawer-primary a [data-ico] {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--green-dark, #1f4a1b);
}

/* DG-NAV-HEADER-SEARCH-01 — drawer = fixed head, one scrolling body, and a
   genuine full-width footer (no radius, own background, always at the
   bottom, never part of the scrolling list). */
body.v3-storefront[data-storefront="unified"] #v3-drawer.drawer {
  overflow: hidden;
  padding-bottom: 0;
}

body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-head {
  flex: none;
  position: static;
  border-bottom: 1px solid var(--line, #e4e7df);
}

body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 0 18px;
}

body.v3-storefront[data-storefront="unified"] .drawer-section-label {
  margin: 4px 18px 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .drawer-primary + .drawer-section-label {
  margin-top: 18px;
}

/* Logged-in (Mark's choice: C + B's account card): card with name + points
   first, then the shared Menu rows, then the account destinations as 2x2
   tiles. */
body.v3-storefront[data-storefront="unified"] .drawer-acct-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--berry-soft);
  border: 1px solid rgba(142, 21, 102, 0.16);
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .drawer-acct-card .acct-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--berry-dark);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}

body.v3-storefront[data-storefront="unified"] .drawer-acct-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

body.v3-storefront[data-storefront="unified"] .drawer-acct-who b {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.v3-storefront[data-storefront="unified"] .drawer-acct-who span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.v3-storefront[data-storefront="unified"] .drawer-acct-points {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--green-dark);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

body.v3-storefront[data-storefront="unified"] .drawer-acct-points .ico {
  width: 14px;
  height: 14px;
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .drawer-account {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 16px 4px;
}

body.v3-storefront[data-storefront="unified"] .drawer-account a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  padding: 12px;
  border: 1px solid var(--line, #e4e7df);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .drawer-account a .ico,
body.v3-storefront[data-storefront="unified"] .drawer-account a [data-ico] {
  width: 20px;
  height: 20px;
  margin-bottom: 6px;
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .drawer-account a b {
  font-size: 13.5px;
  line-height: 1.25;
}

body.v3-storefront[data-storefront="unified"] .drawer-account a > span:not([data-ico]):not(.ico) {
  font-size: 11.5px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .drawer-account a:hover,
body.v3-storefront[data-storefront="unified"] .drawer-account a:focus-visible {
  border-color: rgba(142, 21, 102, 0.35);
  background: var(--berry-soft);
}

body.v3-storefront[data-storefront="unified"] .drawer-foot-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body.v3-storefront[data-storefront="unified"] .drawer-foot-pair.is-single {
  grid-template-columns: 1fr;
}

body.v3-storefront[data-storefront="unified"] .drawer-foot-pair .drawer-signout {
  margin-top: 0;
}

body.v3-storefront[data-storefront="unified"] .drawer-info {
  margin: 20px 18px 0;
  padding-top: 14px;
  border-top: 1px solid var(--line, #e4e7df);
}

body.v3-storefront[data-storefront="unified"] .drawer-info-text {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .drawer-info-links {
  display: flex;
  gap: 16px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
}

body.v3-storefront[data-storefront="unified"] .drawer-info-links a {
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.v3-storefront[data-storefront="unified"] .drawer-info .d-paymarks-row {
  width: 100%;
}

body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-closeout {
  flex: none;
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line, #e4e7df);
  border-radius: 0;
  background: var(--d-surface-quiet, #f3f5f0);
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-closeout-title {
  margin: 0 0 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .drawer-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

body.v3-storefront[data-storefront="unified"] .drawer-auth .btn,
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-whatsapp,
body.v3-storefront[data-storefront="unified"] .drawer-signout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  box-sizing: border-box;
}

body.v3-storefront[data-storefront="unified"] .drawer-auth-signin {
  background: linear-gradient(180deg, var(--berry-bright, #b81c84) 0%, var(--berry, #8e1566) 100%);
  color: #fff;
  border: 0;
  box-shadow: 0 6px 16px -8px rgba(142, 21, 102, 0.6);
}

body.v3-storefront[data-storefront="unified"] .drawer-auth-register {
  background: #fff;
  color: var(--berry-dark);
  border: 1.5px solid rgba(142, 21, 102, 0.35);
}

body.v3-storefront[data-storefront="unified"] .drawer-signout {
  margin-top: 10px;
  background: #fff;
  color: var(--d-status-fail, #a3160f);
  border: 1.5px solid rgba(163, 22, 15, 0.3);
}

body.v3-storefront[data-storefront="unified"] .drawer-signout .ico,
body.v3-storefront[data-storefront="unified"] .drawer-auth .ico {
  width: 17px;
  height: 17px;
}

/* Footer Discover column — fifth track when present */
body.v3-storefront .footer-grid.footer-grid--discover {
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
}

body.v3-storefront .footer-grid.footer-grid--discover.footer-grid--focus {
  grid-template-columns: 1.4fr 1fr 1fr;
}

@media (max-width: 960px) {
  body.v3-storefront .footer-grid.footer-grid--discover,
  body.v3-storefront .footer-grid.footer-grid--discover.footer-grid--focus {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  body.v3-storefront .footer-grid.footer-grid--discover,
  body.v3-storefront .footer-grid.footer-grid--discover.footer-grid--focus {
    grid-template-columns: 1fr;
  }
}

/* Home — Meet Mark & Keely
   DG-INFO-PANEL-DEPTH-32B (Mark): wide screens 0.65fr / 1.4fr; 721–1100px a compact 240px photo column beside the copy;
   phones a centred 240px supporting photo. One square frame (no min-height, so no pale strip under the photo); the
   mountain-walk photo's 50% 70% focal point keeps both faces (v3-home-refine.css). */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-band {
  display: grid;
  grid-template-columns: 0.65fr 1.4fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 721px) and (max-width: 1100px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-band {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  }
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-media {
  overflow: hidden;
  border-radius: 20px;
  background: #e8ebe3;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 1 / 1; /* the focal point (50% 70%) lives in v3-home-refine.css, which loads later */
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-copy p {
  max-width: 56ch;
  color: var(--muted, #5b6358);
  font-size: 16px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-ask {
  margin: 12px 0 0;
  font-size: 14px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-ask a {
  color: var(--green-dark, #1f4a1b);
  font-weight: 600;
}

@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-band {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-media {
    justify-self: center;
    width: min(240px, 100%);
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-actions {
    gap: 8px;
  }

  /* DG-MOBILE-STOREFRONT-POLISH-20F: the meet buttons follow the sitewide button system (no own 42px size). */
}

/* Editorial / personal info pages */
body.v3-storefront[data-v3-page="info"] .d-story,
body.v3-storefront[data-v3-page="info"] .d-recipes,
body.v3-storefront[data-v3-page="info"] .d-recipe-detail,
body.v3-storefront[data-v3-page="info"] .d-real-life,
body.v3-storefront[data-v3-page="info"] .d-then-now,
body.v3-storefront[data-v3-page="info"] .d-eat-grid,
body.v3-storefront[data-v3-page="info"] .d-recipe-grid,
body.v3-storefront[data-v3-page="info"] .d-recipe-body,
body.v3-storefront[data-v3-page="info"] .d-real-life-layout {
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-story img,
body.v3-storefront[data-v3-page="info"] .d-recipes img,
body.v3-storefront[data-v3-page="info"] .d-recipe-detail img,
body.v3-storefront[data-v3-page="info"] .d-real-life img {
  max-width: 100%;
}

body.v3-storefront[data-v3-page="info"] .d-hero-actions .btn {
  max-width: 100%;
}

body.v3-storefront[data-v3-page="info"] .d-story-measure,
body.v3-storefront[data-v3-page="info"] .d-story-lede {
  max-width: var(--d-info-measure, 62ch);
}

body.v3-storefront[data-v3-page="info"] .d-story-intro .d-story-measure p + p,
body.v3-storefront[data-v3-page="info"] .d-story-reflect .d-story-measure p + p {
  margin-top: 1em;
}

/* DG-STORY-COMPARISON-RESPONSIVE-32C (Mark) — Mark's Story "The short version, in photos": a calm, bounded before/after pair.
   Two equal columns in a 700px wrapper aligned left (≈340px photos, 20px gap) on every width down to tablet (720px included);
   one centred column of ≤300px photos only at phone width (≤560px). The UA figure margin (16px 40px) is reset here.
   Fair cropping, CSS only, on the unmodified sources: both photos share one 4:5 frame; each figure carries its own zoom +
   focal point (--tn-scale / --tn-x / --tn-y, the transform-origin of the zoom). BEFORE is zoomed 1.3x around 66% / 100%
   so Mark appears at the same scale as in AFTER (only ceiling and side background drop out; head to shorts stay in frame).
   Adjust a crop by changing only these three values. --tn-flip: -1 mirrors a photo horizontally (the whole frame, so the
   crop values keep meaning the same part of the picture): Mark mirrored BEFORE so the shower sits left in both photos. */
body.v3-storefront[data-v3-page="info"] .d-then-now {
  --tn-frame: 4 / 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 700px; /* Mark (chat): 700px, aligned left with the heading on wider screens */
  margin: 22px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-then-now-item {
  --tn-scale: 1;
  --tn-x: 50%;
  --tn-y: 50%;
  --tn-flip: 1;
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-then-now-item:first-child { /* BEFORE */
  --tn-scale: 1.3;
  --tn-x: 66%;
  --tn-y: 100%;
  --tn-flip: -1;
}

body.v3-storefront[data-v3-page="info"] .d-then-now-item:last-child { /* AFTER */
  --tn-scale: 1;
  --tn-x: 50%;
  --tn-y: 50%;
}

body.v3-storefront[data-v3-page="info"] .d-then-now-media {
  transform: scaleX(var(--tn-flip, 1));
}

body.v3-storefront[data-v3-page="info"] .d-then-now-media img {
  transform: scale(var(--tn-scale));
  transform-origin: var(--tn-x) var(--tn-y);
}

@media (max-width: 560px) {
  body.v3-storefront[data-v3-page="info"] .d-then-now {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    max-width: none;
  }

  body.v3-storefront[data-v3-page="info"] .d-then-now-item {
    width: min(300px, 100%);
  }

  /* Mark (chat): once the photos stack, this section's heading and lead are centred above them. */
  body.v3-storefront[data-v3-page="info"] #d-then-now-title,
  body.v3-storefront[data-v3-page="info"] .d-then-now-sec .d-story-lede {
    text-align: center;
  }
}

body.v3-storefront[data-v3-page="info"] .d-then-now-media,
body.v3-storefront[data-v3-page="info"] .d-eat-media,
body.v3-storefront[data-v3-page="info"] .d-milestone-media,
body.v3-storefront[data-v3-page="info"] .d-recipe-card-media,
body.v3-storefront[data-v3-page="info"] .d-real-life-media,
body.v3-storefront[data-v3-page="info"] .d-photo-slot {
  overflow: hidden;
  background: #e8ebe3;
}

body.v3-storefront[data-v3-page="info"] .d-then-now-media,
body.v3-storefront[data-v3-page="info"] .d-then-now-media img,
body.v3-storefront[data-v3-page="info"] .d-then-now-media .d-photo-slot {
  aspect-ratio: var(--tn-frame, 4 / 5);
}

body.v3-storefront[data-v3-page="info"] .d-then-now-media img,
body.v3-storefront[data-v3-page="info"] .d-eat-media img,
body.v3-storefront[data-v3-page="info"] .d-milestone-media img,
body.v3-storefront[data-v3-page="info"] .d-recipe-card-media img,
body.v3-storefront[data-v3-page="info"] .d-real-life-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.v3-storefront[data-v3-page="info"] .d-then-now-item figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-then-now-item figcaption b {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.v3-storefront[data-v3-page="info"] .d-then-now-item figcaption span {
  color: var(--muted, #5b6358);
  font-size: 14.5px;
}

body.v3-storefront[data-v3-page="info"] .d-photo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  color: #6b7266;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

body.v3-storefront[data-v3-page="info"] .d-photo-slot-compact {
  min-height: 140px;
  aspect-ratio: 4 / 3;
}

body.v3-storefront[data-v3-page="info"] .d-milestone-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}


/* DG-INFO-PANEL-DEPTH-32B (Mark): "How I actually use Herbalife" (How it works overview only) — a small personal-story
   photo, not a dominant portrait: a 260px column beside the copy down to tablet width, a centred 210px photo on phones;
   a near-square 6:5 frame on the existing photo shows head, shoulders and upper chest (cropped before the abdomen). */
body.v3-storefront[data-v3-page="info"] .d-real-life-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(20px, 3.2vw, 40px);
  align-items: center;
}

body.v3-storefront[data-v3-page="info"] .d-real-life-split-media {
  overflow: hidden;
  border-radius: 18px;
  background: #e8ebe3;
}

body.v3-storefront[data-v3-page="info"] .d-real-life-split-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 5;
  object-fit: cover;
  object-position: 50% 10%;
}

body.v3-storefront[data-v3-page="info"] .d-real-life-split-copy .d-story-lede {
  margin: 0 0 18px;
}

body.v3-storefront[data-v3-page="info"] .d-goal-idea .d-prose,
body.v3-storefront[data-v3-page="info"] .d-goal-day .d-routine {
  max-width: var(--d-goal-measure, 54ch);
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-hero-split h1,
body.v3-storefront[data-v3-page="info"] .d-goal-card h2 {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* DG-STORY-SHAKE-MICRO-POLISH-32E (Mark): the shake section is capped at 800px (left-aligned like the page). */
body.v3-storefront[data-v3-page="info"] .d-story-shake {
  max-width: 800px;
}

body.v3-storefront[data-v3-page="info"] .d-story-shake-media {
  /* Mark (2026-10-06): a 600px block, the photo inside at most 500px; 32E: left-aligned (margin 18px 0). */
  max-width: 600px;
  margin: 18px 0;
  overflow: hidden;
  border-radius: 18px;
  background: #e8ebe3;
  text-align: center;
}

/* CP-005C — the complete photograph, never cropped. object-fit: cover was
   forcing a 4:5 portrait crop onto a 3:2 landscape photo, cutting products
   off both edges. The image now renders at its own natural proportions,
   capped only so it doesn't dominate a very wide desktop screen; nothing
   about the image itself is scaled beyond its native resolution. */
body.v3-storefront[data-v3-page="info"] .d-story-shake-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 500px;
  margin: 0 auto;
  object-fit: contain;
}

body.v3-storefront[data-v3-page="info"] .d-story-shake-copy {
  max-width: 68ch;
  margin: 22px auto 0;
}

/* 32E: the humour line now reads as an ordinary paragraph (no caption treatment). */
body.v3-storefront[data-v3-page="info"] .d-story-shake-media figcaption {
  color: var(--muted, #5b6358);
  font-size: 14.5px;
}

body.v3-storefront[data-v3-page="info"] .d-story-shake-media figcaption {
  padding: 10px 4px 0;
}

body.v3-storefront[data-v3-page="info"] .d-story-shake-callout {
  margin: 18px 0 14px;
  padding: 16px 18px;
  border-left: 3px solid var(--green, #2f8f27);
  background: #f4f7f0;
  border-radius: 0 12px 12px 0;
}

body.v3-storefront[data-v3-page="info"] .d-story-shake-callout h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

body.v3-storefront[data-v3-page="info"] .d-story-shake-copy p + p {
  margin-top: 1em;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-flag {
  display: inline-block;
  margin: 6px 8px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-recipe-coming {
  max-width: 62ch;
  margin: 8px 0 8px;
  padding: 8px 0 4px;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-coming h2 {
  margin: 0 0 10px;
  font-size: 22px;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-coming p {
  color: var(--muted, #5b6358);
  font-size: 15.5px;
}

body.v3-storefront[data-v3-page="info"] .d-milestone-card {
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-milestone-media,
body.v3-storefront[data-v3-page="info"] .d-milestone-card .d-photo-slot-compact {
  aspect-ratio: 4 / 3;
}

body.v3-storefront[data-v3-page="info"] .d-milestone-copy {
  padding-top: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-milestone-copy b {
  display: block;
  font-size: 14px;
  line-height: 1.3;
}

body.v3-storefront[data-v3-page="info"] .d-milestone-copy p {
  margin-top: 6px;
  color: var(--muted, #5b6358);
  font-size: 14px;
}

body.v3-storefront[data-v3-page="info"] .d-eat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.6vw, 28px);
  margin-top: 24px;
}

body.v3-storefront[data-v3-page="info"] .d-eat-media {
  aspect-ratio: 4 / 3;
}

body.v3-storefront[data-v3-page="info"] .d-eat-copy {
  padding-top: 14px;
}

body.v3-storefront[data-v3-page="info"] .d-eat-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-dark, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-eat-copy h3,
body.v3-storefront[data-v3-page="info"] .d-recipe-card-copy h3,
body.v3-storefront[data-v3-page="info"] .d-real-life-copy h3 {
  margin: 6px 0 8px;
  font-size: 20px;
  line-height: 1.2;
}

body.v3-storefront[data-v3-page="info"] .d-eat-copy p,
body.v3-storefront[data-v3-page="info"] .d-recipe-card-copy p,
body.v3-storefront[data-v3-page="info"] .d-real-life-copy p {
  color: var(--muted, #5b6358);
  font-size: 15px;
}

body.v3-storefront[data-v3-page="info"] .d-eat-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
  max-width: 86ch;
}

body.v3-storefront[data-v3-page="info"] .d-eat-notes h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-mattered-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: var(--d-info-measure, 62ch);
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: mattered;
}

body.v3-storefront[data-v3-page="info"] .d-mattered-list li {
  counter-increment: mattered;
  padding-left: 0;
}

body.v3-storefront[data-v3-page="info"] .d-mattered-list h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

body.v3-storefront[data-v3-page="info"] .d-mattered-list h3::before {
  content: counter(mattered) " · ";
  color: var(--green-dark, #1f4a1b);
  font-weight: 700;
}

body.v3-storefront[data-v3-page="info"] .d-story-context {
  max-width: 68ch;
  padding: 18px 0 0;
  border-top: 1px solid rgba(47, 48, 36, 0.12);
  color: var(--muted, #5b6358);
  font-size: 14.5px;
}

body.v3-storefront[data-v3-page="info"] .d-story-next {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

body.v3-storefront[data-v3-page="info"] .d-story-next-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  color: inherit;
  text-decoration: none;
}

body.v3-storefront[data-v3-page="info"] .d-story-next-card b {
  font-size: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-story-next-card p {
  color: var(--muted, #5b6358);
  font-size: 14.5px;
}

body.v3-storefront[data-v3-page="info"] .d-story-goal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 22px;
}

body.v3-storefront[data-v3-page="info"] .d-real-life-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: auto auto;
  gap: 16px;
  margin-top: 24px;
}

body.v3-storefront[data-v3-page="info"] .d-real-life-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-real-life-card.is-lead {
  grid-row: 1 / span 2;
}

body.v3-storefront[data-v3-page="info"] .d-real-life-card.is-lead .d-real-life-media {
  aspect-ratio: 4 / 3;
  max-height: min(380px, 46vw);
  min-height: 0;
  flex: 0 0 auto;
}

body.v3-storefront[data-v3-page="info"] .d-real-life-card:not(.is-lead) {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 14px;
  align-items: center;
}

body.v3-storefront[data-v3-page="info"] .d-real-life-card:not(.is-lead) .d-real-life-media {
  aspect-ratio: 1 / 1;
}

body.v3-storefront[data-v3-page="info"] .d-real-life-copy {
  padding-top: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-real-life-card:not(.is-lead) .d-real-life-copy {
  padding-top: 0;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 8px 0 8px;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-cats a {
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 24px);
  margin-top: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-grid-related {
  grid-template-columns: repeat(3, 1fr);
}

body.v3-storefront[data-v3-page="info"] .d-recipe-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-card-media,
body.v3-storefront[data-v3-page="info"] .d-recipe-card-media .d-photo-slot,
body.v3-storefront[data-v3-page="info"] .d-recipe-noimg {
  aspect-ratio: 4 / 3;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-noimg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 18px 20px;
  background:
    linear-gradient(160deg, #1f4a1b 0%, #2f6a28 58%, #c4a15a 160%);
  color: #f4efe4;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-noimg span,
body.v3-storefront[data-v3-page="info"] .d-recipe-noimg strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-card.is-idea {
  cursor: default;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-soon {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-dark, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-recipe-card-copy {
  padding-top: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-meta,
body.v3-storefront[data-v3-page="info"] .d-recipe-used {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-recipe-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 8px 0 18px;
  font-size: 14px;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-recipe-provisional {
  max-width: 68ch;
  margin-bottom: 22px;
  color: var(--muted, #5b6358);
  font-size: 14.5px;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-body {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-ingredients ul,
body.v3-storefront[data-v3-page="info"] .d-recipe-method ol {
  margin: 12px 0 0;
  padding-left: 1.15em;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-ingredients li,
body.v3-storefront[data-v3-page="info"] .d-recipe-method li {
  margin: 0 0 8px;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-note {
  max-width: 62ch;
  margin-top: 28px;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-note p {
  margin-top: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-recipe-goal,
body.v3-storefront[data-v3-page="info"] .d-recipe-back {
  margin-top: 22px;
}

@media (max-width: 1000px) {
  body.v3-storefront[data-v3-page="info"] .d-recipe-grid,
  body.v3-storefront[data-v3-page="info"] .d-recipe-grid-related {
    grid-template-columns: 1fr 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-milestone-gallery {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }

  body.v3-storefront[data-v3-page="info"] .d-story-hike-merged-grid {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-milestone-card {
    scroll-snap-align: start;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .info-page.d-story,
  body.v3-storefront[data-v3-page="info"] .info-page.d-recipes,
  body.v3-storefront[data-v3-page="info"] .info-page.d-recipe-detail {
    overflow-x: clip;
  }

  body.v3-storefront[data-v3-page="info"] .d-eat-grid,
  body.v3-storefront[data-v3-page="info"] .d-eat-notes,
  body.v3-storefront[data-v3-page="info"] .d-story-next,
  body.v3-storefront[data-v3-page="info"] .d-real-life-layout,
  body.v3-storefront[data-v3-page="info"] .d-recipe-body,
  body.v3-storefront[data-v3-page="info"] .d-recipe-grid,
  body.v3-storefront[data-v3-page="info"] .d-recipe-grid-related {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-real-life-card.is-lead {
    grid-row: auto;
  }

  body.v3-storefront[data-v3-page="info"] .d-real-life-card:not(.is-lead) {
    display: flex;
    flex-direction: column;
  }

  body.v3-storefront[data-v3-page="info"] .d-real-life-card.is-lead .d-real-life-media,
  body.v3-storefront[data-v3-page="info"] .d-real-life-card:not(.is-lead) .d-real-life-media {
    aspect-ratio: 16 / 10;
    max-height: 210px;
  }

  body.v3-storefront[data-v3-page="info"] .d-milestone-gallery {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }

  body.v3-storefront[data-v3-page="info"] .d-milestone-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  body.v3-storefront[data-v3-page="info"] .d-story-hike-merged-media img {
    aspect-ratio: 16 / 10;
    object-position: 50% 22%;
  }

  body.v3-storefront[data-v3-page="info"] .d-real-life-split-grid {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-real-life-split-media {
    justify-self: center;
    width: min(210px, 100%);
  }
}

/* Become Member redesign — scoped to .d-member / .d-become-member only */
body.v3-storefront[data-v3-page="info"] .d-member .d-hero-split .d-hero-media {
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-member .d-hero-split .d-hero-media img {
  object-fit: contain;
  padding: clamp(16px, 3vw, 36px);
}

body.v3-storefront[data-v3-page="info"] .d-member-benefit-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-member-benefit-list li {
  position: relative;
  padding: 4px 0 4px 28px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}

body.v3-storefront[data-v3-page="info"] .d-member-benefit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--d-green-800, #245c1f) border-box;
  box-shadow: inset 0 0 0 3px #fff;
  border: 2px solid var(--d-green-800, #245c1f);
}

body.v3-storefront[data-v3-page="info"] .d-member-steps {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

body.v3-storefront[data-v3-page="info"] .d-member-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

body.v3-storefront[data-v3-page="info"] .d-member-step:nth-child(even) .d-member-step-copy {
  order: 2;
}

body.v3-storefront[data-v3-page="info"] .d-member-step-copy h3 {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
}

body.v3-storefront[data-v3-page="info"] .d-member-step-copy p {
  margin: 0 0 16px;
  max-width: 48ch;
}

body.v3-storefront[data-v3-page="info"] .d-member-inline-cta {
  display: inline-flex;
  width: auto;
  max-width: max-content;
}

body.v3-storefront[data-v3-page="info"] .d-member-shot,
body.v3-storefront[data-v3-page="info"] .d-member-warehouse,
body.v3-storefront[data-v3-page="info"] .d-member-lifestyle {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line, #e4e8df);
  border-radius: var(--d-radius-lg, 22px);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-v3-page="info"] .d-member-shot img,
body.v3-storefront[data-v3-page="info"] .d-member-warehouse img,
body.v3-storefront[data-v3-page="info"] .d-member-lifestyle img {
  display: block;
  width: 100%;
  height: auto;
}

body.v3-storefront[data-v3-page="info"] .d-member-lifestyle img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
}

body.v3-storefront[data-v3-page="info"] .d-member-shot-pack {
  background: #f7f5f1;
}

body.v3-storefront[data-v3-page="info"] .d-member-shot-form {
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-member-shot-form img {
  object-fit: contain;
}

body.v3-storefront[data-v3-page="info"] .d-member-shot-warehouse img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 40%;
}

body.v3-storefront[data-v3-page="info"] .d-member .d-editorial.d-split-2 {
  margin-top: var(--d-info-section, 56px);
  align-items: center;
}

body.v3-storefront[data-v3-page="info"] .d-member-account-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

body.v3-storefront[data-v3-page="info"] .d-member-warehouse {
  display: grid;
  gap: 8px;
  padding: 8px;
  background: #f4f1eb;
}

body.v3-storefront[data-v3-page="info"] .d-member-warehouse img:first-child {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-member-warehouse-support {
  aspect-ratio: 16 / 6;
  max-height: none;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-member-sponsor {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-member-sponsor > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #eef6ea;
  border: 1px solid rgba(47, 143, 39, 0.16);
}

body.v3-storefront[data-v3-page="info"] .d-member-sponsor dt {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-member-sponsor dd {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.02em;
}

body.v3-storefront[data-v3-page="info"] .d-member-optional-inner {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--d-radius-lg, 22px);
  background: #f4f1eb;
  border: 1px solid var(--line, #e4e8df);
}

body.v3-storefront[data-v3-page="info"] .d-member-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-member-progress li {
  text-align: center;
  padding: 22px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line, #e4e8df);
}

body.v3-storefront[data-v3-page="info"] .d-member-progress span {
  display: block;
  font-size: 14px;
  line-height: 1.35;
}

body.v3-storefront[data-v3-page="info"] .d-member-progress b {
  display: block;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  color: var(--d-green-900, #1f4a1b);
  margin-bottom: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-member-progress-note {
  text-align: center;
  max-width: 62ch;
  margin: 8px auto 0;
}

body.v3-storefront[data-v3-page="info"] .d-member-progress-note {
  font-size: 13px;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-member-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0;
  font-size: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-member-price b {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1;
}

body.v3-storefront[data-v3-page="info"] .d-member-facts {
  max-width: 680px;
  margin: 0 auto;
}

body.v3-storefront[data-v3-page="info"] .d-member-facts h2 {
  margin: 0 0 4px;
}

body.v3-storefront[data-v3-page="info"] .d-member-policy-list {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-member-policy-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line, #e4e8df);
}

body.v3-storefront[data-v3-page="info"] .d-member-policy-list [data-ico="check"] {
  flex: none;
  display: inline-flex;
  color: var(--d-green-800, #245c1f);
  margin-top: 1px;
}

body.v3-storefront[data-v3-page="info"] .d-member-policy-list [data-ico="check"] .ico {
  width: 18px;
  height: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-member-facts-note {
  margin: 16px 0 0;
  max-width: 58ch;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-member-facts .d-legal-note {
  margin: 12px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-member-lead-form {
  max-width: 640px;
}

body.v3-storefront[data-v3-page="info"] .d-member-lead-form .btn:disabled,
body.v3-storefront[data-v3-page="info"] .d-member-lead-form input:disabled,
body.v3-storefront[data-v3-page="info"] .d-member-lead-form textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

body.v3-storefront[data-v3-page="info"] .d-form-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

body.v3-storefront[data-v3-page="info"] .d-member-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
  font-weight: 500;
}

body.v3-storefront[data-v3-page="info"] .d-member-choice input {
  width: auto;
  min-width: 18px;
  min-height: 18px;
  margin-top: 3px;
}

body.v3-storefront[data-v3-page="info"] .d-member-close {
  padding: clamp(28px, 4vw, 48px);
}

body.v3-storefront[data-v3-page="info"] .d-member-close h2 {
  color: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-member-close-steps {
  max-width: 52ch;
  margin: 0 0 18px;
  padding-left: 1.2em;
  color: rgba(255, 255, 255, 0.88);
}

body.v3-storefront[data-v3-page="info"] .d-member-close-steps-after {
  margin-top: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-member-close-steps li {
  margin: 0 0 10px;
}

body.v3-storefront[data-v3-page="info"] .d-member-copychips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-member-copychip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: min(100%, 220px);
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: #eef6ea;
  color: var(--d-green-900, #1f4a1b);
  text-align: left;
  cursor: pointer;
}

body.v3-storefront[data-v3-page="info"] .d-member-copychip span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--d-green-800, #245c1f);
}

body.v3-storefront[data-v3-page="info"] .d-member-copychip b {
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

body.v3-storefront[data-v3-page="info"] .d-member-copychip em {
  font-style: normal;
  font-size: 12px;
  color: var(--muted, #5b6358);
}

@media (max-width: 900px) and (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] .d-member-step,
  body.v3-storefront[data-v3-page="info"] .d-member .d-editorial.d-split-2 {
    gap: 20px;
  }

  body.v3-storefront[data-v3-page="info"] .d-member-step-copy p {
    max-width: none;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-member-benefit-list,
  body.v3-storefront[data-v3-page="info"] .d-member-step,
  body.v3-storefront[data-v3-page="info"] .d-member-progress,
  body.v3-storefront[data-v3-page="info"] .d-form-row-split {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-member-step:nth-child(even) .d-member-step-copy {
    order: 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-member-warehouse-support {
    aspect-ratio: 16 / 7;
  }

  body.v3-storefront[data-v3-page="info"] .d-member .d-editorial.d-split-2 {
    align-items: stretch;
  }

  body.v3-storefront[data-v3-page="info"] .d-member-sponsor dd {
    font-size: 18px;
  }

  body.v3-storefront[data-v3-page="info"] .d-member-copychip {
    min-width: 100%;
  }

  body.v3-storefront[data-v3-page="info"] .d-member-inline-cta {
    width: auto;
  }
}

/* How It Works guidance system — scoped to .d-how */
body.v3-storefront[data-v3-page="info"] .d-how-index .d-step-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.v3-storefront[data-v3-page="info"] .d-how-index a.d-goal-card.d-how-tile {
  background: color-mix(in srgb, var(--tone, #2f8f27) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--tone, #2f8f27) 28%, var(--line, #e4e8df));
  box-shadow: var(--shadow-sm), 0 12px 26px -16px color-mix(in srgb, var(--tone, #2f8f27) 42%, transparent);
}

body.v3-storefront[data-v3-page="info"] .d-how-index a.d-goal-card.d-how-tile:hover,
body.v3-storefront[data-v3-page="info"] .d-how-index a.d-goal-card.d-how-tile:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--tone, #2f8f27) 42%, var(--line, #e4e8df));
  box-shadow: var(--shadow-md), 0 16px 32px -14px color-mix(in srgb, var(--tone, #2f8f27) 38%, transparent);
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-card-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: auto;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone, #2f8f27) 12%, #fff);
  color: color-mix(in srgb, var(--tone, #2f8f27) 72%, #000);
}

body.v3-storefront[data-v3-page="info"] .d-how-packs-band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px; /* DG-MOBILE-STOREFRONT-POLISH-20G (Mark): was 12px */
  max-width: 72ch;
  padding: 28px 28px 26px;
  border-radius: var(--d-radius-lg, 22px);
  background: #f4f7f0;
  border: 1px solid var(--line, #e4e8df);
}

body.v3-storefront[data-v3-page="info"] .d-how-packs-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-how-packs-band h2 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 28px);
}

body.v3-storefront[data-v3-page="info"] .d-how-packs-band p {
  margin: 0;
  max-width: 62ch;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-how-path-fallback-label {
  margin: 22px 0 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-green-900, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-how-paths.is-enhanced .d-how-path-fallback-label {
  display: none;
}

body.v3-storefront[data-v3-page="info"] .d-how-path-block {
  margin-top: clamp(22px, 3vw, 36px);
}

body.v3-storefront[data-v3-page="info"] .d-how-path-block h3 {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.6vw, 30px);
}

body.v3-storefront[data-v3-page="info"] .d-how-alias-note {
  margin-top: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-how-prepare-grid,
body.v3-storefront[data-v3-page="info"] .d-how-card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.v3-storefront[data-v3-page="info"] .d-how-prepare-grid,
body.v3-storefront[data-v3-page="info"] .d-how-around-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.v3-storefront[data-v3-page="info"] .d-how-around-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.v3-storefront[data-v3-page="info"] .d-how-mini-card h3,
body.v3-storefront[data-v3-page="info"] .d-how-prepare-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

body.v3-storefront[data-v3-page="info"] .d-how-mini-when {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-how-layer {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-green-900, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-how-prepare-card.is-official {
  border-color: rgba(47, 143, 39, 0.28);
  background: #f4f7f0;
}

body.v3-storefront[data-v3-page="info"] .d-how-mark-example {
  margin-top: 20px;
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px dashed rgba(47, 143, 39, 0.35);
  background: #fbf8f1;
}

body.v3-storefront[data-v3-page="info"] .d-how-mark-example h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-how-mark-example p {
  margin: 0 0 14px;
  max-width: 62ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-need-group + .d-how-need-group {
  margin-top: 28px;
}

body.v3-storefront[data-v3-page="info"] .d-how-need-heading {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
}

body.v3-storefront[data-v3-page="info"] .d-how-recipe-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-prose,
body.v3-storefront[data-v3-page="info"] .d-how-start .d-prose,
body.v3-storefront[data-v3-page="info"] .d-how-recipes .d-prose {
  max-width: 62ch;
}

@media (max-width: 1000px) {
  body.v3-storefront[data-v3-page="info"] .d-how-index .d-step-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-prepare-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-variant-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-around-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-card-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.v3-storefront[data-v3-page="info"] .d-how-need-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-index .d-step-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-prepare-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-card-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-recipe-grid {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-packs-band {
    padding: 22px 18px;
  }
}

/* Deep guidance: extra section types, scoped to .d-how */
body.v3-storefront[data-v3-page="info"] .d-how-context {
  max-width: 68ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-context-body,
body.v3-storefront[data-v3-page="info"] .d-how-paths-note,
body.v3-storefront[data-v3-page="info"] .d-how-section-note,
body.v3-storefront[data-v3-page="info"] .d-how-info .d-prose,
body.v3-storefront[data-v3-page="info"] .d-how-everyone .d-prose {
  max-width: 68ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-plain-list,
body.v3-storefront[data-v3-page="info"] .d-how-food-list {
  margin: 12px 0 0;
  padding-left: 1.15em;
  max-width: 68ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-plain-list li,
body.v3-storefront[data-v3-page="info"] .d-how-food-list li {
  margin: 0 0 8px;
}

body.v3-storefront[data-v3-page="info"] .d-how-food-list {
  columns: 2;
  column-gap: 28px;
  max-width: 80ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-day-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.v3-storefront[data-v3-page="info"] .d-how-day-grid[data-count="1"],
body.v3-storefront[data-v3-page="info"] .d-how-day-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.v3-storefront[data-v3-page="info"] .d-how-day-grid[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}

body.v3-storefront[data-v3-page="info"] .d-how-day-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

body.v3-storefront[data-v3-page="info"] .d-how-compare {
  display: grid;
  gap: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-how-compare-head,
body.v3-storefront[data-v3-page="info"] .d-how-compare-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

body.v3-storefront[data-v3-page="info"] .d-how-compare-head {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-how-compare-row {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line, #e4e8df);
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-how-compare-row b {
  font-size: 15px;
}

body.v3-storefront[data-v3-page="info"] .d-how-compare-row p {
  margin: 0;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-how-card-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1000px) {
  body.v3-storefront[data-v3-page="info"] .d-how-day-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-card-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-food-list,
  body.v3-storefront[data-v3-page="info"] .d-how-day-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-day-grid[data-count="2"],
  body.v3-storefront[data-v3-page="info"] .d-how-card-grid-2 {
    columns: 1;
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-compare-head {
    display: none;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-compare-row {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-compare-row p::before {
    content: attr(data-col) ": ";
    font-weight: 700;
    color: var(--ink, #1c1c1c);
  }
}

/* =============================================================
   HOW IT WORKS — readability / 1+3 products / imagery
   ============================================================= */

body.v3-storefront[data-v3-page="info"] .d-how .d-hero-copy p,
body.v3-storefront[data-v3-page="info"] .d-how .d-prose,
body.v3-storefront[data-v3-page="info"] .d-how-context-body {
  max-width: 72ch;
}

body.v3-storefront[data-v3-page="info"] .d-how .d-hero-copy p + p,
body.v3-storefront[data-v3-page="info"] .d-how .d-prose + .d-prose,
body.v3-storefront[data-v3-page="info"] .d-how-context-body + .d-how-context-body {
  margin-top: 0.85em;
}

body.v3-storefront[data-v3-page="info"] .d-how .d-hero-media {
  --hero-pos: center center;
}

body.v3-storefront[data-v3-page="info"] .d-how .d-hero-media img,
body.v3-storefront[data-v3-page="info"] .d-story .d-hero-media img {
  object-fit: cover;
  object-position: var(--hero-pos, center 22%);
  width: 100%;
  height: 100%;
}

body.v3-storefront[data-v3-page="info"] .d-how-info {
  padding-top: 28px;
  padding-bottom: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-how-info + .d-how-info {
  padding-top: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-info h2 {
  margin-bottom: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-how-check-list,
body.v3-storefront[data-v3-page="info"] .d-how-num-list,
body.v3-storefront[data-v3-page="info"] .d-how-mistake-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  max-width: 76ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-check-list {
  display: grid;
  gap: 10px 28px;
}

body.v3-storefront[data-v3-page="info"] .d-how-check-list-wide {
  max-width: none;
}

@media (min-width: 1100px) {
  body.v3-storefront[data-v3-page="info"] .d-how-check-list-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.v3-storefront[data-v3-page="info"] .d-how-check-list li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-check {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 2px;
  color: var(--green-dark, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-how-num-list {
  counter-reset: how-step;
  display: grid;
  gap: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-how-num-list li {
  counter-increment: how-step;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line, #e4e8df);
  border-radius: 14px;
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-how-num-list li::before {
  content: counter(how-step);
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e8f3e4;
  color: var(--green-dark, #1f4a1b);
  font-weight: 800;
  font-size: 13px;
}

body.v3-storefront[data-v3-page="info"] .d-how-life-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-how-life-card {
  padding: 18px 18px 16px;
}

body.v3-storefront[data-v3-page="info"] .d-how-life-ico {
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--green-dark, #1f4a1b);
  margin-bottom: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-how-life-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

body.v3-storefront[data-v3-page="info"] .d-how-life-card p {
  margin: 0 0 0.7em;
}

body.v3-storefront[data-v3-page="info"] .d-how-life-card p:last-child {
  margin-bottom: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-transition,
body.v3-storefront[data-v3-page="info"] .d-how-everyone-band,
body.v3-storefront[data-v3-page="info"] .d-how-example {
  margin-top: 20px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #eef6ea;
  border: 1px solid #d7e6d2;
  max-width: 76ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-transition {
  max-width: none;
}

body.v3-storefront[data-v3-page="info"] .d-how-transition h3 {
  margin: 0 0 16px;
}

body.v3-storefront[data-v3-page="info"] .d-how-everyone-band h2,
body.v3-storefront[data-v3-page="info"] .d-how-example .d-how-layer {
  margin: 0 0 12px;
}

body.v3-storefront[data-v3-page="info"] .d-how-transition p,
body.v3-storefront[data-v3-page="info"] .d-how-everyone-band p,
body.v3-storefront[data-v3-page="info"] .d-how-example p {
  margin: 0 0 0.75em;
  max-width: 72ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-transition p:last-child,
body.v3-storefront[data-v3-page="info"] .d-how-everyone-band p:last-child,
body.v3-storefront[data-v3-page="info"] .d-how-example p:last-child {
  margin-bottom: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-food-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  columns: unset;
  list-style: none;
  padding: 0;
  max-width: none;
}

body.v3-storefront[data-v3-page="info"] .d-how-food-list li {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f6f2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.v3-storefront[data-v3-page="info"] #d-how-ordinary-food .d-how-food-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
  body.v3-storefront[data-v3-page="info"] #d-how-ordinary-food .d-how-food-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] #d-how-ordinary-food .d-how-food-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.v3-storefront[data-v3-page="info"] #d-how-ordinary-food .d-how-info-note {
  margin-top: 16px;
  padding: 14px 16px;
}

body.v3-storefront[data-v3-page="info"] .d-how-food-name {
  font-weight: 700;
  color: var(--ink);
}

body.v3-storefront[data-v3-page="info"] .d-how-food-qty {
  font-size: 13.5px;
  color: var(--muted);
}

body.v3-storefront[data-v3-page="info"] .d-how-need-featured {
  margin-top: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-card-featured {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid-rest {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid-rest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid-rest {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-card-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px;
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-card-compact .d-rec-media {
  max-width: 112px;
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-card-compact .d-rec-media img {
  width: 96px;
  height: 96px;
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-card-compact .d-rec-body h3 {
  font-size: 1.02rem;
  margin-bottom: 6px;
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-flag-useful,
body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-flag-optional {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-flag-useful {
  background: #e8f3e4;
  color: var(--green-dark, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-flag-optional {
  background: #f3f1ea;
  color: #5b6358;
}

body.v3-storefront[data-v3-page="info"] .d-how-recipe-grid {
  grid-template-columns: minmax(0, 22rem);
}

body.v3-storefront[data-v3-page="info"] .d-how-recipe-card {
  display: grid;
  grid-template-columns: 1fr;
}

body.v3-storefront[data-v3-page="info"] .d-how-recipe-card .d-recipe-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

body.v3-storefront[data-v3-page="info"] .d-how-recipe-card .d-recipe-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-life-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-food-list,
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-card-featured {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-recipe-grid {
    grid-template-columns: 1fr;
  }
}

body.v3-storefront[data-v3-page="info"] .d-how-card-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eef6ea;
  color: #1f4a1b;
  margin-bottom: 4px;
  flex: 0 0 auto;
}

body.v3-storefront[data-v3-page="info"] .d-how-card-icon-wrap svg,
body.v3-storefront[data-v3-page="info"] .d-how-ico-svg {
  width: 18px;
  height: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-how-info.d-how-space-follow {
  margin-top: var(--d-how-space-follow);
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-how-info.d-how-space-sub {
  margin-top: var(--d-how-space-sub);
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-how-info.d-how-space-major {
  margin-top: var(--d-how-space-major);
}

body.v3-storefront[data-v3-page="info"] .d-how-info h2 {
  margin-bottom: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-how-mini-card.d-info-card,
body.v3-storefront[data-v3-page="info"] .d-how-step-card.d-info-card,
body.v3-storefront[data-v3-page="info"] .d-how-life-card.d-info-card {
  padding: 16px 18px;
  gap: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-how-mini-card h3,
body.v3-storefront[data-v3-page="info"] .d-how-life-card h3 {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-mini-card p,
body.v3-storefront[data-v3-page="info"] .d-how-life-card p {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-mini-card .d-how-mini-when {
  margin: 0 0 6px;
}

body.v3-storefront[data-v3-page="info"] .d-how-life-card p + p {
  margin-top: 0.65em;
}

body.v3-storefront[data-v3-page="info"] .d-how-check-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-check-label {
  font-weight: 700;
  color: var(--ink, #171d18);
}

body.v3-storefront[data-v3-page="info"] .d-how-check-text {
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-how-num-content,
body.v3-storefront[data-v3-page="info"] .d-how-mistake-content {
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-num-content b,
body.v3-storefront[data-v3-page="info"] .d-how-mistake-content b {
  display: block;
  margin-bottom: 4px;
}

body.v3-storefront[data-v3-page="info"] .d-how-info-contact-help {
  max-width: 76ch;
  padding: 22px 24px;
  border-radius: 18px;
  background: #eef6ea;
  border: 1px solid #d7e6d2;
}

body.v3-storefront[data-v3-page="info"] .d-how-info-contact-help .d-how-help-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-how-help-scroll {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--d-green-900, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-how-variants .d-how-plain-list + .d-how-section-note {
  margin-top: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-fit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.v3-storefront[data-v3-page="info"] .d-how-paths-note-wrap {
  margin-top: 8px;
  max-width: 72ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-paths + .d-how-paths-note-wrap {
  margin-top: 28px;
  padding-top: 6px;
}

body.v3-storefront[data-v3-page="info"] .d-how-everyone-band,
body.v3-storefront[data-v3-page="info"] .d-how-mark-example {
  margin-top: clamp(28px, 3.6vw, 44px);
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-step-card .d-step-kicker {
  margin-top: 2px;
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-step-card b {
  font-size: 18px;
  line-height: 1.25;
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-step-card p {
  margin: 0;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-how-packs-band {
  max-width: 64ch;
}

body.v3-storefront[data-v3-page="info"] .d-cta-band-media img {
  object-position: center 28%;
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-pack-fit-grid {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-check-list-wide {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   HOW IT WORKS — next pass + final polish
   ============================================================= */

body.v3-storefront[data-v3-page="info"] .d-how-changing-group {
  margin-top: clamp(12px, 2vw, 24px);
}

/* The section intro scrolls as plain page copy; only the pills and the panels
   they control sit inside the tinted, sticky-topped block. */
body.v3-storefront[data-v3-page="info"] .d-how-paths-body {
  margin-top: clamp(16px, 2.2vw, 24px);
  padding: 0 clamp(16px, 2vw, 24px) clamp(22px, 2.6vw, 32px);
  border-radius: 22px;
  background: #eef4ea;
  border: 1px solid rgba(31, 74, 27, 0.1);
}

body.v3-storefront[data-v3-page="info"] .d-how-changing-group .d-how-paths {
  margin-top: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-shared-group {
  margin-top: clamp(28px, 4vw, 48px);
}

body.v3-storefront[data-v3-page="info"] .d-how-shared-band,
body.v3-storefront[data-v3-page="info"] .d-how-group-intro {
  max-width: none;
  margin: 0 0 clamp(16px, 2.4vw, 28px);
  padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2vw, 22px);
  border-radius: 18px;
  background: #f4f1e8;
  border: 1px solid rgba(31, 74, 27, 0.12);
}

body.v3-storefront[data-v3-page="info"] .d-how-shared-kicker,
body.v3-storefront[data-v3-page="info"] .d-how-group-intro .d-info-eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-green-900, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-how-shared-band h2,
body.v3-storefront[data-v3-page="info"] .d-how-group-intro h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.4vw, 28px);
}

body.v3-storefront[data-v3-page="info"] .d-how-shared-band .d-prose,
body.v3-storefront[data-v3-page="info"] .d-how-group-intro .d-prose {
  margin: 0;
  max-width: 68ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-path-panel,
body.v3-storefront[data-v3-page="info"] .d-how-route-card,
body.v3-storefront[data-v3-page="info"] #how-paths {
  scroll-margin-top: calc(var(--chrome-top, 80px) + var(--catbar-h, 0px) + 72px);
}

body.v3-storefront[data-v3-page="info"] .d-how-transition-cta-wrap {
  margin: 16px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-transition p:last-child {
  margin-bottom: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-transition-cta-wrap:last-child {
  margin-bottom: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-info-cards .d-how-section-note,
body.v3-storefront[data-v3-page="info"] .d-how-info-checks .d-how-section-note,
body.v3-storefront[data-v3-page="info"] .d-how-card-grid + .d-how-section-note,
body.v3-storefront[data-v3-page="info"] .d-how-check-list + .d-how-section-note {
  margin-top: 22px;
}

body.v3-storefront[data-v3-page="info"] .d-how-check-list + .d-how-section-note + .d-how-section-note,
body.v3-storefront[data-v3-page="info"] .d-how-info-checks .d-prose + .d-how-check-list {
  margin-top: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-how-info-checks .d-how-check-list + .d-how-section-note {
  margin-top: 24px;
}

body.v3-storefront[data-v3-page="info"] .d-how-check-list li.d-how-check-has-media {
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-check-media {
  display: inline-flex;
  width: 4.5rem;
  height: 4.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #f4f7f0;
  overflow: hidden;
}

body.v3-storefront[data-v3-page="info"] .d-how-check-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.v3-storefront[data-v3-page="info"] .d-how-check-media-ico {
  color: var(--green-dark, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-how-card-media {
  width: 72px;
  height: 72px;
  margin: 0 0 10px;
  border-radius: 12px;
  background: #f4f7f0;
  overflow: hidden;
}

body.v3-storefront[data-v3-page="info"] .d-how-card-grid-2 .d-how-mini-card-has-media .d-how-card-media {
  width: 88px;
  height: 88px;
  margin: 0 0 14px;
}

body.v3-storefront[data-v3-page="info"] .d-how-card-grid-2 .d-how-card-media-photo {
  width: 100%;
  height: 148px;
}

body.v3-storefront[data-v3-page="info"] .d-how-card-media img,
body.v3-storefront[data-v3-page="info"] .d-how-start-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.v3-storefront[data-v3-page="info"] .d-how-card-media img[src*="editorial"],
body.v3-storefront[data-v3-page="info"] .d-how-check-media img[src*="editorial"] {
  object-fit: cover;
}

body.v3-storefront[data-v3-page="info"] .d-how-mini-card .d-how-card-icon-wrap {
  margin-bottom: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-how-card-grid-2 .d-how-mini-card:not(.d-how-mini-card-has-media) .d-how-card-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-how-card-grid-2 .d-how-mini-card:not(.d-how-mini-card-has-media) .d-how-card-icon-wrap svg {
  width: 26px;
  height: 26px;
}

body.v3-storefront[data-v3-page="info"] .d-how-editorial-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.7fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
}

body.v3-storefront[data-v3-page="info"] .d-how-editorial-split-center {
  align-items: center;
}

body.v3-storefront[data-v3-page="info"] .d-how-editorial-copy h2 {
  margin: 0 0 10px;
}

body.v3-storefront[data-v3-page="info"] .d-how-editorial-copy .d-info-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-how-editorial-media {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #eef3ea;
}

body.v3-storefront[data-v3-page="info"] .d-how-editorial-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.v3-storefront[data-v3-page="info"] .d-how-start-media {
  max-width: 220px;
  justify-self: center;
  background: #f4f7f0;
  padding: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-how-start-media-lifestyle {
  max-width: none;
  width: 100%;
  padding: 0;
  background: #eef3ea;
}

body.v3-storefront[data-v3-page="info"] .d-how-start-media-lifestyle img {
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

body.v3-storefront[data-v3-page="info"] .d-how-principle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 18px 0 0;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(47, 143, 39, 0.22);
  background: #f3f7ef;
  max-width: 68ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-principle p {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-prep-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

/* CP-005E — no existing asset genuinely represents "daily energy needs,
   routine, activity and individual variation" without either reading as
   a generic stock fitness photo or implying a medical result, both of
   which the task explicitly rules out. Rather than force a mismatched
   image, the calculator module itself is given a stronger, self-
   contained card presence (see handoff for the documented ImageGen
   brief a future task could use to add a real right-hand visual). */
body.v3-storefront[data-v3-page="info"] .d-how-info-tdee {
  background: #f7f8f4;
  border: 1px solid var(--line, #e4e8df);
  border-radius: var(--d-radius-lg, 22px);
  padding: clamp(22px, 3.4vw, 34px);
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee {
  margin-top: 16px;
  max-width: none;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 14px 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-wide {
  grid-column: 1 / -1;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee input,
body.v3-storefront[data-v3-page="info"] .d-how-tdee select {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #c5d6c0;
  border-radius: 10px;
  font: inherit;
  font-weight: 500;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-out {
  margin: 14px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-out:empty {
  display: none;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-out p {
  margin: 0 0 8px;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-out p:last-child {
  margin-bottom: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-extra {
  margin-top: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-how-mistake-grid {
  max-width: none;
}

@media (min-width: 900px) {
  body.v3-storefront[data-v3-page="info"] .d-how-mistake-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-goal {
    --d-how-space-follow: 16px;
    --d-how-space-sub: clamp(24px, 4vw, 32px);
  }

  body.v3-storefront[data-v3-page="info"] .d-how-editorial-split,
  body.v3-storefront[data-v3-page="info"] .d-how-prep-pair,
  body.v3-storefront[data-v3-page="info"] .d-how-tdee-grid {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-start-media {
    max-width: 160px;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-start-media-lifestyle {
    max-width: none;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-paths-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* =============================================================
   HOW IT WORKS — follow-up polish 2026-09-03
   ============================================================= */

body.v3-storefront[data-v3-page="info"] .d-how-prep-pair .d-how-card-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-how-prep-pair .d-how-card-icon-wrap svg {
  width: 20px;
  height: 20px;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee .d-btn-cream {
  margin-top: 6px;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-out {
  margin: 28px 0 32px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #f7f5ee;
  border: 1px solid rgba(31, 74, 27, 0.08);
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-out:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-extra {
  margin-top: 4px;
}

body.v3-storefront[data-v3-page="info"] .d-how-card-grid-2 .d-how-mini-card-has-media .d-how-card-media-studio,
body.v3-storefront[data-v3-page="info"] #d-how-plain-vs-bigger .d-how-mini-card-has-media .d-how-card-media {
  width: 100%;
  height: 160px;
  margin: 0 0 14px;
  background: #fff;
  border: 1px solid rgba(31, 74, 27, 0.08);
}

body.v3-storefront[data-v3-page="info"] #d-how-plain-vs-bigger .d-how-card-media img {
  object-fit: contain;
}

body.v3-storefront[data-v3-page="info"] .d-how-card-media-studio img {
  object-fit: contain;
}

/* CP-005D — this band is now the page's deliberate dark-green close (see
   the CP-005D section appended at the end of this file for the full
   colour/spacing treatment); this rule keeps only its structural shape. */
body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-context-band {
  max-width: none;
  padding: clamp(18px, 2.4vw, 26px) clamp(16px, 2vw, 24px);
  border-radius: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-context-band .d-how-context-body {
  max-width: 68ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-shortcut-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  width: 100%;
  max-width: 64ch;
  margin: 4px 0 8px;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-shortcut-list li {
  display: grid;
  gap: 2px;
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-shortcut-list b {
  font-size: 14px;
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-shortcut-list span {
  font-size: 13px;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-includes {
  display: inline-block;
  margin-right: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-green-900, #1f4a1b);
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-card .d-how-mini-when {
  order: -1;
  margin: 0 0 2px;
}

body.v3-storefront[data-v3-page="info"] .d-how-food-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: start;
  break-inside: avoid;
}

body.v3-storefront[data-v3-page="info"] .d-how-food-ico {
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: #1f4a1b;
}

body.v3-storefront[data-v3-page="info"] .d-how-food-ico svg {
  width: 18px;
  height: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-how-food-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-food-name {
  font-weight: 700;
}

body.v3-storefront[data-v3-page="info"] .d-how-food-qty {
  color: var(--muted, #5b6358);
  text-align: left;
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-packs-band {
  max-width: 76ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-card-grid-3 .d-how-mini-card-has-media .d-how-card-media {
  width: 80px;
  height: 80px;
}

body.v3-storefront[data-v3-page="info"] .d-how-info-split .d-how-editorial-media {
  max-height: 280px;
}

body.v3-storefront[data-v3-page="info"] .d-how-info-split .d-how-editorial-media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
}

body.v3-storefront[data-v3-page="info"] #d-how-mark-training-shake.d-how-info-split .d-how-editorial-media {
  max-height: none;
}

body.v3-storefront[data-v3-page="info"] #d-how-mark-training-shake.d-how-info-split .d-how-editorial-media img {
  aspect-ratio: 3 / 2;
  object-position: center center;
}

body.v3-storefront[data-v3-page="info"] .d-how-variant-grid .d-how-mini-card-has-media .d-how-card-media {
  width: 100%;
  height: 132px;
  margin: 0 0 12px;
  background: #fff;
  border: 1px solid rgba(31, 74, 27, 0.08);
}

body.v3-storefront[data-v3-page="info"] .d-how-variant-grid .d-how-card-media img {
  object-fit: contain;
}

body.v3-storefront[data-v3-page="info"] .d-how-variant-grid .d-how-card-icon-wrap {
  width: 40px;
  height: 40px;
}

body.v3-storefront[data-v3-page="info"] .d-how-variant-grid .d-how-card-icon-wrap svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-pack-shortcut-list {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-food-list li {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

/* =============================================================
   HOW IT WORKS / INFO — visual-review follow-up 2026-09-04
   Inline product links, dark-green rule blocks, calculator state.
   ============================================================= */

/* Named Herbalife products in body copy open the Quick View popup.
   Inherit the surrounding colour and weight so a green link never
   breaks a sentence, including on dark-green rule blocks. */
body.v3-storefront[data-v3-page="info"] .d-how-plink {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-bottom: 0;
  cursor: pointer;
}

body.v3-storefront[data-v3-page="info"] .d-how-plink:hover {
  color: inherit;
  text-decoration-thickness: 1px;
}

body.v3-storefront[data-v3-page="info"] .d-how-plink:focus-visible {
  outline: 2px solid var(--green, #2f8f27);
  outline-offset: 2px;
  border-radius: 3px;
}

body.v3-storefront[data-v3-page="info"] .d-how-rule .d-how-plink:focus-visible {
  outline: 2px solid #fff;
}

/* --- important takeaway / rule block ------------------------------------
   Reusable, deliberately rare: short "remember this" rules only. */
body.v3-storefront[data-v3-page="info"] .d-how-rule {
  grid-template-columns: auto minmax(0, 1fr);
  margin: 20px 0 0;
  padding: 18px 22px;
  border-radius: var(--d-radius-lg, 20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(120% 130% at 88% -10%, var(--d-green-600, #2b7a2a) 0%, var(--d-green-800, #235423) 48%, var(--d-green-900, #1f4a1b) 100%);
  color: var(--d-on-green-ink, #e9f6e2);
  box-shadow: 0 14px 30px rgba(12, 42, 16, 0.22);
  max-width: 68ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-rule p {
  margin: 0;
  color: #fff;
  font-size: 15.5px;
  line-height: 1.6;
}

body.v3-storefront[data-v3-page="info"] .d-how-rule strong {
  color: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-how-rule .d-how-card-icon-wrap {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-how-rule .d-how-card-icon-wrap svg {
  stroke: #fff;
}

/* --- daily energy calculator -------------------------------------------- */

/* Sticky path pills sit under the fixed chrome at the offsets Mark measured. */
/* The extra example only exists once a valid calculation has produced one. */
body.v3-storefront[data-v3-page="info"] .d-how-tdee-extra[hidden] {
  display: none;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-extra {
  margin-top: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-field-error {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--berry, #a4123f);
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-grid label.is-invalid > span {
  color: var(--berry, #a4123f);
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-grid input[aria-invalid="true"],
body.v3-storefront[data-v3-page="info"] .d-how-tdee-grid select[aria-invalid="true"] {
  border-color: var(--berry, #a4123f);
  box-shadow: 0 0 0 3px rgba(164, 18, 63, 0.12);
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-summary-error {
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--berry, #a4123f);
}

/* --- company details (Help + Contact) ----------------------------------- */

/* CP-008: this is secondary/legal reference information, not a primary
   section — it was reading with the same visual weight (eyebrow tracking,
   heading size) as the page's actual content sections. Quieting it here,
   scoped to .d-company-details only, leaves every other .d-info-card /
   .d-info-eyebrow usage on the site untouched. */
body.v3-storefront[data-v3-page="info"] .d-company-details .d-info-eyebrow {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  opacity: 0.85;
}

body.v3-storefront[data-v3-page="info"] .d-company-details h2 {
  font-size: 19px;
  margin: 0 0 4px;
}

/* Fixed 2-up grid: DOM order (member identity, registration, UK, Netherlands)
   already groups "who you're dealing with" on row 1 and "where" on row 2, so
   no reordering is needed — just the column count and a divider between them.
   This replaces the old 4-up auto-fit, which read as one dense strip on
   desktop and gave no structure to the mobile stack. */
body.v3-storefront[data-v3-page="info"] .d-company-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 28px;
  margin-top: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-company-block:nth-child(n + 3) {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
  body.v3-storefront[data-v3-page="info"] .d-company-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body.v3-storefront[data-v3-page="info"] .d-company-block:nth-child(n + 2) {
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
}

/* One label convention shared by both the block eyebrow (h3) and the
   registration definition-list terms (dt), instead of two different styles
   (green uppercase vs. grey mixed-case) for what should read as one
   hierarchy. */
body.v3-storefront[data-v3-page="info"] .d-company-block h3,
body.v3-storefront[data-v3-page="info"] .d-company-block dt {
  margin: 0 0 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-dark, #1f6a1a);
  opacity: 0.9;
}

body.v3-storefront[data-v3-page="info"] .d-company-block address,
body.v3-storefront[data-v3-page="info"] .d-company-block p {
  margin: 0;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted, #566159);
}

body.v3-storefront[data-v3-page="info"] .d-company-block dl {
  margin: 0;
  display: grid;
  gap: 2px;
}

body.v3-storefront[data-v3-page="info"] .d-company-block dt {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-company-block dd {
  margin: 0 0 5px;
  font-size: 13.5px;
  color: var(--muted, #566159);
}

/* =============================================================
   HOW IT WORKS — visual follow-up 2026-09-04 (plink / contact / help)
   ============================================================= */

body.v3-storefront[data-v3-page="info"] .d-how-rule .d-how-layer {
  color: rgba(255, 255, 255, 0.82);
}

body.v3-storefront[data-v3-page="info"] .d-how-personal-help,
body.v3-storefront[data-v3-page="info"] .d-how-info-contact-help.d-how-personal-help {
  margin-top: clamp(28px, 3.6vw, 44px);
  padding: 22px 24px;
  border-radius: var(--d-radius-lg, 22px);
  max-width: 76ch;
  background: color-mix(in srgb, var(--tone, #2f8f27) 8%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--tone, #2f8f27) 34%, var(--line, #e4e8df));
  box-shadow: var(--shadow-sm), 0 12px 26px -16px color-mix(in srgb, var(--tone, #2f8f27) 42%, transparent);
}

body.v3-storefront[data-v3-page="info"] .d-how-personal-help h2,
body.v3-storefront[data-v3-page="info"] .d-how-info-contact-help.d-how-personal-help h2 {
  margin: 0 0 12px;
}

body.v3-storefront[data-v3-page="info"] .d-how-personal-help .d-prose,
body.v3-storefront[data-v3-page="info"] .d-how-info-contact-help.d-how-personal-help .d-prose {
  margin: 0 0 0.75em;
  max-width: 72ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-personal-help .d-prose:last-child,
body.v3-storefront[data-v3-page="info"] .d-how-info-contact-help.d-how-personal-help .d-prose:last-child {
  margin-bottom: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-personal-help-cta {
  font-weight: 650;
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee-dots {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--green, #2f8f27) 35%, #fff);
  border-top-color: var(--green, #2f8f27);
  animation: d-how-tdee-spin 0.7s linear infinite;
}

@keyframes d-how-tdee-spin {
  to { transform: rotate(360deg); }
}

body.v3-storefront[data-v3-page="info"] .d-how-tdee.is-calculating button[type="submit"] {
  opacity: 0.65;
  cursor: wait;
}

body.v3-storefront[data-v3-page="info"] .d-how-check-media-object {
  background: #fff;
  border: 1px solid var(--line, #e4e8df);
}

body.v3-storefront[data-v3-page="info"] .d-how-check-media-object img {
  object-fit: contain;
  padding: 5px;
}

body.v3-storefront[data-v3-page="info"] .d-contact-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

body.v3-storefront[data-v3-page="info"] .d-contact-aside {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-contact-form-col {
  min-width: 0;
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-contact-compose {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-contact-form-col {
    order: -1;
  }
}

/* =============================================================
   HOW IT WORKS — design refine 2026-09-06
   Scoped to .d-how so other info pages stay unchanged.
   ============================================================= */

/* Compact card copy sits one step below body prose. The scale started on
   How it works; it now lives on the info family so Help can share it instead
   of getting its own per-item pixel tweaks. */
body.v3-storefront[data-v3-page="info"] {
  --d-info-card-copy: 0.9rem;
}

body.v3-storefront[data-v3-page="info"] .d-how {
  --d-how-prose-size: 1.02rem;
  --d-how-card-copy: var(--d-info-card-copy);
}

body.v3-storefront[data-v3-page="info"] .d-help .d-tip-grid .d-info-card p {
  font-size: var(--d-info-card-copy);
  line-height: 1.5;
}

body.v3-storefront[data-v3-page="info"] .d-how .d-prose,
body.v3-storefront[data-v3-page="info"] .d-how .d-hero-copy p,
body.v3-storefront[data-v3-page="info"] .d-how-context-body {
  max-width: 52ch;
  font-size: var(--d-how-prose-size);
}

/* How it works no longer overrides the WhatsApp CTA: the shared
   .d-cta-whatsapp implementation near the top of this file now carries the
   official glyph, the brand green and the accessible label colour for every
   V2 page, so the previous dark-teal + mask-image override is gone. */

body.v3-storefront[data-v3-page="info"] .d-how .d-link-underline {
  color: #237a1e;
}

body.v3-storefront[data-v3-page="info"] .d-how .d-link-underline:hover,
body.v3-storefront[data-v3-page="info"] .d-how .d-link-underline:focus-visible {
  color: #1f4a1b;
}

body.v3-storefront[data-v3-page="info"] .d-how h1 {
  font-size: clamp(1.8rem, 4.2vw, 3.25rem);
}

body.v3-storefront[data-v3-page="info"] .d-how > .d-section > h2,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-info > h2,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-editorial-copy > h2,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-start h2,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-variants > h2,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-around > h2,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-tips > h2,
body.v3-storefront[data-v3-page="info"] .d-how .d-rec-module > h2,
body.v3-storefront[data-v3-page="info"] .d-how .d-goal-faq > h2,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-personal-help > h2,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-context > h2,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-packs-band > h2,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-price-cta > h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
}

body.v3-storefront[data-v3-page="info"] .d-how .d-info-eyebrow {
  font-size: 0.75rem;
}

body.v3-storefront[data-v3-page="info"] .d-how .d-info-card p,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-mini-card p,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-life-card p,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-step-card p,
body.v3-storefront[data-v3-page="info"] .d-how .d-rec-card p,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-num-content span,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-mistake-content span,
body.v3-storefront[data-v3-page="info"] .d-how .d-goal-card p {
  font-size: var(--d-how-card-copy);
  line-height: 1.5;
}

body.v3-storefront[data-v3-page="info"] .d-how .d-how-mini-card h3,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-life-card h3,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-step-card b,
body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-card-icon.d-how-ico {
  width: 50px;
  height: 50px;
  color: color-mix(in srgb, var(--tone, #2f8f27) 72%, #000);
  background: color-mix(in srgb, var(--tone, #2f8f27) 16%, #fff);
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-card-icon.d-how-ico svg {
  width: 24px;
  height: 24px;
}

body.v3-storefront[data-v3-page="info"] .d-how-goal .d-routine b {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

body.v3-storefront[data-v3-page="info"] .d-how-path-block > h3 {
  font-size: 1.35rem;
  line-height: 1.25;
}

body.v3-storefront[data-v3-page="info"] .d-how-day-card h3 {
  font-size: 1.05rem;
}

body.v3-storefront[data-v3-page="info"] .d-how .d-how-route-card:focus-visible,
body.v3-storefront[data-v3-page="info"] .d-how .d-goal-card:focus-visible,
body.v3-storefront[data-v3-page="info"] .d-how .d-faq-acc summary:focus-visible,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-sources-acc summary:focus-visible,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-pack-shortcut:focus-visible {
  outline: 3px solid #b81c84;
  outline-offset: 2px;
}

body.v3-storefront[data-v3-page="info"] .d-how-help-scroll {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 4px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #237a1e;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

body.v3-storefront[data-v3-page="info"] .d-how-help-scroll:focus-visible {
  outline: 3px solid #b81c84;
  outline-offset: 2px;
  border-radius: 4px;
}

body.v3-storefront[data-v3-page="info"] .d-how-invalid-banner {
  margin: 0 0 16px;
}

body.v3-storefront[data-v3-page="info"] .d-how-price-cta {
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: 20px 22px;
  max-width: 52ch;
  border-radius: 18px;
  background: #f7f4ea;
  border: 1px solid rgba(31, 74, 27, 0.12);
}

body.v3-storefront[data-v3-page="info"] .d-how-price-cta > h2 {
  margin: 0 0 8px;
}

body.v3-storefront[data-v3-page="info"] .d-how-price-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 14px;
}

body.v3-storefront[data-v3-page="info"] .d-how .d-how-rule,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-principle.d-how-rule,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-example.d-how-rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 20px 0 0;
  padding: 18px 22px;
  border-radius: var(--d-radius-lg, 20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(120% 130% at 88% -10%, var(--d-green-600, #2b7a2a) 0%, var(--d-green-800, #235423) 48%, var(--d-green-900, #1f4a1b) 100%);
  color: var(--d-on-green-ink, #e9f6e2);
  box-shadow: 0 14px 30px rgba(12, 42, 16, 0.22);
  max-width: 52ch;
}

body.v3-storefront[data-v3-page="info"] .d-how .d-how-rule p,
body.v3-storefront[data-v3-page="info"] .d-how .d-how-rule .d-how-layer {
  margin: 0;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.55;
}

body.v3-storefront[data-v3-page="info"] .d-how .d-how-rule .d-how-layer {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-packs-band {
  max-width: none;
  padding: clamp(18px, 2.4vw, 26px) clamp(16px, 2vw, 24px);
  background: #f4f1e8;
  border: 1px solid rgba(31, 74, 27, 0.12);
  border-radius: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 8px 0 16px;
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-shortcut {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(31, 74, 27, 0.12);
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-shortcut:hover,
body.v3-storefront[data-v3-page="info"] .d-how-pack-shortcut:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(47, 143, 39, 0.28);
  box-shadow: 0 14px 28px rgba(20, 48, 28, 0.08);
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-shortcut-media {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e7f3e4;
  color: #1f4a1b;
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-shortcut b {
  font-size: 1rem;
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-shortcut span:not(.d-how-pack-shortcut-media) {
  font-size: 0.875rem;
  color: var(--muted, #5b6358);
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-pack-shortcut-grid {
    grid-template-columns: 1fr;
  }
}

body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid-rest[data-count="4"] {
  justify-content: center;
}

@media (min-width: 1100px) {
  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid-rest[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.v3-storefront[data-v3-page="info"] .d-rec-module .d-rec-grid-rest[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}

body.v3-storefront[data-v3-page="info"] #d-how-make-ahead {
  margin-top: clamp(40px, 5vw, 68px);
  margin-bottom: clamp(28px, 4vw, 48px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: 18px;
  background: #f4f1e8;
  border: 1px solid rgba(31, 74, 27, 0.12);
}

body.v3-storefront[data-v3-page="info"] #d-how-make-ahead.d-how-info-split .d-how-editorial-media {
  max-height: none;
}

body.v3-storefront[data-v3-page="info"] #d-how-make-ahead .d-how-editorial-media {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #e8ebe3;
}

body.v3-storefront[data-v3-page="info"] #d-how-make-ahead .d-how-editorial-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 60%;
}

body.v3-storefront[data-v3-page="info"] #d-how-make-ahead .d-how-num-list {
  max-width: 52ch;
  margin-top: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-how-mark-example-has-media {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: center;
}

body.v3-storefront[data-v3-page="info"] .d-how-mark-example-media {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #e8ebe3;
}

body.v3-storefront[data-v3-page="info"] .d-how-mark-example-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 62% 48%;
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-mark-example-has-media {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-mark-example-media img {
    object-position: 58% 42%;
  }
}

body.v3-storefront[data-v3-page="info"] .d-how-path-panel,
body.v3-storefront[data-v3-page="info"] .d-how-route-card,
body.v3-storefront[data-v3-page="info"] #how-paths {
  scroll-margin-top: calc(var(--how-chrome-bottom, calc(var(--chrome-top, 80px) + var(--catbar-h, 0px))) + 72px);
}

/* =============================================================
   HOW IT WORKS — visual follow-up 2026-09-06
   ============================================================= */

body.v3-storefront[data-v3-page="info"] .d-how-paths-intro > *:last-child {
  margin-bottom: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-paths-body > .d-how-path-panel:first-of-type {
  margin-top: clamp(18px, 2.2vw, 26px);
}

/* Product roles — compact horizontal card: media left, copy right. */
body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card,
body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card {
  display: grid;
  grid-template-columns: clamp(76px, 7vw, 96px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: clamp(14px, 1.6vw, 20px);
  row-gap: 4px;
  padding: clamp(14px, 1.6vw, 18px);
}

body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > .d-how-card-media,
body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > .d-how-card-icon-wrap,
body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > .d-how-card-media,
body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > .d-how-card-icon-wrap {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > .d-how-card-icon-wrap,
body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > .d-how-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}

body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > .d-how-card-icon-wrap svg,
body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > .d-how-card-icon-wrap svg {
  width: 30px;
  height: 30px;
}

body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-card-media img,
body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-card-media img {
  object-fit: contain;
  padding: 6px;
}

body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > h3,
body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > p,
body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > .d-how-mini-when,
body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > h3,
body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > p,
body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > .d-how-mini-when {
  grid-column: 2;
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > h3,
body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > h3 {
  align-self: end;
}

body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > p,
body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > p {
  align-self: start;
}

@media (max-width: 560px) {
  body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card,
  body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }

  body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > .d-how-card-media,
  body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > .d-how-card-icon-wrap,
  body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > .d-how-card-media,
  body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > .d-how-card-icon-wrap {
    grid-column: 1;
    grid-row: auto;
    width: 68px;
  }

  body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > h3,
  body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > p,
  body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > .d-how-mini-when,
  body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > h3,
  body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > p,
  body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > .d-how-mini-when {
    grid-column: 1;
  }
}

/* Make-ahead — one two-column composition: copy and the three steps on the
   left, the photo alongside the whole stack on the right. */
@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] #d-how-make-ahead {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
    column-gap: clamp(22px, 3vw, 40px);
    align-items: start;
  }

  body.v3-storefront[data-v3-page="info"] #d-how-make-ahead .d-how-editorial-split {
    display: contents;
  }

  body.v3-storefront[data-v3-page="info"] #d-how-make-ahead .d-how-editorial-copy {
    grid-column: 1;
    grid-row: 1;
  }

  body.v3-storefront[data-v3-page="info"] #d-how-make-ahead .d-how-editorial-media {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    height: 100%;
  }

  body.v3-storefront[data-v3-page="info"] #d-how-make-ahead .d-how-editorial-media img {
    height: 100%;
    min-height: 320px;
    aspect-ratio: auto;
    object-fit: cover;
  }

  body.v3-storefront[data-v3-page="info"] #d-how-make-ahead .d-how-num-list {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
  }
}

/* =============================================================
   CP-005 — How It Works: hierarchy, contrast, mobile & conversion
   ============================================================= */

/* --- 1/2. Goal-choice section: primary decision point identity --- */

body.v3-storefront[data-v3-page="info"] .d-how-goals-primary {
  background: linear-gradient(180deg, #eef4e8 0%, #f3f7ef 100%);
  border: 1px solid rgba(47, 143, 39, 0.16);
  border-radius: var(--d-radius-lg, 22px);
  padding: clamp(22px, 4vw, 40px) clamp(18px, 4vw, 36px) clamp(28px, 4.5vw, 44px);
  margin-top: clamp(20px, 3vw, 32px);
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-goals-primary #goals-title {
  margin-top: 4px;
}

/* --- 3. Goal cards: clickability, feedback, tap targets --- */

body.v3-storefront[data-v3-page="info"] .d-goal-card {
  min-height: 44px;
}

body.v3-storefront[data-v3-page="info"] .d-goal-card:active {
  transform: translateY(-1px) scale(0.99);
  box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
  body.v3-storefront[data-v3-page="info"] .d-goal-card,
  body.v3-storefront[data-v3-page="info"] .d-goal-card:hover,
  body.v3-storefront[data-v3-page="info"] .d-goal-card:active {
    transition: none;
    transform: none;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-goal-card {
    padding: 20px 20px 18px;
  }

  body.v3-storefront[data-v3-page="info"] .d-goal-card-go {
    padding-top: 4px;
  }
}


/* --- 6. Sticky heading overlap: extra breathing room under the site's
   dynamically-measured chrome offset (--v2-anchor-offset), scoped to this
   journey only. Covers every content heading across all six guides, not
   just Breakfast, since every guide shares the same .d-anchor headings. */

body.v3-storefront[data-v3-page="info"] .d-how .d-anchor {
  scroll-margin-top: calc(var(--v2-anchor-offset, calc(var(--chrome-top, 80px) + var(--catbar-h, 0px) + 16px)) + 20px);
}

/* --- 7. Closing CTA: secondary contact link on the dark band --- */

body.v3-storefront[data-v3-page="info"] .d-cta-band-secondary {
  margin: 2px 0 0;
}

/* .d-how .d-link-underline (above) sets a dark-green link colour for the
   rest of this journey; this closing band sits on a dark gradient, so it
   needs its own light colour here with matching specificity to win. */
body.v3-storefront[data-v3-page="info"] .d-how .d-cta-band-secondary a.d-link-underline {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.v3-storefront[data-v3-page="info"] .d-how .d-cta-band-secondary a.d-link-underline:hover,
body.v3-storefront[data-v3-page="info"] .d-how .d-cta-band-secondary a.d-link-underline:focus-visible {
  color: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-how .d-cta-band-secondary a.d-link-underline:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- 8. Weight kcal section: superseded by the CP-005C pair-grid below
   (the two blocks are now side-by-side cards on desktop, not stacked). --- */

/* --- 11. Desktop balance: give small packshot media a bit more presence
   in single-column explainer sections instead of leaving the grid column
   mostly empty around a capped-width image. Desktop only; mobile stacking
   and the image's own asset are unchanged. */

@media (min-width: 1100px) {
  body.v3-storefront[data-v3-page="info"] .d-how-start-media {
    max-width: 264px;
    padding: 20px;
  }
}

/* =============================================================
   CP-005C — deeper visual/copy design pass
   ============================================================= */

/* --- A. Weight energy-balance: side-by-side related cards, one shared
   panel with a subtle divider, instead of two stacked plain sections. --- */

body.v3-storefront[data-v3-page="info"] .d-how-pair-grid {
  background: #f7f8f4;
  border: 1px solid var(--line, #e4e8df);
  border-radius: var(--d-radius-lg, 22px);
  padding: clamp(22px, 3.4vw, 34px);
  margin-top: clamp(20px, 3vw, 28px);
}

body.v3-storefront[data-v3-page="info"] .d-how-pair-grid > .d-how-info {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-pair-grid > .d-how-info + .d-how-info {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line, #e4e8df);
}

@media (min-width: 860px) {
  /* CP-005E — stretch (not start) so both columns share the row's tallest
     height, then each .d-how-info is its own top-aligned flex column: text
     reads from the top in both, and the left column's green rule callout
     can be pushed to the bottom of the shared height via margin-top:auto
     without needing an artificial min-height anywhere. */
  body.v3-storefront[data-v3-page="info"] .d-how-pair-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 4vw, 48px);
    position: relative;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-pair-grid::before {
    content: "";
    position: absolute;
    top: clamp(22px, 3.4vw, 34px);
    bottom: clamp(22px, 3.4vw, 34px);
    left: 50%;
    width: 1px;
    background: var(--line, #e4e8df);
  }

  body.v3-storefront[data-v3-page="info"] .d-how-pair-grid > .d-how-info {
    display: flex;
    flex-direction: column;
    padding-top: 0;
  }

  /* display:flex stops the h2's own top margin from collapsing into the
     parent the way it did under block layout, so it must be zeroed
     explicitly here or the "prose" layout column (which had no other
     source of top padding) drifts below the "principle" column's. */
  body.v3-storefront[data-v3-page="info"] .d-how-pair-grid > .d-how-info > h2:first-child {
    margin-top: 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-pair-grid > .d-how-info + .d-how-info {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-pair-grid .d-how-rule {
    max-width: none;
    margin-top: auto;
  }
}

/* --- B. Restrained section dividers for major topic transitions.
   Opt-in only (added to specific templates below) so adjacent minor
   blocks are never separated by a line. --- */

body.v3-storefront[data-v3-page="info"] .d-how-divider {
  border: none;
  border-top: 1px solid rgba(31, 74, 27, 0.22);
  margin: clamp(40px, 5.5vw, 64px) 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-divider-tint {
  border-top-color: rgba(31, 74, 27, 0.32);
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-divider {
    margin: 32px 0;
  }
}

/* --- C. Breakfast base preparation: Formula 1 + milk visual equation.
   Desktop only — mobile must keep the standard single-column stack from
   the existing @media (max-width: 720px) rule above, not this 2-column
   override. --- */

@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] .d-how-start-equation .d-how-editorial-split {
    grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
  }
}

body.v3-storefront[data-v3-page="info"] .d-how-equation-media {
  background: linear-gradient(180deg, #f4f7f0 0%, #eef3ea 100%);
  border-radius: 18px;
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-how-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 16px);
  width: 100%;
}

body.v3-storefront[data-v3-page="info"] .d-how-equation-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-equation-item img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

body.v3-storefront[data-v3-page="info"] .d-how-equation-op {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green, #2f8f27);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

body.v3-storefront[data-v3-page="info"] .d-how-equation-media figcaption {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted, #5b6358);
  text-align: center;
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-equation-item img {
    max-height: 92px;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-equation-op {
    width: 28px;
    height: 28px;
    font-size: 17px;
  }
}

/* --- D. .d-how-prep-pair: bigger, more distinct, clearer comparison. --- */

body.v3-storefront[data-v3-page="info"] .d-how-prep-pair {
  gap: 18px;
  margin-top: 20px;
}

body.v3-storefront[data-v3-page="info"] .d-how-prep-pair .d-how-mini-card {
  position: relative;
  padding-top: 26px;
  border-width: 1.5px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

body.v3-storefront[data-v3-page="info"] .d-how-prep-pair .d-how-card-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

body.v3-storefront[data-v3-page="info"] .d-how-prep-pair .d-how-card-icon-wrap svg {
  width: 26px;
  height: 26px;
}

/* First card ("Shake it" — the faster route): amber accent. */
body.v3-storefront[data-v3-page="info"] .d-how-prep-pair .d-how-mini-card:first-child .d-how-card-icon-wrap {
  background: color-mix(in srgb, #a9791f 16%, #fff);
  color: color-mix(in srgb, #a9791f 72%, #000);
}

body.v3-storefront[data-v3-page="info"] .d-how-prep-pair .d-how-mini-card:first-child {
  border-color: color-mix(in srgb, #a9791f 30%, var(--line, #e4e8df));
}

body.v3-storefront[data-v3-page="info"] .d-how-prep-pair .d-how-mini-card:first-child::before {
  content: "Fastest";
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, #a9791f 72%, #000);
}

/* Second card ("Blend it" — the richer route): teal accent. */
body.v3-storefront[data-v3-page="info"] .d-how-prep-pair .d-how-mini-card:last-child .d-how-card-icon-wrap {
  background: color-mix(in srgb, #1d6f7a 16%, #fff);
  color: color-mix(in srgb, #1d6f7a 72%, #000);
}

body.v3-storefront[data-v3-page="info"] .d-how-prep-pair .d-how-mini-card:last-child {
  border-color: color-mix(in srgb, #1d6f7a 30%, var(--line, #e4e8df));
}

body.v3-storefront[data-v3-page="info"] .d-how-prep-pair .d-how-mini-card:last-child::before {
  content: "Smoothest";
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, #1d6f7a 72%, #000);
}

/* --- E. Icon system: give different information types their own
   accent instead of near-uniform green everywhere. Container shape,
   size and colour vary by context; the glyphs themselves (already a
   coherent stroke family) are unchanged. Colour is never the only cue
   — every icon still sits next to its own label/heading text. --- */

/* Daily-life examples (#d-how-meals, #d-how-real-life): warm accent,
   slightly larger, rounded-square — a "this is a moment in a day" feel. */
body.v3-storefront[data-v3-page="info"] .d-how-life-card .d-how-card-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: color-mix(in srgb, #a9791f 15%, #fff);
  color: color-mix(in srgb, #a9791f 70%, #000);
}

body.v3-storefront[data-v3-page="info"] .d-how-life-card .d-how-card-icon-wrap svg {
  width: 23px;
  height: 23px;
}

/* Goal-grid step explainer (landing "How these guides work"): keep
   green, but a slightly larger, bolder container so it reads as the
   start of the journey rather than blending into every other icon. */
body.v3-storefront[data-v3-page="info"] .d-how-step-card .d-how-card-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

/* --- F. Contrast / visual-weight touch-ups found during this pass. --- */

/* Captions under editorial photos read slightly heavier than intended
   against a light background; keep them clearly secondary to headings. */
body.v3-storefront[data-v3-page="info"] .d-how-editorial-media figcaption,
body.v3-storefront[data-v3-page="info"] .d-story-shake-media figcaption {
  color: var(--muted, #5b6358);
  font-size: 13.5px;
}

/* --- G. Mark's Story: visual rhythm, pull-quote, alternating tone. --- */

body.v3-storefront[data-v3-page="info"] .d-story .d-then-now-item figcaption b {
  display: block;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* CP-005E — the pull-quote is now its own standalone section between
   #morning-shake and the merged hike/mattered chapter, not a lead-in
   line inside another section. Opening mark upper-left, closing mark
   lower-right, both decorative (muted colour, generous type) rather
   than competing with the words themselves. */
body.v3-storefront[data-v3-page="info"] .d-story-quote-section {
  margin-top: var(--d-info-section);
  margin-bottom: var(--d-info-section);
}

body.v3-storefront[data-v3-page="info"] .d-story-pull-quote {
  position: relative;
  margin: 0 auto;
  max-width: 58ch;
  padding: clamp(30px, 5vw, 52px) clamp(28px, 5vw, 56px);
}

body.v3-storefront[data-v3-page="info"] .d-story-pull-quote p {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 750;
  line-height: 1.4;
  color: var(--d-green-900, #1f4a1b);
  text-align: center;
}

body.v3-storefront[data-v3-page="info"] .d-story-pull-quote::before,
body.v3-storefront[data-v3-page="info"] .d-story-pull-quote::after {
  position: absolute;
  font-size: 4em;
  line-height: 1;
  font-family: Georgia, serif;
  color: color-mix(in srgb, var(--green, #2f8f27) 42%, transparent);
}

body.v3-storefront[data-v3-page="info"] .d-story-pull-quote::before {
  content: "\201C";
  top: 0;
  left: 0;
}

body.v3-storefront[data-v3-page="info"] .d-story-pull-quote::after {
  content: "\201D";
  bottom: 0;
  right: 0;
}

@media (max-width: 480px) {
  body.v3-storefront[data-v3-page="info"] .d-story-pull-quote {
    padding: clamp(26px, 8vw, 36px) clamp(20px, 6vw, 28px);
  }

}

body.v3-storefront[data-v3-page="info"] .d-story-mattered-tint {
  background: linear-gradient(180deg, #f7f8f4 0%, #f2f5ee 100%);
  border-radius: var(--d-radius-lg, 22px);
  padding: clamp(24px, 4vw, 40px);
}

/* CP-005E — the hike photo and "what actually mattered" are now one
   composition: photo left, heading + numbered points right on desktop,
   photo-then-content on mobile (via the shared 1000px collapse rule
   above). Reduced image share (0.85fr vs the old 1.15fr) since the
   copy column now carries a heading and four full points, not a
   short caption. */
body.v3-storefront[data-v3-page="info"] .d-story-hike-merged-grid {
  display: grid;
  gap: clamp(22px, 3.4vw, 40px);
  align-items: start;
}

@media (min-width: 1001px) {
  body.v3-storefront[data-v3-page="info"] .d-story-hike-merged-grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

body.v3-storefront[data-v3-page="info"] .d-story-hike-merged-media {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-story-hike-merged-media img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 18px;
  background: #e8ebe3;
}

@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] .d-story-hike-merged-media img {
    aspect-ratio: 3 / 4;
    object-position: 50% 30%;
  }
}

body.v3-storefront[data-v3-page="info"] .d-story-hike-merged-copy .d-mattered-list {
  margin-top: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-mattered-list {
  counter-reset: mattered;
}

body.v3-storefront[data-v3-page="info"] .d-mattered-list > li {
  counter-increment: mattered;
  position: relative;
  padding-left: 46px;
}

body.v3-storefront[data-v3-page="info"] .d-mattered-list > li::before {
  content: counter(mattered);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green, #2f8f27);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
}

body.v3-storefront[data-v3-page="info"] .d-mattered-list h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

/* Supersede the older inline "1 · " text prefix now that each item has
   its own numbered circle marker (added above) — avoids showing the
   number twice. */
body.v3-storefront[data-v3-page="info"] .d-mattered-list h3::before {
  content: none;
}

body.v3-storefront[data-v3-page="info"] .d-mattered-list p {
  margin: 0;
  color: var(--muted, #5b6358);
}

/* =============================================================
   CP-005D — How It Works: landing hierarchy, Breakfast endings,
   section separation, Mark's Story quote/disclaimer consolidation
   ============================================================= */

/* --- 1a. "How to use these guides": a visible heading over the 3-step
   explainer, with the standard section gap (not the old tight one) so it
   reads as its own explanatory group rather than a continuation of the
   six goal cards above. --- */
body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-steps-section {
  margin-top: var(--d-info-section);
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-steps-section .d-info-head {
  margin-bottom: clamp(14px, 2vw, 22px);
}

/* --- 1b. "Start with the guide, then make it yours": converted from a
   pale cream box into the same dark Herbalife-green surface used by the
   closing CTA band elsewhere on this page, but with no buttons — this is
   a calm editorial close, not another call to action. Generous top margin
   keeps it visibly separate from the 3-step section above. --- */
body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-context-band {
  margin-top: clamp(56px, 8vw, 96px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(60% 80% at 6% 108%, rgba(154, 219, 124, 0.22) 0%, transparent 60%),
    linear-gradient(148deg, var(--d-green-900, #1f4a1b) 0%, var(--d-green-800, #245c1f) 54%, var(--d-green-700, #2b6925) 100%);
  box-shadow: inset 0 2px 0 rgba(154, 219, 124, 0.45);
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-context-band .d-info-eyebrow-ink {
  color: rgba(255, 255, 255, 0.8);
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-context-band h2 {
  color: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-context-band .d-how-context-body {
  color: rgba(255, 255, 255, 0.85);
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-context-band .d-how-context-body strong {
  color: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-context-band .d-link-underline {
  color: rgba(255, 255, 255, 0.92);
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-context-band .d-link-underline:hover,
body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-context-band .d-link-underline:focus-visible {
  color: #fff;
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-context-band {
    margin-top: clamp(40px, 8vw, 56px);
  }
}

/* --- 3. Breakfast "Everyone is different": two day-scenario panels
   instead of another pale-green text block. Opt-in via the 'panels' key,
   so every other goal's existing single-paragraph rendering is untouched. --- */
body.v3-storefront[data-v3-page="info"] .d-how-everyone-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-everyone-panel {
  padding: clamp(18px, 2.6vw, 24px);
  border-radius: var(--d-radius-lg, 18px);
  border: 1px solid rgba(31, 74, 27, 0.14);
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-how-everyone-panel .d-how-card-icon-wrap {
  margin-bottom: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-how-everyone-panel h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
}

body.v3-storefront[data-v3-page="info"] .d-how-everyone-panel p {
  margin: 0;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-how-everyone-panel:first-child .d-how-card-icon-wrap {
  background: color-mix(in srgb, #a9791f 16%, #fff);
  border-color: color-mix(in srgb, #a9791f 30%, transparent);
  color: #8a641a;
}

body.v3-storefront[data-v3-page="info"] .d-how-everyone-panel:last-child .d-how-card-icon-wrap {
  background: color-mix(in srgb, #1d6f7a 14%, #fff);
  border-color: color-mix(in srgb, #1d6f7a 28%, transparent);
  color: #1d6f7a;
}

body.v3-storefront[data-v3-page="info"] .d-how-everyone-note {
  margin-top: 14px;
  color: var(--muted, #5b6358);
}

@media (max-width: 640px) {
  body.v3-storefront[data-v3-page="info"] .d-how-everyone-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 5. Mark's Story: the pull-quote now opens .d-story-reflect (moved
   above the eyebrow/heading in the markup); its existing symmetric
   top/bottom margin already gives it breathing room on both sides, so no
   extra rule is needed here beyond confirming it via this comment. --- */

/* =============================================================
   CP-005E — Weight guide: Practical tips check-icon upgrade
   ============================================================= */

/* Reuses the exact 32px filled-circle badge already established for
   Mark's Story "what actually mattered" numbered list, swapping the
   counter digit for the existing check glyph. Scoped to .d-how-tips
   only, so every other .d-how-check-list on the site (goal cards,
   shared checklists) keeps its current smaller inline tick. */
body.v3-storefront[data-v3-page="info"] .d-how-tips .d-how-check-list li {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

body.v3-storefront[data-v3-page="info"] .d-how-tips .d-how-check {
  width: 32px;
  height: 32px;
  margin-top: 0;
  border-radius: 50%;
  background: var(--green, #2f8f27);
  color: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

body.v3-storefront[data-v3-page="info"] .d-how-tips .d-how-check .ico {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

body.v3-storefront[data-v3-page="info"] .d-how-tips .d-how-check-list li > span:last-child {
  padding-top: 5px;
}

/* =============================================================
   CP-005E — Training guide: "what your session actually needs"
   decision module. Replaces three consecutive text-heavy prose
   sections with three scannable, distinctly toned panels instead
   of another set of identical small green icons.
   ============================================================= */
body.v3-storefront[data-v3-page="info"] .d-how-decision-grid {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-how-decision-panel {
  padding: clamp(20px, 2.8vw, 26px);
  border-radius: var(--d-radius-lg, 18px);
  border: 1px solid var(--line, #e4e8df);
  background: #fff;
  border-top: 3px solid var(--line, #e4e8df);
}

body.v3-storefront[data-v3-page="info"] .d-how-decision-panel h3 {
  margin: 12px 0 10px;
  font-size: 1.05rem;
}

body.v3-storefront[data-v3-page="info"] .d-how-decision-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-how-decision-points li {
  position: relative;
  padding-left: 18px;
  color: var(--muted, #5b6358);
  font-size: 14.5px;
  line-height: 1.5;
}

body.v3-storefront[data-v3-page="info"] .d-how-decision-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Three distinct accent tones, reusing the exact hexes already
   established for prep-pair / everyone-panels elsewhere on this
   page family, so the module fits the site's colour language
   instead of inventing a new one. */
body.v3-storefront[data-v3-page="info"] .d-how-decision-calm {
  border-top-color: #2f8f27;
}

body.v3-storefront[data-v3-page="info"] .d-how-decision-calm .d-how-card-icon-wrap {
  background: color-mix(in srgb, #2f8f27 14%, #fff);
  border-color: color-mix(in srgb, #2f8f27 28%, transparent);
  color: #1f4a1b;
}

body.v3-storefront[data-v3-page="info"] .d-how-decision-calm .d-how-decision-points li::before {
  color: #2f8f27;
}

body.v3-storefront[data-v3-page="info"] .d-how-decision-effort {
  border-top-color: #a9791f;
}

body.v3-storefront[data-v3-page="info"] .d-how-decision-effort .d-how-card-icon-wrap {
  background: color-mix(in srgb, #a9791f 16%, #fff);
  border-color: color-mix(in srgb, #a9791f 30%, transparent);
  color: #8a641a;
}

body.v3-storefront[data-v3-page="info"] .d-how-decision-effort .d-how-decision-points li::before {
  color: #a9791f;
}

body.v3-storefront[data-v3-page="info"] .d-how-decision-recovery {
  border-top-color: #1d6f7a;
}

body.v3-storefront[data-v3-page="info"] .d-how-decision-recovery .d-how-card-icon-wrap {
  background: color-mix(in srgb, #1d6f7a 14%, #fff);
  border-color: color-mix(in srgb, #1d6f7a 28%, transparent);
  color: #1d6f7a;
}

body.v3-storefront[data-v3-page="info"] .d-how-decision-recovery .d-how-decision-points li::before {
  color: #1d6f7a;
}

@media (min-width: 861px) {
  body.v3-storefront[data-v3-page="info"] .d-how-decision-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-decision-panel {
    display: flex;
    flex-direction: column;
  }
}

/* =============================================================
   DG-MODAL-STABILITY-DEPTH-01 — shared popup depth
   =============================================================
   Every V2 popup panel (auth login/signup/forgot, product, coupon,
   coupon-remove, HerbaPoints, ingredients, starter-set, terms — all
   `.modal-overlay > .modal[role="dialog"]` — and the catalogue Quick View
   `.dgp-qv-dialog`) takes the one --d-modal-depth token. Only the panel;
   never the backdrop, drawers, the minicart or dropdowns. */
body.v3-storefront .modal-overlay > .modal[role="dialog"],
body.v3-storefront[data-storefront="unified"] .dgp-qv-dialog {
  box-shadow: var(--d-modal-depth);
}

/* =============================================================
   DG-NAV-HEADER-SEARCH-01 — header chrome
   ============================================================= */
/* Logged-in HerbaPoints chip leaves the header at <=980px (the drawer's
   "Your account" line carries the balance there). */
@media (max-width: 980px) {
  body.v3-storefront[data-storefront="unified"] .points-chip {
    display: none;
  }
}

/* Portal domain (portals.domeinnaam) under the shared logo: dark blue. */
body.v3-storefront[data-storefront="unified"] .d-brand-identity.is-domain {
  color: var(--d-brand-domain, #1f3f73);
  font-weight: 700;
}

/* Typing in the open (sticky) search field must not scroll the page: html
   carries scroll-padding-top for anchor jumps (~226px), which puts the
   sticky field inside the "obscured" zone, so Chrome scrolled the page on
   every keystroke to reveal the caret. While search is open, no padding. */
html.v3-search-open,
html.v3-search-closing {
  scroll-padding-top: 0;
}

/* Mobile: the open searchbar is max-height 62px + overflow:hidden for its
   fold animation, which clipped the results list to ~17px under the
   category bar. Once results are actually showing, let them out. */
@media (max-width: 720px) {
  html.v3-search-open body.v3-storefront[data-storefront="unified"] .searchbar:has(.search-results:not([hidden])) {
    overflow: visible;
  }
}

/* Search toggle shows it is active while the searchbar is open. */
body.v3-storefront[data-storefront="unified"] #v3-open-search[aria-expanded="true"] {
  background: var(--green-soft);
  border-color: var(--green);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] #v3-open-search[aria-expanded="true"] .ico {
  color: var(--green-dark);
}

/* Up to 560px (phones) the search container gets a tight 6px side gutter (Mark, 2026-09-26). */
@media (max-width: 560px) {
  body.v3-storefront[data-storefront="unified"] .searchbar .container {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* One placeholder colour for every storefront field, search included. */
body.v3-storefront ::placeholder {
  color: var(--d-field-placeholder);
  opacity: 1;
}

@media (max-width: 360px) {
  body.v3-storefront[data-storefront="unified"] .drawer-info .d-paymark {
    width: 40px;
    height: 27px;
  }
}

/* =====================================================================
   DG-BERRY-HEADER-RUNTIME-18B — Berry Bar header (Mark's choice V1 from
   DG-SITE-HEADER-MOBILE-DOCK-STUDY-18A, proposal f46f14a9).
   One header system, no second framework:
   - desktop/tablet (>720px): unchanged two-level structure — brand, main
     menu, account, search and cart stay in the sticky upper header row; the
     category navigation below becomes one full-width berry bar (tabs, or the
     existing fit fallback selector on tablet). The search band keeps its
     contract (visible at the top, scrolls away, #v3-open-search reopens it).
   - phones (<=720px, html.v3-berry-dock set by the placer in header.php):
     the brand row is no longer sticky and scrolls away; #v3-cat-select is the
     single sticky berry dock with menu · category · search · account · cart.
     The one cart (#v3-cart-count) sits visually in the brand row at the top
     and in the dock once docked (html.v3-dock-docked, set by v3-nav.js) —
     a transform only, so it never duplicates, never loses focus and never
     shifts layout.
   The temporary sale bar above (#v3-discount-bar) is untouched: it keeps its
   own sticky top and height (--discountbar-h); the dock parks under it.
   Contrast on berry #8e1566: white 8.6:1; white on the 14% white pill
   (≈#9c3479) 6.9:1; berry-dark on white 11.7:1.
   ===================================================================== */

/* ---- DG-BERRY-HEADER-CORRECTION-18C (Mark): temporary sale bar hidden --
   Presentation-only and reversible: the #v3-discount-bar component, its copy, the sale configuration, pricing and
   eligibility are untouched. display:none takes it out of view, layout, focus and the accessibility tree (its
   aria-live status is not announced), and the sticky chain treats its height as zero on every width — the bar's own
   script then also measures 0. Remove these two rules to bring it back. */
body.v3-storefront[data-storefront="unified"] #v3-discount-bar {
  display: none !important;
}
html:has(body.v3-storefront[data-storefront="unified"]) {
  --discountbar-h: 0px !important;
}

/* ---- Desktop/tablet: the berry category bar ------------------------- */
@media (min-width: 721px) {
  body.v3-storefront[data-storefront="unified"] .cat-strip {
    background: var(--berry);
    border-bottom: 0;
    /* DG-BERRY-HEADER-CORRECTION-18C (Mark): a slightly more present lift under the berry bar. */
    box-shadow: 0 10px 22px -12px rgba(107, 15, 77, 0.78), 0 3px 8px -3px rgba(64, 8, 46, 0.32);
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip a {
    color: rgba(255, 255, 255, 0.94);
    border-color: transparent;
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip a .ico.cat-ico {
    color: rgba(255, 255, 255, 0.86);
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: transparent;
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip a:hover .ico.cat-ico {
    color: #fff;
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip a:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: transparent;
    outline: none;
    box-shadow: inset 0 0 0 2px #fff;
  }
  /* Active: a white pill with berry-dark label/icon — the one strong state. */
  body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active,
  body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active:hover {
    color: var(--berry-dark);
    background: #fff;
    border-color: #fff;
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active .ico.cat-ico {
    color: var(--berry);
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active:focus-visible {
    color: var(--berry-dark);
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--berry), inset 0 0 0 4px #fff;
  }

  /* Tablet fit fallback (#v3-cat-select shown when the tabs do not fit):
     the same berry band with the V1 translucent selector. */
  body.v3-storefront[data-storefront="unified"] .cat-select {
    background: var(--berry);
    border-bottom: 0;
    box-shadow: 0 8px 18px -14px rgba(107, 15, 77, 0.7);
  }
  body.v3-storefront[data-storefront="unified"] .cat-select > .container {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  body.v3-storefront[data-storefront="unified"] .cat-select-btn {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.34);
    color: #fff;
    box-shadow: none;
  }
  body.v3-storefront[data-storefront="unified"] .cat-select-btn:active,
  body.v3-storefront[data-storefront="unified"] .cat-select.open .cat-select-btn {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    box-shadow: none;
  }
  body.v3-storefront[data-storefront="unified"] .cat-select-btn:focus-visible,
  body.v3-storefront[data-storefront="unified"] .cat-select.open .cat-select-btn:focus-visible {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--berry), 0 0 0 4px #fff;
  }
}

@media (min-width: 721px) and (hover: hover) {
  body.v3-storefront[data-storefront="unified"] .cat-select-btn:hover {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: none;
  }
}

/* Wide desktop flat cells (CP-010C, >=1100px): white hairline dividers and a
   white bottom indicator under the white active cell's berry-dark label. */
@media (min-width: 1100px) {
  body.v3-storefront[data-storefront="unified"] .cat-strip a + a::before {
    background: rgba(255, 255, 255, 0.24);
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active,
  body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active:hover {
    background: #fff;
    color: var(--berry-dark);
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active::after {
    background: var(--berry);
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active + a::before,
  body.v3-storefront[data-storefront="unified"] .cat-strip a:has(+ a.is-active)::before {
    background: transparent;
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip a:hover {
    background: rgba(255, 255, 255, 0.14);
  }
  body.v3-storefront[data-storefront="unified"] .cat-strip a.is-active:hover {
    background: #fff;
  }
}

/* The dock slots exist in the markup on every width but only ever hold
   controls on phones. */
body.v3-storefront .v3-dock-lead:empty,
body.v3-storefront .v3-dock-actions:empty {
  display: none;
}

/* ---- Phones: the Berry dock ---------------------------------------- */
@media (max-width: 720px) {
  html.v3-berry-dock {
    --bh-brand-h: 64px;
    --bh-dock-h: 58px;
    --bh-btn: 44px;
    /* The brand row is no longer part of the sticky stack: page offsets
       (scroll-margin, sticky asides, anchors) follow the dock alone. */
    --chrome-top: var(--discountbar-h);
    --catbar-h: var(--bh-dock-h);
    --bh-cart-lift: calc(-0.5 * (var(--bh-brand-h) + var(--bh-dock-h)));
  }
  html.v3-berry-dock.v3-search-open {
    --catbar-h: calc(var(--bh-dock-h) + var(--searchbar-h));
  }

  /* Brand row: full brand presentation at the top, scrolls away. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .site-header {
    position: relative;
    top: auto;
    z-index: 1;
    background: #fff;
    backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .site-header > .container {
    height: var(--bh-brand-h);
    min-height: var(--bh-brand-h);
  }

  /* The dock. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select {
    display: block;
    position: sticky;
    top: var(--chrome-top);
    z-index: 69;
    padding: 0;
    background: var(--berry);
    border: 0;
    /* DG-MOBILE-STOREFRONT-POLISH-20F (Mark): a deeper berry lift under the dock. */
    box-shadow: 0 10px 22px -12px rgba(107, 15, 77, 0.78), 0 3px 8px -3px rgba(64, 8, 46, 0.32);
    transition: none;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select > .container {
    display: flex;
    align-items: center;
    gap: 4px;
    height: var(--bh-dock-h);
    padding: 0 8px;
    position: relative;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-lead,
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
  }

  /* Dock controls: white icons on berry, 44px targets. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .hamburger,
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .icon-btn:not(.cart-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bh-btn);
    height: var(--bh-btn);
    min-width: var(--bh-btn);
    margin: 0;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: #fff;
    filter: none;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .hamburger .ico,
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .icon-btn .ico {
    width: 24px;
    height: 24px;
    color: inherit;
  }
  /* DG-BERRY-HEADER-CORRECTION-18C — the active look comes ONLY from the real open state: search from the
     canonical aria-expanded on #v3-open-search (kept in sync with html.v3-search-open by v3-search.js), account from
     the menu's .open + aria-expanded (v3-account-menu.js). A tap on a phone leaves :hover/:focus behind, so hover is
     limited to real hover devices and is lighter than "open"; keyboard focus is the white ring below, never a fill. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-open-search[aria-expanded="true"],
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .acct-menu.open .acct-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.22);
    border-color: transparent;
    color: #fff;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-open-search[aria-expanded="true"] .ico {
    color: #fff;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .hamburger:focus-visible,
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .icon-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
  }
  /* Sign in keeps its words as the accessible name (visually hidden, never display:none). */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .d-signin .label-hide {
    display: inline !important;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* Signed in: the existing account menu, as a white initial on the dock. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .acct-menu {
    display: block;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .acct-toggle .acct-avatar {
    width: 28px;
    height: 28px;
    font-size: 13px;
    background: #fff;
    color: var(--berry-dark);
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .acct-toggle .label-hide,
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .acct-caret {
    display: none;
  }
  /* DG-MOBILE-STOREFRONT-POLISH-20L (Mark): docked, the cart sits right of the account button, so the menu reaches
     past it (-48px); at the top the cart is up in the brand row and the account button is the last one, so 0.
     v3-account-menu.js still measures the open menu and pulls it back inside the window when it would overflow. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .acct-dropdown {
    top: calc(100% + 7px);
    right: -48px;
    width: min(260px, calc(100vw - 16px));
  }
  html.v3-berry-dock:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] .v3-dock-actions .acct-dropdown {
    right: 0;
  }

  /* Category control: the V1 translucent pill. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .cat-select-btn {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: var(--bh-btn);
    min-height: var(--bh-btn);
    margin: 0 4px;
    padding: 0 10px 0 12px;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow: none;
    font-size: 14px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .cat-select-btn .csb-label {
    gap: 7px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .cat-select-btn .csb-caret .ico {
    width: 16px;
    height: 16px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select.open .cat-select-btn,
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .cat-select-btn:active {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    box-shadow: none;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .cat-select-btn:focus-visible {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--berry), 0 0 0 4px #fff;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .cat-select-menu {
    left: 8px;
    right: 8px;
    top: calc(100% + 4px);
  }

  /* Search: reopened from the dock, it sits directly beneath it. */
  html.v3-berry-dock.v3-search-open body.v3-storefront[data-storefront="unified"] .searchbar,
  html.v3-berry-dock.v3-search-closing body.v3-storefront[data-storefront="unified"] .searchbar {
    top: calc(var(--chrome-top) + var(--bh-dock-h));
  }
  html.v3-berry-dock.v3-search-open body.v3-storefront[data-storefront="unified"] #v3-cat-select,
  html.v3-berry-dock.v3-search-closing body.v3-storefront[data-storefront="unified"] #v3-cat-select {
    top: var(--chrome-top);
  }

  /* The one cart: one element, two visual anchors. Docked = white disc in
     the dock; top = the familiar berry disc lifted into the brand row. */
  /* DG-BERRY-HEADER-CORRECTION-18C — the cart no longer holds a layout slot in the dock row: it is positioned at the
     row's right edge, and its slot is the actions group's right padding — 0 at the top (the category selector takes
     that width), open when docked. The slot opens/closes with a short padding transition coordinated with the cart's
     pop (html.v3-dock-anim is set by v3-nav.js only after the first settled frame: no motion on first paint). */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions {
    position: static;
    padding-right: 0;
  }
  html.v3-berry-dock.v3-dock-docked body.v3-storefront[data-storefront="unified"] .v3-dock-actions {
    padding-right: calc(var(--bh-btn) + 4px);
  }
  html.v3-berry-dock.v3-dock-anim body.v3-storefront[data-storefront="unified"] .v3-dock-actions {
    transition: padding-right 0.26s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
  }
  html.v3-berry-dock.v3-dock-anim.v3-dock-docked body.v3-storefront[data-storefront="unified"] .v3-dock-actions {
    transition-delay: 0s;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn {
    position: absolute;
    top: calc(50% - var(--bh-btn) / 2);
    right: 8px;
    display: grid;
    place-items: center;
    width: var(--bh-btn);
    height: var(--bh-btn);
    min-width: var(--bh-btn);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--berry);
    box-shadow: 0 2px 8px rgba(64, 8, 46, 0.28);
    transform: none;
    transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
  }
  html.v3-berry-dock:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn {
    transform: translateY(var(--bh-cart-lift));
    background: var(--berry);
    color: #fff;
    box-shadow: none;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn .ico {
    width: 24px;
    height: 24px;
    color: inherit;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn:hover {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
  }
  html.v3-berry-dock:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn:hover {
    background: var(--berry-dark);
    box-shadow: 0 0 0 4px rgba(142, 21, 102, 0.16);
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--berry-dark);
  }
  html.v3-berry-dock:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn:focus-visible {
    outline: 3px solid var(--berry-dark);
    box-shadow: none;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-count {
    top: -5px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 11px;
    background: var(--green-dark);
    color: #fff;
    border: 2px solid var(--berry);
  }
  html.v3-berry-dock:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-count {
    border-color: #fff;
  }
  /* The short pop between the two anchors (transform only). */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn.is-dock-in {
    animation: v3-dock-cart-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn.is-dock-out {
    animation: v3-dock-cart-out 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes v3-dock-cart-in {
  0% { transform: translateY(var(--bh-cart-lift)) scale(0.86); }
  55% { transform: translateY(3px) scale(1.12); }
  78% { transform: translateY(-1px) scale(0.97); }
  100% { transform: none; }
}

@keyframes v3-dock-cart-out {
  0% { transform: none; }
  60% { transform: translateY(calc(var(--bh-cart-lift) - 3px)) scale(1.08); }
  100% { transform: translateY(var(--bh-cart-lift)); }
}

/* The narrowest phones: 40px targets, no category icon in the dock pill. */
@media (max-width: 360px) {
  html.v3-berry-dock {
    --bh-btn: 40px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select > .container {
    gap: 2px;
    padding: 0 6px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .cat-select-btn {
    margin: 0 2px;
    padding: 0 8px 0 10px;
    font-size: 13.5px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .cat-select-btn .csb-label > .ico {
    display: none;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn {
    right: 6px;
  }
}

/* DG-BERRY-HEADER-CORRECTION-18C (Mark, exact values) — optical centring of the cart glyph in its disc. */
html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn .ico {
    margin-left: 3px;
    margin-top: 4px;
}

/* Real hover devices only: a lighter tint than the open state. */
@media (max-width: 720px) and (hover: hover) {
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .icon-btn:not(.cart-btn):hover,
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .hamburger:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-open-search[aria-expanded="true"]:hover,
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .acct-menu.open .acct-toggle[aria-expanded="true"]:hover {
    background: rgba(255, 255, 255, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.v3-berry-dock.v3-dock-anim body.v3-storefront[data-storefront="unified"] .v3-dock-actions,
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn,
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn.is-dock-in,
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn.is-dock-out {
    animation: none;
    transition: none;
  }
}


/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20 — Mark's mobile storefront polish batch (A–H).
   Per Mark's headings: "mobile" items are scoped to <=720px; homepage (guest) hides, the hero Log in, the
   registration panel and the meet buttons apply on every width; Quick View / Help / info / How it works apply
   everywhere; on product & programme pages only .c-trust and .c-band__eyebrow are hidden on desktop too.
   ===================================================================== */

/* ---- A. Products disclosure ---------------------------------------- */
body.v3-storefront[data-storefront="unified"] .cat-select-menu .csm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 0 4px auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
body.v3-storefront[data-storefront="unified"] .cat-select-menu .csm-close .ico {
  width: 18px;
  height: 18px;
}
body.v3-storefront[data-storefront="unified"] .cat-select-menu .csm-close:hover {
  background: var(--berry-soft);
  border-color: rgba(142, 21, 102, 0.3);
  color: var(--berry-dark);
}
body.v3-storefront[data-storefront="unified"] .cat-select-menu .csm-close:focus-visible {
  outline: 2px solid var(--berry-dark);
  outline-offset: 2px;
}
body.v3-storefront .cat-select-scrim {
  display: none;
}
@media (max-width: 720px) {
  /* The scrim sits above the page and below the brand row + berry dock (and the open menu inside the dock). */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .cat-select-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 68;
    background: linear-gradient(180deg, rgba(36, 9, 28, 0.42) 0%, rgba(20, 12, 18, 0.62) 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  html.v3-berry-dock.v3-cat-open body.v3-storefront[data-storefront="unified"] .cat-select-scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  html.v3-berry-dock.v3-cat-open body.v3-storefront[data-storefront="unified"] .site-header {
    z-index: 69;
  }
}
/* The scrim fades only when motion is welcome; under reduced motion it simply appears. */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .cat-select-scrim {
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  }
  html.v3-berry-dock.v3-cat-open body.v3-storefront[data-storefront="unified"] .cat-select-scrim {
    transition: opacity 0.18s ease;
  }
}

/* ---- B. Mobile drawer ---------------------------------------------- */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-info {
    display: none;
  }
}

/* ---- C. Category controls + the shared mobile product card ---------- */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-cat-toolbar {
    display: none;
  }
  /* The compact card is a one-per-row design: every comfort grid that renders it (search results included, which
     kept two per row) is a single column on phones, like the category grid already is. */
  body.v3-storefront[data-storefront="unified"] #main .d-catalog[data-density="comfort"],
  body.v3-storefront[data-storefront="unified"] #main .d-catalog.d-catalog--how-packs[data-density="compact"] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One compact card: a small image left of category · name · variant, everything else full width beneath.
     Component level: every .d-pcard2 (category, all products, search, packs, editorial grids), plus the same
     partial's compact view where it is laid out one per row (the homepage bestsellers). */
  body.v3-storefront[data-storefront="unified"] .d-pcard2,
  body.v3-storefront[data-storefront="unified"] .d-catalog--home-bestsellers .d-pcard,
  body.v3-storefront[data-storefront="unified"] .d-catalog--how-packs .d-pcard {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr auto auto;
    grid-template-areas:
      "media ."
      "media cat"
      "media name"
      "media variant"
      "media ."
      "desc desc"
      "foot foot";
    grid-row: auto;
    column-gap: 14px;
    row-gap: 0;
    padding: 14px;
    align-items: start;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard2 > .d-pcard2-body,
  body.v3-storefront[data-storefront="unified"] .d-catalog--home-bestsellers .d-pcard > .d-pcard-body,
  body.v3-storefront[data-storefront="unified"] .d-catalog--how-packs .d-pcard > .d-pcard-body {
    display: contents;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard2 > .d-pcard2-media,
  body.v3-storefront[data-storefront="unified"] .d-catalog--home-bestsellers .d-pcard > .d-pcard-media,
  body.v3-storefront[data-storefront="unified"] .d-catalog--how-packs .d-pcard > .d-pcard-media {
    grid-area: media;
    align-self: center;
    width: 100px;
    height: 100px;
    min-height: 0;
    margin: 0;
    padding: 0;
    aspect-ratio: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard2 > .d-pcard2-media > a,
  body.v3-storefront[data-storefront="unified"] .d-catalog--home-bestsellers .d-pcard > .d-pcard-media > a,
  body.v3-storefront[data-storefront="unified"] .d-catalog--how-packs .d-pcard > .d-pcard-media > a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard2 > .d-pcard2-media img,
  body.v3-storefront[data-storefront="unified"] .d-catalog--home-bestsellers .d-pcard > .d-pcard-media img,
  body.v3-storefront[data-storefront="unified"] .d-catalog--how-packs .d-pcard > .d-pcard-media img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard2 > .d-pcard2-media .d-pcard-badge,
  body.v3-storefront[data-storefront="unified"] .d-catalog--home-bestsellers .d-pcard > .d-pcard-media .d-pcard-badge,
  body.v3-storefront[data-storefront="unified"] .d-catalog--how-packs .d-pcard > .d-pcard-media .d-pcard-badge {
    top: 3px;
    left: 3px;
    max-width: calc(100% - 6px);
    padding: 2px 6px;
    font-size: 8.5px;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard2 .d-pcard-cat,
  body.v3-storefront[data-storefront="unified"] .d-catalog--home-bestsellers .d-pcard .d-pcard-cat,
  body.v3-storefront[data-storefront="unified"] .d-catalog--how-packs .d-pcard .d-pcard-cat {
    grid-area: cat;
    margin: 0 0 3px;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard2 .d-pcard2-name,
  body.v3-storefront[data-storefront="unified"] .d-catalog--home-bestsellers .d-pcard .d-pcard-name,
  body.v3-storefront[data-storefront="unified"] .d-catalog--how-packs .d-pcard .d-pcard-name {
    grid-area: name;
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard2 .d-pcard-variant,
  body.v3-storefront[data-storefront="unified"] .d-pcard2 .d-pack-units,
  body.v3-storefront[data-storefront="unified"] .d-catalog--home-bestsellers .d-pcard .d-pcard-variant,
  body.v3-storefront[data-storefront="unified"] .d-catalog--how-packs .d-pcard .d-pcard-variant {
    grid-area: variant;
    margin-top: 3px;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard2 .d-pcard2-desc {
    grid-area: desc;
    margin: 12px 0 0;
  }
  /* The shared card foot (.c-card-foot) takes the same "foot" area from its owner file, v3-c-card.css. */
  body.v3-storefront[data-storefront="unified"] .d-catalog--home-bestsellers .d-pcard .d-pcard-buy,
  body.v3-storefront[data-storefront="unified"] .d-catalog--how-packs .d-pcard .d-pcard-buy,
  body.v3-storefront[data-storefront="unified"] .d-catalog--home-bestsellers .d-pcard > .d-pcard-body > .d-gate,
  body.v3-storefront[data-storefront="unified"] .d-catalog--how-packs .d-pcard > .d-pcard-body > .d-gate {
    grid-area: foot;
    margin-top: 12px;
    min-width: 0;
  }
}

/* ---- D. Homepage (guest) — every width unless noted ------------------- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"][data-auth="out"] .lh-announce-pill,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-rating {
  display: none;
}
/* RUNTIME-22: the How It Works discovery section (.d-how-teaser) is no longer hidden for guests. */
/* Meet actions: the shared ghost button next to the canonical WhatsApp CTA — sized by the sitewide button system
   (DG-MOBILE-STOREFRONT-POLISH-20F). */
/* Registration copy panel: the dark-green How-it-works teaser surface, with contrast-safe ink. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #register .d-reg-copy {
  background:
    radial-gradient(120% 100% at 88% -10%, var(--d-green-600) 0%, var(--d-green-800) 46%, var(--d-green-900) 100%);
  color: var(--d-on-green-ink, #e9f6e2);
  border-right-color: rgba(255, 255, 255, 0.14);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #register .d-reg-copy h2 {
  color: #fff;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #register .d-reg-eyebrow {
  background: rgba(255, 255, 255, 0.12);
  color: #eaf7e1;
  box-shadow: 0 1px 2px rgba(12, 28, 16, 0.18);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #register .d-reg-lead,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #register .d-reg-reason span {
  color: rgba(233, 246, 226, 0.86);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #register .d-reg-reason b {
  color: #fff;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #register .d-reg-ico {
  background: rgba(255, 255, 255, 0.12);
  color: #d4f0bf;
  box-shadow: none;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #register .d-reg-copy a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .trust-item {
    padding: 10px;
  }
  /* "Shop all products" sits directly under the intro ("Some of our most popular products."). */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #bestsellers-sec .d-best-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ---- E. Modals, Quick View, info pages ------------------------------ */
/* The auth dialog itself takes the initial (programmatic) focus on open — no input focus, no mobile keyboard. */
body.v3-storefront .auth-modal .modal:focus {
  outline: none;
}
html body.v3-storefront[data-storefront][data-v3-page] .d-info-eyebrow {
  display: none;
}
body.v3-storefront[data-v3-page="info"] .d-icon-well { padding-top: 6px; padding-left: 2px; }

/* ---- G. Product & programme pages ------------------------------------ */
/* The component rules (.c-trust / .c-band__eyebrow everywhere; .c-secnav and the .c-pdp-hero gap on phones) live in
   their owner file v3-c-pdp.css; the phone-only "Already a customer?" prefix lives in v3-c-gate.css. Only the
   programme page's "Other Nutrition Packs" band is hidden here, by its page anchor, on phones. */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="program"] #main #pkg-more-packs {
    display: none;
  }
}

/* ---- H. How it works goal band without the photo ------------------- */
/* The photo-less closing band of a goal page is balanced deliberately on wider screens: one centred column instead
   of a left column with an empty right half. Phones keep the natural left-aligned stack. */
@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] #d-how-cta .d-cta-band:not(.d-cta-band-split) .d-cta-band-copy {
    align-items: center;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }
  body.v3-storefront[data-v3-page="info"] #d-how-cta .d-cta-band:not(.d-cta-band-split) p {
    margin-left: auto;
    margin-right: auto;
  }
  body.v3-storefront[data-v3-page="info"] #d-how-cta .d-cta-band:not(.d-cta-band-split) .d-cta-band-actions {
    justify-content: center;
  }
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20B — Mark's follow-up list (2026-10-02). Every width unless inside the phone block.
   (The guest hero-card eyebrow is shown again: POLISH-20 section D no longer hides it.)
   ===================================================================== */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out h1 {
  font-size: clamp(40px, 5vw, 58px);
  line-height: 1.1;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .trust-ico {
  background: var(--berry);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .trust-ico .ico {
  color: #fff;
}
body.v3-storefront[data-storefront="unified"] .cat-select-menu .csm-close span {
  padding-top: 4px;
}
body.v3-storefront[data-storefront="unified"] .nav-desktop a {
  font-weight: 500;
}
body.v3-storefront[data-storefront="unified"] .cat-strip a {
  font-weight: 700;
}
/* Closing-band photos on info pages (Help, FAQ, Mark's story, How it works): one portrait frame and crop. */
body.v3-storefront[data-v3-page="info"] .d-cta-band-media img {
  aspect-ratio: 7 / 8;
  object-position: center 90%;
}
/* (Phones show the closing-band photo only on Help and Mark's Story; their former fixed 4/3 and 1/1 frames are removed
   at their source, so the frame follows the photo's 7/8.) */
/* Mark's story hike photo on phones: a portrait frame that keeps the whole face (the 16:10 strip cut it off). */
@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-story-hike-merged-media img {
    aspect-ratio: 4 / 5;
    object-position: 50% 60%;
  }
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20C — Mark's third list (2026-10-02). Every width unless inside a phone block.
   ===================================================================== */
/* FAQ answers (Help, FAQ, How it works): every reference is a real, recognisable link. */
body.v3-storefront .d-faq-acc .acc-body a:not(.btn) {
  color: var(--d-c-link, #1d4ed8);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.v3-storefront .d-faq-acc .acc-body a:not(.btn):hover {
  text-decoration-thickness: 2px;
}
/* Shop headers (category, all products, shop overview, search): no guest "Register free" status line. */
body.v3-storefront .d-store-status.is-guest {
  display: none;
}
body.v3-storefront[data-storefront="unified"] .d-store-title {
  margin-top: 20px;
}
@media (max-width: 720px) {
  /* Help contact section on phones: Contact details, then the message form, then the company details. */
  body.v3-storefront[data-v3-page="info"] #d-help-contact .d-help-col {
    display: contents;
  }
  body.v3-storefront[data-v3-page="info"] #d-help-contact .d-help-details {
    order: 1;
  }
  body.v3-storefront[data-v3-page="info"] #d-help-contact .d-help-form-card {
    order: 2;
  }
  body.v3-storefront[data-v3-page="info"] #d-help-contact .d-company-details {
    order: 3;
  }
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20D — the searchbar (Mark: proposal C's field and button on proposal B's dark-green
   band). The band keeps its 62px slot (--searchbar-h) so the sticky offsets and the phone fold are unchanged.
   ===================================================================== */
body.v3-storefront[data-storefront="unified"] .searchbar {
  background: radial-gradient(120% 140% at 85% -20%, #3c8f2f 0%, #23602a 50%, #17421e 100%);
  border-bottom-color: transparent;
}
body.v3-storefront[data-storefront="unified"] .searchbar form {
  align-items: center;
  height: 46px;
  margin: 6px 0;
  padding: 4px 4px 4px 16px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: #f1f6ec;
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.55);
}
body.v3-storefront[data-storefront="unified"] .searchbar form:focus-within {
  border-color: #cde3c1;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28), 0 8px 24px -14px rgba(0, 0, 0, 0.55);
}
body.v3-storefront[data-storefront="unified"] .searchbar form > .ico {
  width: 20px;
  height: 20px;
  margin-top: 0;
  color: var(--green, #2f8f27);
}
body.v3-storefront[data-storefront="unified"] #v3-site-search {
  font-size: 16px;
  font-weight: 500;
}
body.v3-storefront[data-storefront="unified"] #v3-site-search::placeholder {
  color: #55604f;
  opacity: 1;
}
body.v3-storefront[data-storefront="unified"] .search-wrap .searchbar-submit {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  border-radius: 10px;
  background: var(--berry);
  box-shadow: none;
  color: #fff;
}
body.v3-storefront[data-storefront="unified"] .search-wrap .searchbar-submit:hover {
  background: var(--berry-dark);
}
body.v3-storefront[data-storefront="unified"] .search-wrap .searchbar-submit .ico {
  width: 18px;
  height: 18px;
  margin: 0;
  color: #fff;
}
@media (max-width: 720px) {
  html.v3-search-open body.v3-storefront[data-storefront="unified"] .searchbar,
  html.v3-search-closing body.v3-storefront[data-storefront="unified"] .searchbar {
    border-bottom-color: transparent;
  }
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20E — Mark's fifth list (2026-10-03).
   ===================================================================== */
/* Help and Mark's Story heroes: on wider screens the photo column was only as tall as the copy (~320px), which cut
   the photos hard; a calmer minimum height lets them breathe (the copy stays vertically centred). */
@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] .d-hero-split.d-help-photo-hero,
  body.v3-storefront[data-v3-page="info"] .d-hero-split.d-story-photo-hero {
    min-height: 440px;
  }
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20F — Mark's sixth list (2026-10-03): calmer, easier to scan info pages (one title
   scale, one section rhythm, no kicker labels, calmer product links), one sitewide button system, header shadows,
   and the searchbar collapsed on every width (opened from the header search icon).
   ===================================================================== */

/* ---- 1. Titles: see the 20G storefront type layer (section and card title tokens). ---- */
/* One sub-title size for list items and cards inside the content. */
body.v3-storefront[data-v3-page="info"] .info-page:is(.d-how, .d-story) h3 {
  font-size: 18px;
  line-height: 1.3;
}
/* The How it works context band joins the same section rhythm (it had its own 96px / 40px gap). */
body.v3-storefront[data-v3-page="info"] .d-how-index > .d-how-context-band {
  margin-top: var(--d-info-section);
}
/* The same page-title size as Help and Mark's Story (32px on phones). */
body.v3-storefront[data-v3-page="info"] .d-how .d-hero-copy h1 {
  font-size: clamp(32px, 4.6vw, 52px);
}

/* ---- 2. One section rhythm ---- */
body.v3-storefront[data-v3-page="info"] .d-how-goal > :is(.d-how-price-cta, .d-how-changing-group, .d-how-shared-group, .d-how-personal-help) {
  margin-top: var(--d-info-section);
}
/* The divider lines are gone: the spacing already separates the sections. */
body.v3-storefront[data-v3-page="info"] :is(.d-how, .d-story) .d-how-divider {
  display: none;
}

/* ---- 4. No kicker labels above blocks (in line with the removed eyebrows) ---- */
body.v3-storefront[data-v3-page="info"] :is(.d-how-packs-kicker, .d-how-shared-kicker) {
  display: none;
}

/* ---- 5. Product links read as the site's normal links (only the first mention per section is a link) ---- */
body.v3-storefront[data-v3-page="info"] .d-how-plink {
  color: var(--d-c-link, #1d4ed8);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
body.v3-storefront[data-v3-page="info"] .d-how-plink:hover {
  color: var(--d-c-link, #1d4ed8);
  text-decoration-thickness: 2px;
}
body.v3-storefront[data-v3-page="info"] .d-how-rule .d-how-plink,
body.v3-storefront[data-v3-page="info"] .d-how-rule .d-how-plink:hover {
  color: inherit;
}

/* ---- 3. One sitewide button system: three sizes, a handful of colour roles ----
   Roles: .btn-primary (berry, the main action) · .btn-green (buy / create) · .btn-ghost (white secondary) ·
   .d-cta-whatsapp (WhatsApp) · .d-btn-cream (the light button on dark green surfaces).
   Sizes: default 44px · .btn-lg 52px · .btn-sm 36px. Every button centres its label and icon the same way. */
body.v3-storefront .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
body.v3-storefront .btn.btn-lg {
  min-height: 52px;
  padding: 13px 28px;
  font-size: 16px;
}
body.v3-storefront .btn.btn-sm {
  min-height: 36px;
  padding: 7px 16px;
  font-size: 14px;
}
/* Button icons: one square icon box, centred on the label (the svg fills it; it no longer sits at the top of a taller
   line box). 20px in default buttons, 22px in large ones — the button height does not change. */
body.v3-storefront .btn > [data-ico] {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  line-height: 0;
}
body.v3-storefront .btn.btn-lg > [data-ico] {
  width: 22px;
  height: 22px;
}
body.v3-storefront .btn > [data-ico] > svg.ico {
  width: 100%;
  height: 100%;
  margin: 0;
}
/* Category pack banner: its two actions follow the default size. */
body.v3-storefront[data-storefront="unified"] :is(.d-cpb-primary, .d-cpb-secondary) {
  min-height: 44px;
  font-size: 15px;
}
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-cpb-actions > * {
    font-size: 15px;
  }
}

/* ---- Header: the searchbar is collapsed on every width and opens from the header search icon ---- */
@media (min-width: 721px) {
  body.v3-storefront[data-storefront="unified"] .searchbar {
    max-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
  }
  html.v3-search-open body.v3-storefront[data-storefront="unified"] .searchbar,
  html.v3-search-closing body.v3-storefront[data-storefront="unified"] .searchbar {
    max-height: var(--searchbar-h);
    visibility: visible;
    pointer-events: auto;
  }
  html.v3-search-open body.v3-storefront[data-storefront="unified"] .searchbar:has(.search-results:not([hidden])) {
    overflow: visible;
  }
}
/* Phones: the open searchbar carries the dock's shadow recipe in its own deep green. */
@media (max-width: 720px) {
  html.v3-search-open body.v3-storefront[data-storefront="unified"] .searchbar,
  html.v3-search-closing body.v3-storefront[data-storefront="unified"] .searchbar {
    box-shadow: 0 10px 22px -12px rgba(23, 66, 30, 0.78), 0 3px 8px -3px rgba(12, 40, 16, 0.32);
  }
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20G — one storefront rhythm and type layer (homepage + info pages). The values live in
   v3-design-tokens.css (--d-section-gap, --d-h2-section, --d-h2-card, --d-copy-*); this layer only applies them.
   It is anchored on #main so it is the one authority over the many older page-specific title rules.
   ===================================================================== */
/* Section titles: every h2 on an info page and the homepage section heads, guest and signed in (28px phone → 38px
   desktop). DG-MOBILE-STOREFRONT-POLISH-20M (Mark): one weight (700, as on the info pages) and no own margins.
   DG-WHATSNEW-SHOP-HARMONISATION-33: What's New follows this rule again (its old card-label h2s, the reason for the
   31B exclusion, are gone; its item titles are h3 now). */
body.v3-storefront[data-v3-page="info"] #main h2:not(.modal h2),
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main :is(.d-best-head, .d-reg-copy, .d-meet-copy, .d-ways-head) > h2,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main :is(.d-best-head, .d-testi-head) > div > h2 {
  font-size: var(--d-h2-section);
  line-height: 1.1;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main :is(.d-best-head, .d-reg-copy, .d-meet-copy, .d-ways-head) > h2,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main :is(.d-best-head, .d-testi-head) > div > h2 {
  margin: 0;
  font-weight: 700;
  letter-spacing: var(--d-tracking-tight);
}
/* Titles inside a card or panel (Help/Contact cards, FAQ groups, the goal pages' topics and side panels). */
body.v3-storefront[data-v3-page="info"] #main :is(.d-info-card, .d-faq-group, .d-how-info, .d-how-price-cta, .d-how-personal-help, .d-how-mark-example) h2:not(.modal h2) {
  font-size: var(--d-h2-card);
  line-height: 1.2;
}
/* Hero and closing-band copy: one flow everywhere — title, then the paragraphs, then the actions. */
body.v3-storefront[data-v3-page="info"] #main :is(.d-hero-copy, .d-cta-band-copy) {
  gap: 0;
}
body.v3-storefront[data-v3-page="info"] #main :is(.d-hero-copy, .d-cta-band-copy) > * {
  margin-top: 0;
  margin-bottom: 0;
}
body.v3-storefront[data-v3-page="info"] #main .d-hero-copy > h1 {
  line-height: 1.1;
}
body.v3-storefront[data-v3-page="info"] #main :is(.d-hero-copy, .d-cta-band-copy) > :is(h1, h2) + * {
  margin-top: var(--d-copy-title-gap);
}
body.v3-storefront[data-v3-page="info"] #main :is(.d-hero-copy, .d-cta-band-copy) > p + p {
  margin-top: var(--d-copy-para-gap);
}
body.v3-storefront[data-v3-page="info"] #main :is(.d-hero-copy, .d-cta-band-copy) > :is(.d-hero-actions, .d-cta-band-actions) {
  margin-top: var(--d-copy-actions-gap);
}
body.v3-storefront[data-v3-page="info"] #main .d-cta-band-copy > .d-cta-band-actions + * {
  margin-top: var(--d-copy-para-gap);
}

/* Mark (20G): small follow-ups. */
body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-context {
  display: none;
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20H — Mark's seventh list (2026-10-03).
   ===================================================================== */
/* While a view switch fetches the new grid, the current one dims (no layout jump). */
html.v3-view-switching body.v3-storefront [data-catalog-view] {
  opacity: 0.45;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
/* Phones always show the list view (v3-catalog-view.js). The list row then follows the phone card: a 100px photo
   left of category · name · variant, and below it — over the full card width, from the left edge — the description,
   the "Selected:" flavour picker and the price / gate and actions. */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-prow {
    grid-template-columns: 100px minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr auto auto auto auto;
    grid-template-areas:
      "media ."
      "media cat"
      "media name"
      "media variant"
      "media ."
      "desc desc"
      "meta meta"
      "flav flav"
      "buy buy";
    column-gap: 14px;
    row-gap: 0;
    padding: 14px;
    align-items: start;
  }
  body.v3-storefront[data-storefront="unified"] .d-prow > .d-prow-info {
    display: contents;
  }
  body.v3-storefront[data-storefront="unified"] .d-prow > .d-prow-media {
    grid-area: media;
    align-self: center;
    width: 100px;
    height: 100px;
    padding: 0;
    aspect-ratio: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
  }
  body.v3-storefront[data-storefront="unified"] .d-prow > .d-prow-media > a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
  }
  body.v3-storefront[data-storefront="unified"] .d-prow > .d-prow-media img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
  }
  body.v3-storefront[data-storefront="unified"] .d-prow > .d-prow-info > :is(.d-pcard-cat, .d-pcard-role) {
    grid-area: cat;
    margin: 0 0 3px;
  }
  body.v3-storefront[data-storefront="unified"] .d-prow > .d-prow-info > .d-prow-name {
    grid-area: name;
    font-size: 16px;
    line-height: 1.25;
  }
  body.v3-storefront[data-storefront="unified"] .d-prow > .d-prow-info > .d-pcard-variant {
    grid-area: variant;
    margin-top: 3px;
  }
  body.v3-storefront[data-storefront="unified"] .d-prow > .d-prow-info > .d-prow-desc {
    grid-area: desc;
    margin: 12px 0 0;
  }
  body.v3-storefront[data-storefront="unified"] .d-prow > .d-prow-info > .d-prow-meta {
    grid-area: meta;
    margin-top: 8px;
  }
  body.v3-storefront[data-storefront="unified"] .d-prow > .d-prow-info > .d-prow-flavours {
    grid-area: flav;
    margin-top: 12px;
  }
  /* The buy column (.c-card-buycol) takes the "buy" area from its owner file, v3-c-card.css. */
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20L — Mark (2026-10-03).
   ===================================================================== */
/* Signed-in homepage: below the member hero (and its sale banner, which stay one tight unit) the sections use the
   same shared section gap as the guest homepage (v3-home-guest-section-space.css, v3-design-tokens.css). */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"][data-auth="in"] main > #bestsellers-sec,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"][data-auth="in"] main > .d-ways,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"][data-auth="in"] main > .d-meet {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--d-section-gap);
  padding-bottom: 0;
}
/* "Two ways to buy" route icons: berry with a light icon; the featured route dark green. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route .d-route-ico {
  background: var(--berry);
  color: var(--green-softer);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-route.d-route-featured .d-route-ico {
  background: var(--green-dark);
  color: var(--green-softer);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-ways .d-route-ico :is([data-ico="badge-check"], [data-ico="store"]) {
  padding-top: 6px;
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20M (Mark) — one homepage section head, guest and signed in. The titles share the 20G
   title layer above; this is the one eyebrow (the "Popular picks" style: 12.5px, 700, no capitals; on phones the
   eyebrows are hidden), the eyebrow → title and title → text gaps, and the head → content gap (the 22px of the
   shared .section-head). The former per-section eyebrow/title/padding rules are removed. The sale banner's eyebrow
   takes the same values in its own owner file, homepage-launch-banner.css.
   ===================================================================== */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main :is(.d-best-eyebrow, .d-ways-eyebrow, .d-meet-eyebrow) {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: none;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main :is(.d-best-eyebrow, .d-ways-eyebrow, .d-meet-eyebrow) {
  margin: 0 0 8px;
  color: var(--green-dark);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main .d-meet-copy > h2 {
  margin-bottom: var(--d-copy-title-gap);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main .d-ways-head {
  margin-bottom: 22px;
}
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main :is(.d-best-eyebrow, .d-ways-eyebrow, .d-meet-eyebrow) {
    display: none;
  }
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20N (Mark) — info pages.
   ===================================================================== */
/* Training examples (#d-how-sessions): the one owner of the session cards (the former rules spread over the file are
   removed). A tinted head per intensity (A–D → 1–4), the key line as a callout, and Before / During / After as a
   small timeline with filled icon badges. */
body.v3-storefront[data-v3-page="info"] .d-how-session-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
body.v3-storefront[data-v3-page="info"] .d-how-session-card {
  --session-tint: #eef7e8;
  --session-ink: var(--green-dark);
  --session-dot: rgba(31, 106, 26, 0.2);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
body.v3-storefront[data-v3-page="info"] .d-how-session-card[data-level="2"] {
  --session-tint: #ddefd3;
}
body.v3-storefront[data-v3-page="info"] .d-how-session-card[data-level="3"] {
  --session-tint: #c5e4b5;
}
body.v3-storefront[data-v3-page="info"] .d-how-session-card[data-level="4"],
body.v3-storefront[data-v3-page="info"] .d-how-session-card[data-level="5"] {
  --session-tint: var(--green-dark);
  --session-ink: #fff;
  --session-dot: rgba(255, 255, 255, 0.35);
}
body.v3-storefront[data-v3-page="info"] .d-how-session-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--session-tint);
  color: var(--session-ink);
}
body.v3-storefront[data-v3-page="info"] .d-how-session-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-dark);
}
body.v3-storefront[data-v3-page="info"] .d-how-session-icon svg {
  width: 20px;
  height: 20px;
}
body.v3-storefront[data-v3-page="info"] .d-how-session-head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  color: inherit;
}
body.v3-storefront[data-v3-page="info"] .d-how-session-head .d-how-mini-when {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: inherit;
  opacity: 0.78;
}
body.v3-storefront[data-v3-page="info"] .d-how-session-level {
  display: inline-flex;
  gap: 4px;
}
body.v3-storefront[data-v3-page="info"] .d-how-session-level i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--session-dot);
}
body.v3-storefront[data-v3-page="info"] .d-how-session-level i.is-on {
  background: currentColor;
}
body.v3-storefront[data-v3-page="info"] .d-how-session-lead {
  margin: 18px 20px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--green-softer);
  border-left: 3px solid var(--green);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}
body.v3-storefront[data-v3-page="info"] .d-how-session-slots {
  margin: 18px 20px 20px;
  padding: 0;
  list-style: none;
}
body.v3-storefront[data-v3-page="info"] .d-how-session-slots li {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
  margin: 0;
  padding: 0 0 16px;
}
body.v3-storefront[data-v3-page="info"] .d-how-session-slots li:last-child {
  padding-bottom: 0;
}
/* The timeline: a thin line from one badge to the next. */
body.v3-storefront[data-v3-page="info"] .d-how-session-slots li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
body.v3-storefront[data-v3-page="info"] .d-how-session-slot-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
}
body.v3-storefront[data-v3-page="info"] .d-how-session-slots li.is-during .d-how-session-slot-ico {
  background: var(--green);
}
body.v3-storefront[data-v3-page="info"] .d-how-session-slots li.is-after .d-how-session-slot-ico {
  background: var(--berry);
}
body.v3-storefront[data-v3-page="info"] .d-how-session-slot-ico svg {
  width: 17px;
  height: 17px;
}
body.v3-storefront[data-v3-page="info"] .d-how-session-slot-copy {
  min-width: 0;
  padding-top: 6px;
}
body.v3-storefront[data-v3-page="info"] .d-how-session-slot-copy b {
  display: block;
  margin-bottom: 2px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
body.v3-storefront[data-v3-page="info"] .d-how-session-slot-text {
  display: block;
  font-size: var(--d-how-card-copy, 15px);
  line-height: 1.5;
  color: var(--ink-soft, #3b443d);
}
@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-session-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.v3-storefront[data-v3-page="info"] .d-how-session-head {
    padding: 14px 16px;
    gap: 10px;
  }
  body.v3-storefront[data-v3-page="info"] .d-how-session-lead {
    margin: 14px 16px 0;
  }
  body.v3-storefront[data-v3-page="info"] .d-how-session-slots {
    margin: 14px 16px 16px;
  }
}

/* Product links on a dark band (the goal heroes, the closing bands) keep the band's light text colour, underlined
   (the site's blue link would not read on dark green). Never bolder than the text around them. */
body.v3-storefront[data-v3-page="info"] #main :is(.d-hero-copy, .d-cta-band-copy) .d-how-plink,
body.v3-storefront[data-v3-page="info"] #main :is(.d-hero-copy, .d-cta-band-copy) .d-how-plink:hover {
  color: inherit;
  text-decoration-color: currentColor;
}
body.v3-storefront[data-v3-page="info"] #main .d-how-plink {
  font-weight: inherit;
}
body.v3-storefront[data-v3-page="info"] #main :is(.d-hero-copy, .d-cta-band-copy) .d-how-plink:focus-visible {
  outline-color: #fff;
}
/* Product grids on the info pages: no discount badges (the cards' "Pack" tag is not rendered there: `pack_tag` => false). */
body.v3-storefront[data-v3-page="info"] #main .d-pcard-badge {
  display: none;
}
/* Small print after the copy (e.g. the disclaimer under Mark's training-day shake). */
body.v3-storefront[data-v3-page="info"] #main .d-how-fine-print {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
body.v3-storefront[data-v3-page="info"] #main .d-how-fine-print small {
  font-size: inherit;
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20O (Mark).
   ===================================================================== */
/* "Common beginner mistakes": the one owner of the mistake cards (the three former marker rules are removed) —
   a round soft-berry badge with a berry cross, aligned with the card title. */
body.v3-storefront[data-v3-page="info"] .d-how-mistake-list {
  display: grid;
  gap: 12px;
}
body.v3-storefront[data-v3-page="info"] .d-how-mistake-list > li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
body.v3-storefront[data-v3-page="info"] .d-how-mistake-list > li::before {
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--berry-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e1566' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

/* Phones: the popups sit at the top (--d-modal-top-phone) instead of centred. The product/pack Quick View and the
   welcome popup do the same in their owner files (v3-c-quickview.css, v3-launch-hero.css). */
@media (max-width: 720px) {
  body.v3-storefront .modal-overlay {
    align-items: flex-start;
    padding-top: calc(var(--d-modal-top-phone, 24px) + env(safe-area-inset-top, 0px));
  }
  body.v3-storefront .modal-overlay > .modal {
    margin-top: 0;
    margin-bottom: auto;
  }
  body.v3-storefront .auth-modal > .modal {
    max-height: calc(100dvh - var(--d-modal-top-phone, 24px) - env(safe-area-inset-top, 0px) - 12px);
  }
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20Q (Mark) — values changed in place: auth aside title weight 800 → 600, aside link
   14 → 16px, the phone sign-in/sign-up cross line 14.5 → 16px and margin 20 → 24px, flavour chips padding
   6px 12px → 10px 12px (list chips ≤560px min-height 32 → 42px), comfortable card description 13.5 → 14px, the
   .d-pcard-why rule and class removed (the goal reason reads as the card description); in v3-c-gate.css the gate
   title 15 → 16px and its link 13 → 14px.
   ===================================================================== */
/* DG-MOBILE-STOREFRONT-POLISH-20Q (Mark): the category tiles show no eyebrow ("Products" / "Packs & programs"). */
body.v3-storefront .cat-card .cc-eyebrow {
  display: none;
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20T (Mark) — open search results (every width): a scrim behind the list, below the
   header (z 69–70) and the search band (z 65), and no page scroll (v3-search.js sets html.v3-search-results-open).
   The lock is overflow hidden on the root — not the fixed-body lock — so the sticky header and search band stay
   exactly in place (the scrollbar gutter is reserved, nothing shifts); the results list keeps its own scroll.
   ===================================================================== */
body.v3-storefront .search-scrim {
  position: fixed;
  inset: 0;
  z-index: 64;
  background: linear-gradient(180deg, rgba(36, 9, 28, 0.42) 0%, rgba(20, 12, 18, 0.62) 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
html.v3-search-results-open body.v3-storefront .search-scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Only the root: an overflow on <body> would make it a scroll container and release the sticky header/search band. */
html.v3-search-results-open {
  overflow: hidden;
}
html.v3-search-results-open body.v3-storefront .search-results {
  overscroll-behavior: contain;
}
@media (prefers-reduced-motion: no-preference) {
  body.v3-storefront .search-scrim {
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  }
  html.v3-search-results-open body.v3-storefront .search-scrim {
    transition: opacity 0.18s ease;
  }
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20V (Mark) — goal pages, shared parts.
   ===================================================================== */
/* "Sources & guidance": one owner (the former disclosure rules are removed) — a quiet, collapsed row with an info
   icon; inside one summary line, the source rows (official pages linked) and a muted disclaimer. */
body.v3-storefront[data-v3-page="info"] .d-how-sources-acc {
  max-width: 72ch;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f7f6f2;
  padding: 0 16px;
}
body.v3-storefront[data-v3-page="info"] .d-how-sources-acc > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
body.v3-storefront[data-v3-page="info"] .d-how-sources-acc > summary::-webkit-details-marker {
  display: none;
}
body.v3-storefront[data-v3-page="info"] .d-how-sources-acc > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
}
body.v3-storefront[data-v3-page="info"] .d-how-sources-acc[open] > summary::after {
  content: "\2212";
}
body.v3-storefront[data-v3-page="info"] .d-how-sources-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-softer);
  color: var(--green-dark);
}
body.v3-storefront[data-v3-page="info"] .d-how-sources-ico svg {
  width: 16px;
  height: 16px;
}
body.v3-storefront[data-v3-page="info"] .d-how-sources-body {
  padding: 0 0 16px;
}
body.v3-storefront[data-v3-page="info"] .d-how-sources-intro {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
body.v3-storefront[data-v3-page="info"] .d-how-sources-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.v3-storefront[data-v3-page="info"] .d-how-sources-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
}
body.v3-storefront[data-v3-page="info"] .d-how-sources-row-ico {
  display: inline-flex;
  flex: none;
  color: var(--muted);
}
body.v3-storefront[data-v3-page="info"] .d-how-sources-row-ico svg {
  width: 15px;
  height: 15px;
}
body.v3-storefront[data-v3-page="info"] .d-how-sources-list a {
  color: var(--d-c-link, #1d4ed8);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.v3-storefront[data-v3-page="info"] .d-how-sources-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
/* The register prompt is the shared guest gate (as in the Quick View): no own card around it. */
body.v3-storefront[data-v3-page="info"] .d-how-price-cta.d-how-price-gate {
  max-width: 640px;
  padding: 0;
  border: 0;
  background: none;
}

/* DG-MOBILE-STOREFRONT-POLISH-20W (Mark): example days read as examples, not rules — a small badge under the title. */
body.v3-storefront[data-v3-page="info"] .d-how-days-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 10px 0 18px;
  font-size: 14px;
  color: var(--muted);
}
body.v3-storefront[data-v3-page="info"] .d-how-days-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--green-softer);
  border: 1px solid var(--green-soft);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green-dark);
}

/* =====================================================================
   DG-MOBILE-STOREFRONT-POLISH-20X (Mark) — Weight: Lose / Maintain as two choice cards (the former pill/sticky
   selector rules are removed). Same buttons and JS (data-how-path, aria-pressed); berry for Lose, green for Maintain.
   ===================================================================== */
body.v3-storefront[data-v3-page="info"] .d-how-route-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 8px;
}
body.v3-storefront[data-v3-page="info"] .d-how-route-card {
  --route: var(--green-dark);
  --route-soft: var(--green-softer);
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 18px 20px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: #fff;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}
body.v3-storefront[data-v3-page="info"] .d-how-route-card[data-how-path="lose"] {
  --route: var(--berry);
  --route-soft: var(--berry-soft);
}
body.v3-storefront[data-v3-page="info"] .d-how-route-card:hover {
  border-color: var(--route);
}
body.v3-storefront[data-v3-page="info"] .d-how-route-card[aria-pressed="true"] {
  border-color: var(--route);
  background: var(--route-soft);
  box-shadow: 0 6px 18px -10px rgba(27, 33, 29, 0.45);
}
body.v3-storefront[data-v3-page="info"] .d-how-route-ico {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--route);
  color: #fff;
}
body.v3-storefront[data-v3-page="info"] .d-how-route-ico svg {
  width: 22px;
  height: 22px;
}
body.v3-storefront[data-v3-page="info"] .d-how-route-label {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--route);
}
body.v3-storefront[data-v3-page="info"] .d-how-route-text {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
body.v3-storefront[data-v3-page="info"] .d-how-route-check {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
}
body.v3-storefront[data-v3-page="info"] .d-how-route-card[aria-pressed="true"] .d-how-route-check {
  border-color: var(--route);
  background: var(--route);
}
body.v3-storefront[data-v3-page="info"] .d-how-route-card[aria-pressed="true"] .d-how-route-check::after {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: -3px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg);
}
@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-route-switch {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  body.v3-storefront[data-v3-page="info"] .d-how-route-card {
    padding: 14px 16px;
  }
}
/* "The basics stay the same": the shared band as four short checks. */
body.v3-storefront[data-v3-page="info"] .d-how-shared-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
body.v3-storefront[data-v3-page="info"] .d-how-shared-points li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 15px;
  line-height: 1.45;
}
body.v3-storefront[data-v3-page="info"] .d-how-shared-points li::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-shared-points {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Product grid: small route chips under the intro (e.g. Lose: 2 shakes a day / Maintain: 1 shake a day). */
body.v3-storefront[data-v3-page="info"] .d-how-products-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
  padding: 0;
  list-style: none;
}
body.v3-storefront[data-v3-page="info"] .d-how-products-chips li {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--green-softer);
  border: 1px solid var(--green-soft);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green-dark);
}
body.v3-storefront[data-v3-page="info"] .d-how-products-chips li.is-berry {
  background: var(--berry-soft);
  border-color: rgba(142, 21, 102, 0.2);
  color: var(--berry);
}

/* DG-MOBILE-STOREFRONT-POLISH-20Y (Mark) — goal pages: a tinted panel for a guide's key section (e.g. "Ordinary food first"),
   and a small role tag on mini cards (e.g. "Everyday top-up"). */
body.v3-storefront[data-v3-page="info"] .d-how-info.d-how-panel {
  padding: 28px 28px 30px;
  border-radius: 22px;
  border: 1px solid #d7e6d2;
  background: #eef6ea;
}
body.v3-storefront[data-v3-page="info"] .d-how-info.d-how-panel-berry {
  border-color: #efd3e3;
  background: #fbf1f6;
}
body.v3-storefront[data-v3-page="info"] .d-how-panel .d-how-food-list li,
body.v3-storefront[data-v3-page="info"] .d-how-panel .d-how-mini-card {
  background: #fff;
}
body.v3-storefront[data-v3-page="info"] .d-how-mini-role {
  display: inline-block;
  justify-self: start;
  align-self: flex-start;
  width: fit-content;
  margin: 0 0 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef6ea;
  color: var(--green-dark);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card:has(> .d-how-mini-role),
body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card:has(> .d-how-mini-role) {
  grid-template-rows: auto auto auto;
}
body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > .d-how-mini-role,
body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > .d-how-mini-role {
  grid-column: 2;
  align-self: end;
  margin: 0;
}
body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-role + h3,
body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-role + h3 {
  align-self: start;
}
@media (max-width: 560px) {
  body.v3-storefront[data-v3-page="info"] #d-how-product-roles .d-how-mini-card > .d-how-mini-role,
  body.v3-storefront[data-v3-page="info"] #d-how-gym-routine .d-how-mini-card > .d-how-mini-role {
    grid-column: 1;
  }
}
@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-info.d-how-panel {
    padding: 20px 16px 22px;
    border-radius: 18px;
  }
}

/* DG-MOBILE-STOREFRONT-POLISH-20AA (Mark) — Training: four session categories as a 2 x 2 grid on wider screens,
   the fourth ("Hot / high sweat") in the guide's warm tone; the category name as a small uppercase label. */
body.v3-storefront[data-v3-page="info"] .d-how-decision-heat {
  border-top-color: #a13f2e;
}
body.v3-storefront[data-v3-page="info"] .d-how-decision-heat .d-how-card-icon-wrap {
  background: color-mix(in srgb, #a13f2e 12%, #fff);
  border-color: color-mix(in srgb, #a13f2e 26%, transparent);
  color: #a13f2e;
}
body.v3-storefront[data-v3-page="info"] .d-how-decision-heat .d-how-decision-points li::before {
  color: #a13f2e;
}
body.v3-storefront[data-v3-page="info"] .d-how-decision-grid-4 .d-how-decision-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  align-content: start;
}
body.v3-storefront[data-v3-page="info"] .d-how-decision-grid-4 .d-how-decision-panel h3 {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body.v3-storefront[data-v3-page="info"] .d-how-decision-grid-4 .d-how-decision-points {
  grid-column: 1 / -1;
  margin-top: 14px;
}
body.v3-storefront[data-v3-page="info"] .d-how-decision-grid-4 .d-how-decision-points li {
  color: var(--ink, #1c2a1a);
}
@media (min-width: 861px) {
  body.v3-storefront[data-v3-page="info"] .d-how-decision-grid.d-how-decision-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.v3-storefront[data-v3-page="info"] .d-how-decision-grid-4 .d-how-decision-panel {
    display: grid;
  }
}

/* DG-MOBILE-STOREFRONT-POLISH-20AB (Mark) — Busy: Add / Shake / Go steps under the start copy; the bag list in two columns on wider screens. */
body.v3-storefront[data-v3-page="info"] .d-how-start .d-how-start-steps {
  margin-top: 14px;
}
body.v3-storefront[data-v3-page="info"] .d-how-start .d-how-start-steps-note {
  margin-top: 14px;
}
@media (min-width: 861px) {
  body.v3-storefront[data-v3-page="info"] #d-how-what-to-keep .d-how-check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
    max-width: none;
  }
}

/* DG-MOBILE-STOREFRONT-POLISH-20AC (Mark) — Daily energy calculator: always open, compact form (4 + 2 on wider screens),
   one action, the range as a prominent result card, short note + "About this estimate" disclosure. */
body.v3-storefront[data-v3-page="info"] .d-how-tdee {
  margin-top: 18px;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--line, #e4e8df);
  border-radius: 18px;
  background: #fff;
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee-grid {
  margin: 0 0 16px;
}
@media (min-width: 900px) {
  body.v3-storefront[data-v3-page="info"] .d-how-tdee-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body.v3-storefront[data-v3-page="info"] .d-how-tdee-grid .d-how-tdee-wide {
    grid-column: span 2;
  }
}
@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-tdee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee-grid input,
body.v3-storefront[data-v3-page="info"] .d-how-tdee-grid select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee input::placeholder {
  color: #8a9386;
  font-weight: 500;
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee .d-btn-cream {
  margin-top: 0;
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee-out {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  background: none;
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee-result {
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: 16px;
  background: linear-gradient(135deg, #1f5a1a, #2f7a27);
  color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  body.v3-storefront[data-v3-page="info"] .d-how-tdee-result {
    animation: d-how-tdee-in 0.28s ease-out;
  }
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee-out .d-how-tdee-result p {
  margin: 0;
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee-out .d-how-tdee-result .d-how-tdee-range {
  margin-top: 6px;
  font-size: clamp(28px, 7.4vw, 46px);
  white-space: nowrap;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee-unit {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0;
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee-per {
  font-size: 14px;
  opacity: 0.85;
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee-out .d-how-tdee-result .d-how-tdee-lead {
  margin-top: 14px;
  font-size: 15.5px;
  font-weight: 700;
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee-out .d-how-tdee-result .d-how-tdee-why {
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.5;
  opacity: 0.92;
  max-width: 60ch;
}
@keyframes d-how-tdee-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee-extra,
body.v3-storefront[data-v3-page="info"] .d-how-tdee-about {
  margin-top: 12px;
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee-extra summary,
body.v3-storefront[data-v3-page="info"] .d-how-tdee-about summary {
  cursor: pointer;
  width: fit-content;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green-dark);
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee .d-how-tdee-extra .d-how-tdee-extra-out,
body.v3-storefront[data-v3-page="info"] .d-how-tdee .d-how-tdee-about p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted, #5b6358);
  max-width: 68ch;
}
body.v3-storefront[data-v3-page="info"] .d-how-tdee-note {
  margin: 16px 0 0;
  font-size: 13px;
}

/* DG-HOW-IT-WORKS-GOAL-REPOSITIONING-RUNTIME-21 — cross-guide links in a goal hero or closing band (e.g. "Sports &
   Training" on Gym & Muscle) keep the band's light text colour, like the product links there. The Gym & Muscle
   "gym routine" cards reuse the compact product-roles card rules above (selectors extended, values unchanged). */
body.v3-storefront[data-v3-page="info"] #main :is(.d-hero-copy, .d-cta-band-copy) .d-link-underline,
body.v3-storefront[data-v3-page="info"] #main :is(.d-hero-copy, .d-cta-band-copy) .d-link-underline:hover {
  color: inherit;
  text-decoration-color: currentColor;
}

/* RUNTIME-21 — a five-card grid (Busy Days "Plan it around your day") fills both rows on wide screens: three, then two. */
@media (min-width: 1001px) {
  body.v3-storefront[data-v3-page="info"] .d-how-card-grid.d-how-card-grid-5 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  body.v3-storefront[data-v3-page="info"] .d-how-card-grid-5 > * {
    grid-column: span 2;
  }
  body.v3-storefront[data-v3-page="info"] .d-how-card-grid-5 > :nth-child(n + 4) {
    grid-column: span 3;
  }
}
/* RUNTIME-21 — five session types (Sports & Training): the compact category panels in two full rows, three then two. */
@media (min-width: 861px) {
  body.v3-storefront[data-v3-page="info"] .d-how-decision-grid.d-how-decision-grid-5 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  body.v3-storefront[data-v3-page="info"] .d-how-decision-grid-5 > .d-how-decision-panel {
    grid-column: span 2;
  }
  body.v3-storefront[data-v3-page="info"] .d-how-decision-grid-5 > .d-how-decision-panel:nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* DG-STORY-HOME-HELP-DISCOVERY-RUNTIME-22 — Mark's Story: three short routine blocks above the product grid (A4) and
   one related-guides row (A7). Scoped to the Story page classes. */
body.v3-storefront[data-v3-page="info"] .d-story-routine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 26px;
}
body.v3-storefront[data-v3-page="info"] .d-story-routine-block {
  padding: 18px 20px;
  border-radius: 16px;
  background: #f7f5ee;
  border: 1px solid rgba(31, 74, 27, 0.08);
}
body.v3-storefront[data-v3-page="info"] .d-story-routine-block h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}
body.v3-storefront[data-v3-page="info"] .d-story-routine-block p {
  margin: 15px 0 0; /* Mark (2026-10-06) */
  font-size: 14px;
  line-height: 1.8;
}
body.v3-storefront[data-v3-page="info"] .d-story-guides h2 {
  margin-bottom: 14px;
}
body.v3-storefront[data-v3-page="info"] .d-story-guides-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.v3-storefront[data-v3-page="info"] .d-story-guide {
  position: relative;
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 16px 44px 16px 18px;
  border: 1px solid var(--line, #e4e8df);
  border-radius: 16px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}
body.v3-storefront[data-v3-page="info"] .d-story-guide:hover {
  border-color: color-mix(in srgb, var(--green, #2f8f27) 45%, #fff);
}
body.v3-storefront[data-v3-page="info"] .d-story-guide:focus-visible {
  outline: 3px solid var(--green, #2f8f27);
  outline-offset: 2px;
}
body.v3-storefront[data-v3-page="info"] .d-story-guide-title {
  font-weight: 700;
  color: var(--ink, #1c2a1a);
}
body.v3-storefront[data-v3-page="info"] .d-story-guide-body {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted, #5b6358);
}
body.v3-storefront[data-v3-page="info"] .d-story-guide-arrow {
  position: absolute;
  right: 16px;
  top: 16px;
  color: var(--green-dark, #1f4a1b);
}
@media (max-width: 900px) {
  body.v3-storefront[data-v3-page="info"] .d-story-routine,
  body.v3-storefront[data-v3-page="info"] .d-story-guides-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* DG-STORY-HOME-HELP-DISCOVERY-RUNTIME-22 — homepage How It Works discovery: a calm cream/light-green surface with six
   compact goal links (3 x 2 on wider screens, two columns on phones) and one main CTA. Guests and signed-in. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-teaser {
  padding-top: var(--d-section-gap, 48px);
  padding-bottom: 0;
  margin: 0;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  grid-template-areas: "head links" "cta links";
  align-items: start;
  gap: 18px 40px;
  padding: clamp(24px, 3.2vw, 36px);
  border-radius: calc(var(--radius, 14px) + 6px);
  background: linear-gradient(135deg, #f7f5ee 0%, #eef6ea 100%);
  border: 1px solid rgba(31, 74, 27, 0.1);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-head {
  grid-area: head;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-head h2 {
  margin: 0 0 var(--d-copy-title-gap, 10px);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-head p {
  margin: 0;
  max-width: 46ch;
  color: var(--muted, #5b6358);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-links {
  grid-area: links;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  height: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 74, 27, 0.1);
  color: var(--ink, #1c2a1a);
  font-weight: 600; /* DG-HOME-MEMBER-MICRO-POLISH-24B (Mark): component exception; inline prose emphasis stays 700 */
  font-size: 15px;
  line-height: 1.25;
  text-decoration: none;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-link:hover {
  background: #fff;
  border-color: color-mix(in srgb, var(--green, #2f8f27) 40%, #fff);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-link:focus-visible {
  outline: 3px solid var(--green, #2f8f27);
  outline-offset: 2px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-ico {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e3f0de;
  color: var(--green-dark, #1f4a1b);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-ico svg {
  width: 17px;
  height: 17px;
}
/* DG-STORY-FINAL-POLISH-24A (Mark): the action row holds the primary How It Works action and the secondary "Shop now". */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-actions {
  grid-area: cta;
  justify-self: start;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 960px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "links" "cta";
  }
}
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-link {
    min-height: 48px;
    padding: 8px 10px;
    gap: 8px;
    font-size: 14px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-ico {
    width: 28px;
    height: 28px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-actions {
    justify-self: stretch;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}
@media (max-width: 420px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-how-discover-actions {
    flex-direction: column;
  }
}

/* DG-STORY-HOME-HELP-DISCOVERY-RUNTIME-22 — Meet Mark & Keely now carries two real paragraphs (V2 10 section B) instead of
   one paragraph with <br><br>; keep the same visual gap between them. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-copy p + p {
  margin-top: 14px;
}

/* DG-STORY-HOME-HELP-DISCOVERY-RUNTIME-22 — Help: one compact How It Works pointer card (V2 10 D2) between the FAQ and the
   contact section. DG-HELP-DISCOVER-POLISH-37 (Mark): a compact signpost on the shared white info card (its own border + small shadow; the pale
   green wash is gone) — compass well left, copy in the middle, CTA right; on phones icon + copy on top, CTA full width. Help only. */
body.v3-storefront[data-v3-page="info"] .d-help .d-help-discover-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
}

body.v3-storefront[data-v3-page="info"] .d-help .d-help-discover-copy {
  max-width: 62ch;
}

body.v3-storefront[data-v3-page="info"] .d-help .d-help-discover-copy h2 {
  margin: 0 0 6px;
}

body.v3-storefront[data-v3-page="info"] .d-help .d-help-discover-copy p {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-help .d-help-discover-cta {
  white-space: nowrap;
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-help .d-help-discover-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
  }
  body.v3-storefront[data-v3-page="info"] .d-help .d-help-discover-cta {
    grid-column: 1 / -1;
    justify-content: center;
    white-space: normal;
  }
}

/* DG-STORY-HOME-HELP-DISCOVERY-RUNTIME-22 — phones (<=720px), signed out: the ONE existing Sign in control
   (.d-signin, data-open="login", never cloned or moved in the DOM for this) follows the cart's physical model. At the
   top it is a labelled "Sign in" pill lifted into the white brand row, left of the cart; once docked
   (html.v3-dock-docked, v3-nav.js hysteresis) it is the familiar icon-only control in the Berry dock, left of the cart,
   with "Sign in" kept as its visually hidden accessible name. Like the cart it holds no layout slot in the dock row:
   it is positioned at a fixed right offset, and the actions group's right padding opens for it only when docked. The
   move is a short transform; the label collapses without animation (no second bounce beside the cart's pop). Motion
   only after the first settled frame (html.v3-dock-anim), none under prefers-reduced-motion. 44px target throughout,
   also at 320px. Signed-in account behaviour is untouched (only .d-signin is addressed). */
@media (max-width: 720px) {
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions:has(> .d-signin) {
    padding-right: 0;
  }
  html.v3-berry-dock.v3-dock-docked body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions:has(> .d-signin) {
    padding-right: calc(var(--bh-btn) + 50px);
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin {
    position: absolute;
    top: calc(50% - 22px);
    right: calc(10px + var(--bh-btn));
    width: auto;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    transform: none;
    white-space: nowrap;
  }
  html.v3-berry-dock:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin {
    gap: 6px;
    padding: 0 14px 0 12px;
    border: 1.5px solid var(--berry);
    border-radius: 999px;
    background: #fff;
    color: var(--berry-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transform: translate(-4px, var(--bh-cart-lift));
  }
  html.v3-berry-dock:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin .ico {
    width: 18px;
    height: 18px;
  }
  html.v3-berry-dock:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin .label-hide {
    display: inline !important;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }
  html.v3-berry-dock:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin:focus-visible {
    outline: 3px solid var(--berry-dark);
    outline-offset: 2px;
  }
  html.v3-berry-dock.v3-dock-docked body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin {
    width: 44px;
    padding: 0;
  }
  html.v3-berry-dock.v3-dock-anim body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  /* DG-STORY-MEMBER-VISUAL-POLISH-24 — no white flash: the look never fades while the control crosses the berry dock
     (frame capture showed a 44px white square fading out on docking and the white pill fading in over the dock on the
     way back). Docking: the dock look (transparent, white icon) applies at once, only the position travels. Back to the
     top: icon and label take the berry ink at once (they show as they enter the white brand row) while the white fill
     and berry border wait until the control has arrived (0.3s). Same element, same existing dock state; reduced
     motion stays instant. */
  html.v3-berry-dock.v3-dock-anim.v3-dock-docked body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0s, color 0s, border-color 0s;
  }
  html.v3-berry-dock.v3-dock-anim:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0s linear 0.3s, color 0s, border-color 0s linear 0.3s;
  }
  html.v3-berry-dock.v3-dock-anim.v3-dock-docked body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin .label-hide {
    opacity: 0;
    transition: none;
  }
  html.v3-berry-dock.v3-dock-anim:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin .label-hide {
    opacity: 1;
    transition: opacity 0.12s linear;
  }
}

@media (max-width: 720px) and (hover: hover) {
  html.v3-berry-dock:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin:hover {
    background: rgba(142, 21, 102, 0.06);
    color: var(--berry-dark);
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  html.v3-berry-dock.v3-dock-anim body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin,
  html.v3-berry-dock.v3-dock-anim.v3-dock-docked body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin,
  html.v3-berry-dock.v3-dock-anim:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin,
  html.v3-berry-dock.v3-dock-anim:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin .label-hide {
    transition: none;
  }
}

/* DG-STORY-HOME-HELP-DISCOVERY-RUNTIME-22 — Become a Member (V2 10 section E). Bounded to .d-become-member. One white
   main sequence (the five steps), one calm cream/light-green explanation surface (the Member Pack and its cost), and one
   stronger closing action (Ready). The hero now carries Mark's 2026-09-28 photo at its own 4:3; example screenshots
   live in small native disclosures beside their steps; no alternating desktop rows. */
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-hero .d-hero-media {
  background: transparent;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-hero .d-hero-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  object-fit: cover;
  object-position: 50% 45%;
}

body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-benefits {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-pack {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(22px, 3.4vw, 40px);
  border: 1px solid rgba(47, 143, 39, 0.16);
  border-radius: var(--d-radius-lg, 22px);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(90, 177, 32, 0.10) 0%, transparent 60%),
    #f4f8ef;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-pack-media {
  margin: 0;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-pack-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  background: #fff;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-pack-copy h2 {
  margin: 0 0 10px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-pack-copy > p {
  max-width: 60ch;
  margin: 0;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-pack-copy .d-member-price {
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 18px 0 6px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-pack-note {
  color: var(--muted, #5b6358);
  font-size: 14px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-pack-ask {
  margin-top: 14px !important;
  font-weight: 700;
}

body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-step-list {
  gap: 0;
  padding: clamp(20px, 3.4vw, 40px);
  border: 1px solid var(--line, #e4e8df);
  border-radius: var(--d-radius-lg, 22px);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-step-list .d-member-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 0 0 28px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-step-list .d-member-step:last-child {
  padding-bottom: 0;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-step-list .d-member-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 46px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: #e1ecd9;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-step-list .d-member-step:nth-child(even) .d-member-step-copy {
  order: 0;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-step-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eef6ea;
  border: 1px solid rgba(47, 143, 39, 0.22);
  color: var(--d-green-900, #1f4a1b);
  font-weight: 800;
  font-size: 16px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-step-list .d-member-step-copy h3 {
  margin: 7px 0 6px;
  font-size: clamp(18px, 2vw, 21px);
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-step-list .d-member-step-copy p {
  max-width: 62ch;
  margin: 0;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-step-cta {
  margin-top: 14px;
}

body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-sponsor {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-sponsor .d-member-copychip {
  min-width: min(100%, 200px);
  padding: 12px 14px;
  border: 1px solid rgba(47, 143, 39, 0.22);
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-sponsor .d-member-copychip:focus-visible {
  outline: 3px solid var(--d-green-800, #245c1f);
  outline-offset: 2px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-sponsor .d-member-copychip b {
  font-size: clamp(20px, 2.4vw, 24px);
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-sponsor-name {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: min(100%, 200px);
  padding: 12px 14px;
  border: 1px dashed rgba(47, 143, 39, 0.3);
  border-radius: 16px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-sponsor-name span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--d-green-800, #245c1f);
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-sponsor-name b {
  font-size: 17px;
  letter-spacing: 0.02em;
}

body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-shot {
  margin-top: 12px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-shot > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line, #e4e8df);
  border-radius: 999px;
  background: #fff;
  color: var(--d-green-800, #245c1f);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-shot > summary::-webkit-details-marker {
  display: none;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-shot > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-shot[open] > summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-shot > summary:focus-visible {
  outline: 3px solid var(--d-green-800, #245c1f);
  outline-offset: 2px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-shot figure {
  max-width: 440px;
  margin: 12px 0 0;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line, #e4e8df);
  border-radius: 14px;
  background: #fff;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-shot figcaption {
  margin-top: 8px;
  color: var(--muted, #5b6358);
  font-size: 13px;
}

body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-support {
  max-width: 760px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-support h2 {
  margin: 0 0 12px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-support p {
  max-width: 62ch;
  margin: 0;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-support p + p {
  margin-top: 10px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-faq {
  max-width: 880px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-faq h2 {
  margin: 0 0 16px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-faq .acc-body p {
  margin: 0;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-faq .acc-body p + p {
  margin-top: 8px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-faq-note {
  color: var(--muted, #5b6358);
  font-size: 14px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-qualify {
  margin-top: 18px;
  color: var(--muted, #5b6358);
  font-size: 14px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-qualify p {
  max-width: 70ch;
  margin: 0;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-qualify p + p {
  margin-top: 8px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-refs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--d-green-800, #245c1f);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-ready p {
  max-width: 60ch;
  margin: 8px 0 20px;
  color: rgba(255, 255, 255, 0.9);
}

body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form .d-field-hint a,
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form .d-form-success-note a {
  color: var(--d-green-800, #245c1f);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form .d-form-success-note + .d-form-success-note {
  margin-top: 6px;
}

@media (max-width: 959px) {
  body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-pack {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-pack-media {
    width: min(160px, 50%);
  }
  body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-step-list .d-member-step {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 24px;
  }
  body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-step-list .d-member-step:not(:last-child)::before {
    left: 16px;
    top: 40px;
  }
  body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-step-num {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
  body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-step-list .d-member-step-copy h3 {
    margin-top: 4px;
  }
  body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-sponsor .d-member-copychip,
  body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-sponsor-name {
    flex: 1 1 100%;
  }
  body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-benefits {
    grid-template-columns: 1fr;
  }
}

/* DG-STORY-MEMBER-VISUAL-POLISH-24 (Mark) — focused visual follow-up to RUNTIME-22. Story: the three principles as a short
   photoless pause after the hero (calm cream / light-green, three compact items side by side, short rows on phones),
   the retained hiking photo beside the routine introduction, the exact How It Works goal icons on the related guides.
   Become a Member: the approved kitchen hero framing and one white form surface with tidy checkbox rows. Help: the
   redundant "How Herbalife works" action right above the discovery card is hidden on Help only. All scoped. */
body.v3-storefront[data-v3-page="info"] .d-story .d-story-principles {
  padding: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 32px);
  border: 1px solid rgba(47, 143, 39, 0.16);
  border-radius: var(--d-radius-lg, 22px);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(90, 177, 32, 0.10) 0%, transparent 60%),
    #f4f8ef;
}
body.v3-storefront[data-v3-page="info"] .d-story .d-story-principles h2 {
  margin: 0 0 16px;
  font-size: clamp(22px, 2.4vw, 28px);
}
body.v3-storefront[data-v3-page="info"] .d-story-principles-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.v3-storefront[data-v3-page="info"] .d-story-principle {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
body.v3-storefront[data-v3-page="info"] .d-story-principle-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e3f0de;
  color: var(--green-dark, #1f4a1b);
}
body.v3-storefront[data-v3-page="info"] .d-story-principle-ico svg {
  width: 18px;
  height: 18px;
}
body.v3-storefront[data-v3-page="info"] .d-story-principle h3 {
  margin: 6px 0 4px;
  font-size: 16px;
  line-height: 1.3;
}
body.v3-storefront[data-v3-page="info"] .d-story-principle p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted, #5b6358);
}

/* Mark (2026-10-06): the routine introduction is copy only — the photo beside it is removed (markup + its rules). */
body.v3-storefront[data-v3-page="info"] .d-story-use-intro {
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
body.v3-storefront[data-v3-page="info"] .d-story-use-copy h2 {
  margin: 0 0 10px;
}
body.v3-storefront[data-v3-page="info"] .d-story-use-copy .d-prose {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-story-guide {
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 12px;
  align-content: start;
}
body.v3-storefront[data-v3-page="info"] .d-story-guide-ico {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e3f0de;
  color: var(--green-dark, #1f4a1b);
}
body.v3-storefront[data-v3-page="info"] .d-story-guide-ico svg {
  width: 18px;
  height: 18px;
}
body.v3-storefront[data-v3-page="info"] .d-story-guide-title {
  align-self: center;
  min-height: 36px;
  display: flex;
  align-items: center;
}
body.v3-storefront[data-v3-page="info"] .d-story-guide-body {
  grid-column: 2;
}
body.v3-storefront[data-v3-page="info"] .d-story-guides .d-story-guide-arrow {
  top: 24px;
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-story-principles-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  body.v3-storefront[data-v3-page="info"] .d-story-principle h3 {
    margin-top: 7px;
  }
}

/* Become a Member hero: the approved kitchen image keeps the face and shaker in frame at every width. */
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-hero .d-hero-media img {
  object-position: 50% 32%;
}

/* Become a Member help form: one white form surface (heading, intro, form / error / success). */
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form-card {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(20px, 3.4vw, 40px);
  border: 1px solid var(--line, #e4e8df);
  border-radius: var(--d-radius-lg, 22px);
  background: #fff;
  box-shadow: 0 1px 2px rgba(27, 33, 29, 0.04), 0 10px 28px -18px rgba(27, 33, 29, 0.25);
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form-card .d-info-head {
  margin-bottom: 20px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form-card .d-member-lead-form {
  max-width: none;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form-card .d-help-form .d-form-row {
  margin: 0 0 18px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form-card .d-form-row-split {
  gap: 0 16px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-choices {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  gap: 8px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-choices legend {
  padding: 0;
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-choices-hint {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--muted, #5b6358);
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-choices .d-member-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--line, #e4e8df);
  border-radius: 12px;
  background: #fff;
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-choices .d-member-choice:hover {
  border-color: color-mix(in srgb, var(--green, #2f8f27) 40%, #fff);
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-choices .d-member-choice:has(input:checked) {
  border-color: var(--green, #2f8f27);
  background: #f4f8ef;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-choices .d-member-choice:has(input:focus-visible) {
  outline: 3px solid var(--d-green-800, #245c1f);
  outline-offset: 2px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-choices .d-member-choice input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  accent-color: var(--green, #2f8f27);
  cursor: pointer;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-choices[aria-invalid="true"] {
  border: 0;
  outline: 0;
  box-shadow: none;
  background: none;
  padding: 0;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-choices[aria-invalid="true"] .d-member-choice {
  border-color: color-mix(in srgb, var(--d-status-fail, #a3160f) 45%, #fff);
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form-card .d-form-actions {
  margin-top: 6px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form-card .d-form-actions .btn {
  min-width: 220px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form-card .d-field-hint {
  margin: 16px 0 0;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form-card .d-form-banner {
  margin: 0 0 18px;
}
body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form-card .d-form-success {
  margin: 0;
}
@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form-card .d-form-row-split {
    grid-template-columns: 1fr;
  }
  body.v3-storefront[data-v3-page="info"] .d-become-member .d-bm-form-card .d-form-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
}

/* Help only: the FAQ's secondary "How Herbalife works" action sits right above the How It Works discovery card. */
body.v3-storefront[data-v3-page="info"] .d-help .d-help-faq-more a[href*="page=how-it-works"] {
  display: none;
}

/* DG-STORY-FINAL-POLISH-24A (Mark) — ONE weight for inline emphasis in running text on every normal information page
   (How It Works overview + all goals, Mark's Story, Become a Member, Help, Contact, FAQ, delivery/privacy/cookies/terms:
   all render inside `.info-page`): strong/b inside paragraphs, list items, FAQ answers, hero/context/closing-band prose
   compute 700. It replaces the former page-specific 750 (.d-how prose / hero / context / CTA band, How It Works context
   band) and 800 (.d-how-rule) weights. Not affected: headings, buttons, labels and the label/price/value elements that
   only sit inside such containers (routine time labels, Become a Member copy chips, Member Pack price, expected sponsor). */
body.v3-storefront .info-page :is(p, li, dd, td, figcaption, blockquote, .acc-body) :is(strong, b):not(.d-routine > li > b, button *, .d-member-price *, .d-bm-sponsor-name *) {
  font-weight: 700;
}

/* DG-LAUNCH-STOREFRONT-POLISH-01A — prepared shared visual 404 (views/partials/v3/not-found-visual.php).
   Not wired yet: V2 30 owns routing/status. One calm centred card, portal-neutral, no motion. */
body.v3-storefront .d-nf {
  padding-top: 40px;
  padding-bottom: 64px;
}
body.v3-storefront .d-nf-card {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 40px 40px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(23, 29, 24, 0.05), 0 12px 32px -12px rgba(23, 29, 24, 0.14);
  text-align: center;
}
body.v3-storefront .d-nf-art {
  display: inline-grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--green-softer, #f1f9ec);
  color: var(--green-dark);
}
body.v3-storefront .d-nf-art svg {
  width: 44px;
  height: 44px;
}
body.v3-storefront .d-nf-eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-dark);
}
body.v3-storefront .d-nf-title {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--ink);
}
body.v3-storefront .d-nf-text {
  max-width: 46ch;
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
body.v3-storefront .d-nf-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
body.v3-storefront .d-nf-actions .btn {
  min-height: 48px;
  padding: 12px 24px;
}
body.v3-storefront .d-nf-help {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--muted);
}
body.v3-storefront .d-nf-help a {
  display: inline-block;
  padding: 12px 2px;
  margin: -12px 0;
  font-weight: 700;
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.v3-storefront .d-nf a:focus-visible {
  outline: 3px solid var(--green-bright, #5cb82e);
  outline-offset: 3px;
}
@media (max-width: 560px) {
  body.v3-storefront .d-nf {
    padding-top: 20px;
    padding-bottom: 40px;
  }
  body.v3-storefront .d-nf-card {
    padding: 32px 20px 28px;
    border-radius: 16px;
  }
  body.v3-storefront .d-nf-art {
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
  }
  body.v3-storefront .d-nf-art svg {
    width: 36px;
    height: 36px;
  }
  body.v3-storefront .d-nf-title {
    font-size: 26px;
  }
  body.v3-storefront .d-nf-actions {
    flex-direction: column;
    align-items: stretch;
  }
  body.v3-storefront .d-nf-actions .btn {
    min-height: 52px;
  }
}

/* DG-V60-CLOSEOUT-04-UX-DEPENDENCY-01 — HerbaPoints star-coin: the icon wrapper is exactly the glyph
   box (no inline line box around the SVG), centred on its line, so the whole coin sits optically
   centred beside its text in chips, menus, labels and lists. Sizes stay with each surface's rule. */
body.v3-storefront [data-ico="coin"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0;
}

/* Same specificity as surface rules such as `.drawer-account a .ico` (later wins): the spacing
   stays on the wrapper, never on the glyph inside it. */
body.v3-storefront[data-storefront="unified"] [data-ico="coin"] > svg.ico {
  display: block;
  margin: 0;
}

/* DG-FULL-RECON-VISUAL-POLISH-04 — S1 keyboard focus for the desktop nav and the cart button:
   a solid ring (not colour-only), drawn with outline so nothing shifts. */
body.v3-storefront[data-storefront="unified"] .nav-desktop a:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 2px;
  background: var(--green-softer);
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .cart-btn:focus-visible {
  outline: 3px solid var(--berry-dark);
  outline-offset: 3px;
}

/* DG-FULL-RECON-VISUAL-POLISH-04 — S4 shared modal close control: a quiet tinted disc with a light
   edge and shadow so it reads as a control on white panels; hover/active deepen it, keyboard focus
   adds a green ring. Size, position, icon and behaviour stay with each modal's own rules. */
body.v3-storefront .modal-close {
  background-color: #eef2eb;
  border: 1px solid rgba(23, 29, 24, 0.1);
  box-shadow: 0 1px 2px rgba(23, 29, 24, 0.1);
  color: var(--ink, #171d18);
  cursor: pointer;
}

body.v3-storefront .modal-close:hover {
  background-color: #e0e8da;
  border-color: rgba(23, 29, 24, 0.18);
}

body.v3-storefront .modal-close:active {
  background-color: #d3ddcb;
}

body.v3-storefront .modal-close:focus-visible {
  outline: 3px solid var(--green-bright, #5ab120);
  outline-offset: 2px;
}

/* DG-FULL-RECON-VISUAL-POLISH-04 — S5 Comfortable cards: the foot's actions sit side by side when the
   card body (a size container) is wide enough for both, and stack deliberately below that width.
   Guest: the shared gate + "Quick view" (DG-CATALOG-PDP-PARITY-05, measured below); member:
   "Add" + "Quick view" need 233px (DG-FINAL-STOREFRONT-VISUAL-POLISH-06, cart icon, nowrap), so they
   stack below 240px. Never a portal fork — only the measured card width decides. */
body.v3-storefront[data-storefront="unified"] .d-catalog[data-density="comfort"] .d-pcard2-body {
  container: pcard2 / inline-size;
}

@container pcard2 (max-width: 239.98px) {
  body.v3-storefront[data-storefront="unified"] .d-pcard2-foot .d-pcard2-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
}

/* DG-CATALOG-PDP-PARITY-05 — shared P1/P4/P8 catalogue + PDP/Quick View presentation. Every rule is
   decided by the category grid hook (`.d-catalog.is-category`, category and all-products routes only),
   the shared card/gate classes or the measured card width — never by a portal. */

/* S2 — category results are one per row wherever the density switch is hidden (<=720px, the shared
   `.d-viewsw` rule), including the <=560px compact layer that kept Compact and Comfortable two-up: a
   narrowed desktop and a phone get the same single column and no second-column option. Search,
   homepage and preview grids keep their own rules.
   DG-STOREFRONT-CONSOLIDATION-CORRECTION-11A (Mark): the editorial grids (How It Works goals, Mark's Story) follow
   the same canonical mobile state — one per row, no selector (CatalogDensity: "Mobile is ALWAYS 1 per row");
   desktop keeps their fixed two-up grid. */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] #main .d-catalog.is-category[data-density],
  body.v3-storefront[data-storefront="unified"] #main .d-catalog.d-editorial-grid[data-density] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* S7 — category price size: 22px in every category density (member only; guests see the gate). */
body.v3-storefront[data-storefront="unified"] .d-catalog.is-category .d-price {
  font-size: 22px;
}

/* CAT-STOCK-SELLABILITY-TRUTH-04A-C — one calm availability status for the central Sellability decision
   (catalogue card, PDP, Quick View, programme page, basket line, minicart). A warm neutral note with an
   info glyph plus words: never a link or button, never the green price gate, the berry discount or an
   emergency red. Shared by P1/P4/P8 — no portal selector. */
body.v3-storefront[data-storefront="unified"] .d-sellstate {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 9px 12px 9px 9px;
  border: 1px solid #e6dcc6;
  border-radius: var(--radius-sm);
  background: #f7f3ea;
  color: #4d4331;
  font-size: 13px;
  line-height: 1.4;
}

body.v3-storefront[data-storefront="unified"] .d-sellstate-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #ece2cb;
  color: #5c4c2c;
}

body.v3-storefront[data-storefront="unified"] .d-sellstate-ico .ico {
  width: 14px;
  height: 14px;
}

body.v3-storefront[data-storefront="unified"] .d-sellstate-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 3px;
  overflow-wrap: anywhere;
}

body.v3-storefront[data-storefront="unified"] .d-sellstate-label {
  font-weight: 800;
  color: #3f3522;
}

body.v3-storefront[data-storefront="unified"] .d-sellstate-msg {
  font-weight: 500;
}

body.v3-storefront[data-storefront="unified"] .d-sellstate.is-unavailable,
body.v3-storefront[data-storefront="unified"] .d-sellstate.is-unconfirmed {
  border-color: #dce1e4;
  background: #f3f5f6;
  color: #3a434a;
}

body.v3-storefront[data-storefront="unified"] .d-sellstate.is-unavailable .d-sellstate-ico,
body.v3-storefront[data-storefront="unified"] .d-sellstate.is-unconfirmed .d-sellstate-ico {
  background: #e3e8eb;
  color: #3a434a;
}

body.v3-storefront[data-storefront="unified"] .d-sellstate.is-unavailable .d-sellstate-label,
body.v3-storefront[data-storefront="unified"] .d-sellstate.is-unconfirmed .d-sellstate-label {
  color: #262d33;
}

body.v3-storefront[data-storefront="unified"] .d-sellstate.is-unconfirmed {
  border-style: dashed;
}

/* Catalogue placement: the status takes the gate / buy-row slot at the card foot. */
body.v3-storefront[data-storefront="unified"] .d-pcard-body > .d-sellstate {
  margin-top: auto;
}

body.v3-storefront[data-storefront="unified"] .d-pcard-body > :has(+ .d-sellstate) {
  margin-bottom: 12px;
}

body.v3-storefront[data-storefront="unified"] .d-pcard2-foot > .d-sellstate {
  flex: 1 1 100%;
}

body.v3-storefront[data-storefront="unified"] .d-pcard2-foot:has(> .d-sellstate) .d-pcard2-actions {
  flex: 1 1 100%;
}

body.v3-storefront[data-storefront="unified"] .d-pcard2-foot:has(> .d-sellstate) .d-pcard2-quick {
  width: 100%;
  justify-content: center;
}

body.v3-storefront[data-storefront="unified"] .d-prow-buy > .d-sellstate {
  align-self: stretch;
}

@media (max-width: 560px) {
  body.v3-storefront[data-storefront="unified"] .d-prow:not(.is-pack) .d-prow-buy .d-sellstate {
    grid-column: 1 / -1;
  }
}

/* Basket: the stale line stays in place, reads as paused and pays nothing. */
body.v3-storefront[data-storefront="unified"] .d-cline.is-unavailable {
  background: #fcfbf8;
}

body.v3-storefront[data-storefront="unified"] .d-cline-info > .d-sellstate,
body.v3-storefront[data-storefront="unified"] .d-cpack-info > .d-sellstate {
  margin-top: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-cline:focus-visible,
body.v3-storefront[data-storefront="unified"] .d-cpack:focus-visible {
  outline: 3px solid var(--green-bright, #5ab120);
  outline-offset: 2px;
}

body.v3-storefront[data-storefront="unified"] .d-sellref {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--muted);
  text-align: right;
}

body.v3-storefront[data-storefront="unified"] .d-sellref-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-sellref-note {
  font-weight: 600;
}

/* The pack parent sits on the dark-green pack head: the reference reads in light ink there. */
body.v3-storefront[data-storefront="unified"] .d-cpack-head .d-sellref,
body.v3-storefront[data-storefront="unified"] .d-cpack-head .d-sellref-amount {
  color: rgba(255, 255, 255, 0.88);
}

body.v3-storefront[data-storefront="unified"] .d-cline-rechoose {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-cline-rechoose select {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 100%;
}

body.v3-storefront[data-storefront="unified"] .qs-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Checkout blocking summary: once, above the basket, linking to the affected lines. */
body.v3-storefront[data-storefront="unified"] .d-sellsum {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid #e6dcc6;
  border-radius: var(--radius);
  background: #f7f3ea;
  color: #3f3522;
}

body.v3-storefront[data-storefront="unified"] .d-sellsum-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #ece2cb;
  color: #5c4c2c;
}

body.v3-storefront[data-storefront="unified"] .d-sellsum-body {
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"] .d-sellsum-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

body.v3-storefront[data-storefront="unified"] .d-sellsum-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

body.v3-storefront[data-storefront="unified"] .d-sellsum-list a {
  font-weight: 700;
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.v3-storefront[data-storefront="unified"] .d-sellsum-list a:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 2px;
}

body.v3-storefront[data-storefront="unified"] .d-sellsum-state {
  color: #5c4f36;
}

body.v3-storefront[data-storefront="unified"] .btn.is-disabled[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

body.v3-storefront[data-storefront="unified"] .d-mc-line.is-unavailable .d-sellstate {
  margin-top: 6px;
  font-size: 12.5px;
}

body.v3-storefront[data-storefront="unified"] .d-mc-sellsum {
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  font-size: 13px;
}

/* DG-FINAL-STOREFRONT-VISUAL-POLISH-06 — final shared storefront polish (P1/P4/P8, no portal selector).
   A: product / How It Works / catalogue details. */
body.v3-storefront[data-v3-page="product"] #main,
body.v3-storefront[data-v3-page="program"] #main,
body.v3-storefront[data-v3-page="info"] #main:has(.d-how) {
  background-color: #fff;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="product"] .d-prow-media {
  background-color: #fff;
}

body.v3-storefront[data-storefront="unified"] .d-prow .d-prow-desc {
  font-size: 16px;
}

/* Comfortable foot on phones: Add + Quick view share the row by their own widths (the equal-width split
   squeezed "Quick view" onto two lines at 360px); below the measured container width they stack. */
body.v3-storefront[data-storefront="unified"] .d-pcard2-actions > .btn,
body.v3-storefront[data-storefront="unified"] .d-pcard2-actions > form,
body.v3-storefront[data-storefront="unified"] .d-pcard2-actions > form .btn {
  flex: 1 1 auto;
  white-space: nowrap;
}

/* C: Help — the footer band keeps its photo on phones too (as Mark's Story does). (The Help hero fade-width rule is
   gone with the info hero fade, DG-INFO-HERO-FADE-HELP-SIZE-32.) */
@media (max-width: 720px) {
  /* DG-MOBILE-STOREFRONT-POLISH-20B: the frame follows the photo's 7/8 (no fixed 4/3 box). */
  body.v3-storefront[data-v3-page="info"] #d-help-cta .d-cta-band-media {
    display: block;
  }
}

/* DG-STOREFRONT-FRESH-STATE-CORRECTION-07A — last storefront corrections before recon (shared P1/P4/P8). */
/* Flavour chips (PDP, Quick View and the list row): only padding and size change; weight, colours and the
   selected / disabled / focus states stay as accepted. */
body.v3-storefront[data-storefront="unified"] .d-chip,
body.v3-storefront[data-storefront="unified"] .d-chip.is-sm {
  padding: 10px 12px;
  font-size: 12px;
}

/* PLT-POSTPAYMENT-THANKYOU-PACK-MODEL-10A/10B — stored order overview: pack blocks, free gift, compact mobile rows. */
body.v3-storefront[data-storefront="unified"] .d-ohist-pack .d-ohist-info {
  min-width: 0;
}

/* 10B: pack contents are their own grid item — under the pack name on desktop. */
body.v3-storefront[data-storefront="unified"] .d-ohist-pack .d-ohist-comps {
  grid-column: 2;
  grid-row: 2;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-pack > .d-ohist-media {
  grid-column: 1;
  grid-row: 1;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-pack > .d-ohist-info {
  grid-column: 2;
  grid-row: 1;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-pack > .d-ohist-price {
  grid-column: 3;
  grid-row: 1 / span 2;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-comps {
  margin: 0;
  padding: 2px 0 0 12px;
  list-style: none;
  border-left: 2px solid var(--green-softer);
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-comp {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-comp-flavour,
body.v3-storefront[data-storefront="unified"] .d-ohist-comp-qty {
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-ohist-giftlabel {
  margin-top: 16px;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-gift .d-ohist-meta {
  color: var(--green-dark);
  font-weight: 700;
}

/* 10B: the gift amount is a currency-correct zero (£0.00 / €0.00) in green. */
body.v3-storefront[data-storefront="unified"] .d-ohist-free {
  color: var(--green-dark);
  white-space: nowrap;
}

/* 10C (Mark): the paid price leads, the original follows struck through; "Total savings" is green. */
body.v3-storefront[data-storefront="unified"] .d-ohist-price .d-ohist-paid-price {
  display: block;
}

body.v3-storefront[data-storefront="unified"] .d-ohist-totals .d-ohist-savings dt,
body.v3-storefront[data-storefront="unified"] .d-ohist-totals .d-ohist-savings dd {
  color: var(--green-dark);
  font-weight: 700;
}

/* 10B (Mark): on mobile the image stays left and name / flavour / quantity (or pack name and
   "Pack · n items", or the gift) sit next to it; the price follows in the same column and pack
   contents use the full width underneath. Scoped to the stored-order overview only. */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-ohist .d-ohist-list > .d-ohist-line {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
  }

  body.v3-storefront[data-storefront="unified"] .d-ohist .d-ohist-media {
    width: 48px;
    height: 48px;
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  body.v3-storefront[data-storefront="unified"] .d-ohist .d-ohist-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  body.v3-storefront[data-storefront="unified"] .d-ohist .d-ohist-list > .d-ohist-line > .d-ohist-price {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    text-align: left;
  }

  body.v3-storefront[data-storefront="unified"] .d-ohist .d-ohist-price .d-ohist-was,
  body.v3-storefront[data-storefront="unified"] .d-ohist .d-ohist-price .d-ohist-paid-price {
    display: inline;
  }

  body.v3-storefront[data-storefront="unified"] .d-ohist .d-ohist-pack .d-ohist-comps {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-left: 10px;
  }
}

/* =====================================================================
   DG-PORTAL-HOME-WHATSNEW-PARITY-31 — Mark's final Mark & Keely photo placements (shared P1/P4/P8).
   ===================================================================== */
/* Help hero: the versioned square river crop is shown square on every width — no CSS re-crop on top of the chosen
   square (no fixed 440px row, no 280px phone strip).
   DG-INFO-HERO-FADE-HELP-SIZE-32 (Mark): a supporting photo, not a full column — the copy column dominates (2.5fr / 1.1fr
   on wider screens), the square photo is capped at 320px and centred in its column with breathing room; on phones it
   sits centred below the copy, capped at 240px. The hero height follows copy, photo and padding. */
body.v3-storefront[data-v3-page="info"] .d-hero-split.d-help-photo-hero {
  min-height: 0;
}

body.v3-storefront[data-v3-page="info"] .d-help-photo-hero .d-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 0;
  max-height: none;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px);
  background: transparent;
}

body.v3-storefront[data-v3-page="info"] .d-help-photo-hero .d-hero-media img {
  position: static;
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: var(--hero-pos, 50% 50%); /* DG-PORTAL-HELP-PARITY-USP-INVENTORY-36 (Mark): a portal's Help photo override sets its own focal point */
  border-radius: 18px;
}

/* DG-PORTAL-HELP-PARITY-USP-INVENTORY-36 (Mark): the Help tips section is hidden for now (markup and copy kept for later). */
body.v3-storefront[data-v3-page="info"] .d-help .d-help-tips {
  display: none;
}

/* DG-PORTAL-HELP-PARITY-USP-INVENTORY-36 (Mark): the body of the shared USP "Personal support" item links to the portal's WhatsApp (hero + footer). */
body.v3-storefront .d-usp-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body.v3-storefront .d-usp-link:hover {
  text-decoration-thickness: 2px;
}

body.v3-storefront .d-usp-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] .d-hero-split.d-help-photo-hero {
    display: grid;
    align-items: stretch;
    grid-template-columns: 2.5fr 1.1fr;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-help-photo-hero .d-hero-media {
    padding: 0 20px 24px;
  }

  body.v3-storefront[data-v3-page="info"] .d-help-photo-hero .d-hero-media img {
    max-width: 240px;
  }
}

/* Help closing band: photoless now (one team photo per page), balanced like the photoless How it works goal band —
   one centred column on wider screens, the natural left-aligned stack on phones. */
@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] #d-help-cta .d-cta-band:not(.d-cta-band-split) .d-cta-band-copy {
    align-items: center;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }
  body.v3-storefront[data-v3-page="info"] #d-help-cta .d-cta-band:not(.d-cta-band-split) p {
    margin-left: auto;
    margin-right: auto;
  }
  body.v3-storefront[data-v3-page="info"] #d-help-cta .d-cta-band:not(.d-cta-band-split) .d-cta-band-actions {
    justify-content: center;
  }
}

/* =====================================================================
   DG-INFO-HERO-FADE-HELP-SIZE-32 — How it works overview closing band (#d-how-cta with a photo = the overview only; the
   goal guides' band is photoless). Mark: a compact supporting photo instead of a tall portrait column.
   ===================================================================== */
@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] #d-how-cta .d-cta-band-split {
    display: grid;
    align-items: center;
    gap: 32px;
    grid-template-columns: 2fr 0.5fr;
  }
}

/* The beach photo keeps its natural square (no 7/8 portrait frame for this band, so no face crop). */
body.v3-storefront[data-v3-page="info"] #d-how-cta .d-cta-band-split .d-cta-band-media img {
  aspect-ratio: 1 / 1;
  object-position: 50% 50%;
}

@media (max-width: 720px) {
  /* Phones show the photo too: one column, a centred supporting square below the copy and actions. */
  body.v3-storefront[data-v3-page="info"] #d-how-cta .d-cta-band-split .d-cta-band-media {
    display: block;
    justify-self: center;
    width: min(220px, 100%);
  }
}

/* Mark (2026-10-06) — Mark's Story closing band (#d-story-together, the page's only split band): copy 1.5fr / photo 0.5fr on
   wider screens; phones keep the one-column stack. */
@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] .d-story .d-cta-band-split {
    grid-template-columns: 1.5fr 0.5fr;
  }
}

/* Mark (2026-10-06, direct chat) — temporarily hidden: the signed-in homepage "Two ways to buy" section (.d-ways). The markup
   and its membership gate stay in place; remove this rule to show it again. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-ways {
  display: none;
}