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

/* DG-SCROLL-CATEGORY-AVATAR-25 (Mark): margin-right 6px */
body.v3-storefront[data-storefront="unified"] .acct-toggle {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  margin-right: 6px;
}

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);
  /* DG-RESPONSIVE-FLAVOURS-HOME-HELP-POLISH-51G quickfix (Mark, 2026-10-11): the storefront's own section gap (76px, 64px up
     to 720px wide) instead of the fixed 60px that DG-P8-ENGLISH-USP-47 restored storewide (which superseded task 45's 0). */
  margin-top: var(--d-section-gap);
}

/* 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 16px 6px 12px;
  gap: 4px;
  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;
}

/* DG-HEADER-SIGNIN-ICON-SIZE (Mark): ONLY the guest Sign in user icon is the ordinary 20x20, in the header (desktop) and
   in the berry dock it moves into at <=720px (open and docked). The shared `.icon-btn .ico` 26px rule and the dock's
   18px/24px rules stay as they are for every other icon; `:is()` carries the id weight that the dock rules have.
   (Mobile size + stroke since DG-HEADER-ICON-MOBILE-STROKE below: 24x24 / 2.5 at <=720px; desktop stays 20x20.)
   Hit area, spacing, label, `data-open` and the SVG artwork are unchanged: a margin keeps the icon's former layout box
   (26px header, 18px open dock, 24px docked), so the button keeps its exact size and the icon stays centred in it. */
html body.v3-storefront[data-storefront="unified"] :is(#site-header, #v3-cat-select) a.icon-btn.btn-login.only-out.d-signin[data-open="login"] .ico {
  width: 26px;
  height: 26px;
}

/* DG-HEADER-ICON-MOBILE-STROKE (Mark, newest for these two icons): at the canonical 720px mobile breakpoint (the
   berry dock's own `(max-width: 720px)`) the Sign in user icon is 24x24 with stroke 2.5, open and docked; desktop
   stays 20x20 with the artwork's own stroke. The margin still keeps the former box (open dock 18px → -3px, docked
   24px → 0), so the button footprint does not change. */
@media (max-width: 720px) {
  html body.v3-storefront[data-storefront="unified"] :is(#site-header, #v3-cat-select) a.icon-btn.btn-login.only-out.d-signin[data-open="login"] .ico {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
  }
  /* DG-SIGNIN-OPEN-DOCK-MARGIN (Mark, this state only): stroke 2 in the open dock. DG-SIGNIN-OPEN-DOCK-MARGIN-B (Mark,
     direct, newest): only the TOP margin is -7px; the other sides are back to -3px (the former 18px box). */
  html.v3-berry-dock:not(.v3-dock-docked) body.v3-storefront[data-storefront="unified"] :is(#site-header, #v3-cat-select) a.icon-btn.btn-login.only-out.d-signin[data-open="login"] .ico {
    margin: -3px;
    stroke-width: 2;
    margin-top: -7px;
  }
  html.v3-berry-dock.v3-dock-docked body.v3-storefront[data-storefront="unified"] :is(#site-header, #v3-cat-select) a.icon-btn.btn-login.only-out.d-signin[data-open="login"] .ico {
    margin: 0;
  }
}

/* DG-HEADER-ICON-MOBILE-STROKE (Mark): the header search icon (#v3-open-search, in the header or moved into the dock)
   draws with stroke 2.5 at every width; its size, hit area and position are unchanged. */
html body.v3-storefront[data-storefront="unified"] :is(#site-header, #v3-cat-select) button#v3-open-search.icon-btn.search-toggle .ico {
  stroke-width: 2.5;
}

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

/* Mark 2026-10-15: desktop Sign in uses the same white, berry-outline treatment as the mobile top header. */
@media (min-width: 721px) {
  body.v3-storefront[data-storefront="unified"] #site-header .d-signin {
    border: 1.5px solid var(--berry);
    background: #fff;
    color: var(--berry-dark);
  }
  body.v3-storefront[data-storefront="unified"] #site-header .d-signin:hover {
    border-color: var(--berry-dark);
    background: #fbf3f8;
    color: var(--berry-dark);
  }
  body.v3-storefront[data-storefront="unified"] #site-header .d-signin:focus-visible {
    outline-color: var(--berry-dark);
  }
}

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

/* DG-CATEGORY-SEARCH-VIEW-LABEL-38 — category + search results: no sort control; a plain
   "Change view:" label sits right before the view switch (no count, no badge). */
body.v3-storefront[data-storefront="unified"] .d-cat-sort.has-view-label {
  gap: 10px;
}

body.v3-storefront[data-storefront="unified"] .d-cat-view-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

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: 600;
  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: 5px;
  padding: 14px 16px 16px;
  flex: 1;
}

body.v3-storefront[data-storefront="unified"] .d-pcard-name {
  font-size: 18px;
  font-weight: 800;
  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;
  font-weight: 600;
}

/* DG-REORDER-STANDARD-CARDS-51C — the Compact card's opt-in short description (`compact_description`, homepage "Order
   again"; the catalogue's Compact view shows none): the Comfortable card's description type and spacing.
   DG-CARD-ALIGNMENT-QUICKVIEW-51E — the text is complete by default. It is held to three lines only with `.is-clamped`,
   which the card sets for a signed-in customer: that card has the Quick view button, the route to the complete text. */
body.v3-storefront[data-storefront="unified"] .d-pcard-desc {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-pcard-desc.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

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);
}

/* DG-DETAIL-IMAGE-CART-INTEGRATION-22 (DG-MODAL-RETURN-CARD-STATE-22) — right after the full detail closes, a card under a
   pointer that has not moved keeps its resting look (no lift / shadow / green edge) until the pointer really moves
   (html.fd-hover-quiet, v3-full-detail.js) */
html.fd-hover-quiet body.v3-storefront[data-storefront="unified"] :is(.d-prow, .d-pcard, .d-pcard2):hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--line);
}

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

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.
     DG-CARD-ALIGNMENT-QUICKVIEW-51E (Mark): the compact grid is no longer part of this rule. Its cards keep the base
     `align-items: stretch` on phones as well, so product and pack cards in one visual row have one outer height and
     their price and actions meet at the bottom (.c-card-foot is pushed down by its own `margin-top: auto`). */
  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 ---- */

/* DG-CART-MINICART-POLISH-25 (Mark): gap 2px (was 8px) */
body.v3-storefront[data-storefront="unified"] .d-priceblock {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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);
  /* DG-HOME-JOURNEY-LOGGING-21 UI (Mark): red saving pill, white text (5.8:1 contrast); shape unchanged */
  background: #B73545;
  font-size: 12px;
  font-weight: 600; /* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 (Mark): was 800 */
  margin-top: 4px;
  color: #FFFFFF;
}

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);
}

/* DG-RESPONSIVE-FLAVOURS-HOME-HELP-POLISH-51G (Mark) — product flavours: pills on desktop only, the pack flavour
   dropdown (.c-choice / .c-select, v3-c-pdp-buy.css, unchanged) on phones and tablets. v3-flavour-select.js builds the
   dropdown beside the pills and names the active presentation on the wrapper (1100px and narrower: "select"); only that
   one is displayed. Without the script the attribute is absent and the pills stay on every width. */
body.v3-storefront[data-storefront="unified"] .d-variant-select {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .d-variant[data-flavour-ui="select"] > .d-variant-select {
  display: grid;
}

body.v3-storefront[data-storefront="unified"] .d-variant[data-flavour-ui="select"] > .d-variant-head,
body.v3-storefront[data-storefront="unified"] .d-variant[data-flavour-ui="select"] > .d-variant-chips,
body.v3-storefront[data-storefront="unified"] .d-variant[data-flavour-ui="select"] > .d-prow-chips {
  display: none;
}

/* ==========================================================================
   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 12px; /* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 I (Mark): was 8px 18px */
}

body.v3-storefront[data-storefront="unified"] .minicart .mc-head b {
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
}

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

/* 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: 42px; /* DG-DETAIL-CART-MOTION-26 (Mark): was 36px */
  height: 42px;
  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: 10px 12px; /* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 I (Mark): was 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: 600;
  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: 600;
  line-height: 1.5; /* DG-DETAIL-CART-MOTION-26 (Mark): was 1.25 */
}

/* DG-MINICART-PACKTAG-PRODUCT-MODAL-41 — the name opens the existing Quick View: same typography as the plain name,
   no permanent link styling; a subtle hover (green + underline) and a visible keyboard focus ring. */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-name-btn {
  appearance: none;
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-name-btn:hover {
  color: var(--green-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-name-btn:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 2px;
  border-radius: 3px;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-variant {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--green-dark);
}

/* DG-DETAIL-IMAGE-CART-INTEGRATION-22 — the name / photo are real links to the full detail (no link underline at rest, the
   existing hover / focus of .d-mc-name-btn); the product's own taste / contents descriptions in one quiet line */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-name-link {
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-media-link {
  display: contents;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-meta {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

/* DG-CART-COMPACT-VARIANT-22 (Mark) — flavour and facts on one compact row ("Vanilla Cream | 550 g"), wrapping naturally */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-varline {
  margin: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-varline .d-mc-variant + .d-mc-meta::before {
  content: "|";
  margin: 0 6px;
  color: var(--muted);
}

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: 600;
  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: 600;
  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: 5px 9px 9px 9px;
  border: 1px solid var(--d-green-700); /* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 I (Mark): was 2px */
  border-radius: var(--radius);
  background: var(--green-softer);
}

/* DG-MINICART-PACKTAG-PRODUCT-MODAL-41 (Mark): the tag reads exactly "Program pack" in normal letter case and
   normal letter spacing (no item suffix, no tracking, no uppercase); the box icon is the cart page's. */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packtag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
  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;
}

/* DG-CART-MINICART-POLISH-25 (Mark): no "×n" column any more (the package qty stays in the payload / pack line) */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packkid {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  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: 500;
  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-packfoot {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packfoot b {
  color: var(--berry);
  font-weight: 600;
}

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

/* DG-UPSELL-STRIP-LIFECYCLE-POLISH-44F (Mark): the minicart program line 500 (was 600). */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-line {
  margin: 0;
  font-weight: 500;
  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: 700;
}

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: 4px 14px 10px 14px; /* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 I (Mark): was 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: 600;
  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: 17px; /* DG-DETAIL-CART-MOTION-26 (Mark): was 15px / 500 */
  font-weight: 600;
}

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

/* DG-CHECKOUT-TYPOGRAPHY-CALM-54: page title of the cart and of the checkout steps (DG-CART-CHECKOUT-REFINEMENT-26, Mark:
   800, was 700; the shared .page-head h1 rule is 800 for every other page too). */
body.v3-storefront[data-storefront="unified"][data-v3-page="cart"] .page-head h1,
body.v3-storefront[data-storefront="unified"][data-v3-page="checkout"] .page-head h1 {
  font-weight: 800;
}

body.v3-storefront[data-storefront="unified"] .d-cart-count {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

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

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);
}

/* DG-DETAIL-IMAGE-CART-INTEGRATION-22 — the line's name and photo are links to the full detail now (were Quick View buttons):
   the same look, no underline at rest; the product's own taste / contents descriptions as one quiet line */
body.v3-storefront[data-storefront="unified"] a.d-cline-qv,
body.v3-storefront[data-storefront="unified"] a.d-cline-qv-name {
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] a.d-cline-qv {
  display: contents;
}

body.v3-storefront[data-storefront="unified"] a.d-cline-qv-name:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.v3-storefront[data-storefront="unified"] .d-cline-meta {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}

/* DG-CART-COMPACT-VARIANT-22 (Mark) — the chosen flavour (text or its dropdown) and the facts share one row: "Lemon | 50 g",
   or the dropdown with the facts beside it; it wraps naturally on narrow screens (no overflow, nothing cut off) */
body.v3-storefront[data-storefront="unified"] .d-cline-varrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"] .d-cline-varrow:not(:has(*)) {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .d-cline-varrow > .d-cline-flavour {
  min-width: 0;
  max-width: 100%;
}

/* DG-CART-COMPACT-VARIANT-22-FIX01 (Mark) — a line with a flavour dropdown: the facts directly under the title, the dropdown on
   its own next line with its normal width and spacing (nothing beside it narrows it) */
body.v3-storefront[data-storefront="unified"] .d-cline-varrow--control {
  display: block;
}

body.v3-storefront[data-storefront="unified"] .d-cline-varrow--control > .d-cline-meta {
  display: block;
}

body.v3-storefront[data-storefront="unified"] .d-cline-varrow > .d-cline-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.v3-storefront[data-storefront="unified"] .d-cline-varrow > .d-cline-variant + .d-cline-meta::before {
  content: "|";
  margin-right: 8px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-cline.is-saving {
  box-shadow: 0 0 0 2px var(--green-soft), var(--shadow-sm);
}

/* DG-CART-MINICART-POLISH-25 (Mark): gap 6px */
body.v3-storefront[data-storefront="unified"] .d-cline-media {
  display: grid;
  place-items: center;
  gap: 6px;
  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: 600;
  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: 14px; /* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 (Mark): was 13px / 500 */
  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: 500;
  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: 18px; /* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 (Mark): was 15px */
  height: 18px;
}

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: 600;
  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: 600;
  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: 500;
  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);
}

/* DG-CART-MINICART-POLISH-25 (Mark): padding 8px 14px 14px (top was 12px)
   DG-CART-COMPACT-PACKS-25 (Mark): padding 14px 14px 14px (the "Program pack" tag row is gone) */
body.v3-storefront[data-storefront="unified"] .d-cpack-head {
  padding: 14px 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: 600;
  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: 18px; /* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 I (Mark): was 19px / 600 */
  font-weight: 700;
  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: 0 14px;
  background: var(--d-surface-quiet);
}

/* DG-CART-COMPACT-PACKS-25 (Mark): the pack contents are a native <details>, closed on page load; the label is its summary
   (one full-width 44px control with the existing chevron, no marker), the list keeps its own layout below it when open. */
body.v3-storefront[data-storefront="unified"] .d-cpack-inclabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 12px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  list-style: none;
  cursor: pointer;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-inclabel::-webkit-details-marker {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-inclabel:hover {
  color: var(--ink);
}

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

body.v3-storefront[data-storefront="unified"] .d-cpack-chev {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--green-dark);
  transform: rotate(90deg);
}

body.v3-storefront[data-storefront="unified"] .d-cpack-chev svg {
  width: 16px;
  height: 16px;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-details[open] > .d-cpack-inclabel .d-cpack-chev {
  transform: rotate(-90deg);
}

body.v3-storefront[data-storefront="unified"] .d-cpack-details[open] {
  padding-bottom: 14px;
}

@media (prefers-reduced-motion: no-preference) {
  body.v3-storefront[data-storefront="unified"] .d-cpack-chev {
    transition: transform 0.2s ease;
  }
}

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: 500;
  line-height: 1.25;
}

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

/* DG-DETAIL-IMAGE-CART-INTEGRATION-22 — a pack item's own product descriptions; the pack name / photo link to the full detail */
body.v3-storefront[data-storefront="unified"] .d-cpack-itemmeta {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* DG-CART-COMPACT-VARIANT-22 — a pack item's flavour (note or editor) and its own facts on one compact row */
body.v3-storefront[data-storefront="unified"] .d-cpack-itemvar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-itemvar > .d-cpack-itemnote + .d-cpack-itemmeta::before {
  content: "|";
  margin-right: 8px;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-name-link {
  color: inherit;
  text-decoration: none;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-name-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.v3-storefront[data-storefront="unified"] .d-cpack-media-link {
  display: contents;
}

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(--green);
  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;
}

/* DG-CART-MINICART-POLISH-25 (Mark): status 10px (was 11px) */
body.v3-storefront[data-storefront="unified"] .d-skit-status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  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);
}

/* DG-CART-MINICART-POLISH-25 (Mark): name 18px on desktop and phone (also the phone rule below) */
body.v3-storefront[data-storefront="unified"] .d-skit-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}

/* DG-CART-COMPACT-PACKS-25 (Mark): font-size 12px (was 13.5px) */
body.v3-storefront[data-storefront="unified"] .d-skit-text {
  margin: 0;
  font-size: 12px;
  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;
  font-weight: 600;
}

body.v3-storefront[data-storefront="unified"] .d-skit-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  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);
}

/* DG-CART-COMPACT-PACKS-25 (Mark): font-size 20px (was 17px) */
body.v3-storefront[data-storefront="unified"] .d-csum-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
}

/* 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.
   DG-CART-COMPACT-PACKS-25 (Mark): it is its own block in the side column after the summary card (cart-summary.php), spaced
   by the column's 14px gap, so it no longer carries the in-card bottom padding and divider. */
body.v3-storefront[data-storefront="unified"] .d-csum-coupon {
  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: 600;
  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;
}

/* DG-CART-COMPACT-PACKS-25 (Mark): font-size 13px (was 14.5px) */
body.v3-storefront[data-storefront="unified"] .d-csum-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

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: 600;
}

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: 600;
}

body.v3-storefront[data-storefront="unified"] .d-csum-later {
  font-size: 13px;
  font-weight: 500;
  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: 600;
}

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: 14px; /* DG-CART-CHECKOUT-REFINEMENT-26 (Mark): 14 / 500 (was 12.5 / 400) */
  font-weight: 500;
  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; /* DG-CART-CHECKOUT-REFINEMENT-26 (Mark): was 600 */
}

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.
     DG-CART-PROCEED-ARROWS-25 (Mark): the price sits directly under the pack name, beside the photo (row-gap was 12px,
     money spanned the photo column on row 2). */
  body.v3-storefront[data-storefront="unified"] .d-cpack-parent {
    grid-template-columns: 76px 1fr auto;
    row-gap: 4px;
    align-items: start;
  }

  body.v3-storefront[data-storefront="unified"] .d-cpack-media {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  body.v3-storefront[data-storefront="unified"] .d-cpack-info {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  body.v3-storefront[data-storefront="unified"] .d-cpack-money {
    grid-column: 2;
    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;
  }

  /* DG-MINICART-PACKTAG-PRODUCT-MODAL-41 (Mark) — phones: the cart Starter Kit row is as compact as a product row. A
     small product-style image on the left (the 76px cart thumbnail track) with the status and the name beside it in
     the same top row; the explanation, the progress bar and its scale run underneath across the full card width.
     .d-skit-body becomes `display: contents` so its children join the card grid; order and content are unchanged. */
  body.v3-storefront[data-storefront="unified"] .d-skit {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
      "media status"
      "media name"
      "text text"
      "prog prog";
    gap: 6px 14px;
    align-items: start;
    padding: 14px;
  }

  body.v3-storefront[data-storefront="unified"] .d-skit-body {
    display: contents;
  }

  body.v3-storefront[data-storefront="unified"] .d-skit-media {
    grid-area: media;
    align-self: start;
    width: 76px;
    padding: 6px;
  }

  body.v3-storefront[data-storefront="unified"] .d-skit-status {
    grid-area: status;
    align-self: end;
    justify-self: start;
    max-width: 100%;
  }

  body.v3-storefront[data-storefront="unified"] .d-skit-name {
    grid-area: name;
    align-self: start;
    font-size: 18px;
    overflow-wrap: anywhere;
  }

  body.v3-storefront[data-storefront="unified"] .d-skit-text {
    grid-area: text;
    margin-top: 4px;
  }

  body.v3-storefront[data-storefront="unified"] .d-skit-prog {
    grid-area: prog;
  }
}

/* DG-CART-ADDRESS-CHECKOUT-CTAS-43 (Mark) — the summary carries the primary action again on the two-column (desktop)
   layout: "Go to address" on the cart, "Continue to payment" on the address page. Both run the canonical bottom CTA's
   own path (v3-checkout-ctas.js); the bottom CTAs stay. Below the two-column breakpoint the summary sits under the
   lines/form, so the extra button is not shown there (the bottom CTA is right next to it). */
body.v3-storefront[data-storefront="unified"] .d-cart-cta-proxy,
body.v3-storefront[data-storefront="unified"] .d-cosum-cta {
  margin-top: 4px;
}

body.v3-storefront[data-storefront="unified"] .d-cart-cta-proxy svg,
body.v3-storefront[data-storefront="unified"] .d-cosum-cta svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 1000px) {
  body.v3-storefront[data-storefront="unified"] .d-cart-cta-proxy,
  body.v3-storefront[data-storefront="unified"] .d-cosum-cta {
    display: none;
  }
}

/* Phones: the compact bottom bar (current total + the step's primary action). Shown by v3-checkout-ctas.js only while
   the bottom CTA is out of view; it sits below drawers/modals (z 95/100), respects the home-indicator safe area and,
   while shown, the page reserves its height at the end so nothing stays covered. Never shown above 720px. */
body.v3-storefront[data-storefront="unified"] .d-mcta {
  display: none;
}

@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-mcta:not([hidden]) {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--card, #fff);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(27, 33, 29, 0.12);
  }

  body.v3-storefront[data-storefront="unified"] .d-mcta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 640px;
    margin: 0 auto;
  }

  body.v3-storefront[data-storefront="unified"] .d-mcta-total {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--muted);
  }

  body.v3-storefront[data-storefront="unified"] .d-mcta-total strong {
    font-size: 19px;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
  }

  body.v3-storefront[data-storefront="unified"] .d-mcta-btn {
    flex: 0 0 auto;
    min-height: 48px;
    padding-inline: 18px;
    white-space: nowrap;
  }

  body.v3-storefront[data-storefront="unified"] .d-mcta-btn svg {
    width: 18px;
    height: 18px;
  }

  body.v3-storefront.has-d-mcta[data-storefront="unified"] {
    padding-bottom: var(--v2-mcta-h, 76px);
  }
}

/* DG-UPSELL-MARKETING-POLISH-44B (on 44A) — the offer views (v3-upsell-views.js). Mark's approved A copy; shop tokens,
   normal weights, few colours. A subtle strip connected to its pack card; a compact dialog / phone bottom sheet with
   a real product image on a soft surface, one title, one benefit line, one price, compact dropdowns.
   DG-UPSELL-PILLS-TYPE-44C: the canonical target/PDM name as a small dark-green pill, the price on its own row
   (desktop strip: between the body and the actions), dialog leads 1px smaller, a decorative icon on the primary.
   DG-UPSELL-STRIP-LIFECYCLE-POLISH-44F (Mark): the strip has only Upgrade (no inline decline), sits attached to the
   pack card (-10px, berry bottom edge), pill 11px/700, saving 600, strip price 14px, darker upsell backdrop.
   DG-UPSELL-CONTRACT-INTEGRATION-44D: server price facts (struck list price, one compact "Save …"), quiet styling.
   44D addendum (Mark): name pills light violet with dark text, saving pills sale-red. No shop token exists for a light
   violet or a soft sale background, so these are SCOPED upsell tokens (not shop tokens); the text reds are --sale-dark. */
body.v3-storefront[data-storefront="unified"] .d-upo-strip,
body.v3-storefront[data-storefront="unified"] .d-upo {
  --v2-upo-pill-bg: #eee8f7;
  --v2-upo-pill-ink: #614778;
  --v2-upo-save-bg: #fcebea;
}

body.v3-storefront[data-storefront="unified"] .d-upo-strip {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: -10px 0 0px;
  padding: 10px 12px;
  background: #fcf7fa;
  border: 1px solid rgba(143, 25, 98, 0.16);
  border-left: 3px solid var(--berry);
  border-bottom: 3px solid var(--berry);
  border-radius: var(--radius);
}

body.v3-storefront[data-storefront="unified"] .d-upo-strip-media {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 3px;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
}

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

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

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

/* the canonical name: small, secondary, plain case (no uppercase, no added tracking); long names wrap, never truncate */
body.v3-storefront[data-storefront="unified"] .d-upo-pill {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 4px;
  padding: 4px 9px;
  border-radius: 10px;
  background: var(--v2-upo-pill-bg);
  color: var(--v2-upo-pill-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: anywhere;
}

body.v3-storefront[data-storefront="unified"] .d-upo-head .d-upo-pill {
  margin: 0 0 6px;
}

body.v3-storefront[data-storefront="unified"] .d-upo-head .d-upo-title + .d-upo-pill {
  margin: 6px 0 0;
}

/* desktop: price, then the actions, to the right of the text */
body.v3-storefront[data-storefront="unified"] .d-upo-strip-foot {
  display: flex;
  align-items: center;
  gap: 16px;
}

body.v3-storefront[data-storefront="unified"] .d-upo-strip-price {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 8px;
  max-width: 230px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  white-space: nowrap;
}

/* DG-UPSELL-PRICE-UPGRADE-POLISH-44E: "Just <amount> more" — only the server amount is bold; the saving pill is normal
   weight and sits right after it when it fits, else it wraps below (never clipped). */
body.v3-storefront[data-storefront="unified"] .d-upo-strip-delta,
body.v3-storefront[data-storefront="unified"] .d-upo-price.d-upo-delta {
  font-weight: 400;
}

body.v3-storefront[data-storefront="unified"] .d-upo-amt {
  font-weight: 700;
}

/* server price facts: the list price struck and muted, one small saving label (never derived client-side) */
body.v3-storefront[data-storefront="unified"] .d-upo-was {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-upo-save {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--v2-upo-save-bg);
  color: var(--sale-dark, #9c110d);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

body.v3-storefront[data-storefront="unified"] .d-upo-meta .d-upo-save {
  align-self: center;
}

body.v3-storefront[data-storefront="unified"] .d-upo-strip-price .d-upo-save {
  font-size: 11px;
}

body.v3-storefront[data-storefront="unified"] .d-upo-strip-error {
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--berry);
}

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

body.v3-storefront[data-storefront="unified"] .d-upo-strip-btn {
  min-height: 36px;
  padding: 6px 16px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

body.v3-storefront[data-storefront="unified"] .d-upo-decline {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}

body.v3-storefront[data-storefront="unified"] .d-upo-decline:hover {
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-upo-strip.is-pending,
body.v3-storefront[data-storefront="unified"] .d-upo.is-pending .d-upo-decline,
body.v3-storefront[data-storefront="unified"] .d-upo.is-pending .d-upo-close {
  opacity: 0.6;
}

/* the server-rendered pack card that replaces the old one after a confirmed upgrade: a short, calm crossfade */
body.v3-storefront[data-storefront="unified"] .d-upo-swap {
  opacity: 0.35;
  transition: opacity 0.3s ease, height 0.3s ease;
}

body.v3-storefront[data-storefront="unified"] .d-upo-swap.is-in {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  body.v3-storefront[data-storefront="unified"] .d-upo-swap {
    opacity: 1;
    transition: none;
  }
}

body.v3-storefront[data-storefront="unified"] .d-upo {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 24px;
}

body.v3-storefront[data-storefront="unified"] .d-upo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 24, 14, 0.75);
}

body.v3-storefront[data-storefront="unified"] .d-upo-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  background: var(--card, #fff);
  border-top: 3px solid var(--berry);
  border-radius: var(--d-radius-lg, 18px);
  box-shadow: 0 18px 50px rgba(27, 33, 29, 0.22);
}

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

body.v3-storefront[data-storefront="unified"] .d-upo-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

body.v3-storefront[data-storefront="unified"] .d-upo-close svg {
  width: 17px;
  height: 17px;
}

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

body.v3-storefront[data-storefront="unified"] .d-upo-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 22px 6px;
}

body.v3-storefront[data-storefront="unified"] .d-upo-top {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-right: 34px;
}

body.v3-storefront[data-storefront="unified"] .d-upo-media {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, #fdf8fb 0%, var(--d-surface-media, #f4f2ec) 100%);
  border-radius: var(--radius);
}

body.v3-storefront[data-storefront="unified"] .d-upo-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-upo-lead {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-upo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 10px 0 0;
}

body.v3-storefront[data-storefront="unified"] .d-upo-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-upo-choice,
body.v3-storefront[data-storefront="unified"] .d-upo-fixed {
  display: grid;
  gap: 5px;
  margin: 16px 0 0;
}

body.v3-storefront[data-storefront="unified"] .d-upo-choice-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-upo-fixed-value {
  font-size: 14px;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-upo-error {
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--berry);
}

body.v3-storefront[data-storefront="unified"] .d-upo-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 22px 16px;
  border-top: 1px solid var(--line);
  background: var(--card, #fff);
}

body.v3-storefront[data-storefront="unified"] .d-upo-accept {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

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

body.v3-storefront[data-storefront="unified"] .d-upo-accept-ico svg {
  display: block;
  width: 17px;
  height: 17px;
}

body.v3-storefront[data-storefront="unified"] .d-upo.is-pending .d-upo-accept-ico {
  display: none;
}

body.v3-storefront[data-storefront="unified"] .d-upo-decline {
  min-height: 44px;
  font-size: 14px;
}

@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-upo-strip {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px 10px;
  }

  body.v3-storefront[data-storefront="unified"] .d-upo-strip-media {
    width: 48px;
    height: 48px;
  }

  /* phone: the price row, then the actions; the price joins the action row at the far right only when it fits */
  body.v3-storefront[data-storefront="unified"] .d-upo-strip-foot {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  body.v3-storefront[data-storefront="unified"] .d-upo-strip-actions {
    gap: 14px;
  }

  body.v3-storefront[data-storefront="unified"] .d-upo-strip-price {
    justify-content: flex-start;
    max-width: none;
  }

  body.v3-storefront[data-storefront="unified"] .d-upo-strip.is-price-inline .d-upo-strip-price {
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
  }

  body.v3-storefront[data-storefront="unified"] .d-upo-strip.is-price-inline .d-upo-strip-foot {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  body.v3-storefront[data-storefront="unified"] .d-upo-strip.is-price-inline .d-upo-strip-price {
    order: 2;
    margin-left: auto;
  }

  body.v3-storefront[data-storefront="unified"] .d-upo {
    place-items: end stretch;
    padding: 0;
  }

  body.v3-storefront[data-storefront="unified"] .d-upo-dialog {
    width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 18px 18px 0 0;
  }

  body.v3-storefront[data-storefront="unified"] .d-upo-scroll {
    padding: 20px 16px 6px;
  }

  body.v3-storefront[data-storefront="unified"] .d-upo-top {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    margin-right: 38px;
  }

  body.v3-storefront[data-storefront="unified"] .d-upo-media {
    width: 92px;
    height: 92px;
  }

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

  body.v3-storefront[data-storefront="unified"] .d-upo-actions {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* `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: 700;
  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: 500;
  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: 500;
  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: 700;
  line-height: 1.2;
}

/* Payment method headings and section titles use weight 700. */
body.v3-storefront[data-storefront="unified"] .d-copay-block .d-cocard-title {
  font-weight: 700;
}

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

/* DG-CHECKOUT-TYPOGRAPHY-CALM-54: the address step's own field labels are 500; the shared label rule above (sign-in,
   register) keeps 700. */
body.v3-storefront[data-storefront="unified"] .field-group label.d-field-label {
  font-weight: 500;
}

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: 700;
}

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

/* DG-CHECKOUT-TYPOGRAPHY-CALM-54: the checkbox label text (a <b> inside the label, 900 by "bolder") is 500. */
body.v3-storefront[data-storefront="unified"] .d-cotoggle b {
  font-weight: 500;
}

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: 700;
}

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: 600;
}

body.v3-storefront[data-storefront="unified"] .d-codelivery-free {
  font-size: 15px;
  font-weight: 600;
  color: var(--green-dark);
}

body.v3-storefront[data-storefront="unified"] .d-codelivery-amount {
  font-size: 15px;
  font-weight: 600;
}

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

body.v3-storefront[data-storefront="unified"] .d-cosum-edit {
  font-size: 13px;
  font-weight: 500;
  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: 600;
}

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: 600;
  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: 600;
  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: 600;
}

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: 600;
}

body.v3-storefront[data-storefront="unified"] .d-cosum-later {
  font-size: 13px;
  font-weight: 500;
  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: 600;
}

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

/* DG-HOW-OVERVIEW-INFO-SPACING-FOOTER-15 — the top margin of an info page section has ONE authority: the
   --d-info-section rule further down (120px, 100px on phones). This rule only keeps the side and bottom margins at 0. */
body.v3-storefront[data-v3-page="info"] .d-section {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 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;
}

/* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 H (Mark): ONE main-content gutter: 20px by default, 14px on phones (720px and narrower);
   every main-content inset that means the page gutter reads this property (the larger-screen steps below stay). */
@media (max-width: 720px) {
  body.v3-storefront {
    --page-gutter: 14px;
  }
}

@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 one section gap.
     DG-HOW-OVERVIEW-INFO-SPACING-FOOTER-15 (Mark, exact): the main sections of every info page sit 120px apart, 100px on
     phones (<=720px, below). Info pages only: the storefront --d-section-gap (homepage) is unchanged. */
  --d-info-section: 120px;
  --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;
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] {
    --d-info-section: 100px;
  }
}

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);
}
/* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 H (Mark): on phones the info family uses the one page gutter (14px) */
@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] {
    --d-info-gutter: var(--page-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, 42px);
  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: var(--page-gutter); /* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 H: was 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;
  }
}

/* DG-WEIGHT-LOSS-CONTENT-REFRESH-14 (Mark): four guide entries. Weight Loss is one broad lead entry with its photo; the
   other three are smaller entries in one row (desktop and tablet) or compact rows (phones). */
body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--lead .d-goal-card-media {
  display: block;
  min-height: 300px;
  overflow: hidden;
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--lead .d-goal-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the guide photo has a thin white border of its own; the slight zoom keeps it outside the frame */
  transform: scale(1.06);
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--lead .d-goal-card-go {
  margin-top: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--lead .d-goal-card-body {
  justify-content: center;
  padding: clamp(24px, 3vw, 40px);
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--lead h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--lead p {
  flex: 0 1 auto;
  max-width: 42ch;
  font-size: 1rem;
}

@media (max-width: 1000px) {
  body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--lead .d-goal-card-media {
    min-height: 260px;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--lead {
    grid-template-columns: 1fr;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--lead .d-goal-card-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--lead .d-goal-card-body {
    padding: 20px 20px 18px;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--small .d-goal-card-body {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--small .d-goal-card-icon.d-how-ico {
    grid-row: 1 / span 3;
    width: 44px;
    height: 44px;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--small h3 {
    font-size: 1.05rem;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-index .d-goal-grid--lead .d-goal-card--small .d-goal-card-go {
    margin-top: 6px;
  }
}

/* DG-WEIGHT-LOSS-CONTENT-REFRESH-14 — the parts the new Weight Loss and Breakfast guides use: the preparation callout,
   short h3 subsections, numbered idea lists, a photo caption, the Weight Loss Packs block with its follow-on, and the
   editorial bullets of the weight pack cards (homepage and guide). */
body.v3-storefront[data-v3-page="info"] .d-how-callout {
  margin-top: 16px;
  max-width: 68ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-callout p + p {
  margin-top: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-how .d-how-subhead {
  margin: 18px 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

body.v3-storefront[data-v3-page="info"] .d-how-idea-list {
  max-width: 72ch;
  margin: 14px 0 0;
  padding-left: 1.4em;
}

body.v3-storefront[data-v3-page="info"] .d-how-idea-list li {
  margin: 6px 0;
  line-height: 1.5;
}

body.v3-storefront[data-v3-page="info"] .d-how-idea-list li::marker {
  font-weight: 700;
  color: var(--green-dark);
}

body.v3-storefront[data-v3-page="info"] .d-how-info .d-how-plain-list {
  max-width: 72ch;
}

body.v3-storefront[data-v3-page="info"] .d-how-media-caption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-packs {
  margin-top: 20px;
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-shared {
  margin-top: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-cta {
  margin-top: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-how-follow {
  max-width: 68ch;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line, #e4e8df);
}

body.v3-storefront[data-v3-page="info"] .d-how-follow .d-how-subhead {
  margin-top: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-follow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 700;
}

body.v3-storefront[data-v3-page="info"] .d-how-paths-note-wrap .d-how-paths-note {
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-how-prep-pair + .d-how-idea-list {
  margin-top: 20px;
}

body.v3-storefront[data-v3-page="info"] .d-how-idea-list + .d-how-section-note {
  margin-top: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-how-goals-support {
  margin-top: 18px;
}

/* DG-WEIGHT-LOSS-CONTENT-REFRESH-14 REVISION02 (Mark): visible ticks on the real-food, habits and route lists (a CSS marker, not
   a checkbox), the short conditions line with its "Full conditions" disclosure, the twist row and the pack group titles. */
body.v3-storefront[data-v3-page="info"] .d-how-tick-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-how-tick-list li {
  position: relative;
  margin: 8px 0 0;
  padding-left: 30px;
  line-height: 1.5;
}

body.v3-storefront[data-v3-page="info"] .d-how-tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green, #2f8f27) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

body.v3-storefront[data-v3-page="info"] .d-how-conditions,
body.v3-storefront[data-v3-page="info"] .d-how-paths-note-wrap .d-conditions {
  max-width: 68ch;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, #5b6358);
}

body.v3-storefront[data-v3-page="info"] .d-how-conditions p {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-conditions summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--green-dark);
}

body.v3-storefront[data-v3-page="info"] .d-conditions p {
  margin: 6px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-info-cards .d-how-card-grid {
  margin-top: 12px;
}

body.v3-storefront[data-v3-page="info"] .d-how-pack-group-title {
  margin-top: 22px;
}

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

/* DG-HOW-OVERVIEW-INFO-SPACING-FOOTER-15 (Mark: less beige) — the three step icons of the How it works overview only: the
   existing berry-dark as the well, the line icon (stroke: currentColor) in white. Guides, FAQ and other pages unchanged. */
body.v3-storefront[data-v3-page="info"] .d-how-index .d-how-steps-section .d-how-card-icon-wrap {
  background: var(--berry-dark, #6b0f4d);
  color: #fff;
}

/* --- 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;
  }
  /* DG-SCROLL-CATEGORY-AVATAR-25 (Mark): 34px in the phone dock (was 28px) */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .acct-toggle .acct-avatar {
    width: 34px;
    height: 34px;
    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: 15px; /* DG-CATEGORY-GUIDE-MOTION-24 (Mark): was 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.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;
  }
  /* DG-MINICART-CLOSE-EMPTY-FIX-25 (Mark): the phone dock badge is 24 × 24 with a 14px count (was min-width 20, height 20,
     padding 0 5px, 11px); no side padding so two digits fit inside the fixed 24px; line-height 1 keeps the count centred in
     the 20px inside the 2px ring (the inherited 22.4px line sat 1px low) */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-count {
    top: -5px;
    right: -6px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    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. */
/* Mark24Oct direct: mobile search removed; its space now belongs to the category control.
   The generic icon no longer needs the extra <420px hiding rule. */
@media (max-width: 720px) {
  html body.v3-storefront[data-storefront="unified"] #v3-open-search {
    display: none !important;
  }
}
@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;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard2 .d-pcard2-name { font-size: 16px; }
  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 { font-size: 18px; }
  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: 600;
}
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: max(15px, var(--d-field-font-size, 15px));
  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);
}
/* How it works and its goal pages set no page-title size of their own: their only h1 is the hero title, sized by the ONE
   shared rule body.v3-storefront[data-v3-page="info"] .d-hero-copy h1 (32px on phones, at most 42px), as on Help and
   Mark's Story. Do not add a `.d-how h1` size here: it would override that rule. */

/* ---- 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. */
/* Mark29: the Help signpost deliberately uses this section-spacing exception. */
body.v3-storefront[data-v3-page="info"] .d-help .d-help-discover {
  margin-top: 60px;
  margin-bottom: -60px;
}
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;
  }
}

/* Mark 2026-10-15: guest Sign in stays in the white brand row at the top and leaves the dock when scrolled.
   The cart keeps its existing jump. Sign in has no travelling/collapsing animation or reserved docked slot. */
@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;
    transition: none;
  }
  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) + 4px);
  }
  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;
    white-space: nowrap;
    transition: none;
  }
  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 {
    display: none;
  }
}

@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);
  }
}

/* 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: 15px; /* DG-DETAIL-CART-MOTION-26 (Mark): was 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;
}

/* ==========================================================================
   DG-HOME-PACK-APPROVED-BUILD-51 — central editorial role pill (App\Content\EditorialRoles), every page with cards.
   The item's primary role in the card eyebrow slot: the soft-green look of the pack-page pills, sentence case, one
   line, not interactive. NOT the lavender upsell product-name pill and NOT a sale badge. Editorial-grid roles
   (.d-pcard-role: Start here / Useful / Optional) are unchanged.
   ========================================================================== */
body.v3-storefront[data-storefront="unified"] .d-pcard-cat.d-rolepill {
  display: inline-block;
  align-self: flex-start;
  justify-self: start;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 51A: on the narrowest two-per-row cards the pill keeps its whole label. */
@media (max-width: 360px) {
  body.v3-storefront[data-storefront="unified"] .d-pcard-cat.d-rolepill {
    padding: 2px 7px;
    font-size: 10.5px;
  }
}

/* =====================================================================
   DG-SEARCHBAR-MOBILE-MENU-DESIGN-15 (Mark: "ik vind ALLES aan dit voorstel mooi") — searchbar "Licht zwevend" and the
   phone menu "Duidelijke menuknop".
   - Searchbar (every width): a light neutral band with a white field that floats on a small outer shadow; one fine
     neutral edge, 11px corners, the berry arrow button with 8px corners. No green band or green ring. The 62px slot
     (--searchbar-h), the 46px field, the 16px input and every open / close / sticky / results rule stay as they are.
     Focus: a berry edge with a soft berry ring while the field holds focus; nothing heavy at rest.
   - Phone Berry dock: the same #v3-open-drawer as a white button with the berry icon and a visible "Menu"; a larger
     search icon; the cart disc a little smaller (38px, 22px icon) while its hit area stays 44 x 44 (::after). Once
     docked the signed-in account toggle leaves the dock (out of layout and tab order) and the cart takes its place;
     the cart's lift, pop and both colour states are unchanged. Guests keep their Sign in control.
   ===================================================================== */
body.v3-storefront[data-storefront="unified"] .searchbar {
  background: var(--d-surface-quiet, #f3f5f0);
  border-bottom: 1px solid var(--line, #e4e7dd);
}
body.v3-storefront[data-storefront="unified"] .searchbar form {
  border: 1px solid #dce0d7;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(24, 45, 24, 0.10);
}
body.v3-storefront[data-storefront="unified"] .searchbar form:focus-within {
  border-color: var(--berry);
  box-shadow: 0 0 0 3px rgba(142, 21, 102, 0.14), 0 2px 5px rgba(24, 45, 24, 0.10);
}
body.v3-storefront[data-storefront="unified"] .searchbar form > .ico {
  color: #647064;
}
body.v3-storefront[data-storefront="unified"] #v3-site-search::placeholder {
  color: #647064;
}
body.v3-storefront[data-storefront="unified"] .search-wrap .searchbar-submit {
  border-radius: 8px;
}
@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: 1px solid var(--line, #e4e7dd);
    box-shadow: 0 8px 16px -12px rgba(24, 45, 24, 0.35);
  }
}

/* The visible "Menu" label exists for the phone Berry dock only. */
body.v3-storefront .hamburger .hamburger-label {
  display: none;
}
@media (max-width: 720px) {
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .hamburger {
    width: auto;
    min-width: 76px;
    height: 44px;
    gap: 4px;
    padding: 0 8px 0 6px;
    border-radius: 10px;
    background: #fff;
    color: var(--berry);
    box-shadow: 0 1px 2px rgba(64, 8, 46, 0.18);
  }
  /* Keep the SVG wrapper off the text baseline so the glyph centres with the Menu label. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select #v3-open-drawer [data-ico="menu"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .hamburger .ico {
    width: 23px;
    height: 23px;
    display: block;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .hamburger .hamburger-label {
    display: inline;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .hamburger:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
  }

  /* Search: a larger glyph inside the same 44px target. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions #v3-open-search .ico {
    width: 27px;
    height: 27px;
  }

  /* Cart: a 38px disc with a 22px icon; the ::after ring keeps the 44 x 44 hit area. Same anchor, lift, pop and colours. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn {
    top: calc(50% - 19px);
    right: 11px;
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
  }
  /* Centre the smaller SVG in its existing 30px wrapper; 1px padding optically balances the cart path. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn [data-ico="cart"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    padding-left: 1px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn .ico {
    width: 22px;
    height: 22px;
    display: block;
    flex: none;
    margin: 0;
  }

  /* Docked, signed in: the account toggle leaves the dock and the cart takes its place. The slot swap happens at once
     (no padding transition), so the category control keeps its width instead of jumping while the cart pops in. */
  html.v3-berry-dock.v3-dock-docked body.v3-storefront[data-storefront="unified"] .v3-dock-actions .acct-menu {
    display: none;
  }
  html.v3-berry-dock.v3-dock-anim body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions:has(> .acct-menu) {
    transition: none;
  }

}
@media (max-width: 360px) {
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn {
    right: 9px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .hamburger {
    min-width: 70px;
    padding: 0 7px 0 5px;
  }
}
@media (max-width: 720px) and (hover: hover) {
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .hamburger:hover {
    background: #fbf3f8;
    color: var(--berry-dark);
  }
}

/* ==========================================================================================================
   DG-RECIPES-WEIGHT-HOME-R2-15 — Meals & Bites hub, shared recipe cards, shake ideas.
   Info-page scoped. Main blocks keep the accepted --d-info-section rhythm (120px / 100px); inside the hub the
   tools, cards and notes sit 8–36px apart.
   ========================================================================================================== */
body.v3-storefront[data-v3-page="info"] .d-mb {
  --d-mb-ink: var(--ink, #171d18);
  --d-mb-muted: var(--muted, #566159);
  --d-mb-line: #dfe3d8;
  --d-mb-chip-ink: #17381a;
}

body.v3-storefront[data-v3-page="info"] .d-mb-chapters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--d-info-section);
}

body.v3-storefront[data-v3-page="info"] .d-mb-chapter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
  padding: 20px 22px;
  border: 1px solid var(--d-mb-line);
  border-radius: 18px;
  background: #fff;
  color: var(--d-mb-ink);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

body.v3-storefront[data-v3-page="info"] .d-mb-chapter strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 750;
  letter-spacing: -0.01em;
}

body.v3-storefront[data-v3-page="info"] .d-mb-chapter strong [data-ico] {
  width: 18px;
  height: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-chapter small {
  color: var(--d-mb-muted);
  font-size: 14px;
  line-height: 1.4;
}

body.v3-storefront[data-v3-page="info"] .d-mb-chapter:hover {
  border-color: #c9cfc0;
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-v3-page="info"] .d-mb-chapter.is-active {
  border-color: var(--berry-dark, #6b0f4d);
  background: linear-gradient(135deg, var(--berry-dark, #6b0f4d) 0%, var(--berry, #8e1566) 100%);
  color: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-mb-chapter.is-active small {
  color: rgba(255, 255, 255, 0.86);
}

body.v3-storefront[data-v3-page="info"] .d-mb-chapter:focus-visible,
body.v3-storefront[data-v3-page="info"] .d-mb-chip:focus-visible,
body.v3-storefront[data-v3-page="info"] .d-mb-card a:focus-visible,
body.v3-storefront[data-v3-page="info"] .d-mb-reset:focus-visible {
  outline: 2px solid var(--berry, #8e1566);
  outline-offset: 3px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-section {
  margin-top: 24px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-types,
body.v3-storefront[data-v3-page="info"] .d-mb-features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-features {
  margin-top: 14px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-features-label {
  margin-right: 6px;
  color: var(--d-mb-muted);
  font-size: 13px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--d-mb-line);
  border-radius: var(--radius-pill, 999px);
  background: #fff;
  color: var(--d-mb-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

body.v3-storefront[data-v3-page="info"] .d-mb-chip:hover {
  border-color: #c3cab9;
}

body.v3-storefront[data-v3-page="info"] .d-mb-chip.is-active {
  border-color: var(--d-mb-chip-ink);
  background: var(--d-mb-chip-ink);
  color: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-mb-chip-feature {
  min-height: 38px;
  padding: 7px 13px;
  border-radius: 10px;
  font-size: 13.5px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-chip-feature.is-active {
  border-color: var(--berry, #8e1566);
  background: var(--berry-soft, #f9e3f1);
  color: var(--berry-dark, #6b0f4d);
}

body.v3-storefront[data-v3-page="info"] .d-mb-reset {
  margin-left: 4px;
  color: var(--berry, #8e1566);
  font-size: 14px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-reset[hidden] {
  display: none;
}

body.v3-storefront[data-v3-page="info"] .d-mb-search {
  position: relative;
  flex: 0 1 300px;
  min-width: 220px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-search-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--d-mb-line);
  border-radius: 12px;
  background: #fff;
  color: var(--d-mb-ink);
  font: inherit;
  font-size: max(15px, var(--d-field-font-size, 15px));
}

body.v3-storefront[data-v3-page="info"] .d-mb-search-input:focus {
  outline: none;
  border-color: var(--green, #2f8f27);
  box-shadow: var(--d-field-glow);
}

body.v3-storefront[data-v3-page="info"] .d-mb-search-go {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.v3-storefront[data-v3-page="info"] .d-mb-shake-note {
  max-width: 72ch;
  margin: 16px 0 0;
  color: var(--d-mb-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

body.v3-storefront[data-v3-page="info"] .d-mb-shake-reset {
  margin: 8px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-mb-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 40px 0 22px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-head h2 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 30px);
  letter-spacing: -0.015em;
}

body.v3-storefront[data-v3-page="info"] .d-mb-head p {
  margin: 6px 0 0;
  color: var(--d-mb-muted);
}

body.v3-storefront[data-v3-page="info"] .d-mb-head .d-mb-count {
  flex: none;
  margin: 0;
  font-size: 14px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 40px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card {
  display: grid;
  grid-template-columns: minmax(150px, 38%) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card[hidden] {
  display: none;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  background: var(--d-surface-media, #eef2ea);
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.v3-storefront[data-v3-page="info"] .d-mb-ai-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--d-mb-ink);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-body > * {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-meta {
  display: flex;
  flex-wrap: wrap;
  color: var(--green-dark, #1f6a1a);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-meta span + span::before {
  content: "·";
  margin: 0 6px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-title {
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-title a {
  color: var(--d-mb-ink);
  text-decoration: none;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-text {
  color: var(--d-mb-muted);
  font-size: 15px;
  line-height: 1.5;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-labels li {
  padding: 3px 8px;
  border: 1px solid #d6e6cc;
  border-radius: 6px;
  background: var(--green-softer, #f1f9ec);
  color: var(--d-green-ink, #17381a);
  font-size: 12px;
  font-weight: 600;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 14px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-facts > span {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--d-surface-quiet, #f3f5f0);
  color: var(--d-mb-ink);
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-ext .d-mb-card-facts > span:first-child {
  background: var(--berry-soft, #f9e3f1);
  color: var(--berry-dark, #6b0f4d);
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-facts > .d-mb-card-portion {
  padding: 0;
  background: none;
  color: var(--d-mb-muted);
  font-size: 13px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-time,
body.v3-storefront[data-v3-page="info"] .d-mb-card-note {
  color: var(--d-mb-muted);
  font-size: 13.5px;
  line-height: 1.45;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-time {
  color: var(--d-mb-ink);
  font-weight: 600;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-top: 4px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: var(--berry, #8e1566);
  font-weight: 700;
  text-decoration: none;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-cta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-cta [data-ico] {
  width: 16px;
  height: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-credit {
  color: var(--d-mb-muted);
  font-size: 12.5px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The 13 shake ideas without a picture: intentional typographic cards, no empty media box. */
body.v3-storefront[data-v3-page="info"] .d-mb-card.is-text {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  padding: 22px 24px;
  border: 1px solid var(--d-mb-line);
  border-radius: 18px;
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-mark {
  position: absolute;
  top: 0;
  left: 24px;
  width: 44px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--berry, #8e1566);
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-mark-chocolate {
  background: #6b3f2a;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-mark-coffee {
  background: #9a6b3f;
}

body.v3-storefront[data-v3-page="info"] .d-mb-card-mark-dessert {
  background: var(--green, #2f8f27);
}

body.v3-storefront[data-v3-page="info"] .d-mb-empty {
  padding: 28px 24px;
  border-radius: 16px;
  background: #fff;
  color: var(--d-mb-muted);
  text-align: center;
}

body.v3-storefront[data-v3-page="info"] .d-mb-empty[hidden],
body.v3-storefront[data-v3-page="info"] .d-mb-more-wrap[hidden] {
  display: none;
}

body.v3-storefront[data-v3-page="info"] .d-mb-empty p {
  margin: 0 0 14px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-more-wrap {
  margin: 36px 0 0;
  text-align: center;
}

body.v3-storefront[data-v3-page="info"] .d-mb-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 40px;
  margin-top: var(--d-info-section);
  padding-top: 28px;
  border-top: 1px solid var(--d-mb-line);
  color: var(--d-mb-muted);
  font-size: 14px;
  line-height: 1.55;
}

body.v3-storefront[data-v3-page="info"] .d-mb-foot strong {
  display: block;
  margin-bottom: 6px;
  color: var(--d-mb-ink);
  font-size: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-foot p {
  margin: 0 0 6px;
}

/* Compact three-up cards (related shake ideas, the Weight guide's featured shakes and recipe strip): media on top. */
body.v3-storefront[data-v3-page="info"] .d-mb-grid-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-grid-compact .d-mb-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-grid-compact .d-mb-card-media {
  aspect-ratio: 4 / 3;
}

body.v3-storefront[data-v3-page="info"] .d-mb-grid-compact .d-mb-card-title {
  font-size: 18px;
}

/* Shake idea detail. */
body.v3-storefront[data-v3-page="info"] .d-mb-shake .d-mb-shake-meta {
  gap: 8px;
  margin: 28px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-mb-shake .d-mb-shake-meta span {
  padding: 5px 12px;
  border: 1px solid var(--d-mb-line);
  border-radius: var(--radius-pill, 999px);
  background: #fff;
  color: var(--d-mb-ink);
  font-weight: 600;
}

body.v3-storefront[data-v3-page="info"] .d-mb-shake .d-mb-shake-meta .d-mb-shake-ai {
  color: var(--d-mb-muted);
  font-weight: 500;
}

body.v3-storefront[data-v3-page="info"] .d-mb-shake .d-mb-shake-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-shake .d-mb-shake-body > section,
body.v3-storefront[data-v3-page="info"] .d-mb-shake-box {
  padding: 24px 26px;
  border: 1px solid var(--d-mb-line);
  border-radius: 18px;
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] #main .d-mb-shake .d-mb-shake-body h2,
body.v3-storefront[data-v3-page="info"] #main .d-mb-shake .d-mb-shake-box-title {
  margin: 0 0 12px;
  font-size: 21px;
  letter-spacing: -0.01em;
}

body.v3-storefront[data-v3-page="info"] .d-mb-shake .d-mb-shake-body li {
  font-size: 16px;
  line-height: 1.5;
}

body.v3-storefront[data-v3-page="info"] .d-mb-shake-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-shake-base {
  border-color: #d6e6cc;
  background: var(--green-softer, #f1f9ec);
}

body.v3-storefront[data-v3-page="info"] .d-mb-shake-box p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

body.v3-storefront[data-v3-page="info"] .d-mb-shake-box p + p {
  margin-top: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-mb-shake-know ul {
  margin: 0;
  padding-left: 20px;
  color: var(--d-mb-ink);
  font-size: 15px;
  line-height: 1.55;
}

body.v3-storefront[data-v3-page="info"] .d-mb-shake-know li + li {
  margin-top: 4px;
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-mb-shake .d-mb-shake-body,
  body.v3-storefront[data-v3-page="info"] .d-mb-shake-info {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body.v3-storefront[data-v3-page="info"] .d-mb-shake .d-mb-shake-body > section,
  body.v3-storefront[data-v3-page="info"] .d-mb-shake-box {
    padding: 20px;
  }
}

@media (max-width: 1080px) {
  body.v3-storefront[data-v3-page="info"] .d-mb-grid {
    gap: 32px 28px;
  }

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

  body.v3-storefront[data-v3-page="info"] .d-mb-card-media {
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-mb-chapters {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body.v3-storefront[data-v3-page="info"] .d-mb-chapter {
    min-height: 0;
    padding: 14px 16px;
    border-radius: 14px;
  }

  body.v3-storefront[data-v3-page="info"] .d-mb-chapter small {
    font-size: 13px;
  }

  body.v3-storefront[data-v3-page="info"] .d-mb-search {
    flex: 1 1 100%;
    min-width: 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-mb-chip {
    min-height: 40px;
    padding: 8px 13px;
    font-size: 13.5px;
  }

  body.v3-storefront[data-v3-page="info"] .d-mb-head {
    margin-top: 30px;
  }

  body.v3-storefront[data-v3-page="info"] .d-mb-grid,
  body.v3-storefront[data-v3-page="info"] .d-mb-grid-compact {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  body.v3-storefront[data-v3-page="info"] .d-mb-foot {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* DG-RECIPES-WEIGHT-HOME-R2-15 — Weight Loss guide R2 (how-weight-r2.php). Main sections keep the 120 / 100px rhythm
   of every info page (.d-section); everything inside them sits 12–36px apart. */
body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 {
  --d-wr2-line: #dfe3d8;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 :is(.d-anchor-alias, details#maintain) {
  display: block;
  scroll-margin-top: calc(var(--v2-anchor-offset, calc(var(--chrome-top, 80px) + var(--catbar-h, 0px) + 16px)) + 20px);
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.02em;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-lede {
  margin: 12px 0 0;
  font-size: 17px;
}

/* Mark 2026-10-15: the shorter pack intro uses the available width; it wraps naturally on phones. */
body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-pack-intro {
  max-width: none;
}

/* Hero: the conditions sit under the two buttons, light on the dark panel. */
body.v3-storefront[data-v3-page="info"] .d-wr2-hero .d-hero-actions .d-wr2-conditions {
  flex: 1 1 100%;
  max-width: 52ch;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.74);
}

body.v3-storefront[data-v3-page="info"] .d-wr2-hero .d-wr2-conditions summary {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-hero .d-wr2-conditions details p {
  color: rgba(255, 255, 255, 0.82);
}

body.v3-storefront[data-v3-page="info"] .d-wr2-hero .d-hero-actions .btn.d-wr2-hero-secondary {
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-hero .d-hero-actions .btn.d-wr2-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Plan: shake + shake + meal. */
body.v3-storefront[data-v3-page="info"] .d-wr2-plan-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 24px;
  border: 1px solid var(--d-wr2-line);
  border-radius: 18px;
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-plan-card + .d-wr2-plan-card::before {
  content: "+";
  position: absolute;
  top: 50%;
  left: -30px;
  width: 20px;
  margin-top: -16px;
  color: var(--berry, #8e1566);
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-plan-card.is-meal {
  border-color: #cfe4c2;
  background: var(--green-softer, #f1f9ec);
}

body.v3-storefront[data-v3-page="info"] .d-wr2-plan-num {
  position: absolute;
  top: 18px;
  right: 20px;
  color: var(--muted, #566159);
  font-size: 13px;
  font-weight: 700;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-plan-ico,
body.v3-storefront[data-v3-page="info"] .d-wr2-snack-ico,
body.v3-storefront[data-v3-page="info"] .d-wr2-bridge-ico {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--berry-soft, #f9e3f1);
  color: var(--berry, #8e1566);
}

body.v3-storefront[data-v3-page="info"] .d-wr2-plan-card.is-meal .d-wr2-plan-ico {
  background: #fff;
  color: var(--green-dark, #1f6a1a);
}

body.v3-storefront[data-v3-page="info"] :is(.d-wr2-plan-ico, .d-wr2-snack-ico, .d-wr2-bridge-ico) svg {
  width: 26px;
  height: 26px;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-plan-card b {
  font-size: 19px;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-plan-card > span:last-child {
  color: var(--muted, #566159);
  font-size: 15px;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-plan-note {
  margin: 22px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-bridge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 18px;
  margin-top: 32px;
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--green-softer, #f1f9ec);
}

body.v3-storefront[data-v3-page="info"] .d-wr2-bridge .d-wr2-bridge-ico {
  margin: 0;
  background: #fff;
  color: var(--green-dark, #1f6a1a);
}

body.v3-storefront[data-v3-page="info"] .d-wr2-bridge h3 {
  margin: 0;
  font-size: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-bridge p {
  margin: 4px 0 0;
  color: var(--muted, #566159);
}

/* Preparation: three numbered steps + one disclosure. */
body.v3-storefront[data-v3-page="info"] .d-wr2-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-steps li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--d-wr2-line);
}

body.v3-storefront[data-v3-page="info"] .d-wr2-step-num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--berry, #8e1566);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-steps b {
  font-size: 19px;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-steps li > span:last-child {
  color: var(--muted, #566159);
}

body.v3-storefront[data-v3-page="info"] .d-wr2-prep-note {
  margin: 20px 0 0;
  font-weight: 600;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-details {
  max-width: 760px;
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px solid var(--d-wr2-line);
  border-radius: 14px;
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-details summary {
  cursor: pointer;
  color: var(--green-dark, #1f6a1a);
  font-weight: 700;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-details p {
  margin: 10px 0 0;
  color: var(--ink, #171d18);
  font-size: 15px;
  line-height: 1.55;
}

/* Packs: the R2 comparison above the real pack cards. */
body.v3-storefront[data-v3-page="info"] .d-wr2-compare {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-compare li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 2px 0;
  border-top: 3px solid var(--berry, #8e1566);
}

body.v3-storefront[data-v3-page="info"] .d-wr2-compare b {
  color: var(--berry-dark, #6b0f4d);
  font-size: 12.5px;
  letter-spacing: 0.08em;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-compare-diff {
  font-size: 16px;
  font-weight: 700;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-compare-items {
  color: var(--muted, #566159);
  font-size: 13.5px;
  line-height: 1.45;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-pack-cards {
  margin-top: 24px;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-packs-note {
  margin: 20px 0 0;
  color: var(--muted, #566159);
}

body.v3-storefront[data-v3-page="info"] .d-wr2-price-gate {
  margin-top: 24px;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-follow,
body.v3-storefront[data-v3-page="info"] .d-wr2-section-link {
  margin: 24px 0 0;
}

/* Snacks: all eight visible. */
body.v3-storefront[data-v3-page="info"] .d-wr2-snack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-snack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--d-wr2-line);
  border-radius: 16px;
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-snack .d-wr2-snack-ico {
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
  background: var(--green-softer, #f1f9ec);
  color: var(--green-dark, #1f6a1a);
}

body.v3-storefront[data-v3-page="info"] .d-wr2-snack .d-wr2-snack-ico svg {
  width: 21px;
  height: 21px;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-snack b {
  font-size: 16px;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-snack > span:last-child {
  color: var(--muted, #566159);
  font-size: 14.5px;
  line-height: 1.45;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-snacks-note {
  margin: 18px 0 0;
  color: var(--muted, #566159);
}

/* Recipes: three featured shakes, then a modest strip of three external ideas. */
body.v3-storefront[data-v3-page="info"] .d-wr2-featured {
  margin-top: 28px;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-recipes-note {
  margin: 14px 0 0;
  color: var(--muted, #566159);
  font-size: 14px;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-strip {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--d-wr2-line);
}

body.v3-storefront[data-v3-page="info"] .d-wr2-strip-title {
  margin: 0;
  font-size: 22px;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-strip-intro {
  margin: 6px 0 22px;
  color: var(--muted, #566159);
}

body.v3-storefront[data-v3-page="info"] .d-mb-strip .d-mb-card-note {
  display: none;
}

body.v3-storefront[data-v3-page="info"] .d-mb-strip .d-mb-card-title {
  min-height: 2.5em;
}

body.v3-storefront[data-v3-page="info"] .d-mb-strip .d-mb-card-text {
  display: -webkit-box;
  min-height: 3em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.v3-storefront[data-v3-page="info"] .d-wr2-faq .d-wr2-conditions,
body.v3-storefront[data-v3-page="info"] .d-wr2-faq .d-wr2-sources {
  margin-top: 24px;
}

/* DG-RECIPES-WEIGHT-HOME-R2-15 — MOBILE TEASERS03 (V20): on phones the Weight guide's six recipe teasers (three featured
   shakes + the three-idea strip, also cards swapped in later) use a small square thumbnail beside type / prep, title and
   description; facts, labels, portion, total time, note, action and credit run full width below. Nothing is hidden or
   clamped: the strip's desktop two-line description clamp and hidden note are lifted here. Desktop, the hub and the
   recipe pages are untouched (Weight-guide + section scoped, phones only). */
@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) {
    gap: 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) .d-mb-card {
    grid-template-columns: clamp(72px, 22vw, 92px) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 8px;
    padding: 20px 0;
    border-top: 1px solid var(--d-wr2-line, #dfe3d8);
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) > .d-mb-card:first-child,
  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) > .d-mb-strip-slot:first-child > .d-mb-card {
    padding-top: 0;
    border-top: 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) > .d-mb-card:last-child,
  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) > .d-mb-strip-slot:last-child > .d-mb-card {
    padding-bottom: 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) .d-mb-card.is-text {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) .d-mb-card-media {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) .d-mb-card-body {
    display: contents;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) .d-mb-card-body > * {
    grid-column: 1 / -1;
    margin: 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) .d-mb-card.has-media .d-mb-card-body > .d-mb-card-meta {
    grid-column: 2;
    grid-row: 1;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) .d-mb-card.has-media .d-mb-card-body > .d-mb-card-title {
    grid-column: 2;
    grid-row: 2;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) .d-mb-card.has-media .d-mb-card-body > .d-mb-card-text {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) .d-mb-card-title {
    min-height: 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) .d-mb-card-text {
    display: block;
    min-height: 0;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 #d-how-recipes :is(.d-wr2-featured, .d-mb-strip) .d-mb-card-note {
    display: block;
  }
}

/* DG-BREAKFAST-MAINTENANCE-R2-15 — Healthy Breakfast R2 (opts into the Weight R2 family via .d-how-weight-r2) and the
   R2 product context shared by both guides: the Protein Drink Mix module (feature on Weight, compact on Breakfast),
   the small tea note by the packs, the Breakfast day rhythm, maintenance passage and 2 x 2 snacks. Info-page scoped;
   main sections keep the 120 / 100px rhythm, everything inside sits 8–32px apart. */
body.v3-storefront[data-v3-page="info"] .d-pdm {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}

body.v3-storefront[data-v3-page="info"] .d-pdm--compact {
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 28px;
}

body.v3-storefront[data-v3-page="info"] .d-pdm-media {
  margin: 0;
  padding: 14px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--d-wr2-line, #dfe3d8);
}

body.v3-storefront[data-v3-page="info"] .d-pdm-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.v3-storefront[data-v3-page="info"] .d-pdm-copy {
  max-width: 720px;
}

body.v3-storefront[data-v3-page="info"] .d-pdm-copy > * {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-pdm-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--berry, #8e1566);
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-pdm--compact h2 {
  font-size: clamp(24px, 2.4vw, 30px);
}

body.v3-storefront[data-v3-page="info"] .d-pdm-intro {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.55;
}

body.v3-storefront[data-v3-page="info"] .d-pdm-uses {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-pdm-uses li {
  padding-left: 16px;
  border-left: 3px solid var(--berry, #8e1566);
  font-size: 15.5px;
  line-height: 1.5;
}

body.v3-storefront[data-v3-page="info"] .d-pdm-uses b {
  display: block;
  color: var(--ink, #171d18);
}

body.v3-storefront[data-v3-page="info"] .d-pdm-uses span {
  color: var(--muted, #566159);
}

body.v3-storefront[data-v3-page="info"] .d-pdm-closing {
  margin-top: 16px;
  color: var(--muted, #566159);
}

body.v3-storefront[data-v3-page="info"] .d-pdm-action {
  margin-top: 18px;
}

body.v3-storefront[data-v3-page="info"] .d-tea-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 720px;
  margin-top: 14px;
  color: var(--muted, #566159);
  font-size: 14.5px;
  line-height: 1.5;
}

body.v3-storefront[data-v3-page="info"] .d-tea-note p {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-tea-note b {
  color: var(--ink, #171d18);
}

body.v3-storefront[data-v3-page="info"] .d-tea-note-ico {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-softer, #f1f9ec);
  color: var(--green-dark, #1f6a1a);
}

body.v3-storefront[data-v3-page="info"] .d-tea-note-ico svg {
  width: 16px;
  height: 16px;
}

/* Breakfast day rhythm: breakfast, lunch, evening meal (no "+" between them); breakfast gets the quiet accent. */
body.v3-storefront[data-v3-page="info"] .d-bf2-day .d-bf2-day-intro {
  margin-top: 8px;
}

body.v3-storefront[data-v3-page="info"] .d-bf2-day-row .d-wr2-plan-card + .d-wr2-plan-card::before {
  content: none;
}

body.v3-storefront[data-v3-page="info"] .d-bf2-day-row {
  gap: 20px;
}

body.v3-storefront[data-v3-page="info"] .d-bf2-day-row .d-wr2-plan-card.is-breakfast {
  border-color: #e9c5dc;
  background: var(--berry-soft, #f9e3f1);
}

body.v3-storefront[data-v3-page="info"] .d-bf2-day-row .d-wr2-plan-card.is-breakfast .d-wr2-plan-ico {
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-bf2-day-row .d-wr2-plan-card:not(.is-breakfast) .d-wr2-plan-ico {
  background: var(--green-softer, #f1f9ec);
  color: var(--green-dark, #1f6a1a);
}

body.v3-storefront[data-v3-page="info"] .d-bf2-maint {
  max-width: 720px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--d-wr2-line, #dfe3d8);
}

body.v3-storefront[data-v3-page="info"] .d-bf2-maint h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

body.v3-storefront[data-v3-page="info"] .d-bf2-maint > p {
  margin: 0 0 8px;
}

body.v3-storefront[data-v3-page="info"] .d-bf2-snack-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 880px;
}

/* Weight: with the ninth (R2) snack idea the four-column grid becomes a calm 3 x 3 on desktop. */
@media (min-width: 1081px) {
  body.v3-storefront[data-v3-page="info"] .d-wr2-snack-grid:has(> .d-wr2-snack:nth-child(9):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.v3-storefront[data-v3-page="info"] .d-bf2-faq-conditions {
  margin-top: 8px;
  color: var(--muted, #566159);
  font-size: 13.5px;
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-pdm,
  body.v3-storefront[data-v3-page="info"] .d-pdm--compact {
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 0;
    align-items: center;
  }

  body.v3-storefront[data-v3-page="info"] .d-pdm-media {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding: 8px;
    border-radius: 14px;
  }

  body.v3-storefront[data-v3-page="info"] .d-pdm-copy {
    display: contents;
  }

  body.v3-storefront[data-v3-page="info"] .d-pdm-copy > * {
    grid-column: 1 / -1;
  }

  body.v3-storefront[data-v3-page="info"] .d-pdm-copy > .d-pdm-eyebrow {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin-bottom: 4px;
  }

  body.v3-storefront[data-v3-page="info"] .d-pdm-copy > h2 {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  body.v3-storefront[data-v3-page="info"] .d-pdm--compact .d-pdm-copy > h2 {
    grid-row: 1 / span 2;
    align-self: center;
  }

  body.v3-storefront[data-v3-page="info"] .d-pdm-intro {
    margin-top: 16px;
    font-size: 16px;
  }

  body.v3-storefront[data-v3-page="info"] .d-bf2-day-row {
    gap: 12px;
  }

  body.v3-storefront[data-v3-page="info"] .d-bf2-snack-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* end DG-BREAKFAST-MAINTENANCE-R2-15 */

/* DG-SPORT-TRAINING-MUSCLE-15 — Sports & Training R7 and Gym & Muscle R5 (how-training-r7.php / how-muscle-r5.php, the
   shared how-sport-*.php partials). Both opt into the Weight R2 family via .d-how-weight-r2 and add .d-how-sport-r7. Main
   sections keep the info-page rhythm (.d-section); everything inside them sits 12–36px apart. Product "View …" actions are
   buttons that open the own-portal Quick View (HowCopy::productAction); a text-style action (Weight / Breakfast "Prefer
   just the shake?") keeps the underline-link look. */
body.v3-storefront[data-v3-page="info"] button.d-how-text-action {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

body.v3-storefront[data-v3-page="info"] .d-how-sport-r7 .d-sp-eyebrow {
  display: block;
  color: var(--berry, #8e1566);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.v3-storefront[data-v3-page="info"] .d-how-sport-r7 .d-sp-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: 12px 48px;
}

body.v3-storefront[data-v3-page="info"] .d-how-sport-r7 .d-sp-head .d-wr2-lede {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-how-sport-r7 .d-sp-action {
  margin: 20px 0 0;
}

/* Training: four equal sport groups, all visible (2 x 2, one column on phones). */
body.v3-storefront[data-v3-page="info"] .d-sp-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-group {
  padding: 28px 28px 26px;
  border: 1px solid var(--d-wr2-line, #dfe3d8);
  border-top: 3px solid var(--berry, #8e1566);
  border-radius: 18px;
  background: #fff; /* DG-HOW-GUIDES-VISUAL-POLISH-15: white instead of beige */
}

body.v3-storefront[data-v3-page="info"] #main .d-sp-group h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
}

body.v3-storefront[data-v3-page="info"] .d-sp-group .d-sp-group-example {
  margin: 4px 0 14px;
  color: var(--berry, #8e1566);
  font-size: 14px;
  font-weight: 600;
}

body.v3-storefront[data-v3-page="info"] .d-sp-group p {
  max-width: none;
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
}

/* Rebuild Strength (Training) and the two Gym & Muscle product blocks: the record's own packshot on a quiet panel. */
body.v3-storefront[data-v3-page="info"] .d-sp-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 48px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-feature-media,
body.v3-storefront[data-v3-page="info"] .d-sp-product-media {
  display: grid;
  place-items: center;
  margin: 0;
  border: 1px solid var(--d-wr2-line, #dfe3d8);
  border-radius: 18px;
  background: #fff; /* DG-HOW-GUIDES-VISUAL-POLISH-15: white with a thin edge instead of beige */
}

body.v3-storefront[data-v3-page="info"] .d-sp-feature-media {
  aspect-ratio: 5 / 4;
  padding: 28px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-feature-media img,
body.v3-storefront[data-v3-page="info"] .d-sp-product-media img {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 300px;
  object-fit: contain;
  /* the packshots carry a white ground: let it take the panel colour */
  mix-blend-mode: multiply;
}

body.v3-storefront[data-v3-page="info"] .d-sp-feature-copy h2 {
  margin-top: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-feature-copy p {
  margin: 14px 0 0;
  font-size: 17px;
}

/* Training: Formula 1 + Protein Drink Mix, a compact duo. */
body.v3-storefront[data-v3-page="info"] .d-sp-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 40px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-sp-duo-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--d-wr2-line, #dfe3d8);
}

body.v3-storefront[data-v3-page="info"] .d-sp-duo-item img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

body.v3-storefront[data-v3-page="info"] #main .d-sp-duo-item h3 {
  margin: 0;
  font-size: 19px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-duo-item p {
  margin: 8px 0 0;
  font-size: 15.5px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-duo-item .d-sp-action {
  margin-top: 14px;
}

/* Mark's pre-workout blend: the same full block on both pages. */
body.v3-storefront[data-v3-page="info"] .d-sp-pre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-pre-media {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-sp-pre-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 853;
  border-radius: 18px;
  object-fit: cover;
}

body.v3-storefront[data-v3-page="info"] .d-sp-pre-copy h2 {
  margin-top: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-pre-copy p {
  margin: 12px 0 0;
}

body.v3-storefront[data-v3-page="info"] .d-sp-pre-copy .d-sp-pre-intro {
  font-size: 17px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-pre-copy .d-sp-pre-context {
  color: var(--muted, #566159);
  font-size: 15px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-pre-ingredients {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 4px;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-sp-pre-ingredients li {
  padding: 6px 14px;
  border: 1px solid var(--d-wr2-line, #dfe3d8);
  border-radius: 999px;
  background: #fff; /* DG-HOW-GUIDES-VISUAL-POLISH-15 */
  font-size: 14px;
  font-weight: 700;
}

/* Sport Packs: the page blurbs line up above the two real pack cards; STRONG gets a soft berry edge on Gym & Muscle. */
body.v3-storefront[data-v3-page="info"] .d-sp-pack-keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-sp-pack-keys li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 3px solid var(--berry, #8e1566);
}

body.v3-storefront[data-v3-page="info"] .d-sp-pack-keys b {
  color: var(--berry-dark, #6b0f4d);
  font-size: 12.5px;
  letter-spacing: 0.08em;
}

body.v3-storefront[data-v3-page="info"] .d-sp-pack-keys span {
  color: var(--muted, #566159);
  font-size: 14.5px;
  line-height: 1.5;
}

body.v3-storefront[data-v3-page="info"] .d-how-sport-r7 .d-sp-pack-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.v3-storefront[data-v3-page="info"] .d-sp-packs--accent .d-pcard2:has(.d-pcard-role-useful) {
  border-color: rgba(142, 21, 102, 0.42);
  box-shadow: 0 0 0 1px rgba(142, 21, 102, 0.18), 0 10px 28px rgba(142, 21, 102, 0.08);
}

body.v3-storefront[data-v3-page="info"] .d-sp-adds {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--d-wr2-line, #dfe3d8);
}

body.v3-storefront[data-v3-page="info"] #main .d-sp-adds h3 {
  margin: 0;
  font-size: 20px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-adds ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 40px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-sp-adds li,
body.v3-storefront[data-v3-page="info"] .d-sp-progress li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-adds b {
  font-size: 17px;
}

body.v3-storefront[data-v3-page="info"] :is(.d-sp-adds, .d-sp-progress) li > span {
  color: var(--muted, #566159);
  font-size: 15px;
  line-height: 1.55;
}

/* Gym & Muscle: one gym day (five numbered units) and the compact progress frame. DG-HOW-GUIDES-VISUAL-POLISH-15 SCROLL FIX01:
   the two columns live in their own row (.d-sp-day-row), so the sticky intro is bounded by the units, not by the progress frame. */
body.v3-storefront[data-v3-page="info"] .d-sp-day-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 32px 56px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-day-head {
  position: sticky;
  top: calc(var(--chrome-top, 80px) + var(--catbar-h, 0px) + 24px);
}

body.v3-storefront[data-v3-page="info"] .d-sp-day-units {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--d-wr2-line, #dfe3d8);
}

body.v3-storefront[data-v3-page="info"] .d-sp-day-units li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--d-wr2-line, #dfe3d8);
}

body.v3-storefront[data-v3-page="info"] .d-sp-day-num {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--berry, #8e1566);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

body.v3-storefront[data-v3-page="info"] #main .d-sp-day-units h3 {
  margin: 4px 0 0;
  font-size: 19px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-day-units p {
  margin: 6px 0 0;
  font-size: 15.5px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-progress {
  margin-top: 32px; /* SCROLL FIX01: the former grid row gap, now outside the sticky row */
  padding: 26px 28px;
  border: 1px solid #cfe4c2;
  border-left: 4px solid #4d7957;
  border-radius: 18px;
  background: #fff; /* DG-HOW-GUIDES-VISUAL-POLISH-15: white with a light green accent instead of a green panel */
}

body.v3-storefront[data-v3-page="info"] #main .d-sp-progress h3 {
  margin: 0;
  font-size: 20px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-progress ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 32px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-sp-progress b {
  font-size: 16px;
}

/* Gym & Muscle: Rebuild Strength first and larger, Prolong Energy Gel smaller beside it. */
body.v3-storefront[data-v3-page="info"] .d-sp-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 20px;
  margin-top: 32px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--d-wr2-line, #dfe3d8);
  border-radius: 18px;
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-sp-product-media {
  height: 280px;
  padding: 28px;
  border-radius: 0;
}

body.v3-storefront[data-v3-page="info"] .d-sp-product-media img {
  max-height: 224px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-product.is-secondary .d-sp-product-media img {
  max-height: 180px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-product-copy {
  flex: 1;
}

body.v3-storefront[data-v3-page="info"] .d-sp-product-copy {
  padding: 24px 28px 28px;
}

body.v3-storefront[data-v3-page="info"] #main .d-sp-product-copy h3 {
  margin: 8px 0 0;
  font-size: 24px;
  letter-spacing: -0.01em;
}

body.v3-storefront[data-v3-page="info"] #main .d-sp-product.is-secondary .d-sp-product-copy h3 {
  font-size: 21px;
}

body.v3-storefront[data-v3-page="info"] .d-sp-product-copy p {
  margin: 10px 0 0;
}

/* Cross-link to the other sport guide: ordinary navigation, one quiet band. */
body.v3-storefront[data-v3-page="info"] .d-sp-cross {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin: 64px 0 0;
  padding: 24px 0;
  border-top: 1px solid var(--d-wr2-line, #dfe3d8);
  border-bottom: 1px solid var(--d-wr2-line, #dfe3d8);
}

body.v3-storefront[data-v3-page="info"] #main .d-how-sport-r7 .d-sp-cross h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
}

body.v3-storefront[data-v3-page="info"] .d-sp-cross p {
  margin: 6px 0 0;
  color: var(--muted, #566159);
}

body.v3-storefront[data-v3-page="info"] .d-sp-cross .btn {
  flex: none;
}

@media (max-width: 1080px) {
  body.v3-storefront[data-v3-page="info"] .d-sp-day-row { /* SCROLL FIX01 */
    grid-template-columns: minmax(0, 1fr);
  }

  body.v3-storefront[data-v3-page="info"] .d-sp-day-head {
    position: static;
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-sport-r7 .d-sp-head,
  body.v3-storefront[data-v3-page="info"] .d-sp-group-grid,
  body.v3-storefront[data-v3-page="info"] .d-sp-feature,
  body.v3-storefront[data-v3-page="info"] .d-sp-duo,
  body.v3-storefront[data-v3-page="info"] .d-sp-pre,
  body.v3-storefront[data-v3-page="info"] .d-sp-progress ul,
  body.v3-storefront[data-v3-page="info"] .d-sp-adds ul,
  body.v3-storefront[data-v3-page="info"] .d-sp-product-grid,
  body.v3-storefront[data-v3-page="info"] .d-how-sport-r7 .d-sp-pack-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v3-storefront[data-v3-page="info"] .d-sp-group-grid {
    gap: 16px;
    margin-top: 24px;
  }

  body.v3-storefront[data-v3-page="info"] .d-sp-group {
    padding: 22px 20px;
  }

  body.v3-storefront[data-v3-page="info"] #main .d-sp-group h3 {
    font-size: 20px;
  }

  body.v3-storefront[data-v3-page="info"] .d-sp-feature,
  body.v3-storefront[data-v3-page="info"] .d-sp-pre {
    gap: 24px;
  }

  body.v3-storefront[data-v3-page="info"] .d-sp-feature-media {
    aspect-ratio: auto;
    height: 240px;
    padding: 20px;
  }

  body.v3-storefront[data-v3-page="info"] .d-sp-feature-media img {
    max-height: 200px;
  }

  body.v3-storefront[data-v3-page="info"] .d-sp-duo-item {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
  }

  body.v3-storefront[data-v3-page="info"] .d-sp-duo-item img {
    width: 72px;
    height: 72px;
  }

  body.v3-storefront[data-v3-page="info"] .d-sp-pack-keys {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body.v3-storefront[data-v3-page="info"] .d-sp-progress {
    padding: 22px 20px;
  }

  body.v3-storefront[data-v3-page="info"] .d-sp-product-media {
    height: 200px;
    padding: 20px;
  }

  body.v3-storefront[data-v3-page="info"] .d-sp-product-media img,
  body.v3-storefront[data-v3-page="info"] .d-sp-product.is-secondary .d-sp-product-media img {
    max-height: 160px;
  }

  body.v3-storefront[data-v3-page="info"] .d-sp-product-copy {
    padding: 20px;
  }

  body.v3-storefront[data-v3-page="info"] .d-sp-cross {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 48px;
  }
}
/* end DG-SPORT-TRAINING-MUSCLE-15 */

/* DG-HOW-GUIDES-VISUAL-POLISH-15 — Weight / Breakfast VISUAL_REVISION02 (Mark-accepted) and the sport guides' practical text:
   the Formula 1 feature (white, strong dark-berry edge), calm white plan / day cards without icons (a small order number, a berry
   top line for the shakes and breakfast, green for the meals), the snack bridge as a quiet text + link row, snack ideas as white
   text tiles with soft top lines, and the plain practical text block. Scoped to the How guides. */
body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-plan-card {
  border-top: 3px solid var(--berry, #8e1566);
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-plan-card.is-meal,
body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-bf2-day-row .d-wr2-plan-card:not(.is-breakfast) {
  border-color: var(--d-wr2-line, #dfe3d8);
  border-top-color: #4d7957;
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-bf2-day-row .d-wr2-plan-card.is-breakfast {
  border-color: var(--d-wr2-line, #dfe3d8);
  border-top-color: var(--berry, #8e1566);
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-plan-card + .d-wr2-plan-card::before {
  content: none;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-plan-card b {
  padding-right: 24px;
  font-size: 20px;
  line-height: 1.3;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-plan-num {
  color: var(--berry, #8e1566);
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-plan-card.is-meal .d-wr2-plan-num {
  color: #4d7957;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-plan-note .d-link-underline {
  font-weight: 650;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-bridge {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 32px;
  padding: 22px 0;
  border-top: 1px solid var(--d-wr2-line, #dfe3d8);
  border-bottom: 1px solid var(--d-wr2-line, #dfe3d8);
  border-radius: 0;
  background: transparent;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-bridge h3 {
  font-size: 20px;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-snack-grid {
  gap: 8px 28px;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-snack {
  gap: 6px;
  padding: 18px 0 16px;
  border: 0;
  border-top: 2px solid #d9bdd1;
  border-radius: 0;
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-snack:nth-child(3n + 2) {
  border-top-color: #c3d8c3;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-snack:nth-child(3n) {
  border-top-color: #d2d8db;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-snack b {
  font-size: 18px;
  line-height: 1.3;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-snack > span:last-child {
  font-size: 15.5px;
  line-height: 1.6;
}

/* The Formula 1 feature: white, a strong dark-berry edge, the real packshot (its white margin trimmed by cover in a portrait
   frame, never stretched or cut into the tub), four facts with the preparation note right under them. */
body.v3-storefront[data-v3-page="info"] .d-f1-card {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  padding: 36px 44px;
  border: 4px solid #501442;
  border-radius: 20px;
  background: #fff;
}

body.v3-storefront[data-v3-page="info"] .d-f1-card.is-text-only {
  grid-template-columns: minmax(0, 1fr);
}

body.v3-storefront[data-v3-page="info"] .d-f1-media {
  margin: 0;
}

body.v3-storefront[data-v3-page="info"] .d-f1-media img {
  display: block;
  width: 100%;
  height: auto;
  /* the tub fills a portrait frame: only the packshot's white side margin is cropped (tub ~40% wide, 78% tall in 800 x 800) */
  aspect-ratio: 3 / 5;
  object-fit: cover;
  object-position: 50% 50%;
}

body.v3-storefront[data-v3-page="info"] .d-f1-eyebrow {
  display: block;
  color: var(--berry, #8e1566);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-f1-copy h2 {
  margin-top: 10px;
}

body.v3-storefront[data-v3-page="info"] .d-f1-copy .d-f1-body {
  max-width: 62ch;
  margin: 14px 0 0;
  font-size: 17px;
}

body.v3-storefront[data-v3-page="info"] .d-f1-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 18px 0;
  border-top: 1px solid #e4dbe1;
  border-bottom: 1px solid #e4dbe1;
  list-style: none;
}

body.v3-storefront[data-v3-page="info"] .d-f1-facts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.v3-storefront[data-v3-page="info"] .d-f1-facts b {
  color: #501442;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

body.v3-storefront[data-v3-page="info"] .d-f1-facts span {
  color: var(--muted, #566159);
  font-size: 14px;
  line-height: 1.4;
}

body.v3-storefront[data-v3-page="info"] .d-f1-facts.is-qualitative span {
  color: #501442;
  font-size: 16px;
  font-weight: 700;
}

body.v3-storefront[data-v3-page="info"] .d-f1-copy .d-f1-note {
  margin: 10px 0 0;
  color: var(--muted, #566159);
  font-size: 13.5px;
  line-height: 1.5;
}

body.v3-storefront[data-v3-page="info"] .d-f1-action {
  margin: 22px 0 0;
}

/* The text-style popup action ("Prefer just the shake? …"): a clear keyboard focus ring. */
body.v3-storefront[data-v3-page="info"] button.d-how-text-action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* The plain practical text block: a reading column, no panel. */
body.v3-storefront[data-v3-page="info"] .d-practical-info {
  max-width: 800px;
}

body.v3-storefront[data-v3-page="info"] .d-practical-info p {
  max-width: 74ch;
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.7;
}

body.v3-storefront[data-v3-page="info"] .d-practical-info h2 + p {
  margin-top: 16px;
}

/* Sport guides: product names in the content read in the house berry, underlined (hero / help bands keep their own rule). */
body.v3-storefront[data-v3-page="info"] .d-how-sport-r7 .d-how-plink,
body.v3-storefront[data-v3-page="info"] .d-how-sport-r7 .d-how-plink:hover {
  color: var(--berry-dark, #6b0f4d);
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-plan-row {
    gap: 12px;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-plan-card {
    display: flex;
    align-items: flex-start;
    padding: 16px 18px;
    text-align: left;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-plan-card b {
    font-size: 18px;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-bridge {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-snack-grid {
    gap: 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-snack {
    display: flex;
    padding: 14px 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-f1-card {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px 16px;
    padding: 22px 18px;
    border-width: 3px;
  }

  body.v3-storefront[data-v3-page="info"] .d-f1-media {
    align-self: start;
  }

  body.v3-storefront[data-v3-page="info"] .d-f1-copy {
    display: contents;
  }

  body.v3-storefront[data-v3-page="info"] .d-f1-copy > * {
    grid-column: 1 / -1;
  }

  body.v3-storefront[data-v3-page="info"] .d-f1-copy > .d-f1-eyebrow {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-f1-copy > h2 {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 4px;
  }

  body.v3-storefront[data-v3-page="info"] .d-f1-card:not(.is-text-only) .d-f1-media {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  body.v3-storefront[data-v3-page="info"] .d-f1-copy .d-f1-body {
    margin-top: 6px;
    font-size: 16px;
  }

  body.v3-storefront[data-v3-page="info"] .d-f1-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
    margin-top: 6px;
  }

  body.v3-storefront[data-v3-page="info"] .d-f1-facts b {
    font-size: 26px;
  }

  body.v3-storefront[data-v3-page="info"] .d-f1-action {
    margin-top: 10px;
  }

  body.v3-storefront[data-v3-page="info"] .d-practical-info p {
    font-size: 17px;
  }
}
/* end DG-HOW-GUIDES-VISUAL-POLISH-15 */

@media (max-width: 1080px) {
  body.v3-storefront[data-v3-page="info"] .d-wr2-snack-grid,
  body.v3-storefront[data-v3-page="info"] .d-wr2-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-lede {
    font-size: 16px;
  }

  body.v3-storefront[data-v3-page="info"] .d-wr2-plan-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    margin-top: 24px;
  }

  body.v3-storefront[data-v3-page="info"] .d-wr2-plan-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 16px 18px;
  }

  body.v3-storefront[data-v3-page="info"] .d-wr2-plan-card .d-wr2-plan-ico {
    grid-row: span 2;
    width: 46px;
    height: 46px;
    margin: 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-wr2-plan-card + .d-wr2-plan-card::before {
    top: -27px;
    left: 50%;
    margin: 0 0 0 -10px;
    font-size: 24px;
    line-height: 24px;
  }

  body.v3-storefront[data-v3-page="info"] .d-wr2-bridge {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 16px 18px;
  }

  body.v3-storefront[data-v3-page="info"] .d-wr2-bridge .d-wr2-bridge-link {
    grid-column: 1 / -1;
  }

  body.v3-storefront[data-v3-page="info"] .d-wr2-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 24px;
  }

  body.v3-storefront[data-v3-page="info"] .d-wr2-steps li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    padding: 16px 18px;
  }

  body.v3-storefront[data-v3-page="info"] .d-wr2-step-num {
    grid-row: span 2;
    margin: 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-wr2-snack-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 22px;
  }

  body.v3-storefront[data-v3-page="info"] .d-wr2-snack {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding: 14px 16px;
  }

  body.v3-storefront[data-v3-page="info"] .d-wr2-snack .d-wr2-snack-ico {
    grid-row: span 2;
    margin: 0;
  }

  body.v3-storefront[data-v3-page="info"] .d-wr2-compare {
    gap: 14px 12px;
  }
}


/* DG-RECIPES-WEIGHT-HOME-R2-15 — guest homepage hero: the short claim conditions under the intro, full text in a
   disclosure (partials/v3/home/hero-claim.php); the intro keeps its gap to the buttons through the claim block. */
body.v3-storefront .d-hero .d-hero-claim {
  margin: -6px 0 22px;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.86;
}

body.v3-storefront .d-hero .d-hero-claim p {
  margin: 0;
}

body.v3-storefront .d-hero .d-hero-claim summary {
  display: inline;
  cursor: pointer;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.v3-storefront .d-hero .d-hero-claim details p {
  max-width: 48ch;
  margin-top: 6px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-sub:has(+ .d-hero-claim) {
  margin-bottom: 10px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-hero-claim {
  margin: 0 0 28px;
  color: var(--ghf-sub);
}

/* CP-HOW-GUIDES-POLISH-18 (Mark): calm inline emphasis across the overview and all goal guides.
   Card labels and actual headings retain a clear title weight; other information pages keep their existing rules. */
body.v3-storefront[data-v3-page="info"] .info-page.d-how :is(p, li, dd, td, figcaption, blockquote, .acc-body) :is(strong, b):not(:where(.d-routine > li > b, button *, .d-member-price *, .d-bm-sponsor-name *, .d-dra-step-txt > b, .d-wr2-plan-card > b, .d-wr2-steps > li > b, .d-wr2-snack > b, .d-pdm-uses > li > b, .d-sp-progress li > b, .d-sp-pack-keys > li > b, .d-sp-adds li > b, .d-f1-facts > li > b)) {
  font-weight: 600;
}

body.v3-storefront[data-v3-page="info"] .d-how.d-how-dra .d-dra-rhythm-copy h2 {
  color: var(--ink, #192019);
}

body.v3-storefront[data-v3-page="info"] .d-how.d-how-dra .d-dra-link-card h3,
body.v3-storefront[data-v3-page="info"] .d-how.d-how-dra .d-dra-move-list h3 {
  margin: 0;
  color: var(--green-dark, #1f6a1a);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
}

body.v3-storefront[data-v3-page="info"] .d-how.d-how-dra .d-dra-link-card .d-link-underline {
  font-weight: 400;
}

/* The supplied square photo fills the whole hero at every breakpoint, with no intrinsic-width gutters. */
body.v3-storefront[data-v3-page="info"] .d-how.d-how-dra .d-wr2-hero .d-hero-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 55% 40%);
}

/* These bold elements are small card headings or product values, rather than emphasis inside a sentence. */
body.v3-storefront[data-v3-page="info"] .info-page.d-how h3,
body.v3-storefront[data-v3-page="info"] .info-page.d-how h3 :is(b, strong),
body.v3-storefront[data-v3-page="info"] .info-page.d-how :is(.d-dra-step-txt, .d-wr2-plan-card, .d-wr2-steps > li, .d-wr2-snack, .d-pdm-uses > li, .d-sp-progress li, .d-sp-pack-keys > li, .d-sp-adds li, .d-how-step-card, .d-f1-facts > li) > b {
  font-weight: 700;
}

/* CP-HOW-GUIDES-POLISH-18 R2: explain the Weight plan, shorten practical tips, and offer sport jumps. */
body.v3-storefront[data-v3-page="info"] .d-how .d-how-weight-intro h2 {
  max-width: 27ch;
  color: var(--ink, #171d18);
}
body.v3-storefront[data-v3-page="info"] .d-how .d-how-weight-intro-lede {
  max-width: 76ch;
  margin-top: 18px;
}
body.v3-storefront[data-v3-page="info"] .d-how .d-how-weight-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 28px;
}
body.v3-storefront[data-v3-page="info"] .d-how .d-how-weight-intro-grid article + article {
  border-left: 1px solid var(--line, #dbe8d2);
  padding-left: 28px;
}
body.v3-storefront[data-v3-page="info"] .d-how .d-how-weight-intro-grid h3 {
  margin: 0 0 10px;
  color: var(--ink, #171d18);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
}
body.v3-storefront[data-v3-page="info"] .d-how .d-how-weight-intro-grid p {
  margin: 0;
  line-height: 1.6;
}
body.v3-storefront[data-v3-page="info"] .d-how .d-sp-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
}
body.v3-storefront[data-v3-page="info"] .d-how .d-sp-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--line, #dbe8d2);
  border-radius: 999px;
  color: var(--berry, #8e1566);
  background: #fff;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  text-decoration: none;
}
body.v3-storefront[data-v3-page="info"] .d-how .d-sp-jump a:hover,
body.v3-storefront[data-v3-page="info"] .d-how .d-sp-jump a:focus-visible {
  border-color: currentColor;
  text-decoration: underline;
}
body.v3-storefront[data-v3-page="info"] .d-how .d-practical-info--compact {
  margin-block: 32px;
  padding: 20px 24px;
  border-left: 3px solid var(--berry, #8e1566);
  border-radius: 0 12px 12px 0;
  background: var(--green-softer, #f2f8ee);
}
body.v3-storefront[data-v3-page="info"] .d-how .d-practical-info--compact h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.35;
}
body.v3-storefront[data-v3-page="info"] .d-how .d-practical-info--compact p {
  margin: 0;
  max-width: 76ch;
  line-height: 1.6;
}
@media (max-width: 720px) {
  body.v3-storefront[data-v3-page="info"] .d-how .d-how-weight-intro-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  body.v3-storefront[data-v3-page="info"] .d-how .d-how-weight-intro-grid article + article {
    border-left: 0;
    border-top: 1px solid var(--line, #dbe8d2);
    padding: 20px 0 0;
  }
  body.v3-storefront[data-v3-page="info"] .d-how .d-sp-jump a {
    flex: 1 1 calc(50% - 10px);
    justify-content: center;
    text-align: center;
    padding-inline: 12px;
  }
  body.v3-storefront[data-v3-page="info"] .d-how .d-practical-info--compact {
    padding: 18px 20px;
  }
}

body.v3-storefront[data-v3-page="info"] .d-how .d-how-weight-intro a {
  color: var(--berry, #8e1566);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================================
   DG-CATEGORY-GUIDE-MOTION-24 (Mark) — products button caret centring and the products menu entry (kept out of the
   DG-02 identity block, which carries no layout or motion rules).
   ===================================================================== */
/* DG-CATEGORY-GUIDE-MOTION-24 (Mark): the caret box is exactly its icon (no inline line box under it), so the button's own
   align-items centres the chevron; the open rotation stays on the icon. */
body.v3-storefront[data-storefront="unified"] .csb-caret,
body.v3-storefront[data-storefront="unified"] .csb-caret > [data-ico] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
/* DG-CATEGORY-GUIDE-MOTION-24 (Mark): the products menu enters with a short downward settle and its fade (it is shown from
   display:none, so the base transition cannot run on open); only the menu element moves, never the dock that the lock places
   with a transform. Closing keeps the existing behaviour. */
@keyframes v3-cat-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  body.v3-storefront[data-storefront="unified"] #v3-cat-select.open .cat-select-menu:not([hidden]) {
    animation: v3-cat-menu-in 200ms ease-out both;
  }
}

/* =====================================================================================================================
   DG-DELIVERY-CLARITY-CART-24 (Mark, V10 copy, V30 projection) — minicart money footer; DG-DELIVERY-PROGRESS-PRESENTATION-24 (Mark):
   the footer is Subtotal, Go to cart and the payment marks again — the delivery information is the drawer's own delivery
   progress block in the scrolling content (v3-minicart.js), next to the Starter Kit block.
   1. The order-totals box (#v3-mc-order-totals) only shows rows that the unified drawer hides (.d-mc-totrow): with nothing
      else in it, it is an empty 0px flex item that still took one footer gap above Subtotal. Hide only that case.
   2. DG-SHIPPING-CARD-PAY-LABELS-24 (Mark): the ONE green shipping card of the drawer and the cart (.d-ship-card, the Starter
      Kit card family: icon tile left, title + status pill on top, the server's bar, detail line) and its pending state.
   ===================================================================================================================== */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-totals:not(:has(> :not(.d-mc-totrow))) {
  display: none;
}
/* DG-CART-MINICART-POLISH-25 (Mark): gap 5px, padding 10px (was 12px / 12px 14px) */
body.v3-storefront[data-storefront="unified"] .d-ship-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 5px;
  margin: 0;
  padding: 10px;
  border: 1px solid #cfe3c4;
  border-radius: 14px;
  background: var(--green-softer);
  box-shadow: 0 1px 2px rgba(31, 106, 26, 0.06);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
body.v3-storefront[data-storefront="unified"] .d-ship-card[hidden] {
  display: none;
}
body.v3-storefront[data-storefront="unified"] .d-ship-card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ddeed3;
  color: var(--green-dark);
}
body.v3-storefront[data-storefront="unified"] .d-ship-card-icon .ico,
body.v3-storefront[data-storefront="unified"] .d-ship-card-icon svg {
  width: 20px;
  height: 20px;
  margin: 0;
}
/* DG-CART-MINICART-POLISH-25 (Mark): gap 5px (was 6px) */
body.v3-storefront[data-storefront="unified"] .d-ship-card-main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
body.v3-storefront[data-storefront="unified"] .d-ship-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px 8px;
}
/* the pill stays top right while the title has room; a long pill ("To be confirmed") wraps under it, never splitting words */
body.v3-storefront[data-storefront="unified"] .d-ship-card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}
body.v3-storefront[data-storefront="unified"] .d-ship-card-pill {
  flex: none;
  padding: 1px 7px;
  border: 1px solid #cfe3c4;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
/* DG-CART-MINICART-POLISH-25 (Mark): free shipping that is really applied carries the Starter Kit's calm "Unlocked" badge */
body.v3-storefront[data-storefront="unified"] .d-ship-card-state {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e3edd9;
  color: #36572c;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
body.v3-storefront[data-storefront="unified"] .d-ship-card-state .ico {
  width: 12px;
  height: 12px;
  color: inherit;
}
body.v3-storefront[data-storefront="unified"] .d-ship-card-track {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #d6e9cb;
}
body.v3-storefront[data-storefront="unified"] .d-ship-card-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}
/* DG-CART-REWARD-PROGRESS-MOTION-25 (Mark): the same calm width change as the Starter Kit bars (.d-skit-fill / .d-mc-prog-fill),
   only without a reduced-motion preference (then the new width is shown at once) */
@media (prefers-reduced-motion: no-preference) {
  body.v3-storefront[data-storefront="unified"] .d-ship-card-fill {
    transition: width 0.3s ease;
  }
}
body.v3-storefront[data-storefront="unified"] .d-ship-card-detail {
  font-weight: 600;
}
body.v3-storefront[data-storefront="unified"] .d-ship-card.is-unknown .d-ship-card-detail {
  font-weight: 500;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-rewards.is-pending {
  opacity: 0.6;
}

/* Mark 24 October: compact rewards in the minicart only. */
#v3-minicart .d-mc-rewards {
  zoom: 0.9;
}

/* =====================================================================================================================
   DG-CART-MINICART-POLISH-25 (Mark) — icon + text pairs of the cart and the drawer: the painted icon wrapper ([data-ico],
   filled with svg.ico by the icon painter) is a line-height-0 flex box with a block svg, so the icon sits on the centre of
   its text line (also when the text wraps) instead of on the font baseline — the shared `.btn-green [data-ico]` convention.
   Only these rows; no layout, size or colour change.
   ===================================================================================================================== */
body.v3-storefront[data-storefront="unified"] :is(.d-cpack-tag, .d-skit-status, .d-skit-done, .d-ship-card-state, .minicart .d-mc-packtag, .minicart .d-mc-prog-state) > [data-ico] {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
body.v3-storefront[data-storefront="unified"] :is(.d-cpack-tag, .d-skit-status, .d-skit-done, .d-ship-card-state, .minicart .d-mc-packtag, .minicart .d-mc-prog-state) > [data-ico] .ico {
  display: block;
}

/* =====================================================================================================================
   DG-CART-MINICART-POLISH-25 (Mark) — cart lines.
   A. Desktop / tablet (721px+), lines with a flavour choice: the line grid places the name, the flavour row and the
      quantity / price in shared grid rows (the info box flows into the line grid), so the flavour dropdown and the quantity
      stepper are always on one line — also under a two-line name. Lines without a flavour choice keep their layout.
   B. Phones (720px and below) — DG-CART-LINE-RESPONSIVE-META-25 (Mark, replaces the earlier full-width name): the photo on
      the left, everything else in one column beside it: the name (normal wrapping), the unit price, then the facts row
      (the chosen flavour or its dropdown with the product facts); quantity, price and remove stay the bottom row. The info
      box is an ordinary column again; only the unit price is lifted visually above the facts (text, no control), so the
      reading and focus order of the name link and the dropdown is unchanged. A long chosen flavour wraps inside its button
      instead of being cut off. Nothing is hidden; no field changes.
   ===================================================================================================================== */
@media (min-width: 721px) {
  body.v3-storefront[data-storefront="unified"] .d-cline:has(> .d-cline-info .d-cline-flavour) {
    row-gap: 6px;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline:has(> .d-cline-info .d-cline-flavour) > .d-cline-info {
    display: contents;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline:has(> .d-cline-info .d-cline-flavour) > .d-cline-info > * {
    grid-column: 2;
    min-width: 0;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline:has(> .d-cline-info .d-cline-flavour) > .d-cline-info > .d-cline-name {
    grid-row: 1;
    align-self: end;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline:has(> .d-cline-info .d-cline-flavour) > .d-cline-info > .d-cline-varrow {
    grid-row: 2;
    align-self: center;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline:has(> .d-cline-info .d-cline-flavour) .d-cline-varrow .fs-btn {
    margin-top: 0;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline:has(> .d-cline-info .d-cline-flavour) > .d-cline-media {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline:has(> .d-cline-info .d-cline-flavour) > .d-cline-toolbar > .d-cline-controls {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline:has(> .d-cline-info .d-cline-flavour) > .d-cline-toolbar > .d-cline-money {
    grid-column: 4;
    grid-row: 2;
  }
}
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-cline > .d-cline-media {
    grid-column: 1;
    grid-row: 1;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline > .d-cline-info {
    grid-column: 2;
    grid-row: 1;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline > .d-cline-info > * {
    order: 2;
    min-width: 0;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline > .d-cline-info > .d-cline-name {
    order: 0;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline > .d-cline-info > .d-cline-unit {
    order: 1;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline .cart-flavour-form .fs-btn .fs-name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline .cart-flavour-form :is(.flavour-select, .fs-btn) {
    max-width: 100%;
  }
}

/* =====================================================================================================================
   DG-SCROLL-CATEGORY-AVATAR-25-FIX01 (Mark) — cart lines on desktop / tablet (721px and up), where the order summary
   beside the lines leaves a narrow text column: the quantity column is the stepper's own width (no unused space to the
   right of it); on a line with a flavour choice the product name spans the whole width beside the photo, and the chosen
   flavour may use the text column up to 360px and wraps inside its button instead of being cut off. The flavour dropdown and
   the quantity stepper stay on one row (DG-CART-MINICART-POLISH-25 A); phones (B) are unchanged.
   ===================================================================================================================== */
@media (min-width: 721px) {
  body.v3-storefront[data-storefront="unified"] .d-cline {
    grid-template-columns: 96px minmax(0, 1fr) 120px 110px;
  }
  body.v3-storefront[data-storefront="unified"] .d-cline:has(> .d-cline-info .d-cline-flavour) > .d-cline-info > .d-cline-name {
    grid-column: 2 / -1;
    margin-bottom: 4px; /* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 I (Mark) */
  }
  body.v3-storefront[data-storefront="unified"] .d-cline .cart-flavour-form :is(.flavour-select, .fs-btn) {
    max-width: min(100%, 360px);
  }
  body.v3-storefront[data-storefront="unified"] .d-cline .cart-flavour-form .fs-btn .fs-name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* =====================================================================================================================
   DG-CART-LINE-RESPONSIVE-META-25 (Mark) — a line that renders a real flavour dropdown (cart-line-v0.php: .d-cline-name-size
   in its title, only then): desktop / tablet (721px+) show the product's own contents after the title, in the title's
   type ("Formula 1 Shake Mix (550 g)"), and hide the facts row text (it would repeat them); a different taste description
   stays as its own line (.d-cline-taste) under the dropdown, so the dropdown keeps its row beside the quantity. Phones
   show the facts row under the unit price and no contents in the title. One version per breakpoint, the other hidden
   with display: none (never read twice). Lines without a dropdown are unchanged.
   ===================================================================================================================== */
body.v3-storefront[data-storefront="unified"] .d-cline-name-size {
  font: inherit;
  color: inherit;
}
body.v3-storefront[data-storefront="unified"] .d-cline-taste {
  display: none;
}
/* DG-CART-CHECKOUT-REFINEMENT-26 (Mark): the same on phones (the contents after the title, no facts row for a dropdown line,
   a different taste as its own line) — one version at every width */
body.v3-storefront[data-storefront="unified"] .d-cline-info:has(> .d-cline-name .d-cline-name-size) > .d-cline-varrow--control > .d-cline-meta {
  display: none;
}
body.v3-storefront[data-storefront="unified"] .d-cline-info > .d-cline-taste {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}

/* =====================================================================================================================
   DG-SCROLL-CATEGORY-AVATAR-25 (Mark) — the products menu's header bar: "Choose category" (text, not a control) and the
   existing close button (.csm-close, v3-nav.js) in ONE full-width bar above the links. The bar spans the whole menu: its
   negative margins are exactly the menu's own padding (--csm-pad, the single source), and its top corners follow the
   menu's radius; it stays at the top while a long menu scrolls, so the close button is always reachable. Links unchanged.
   ===================================================================================================================== */
body.v3-storefront[data-storefront="unified"] .cat-select-menu {
  --csm-pad: 10px;
  padding: var(--csm-pad);
}
body.v3-storefront[data-storefront="unified"] .cat-select-menu .cat-select-menu-head {
  position: sticky;
  top: calc(-1 * var(--csm-pad));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: calc(-1 * var(--csm-pad)) calc(-1 * var(--csm-pad)) 8px;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid #d9e6d3;
  border-radius: 13px 13px 0 0;
  background: var(--green-softer);
  color: var(--green-dark);
}
body.v3-storefront[data-storefront="unified"] .cat-select-menu .csm-head-title {
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}
body.v3-storefront[data-storefront="unified"] .cat-select-menu .cat-select-menu-head .csm-close {
  position: static;
  flex: none;
  margin: 0;
}

/* =====================================================================================================================
   DG-ADD-CART-FIRST-OPEN-FEEDBACK-25 (Mark) — the feedback of a later confirmed add on the CART control only
   (.cart-btn.is-add-feedback, set for ~1.1 s by v3-minicart.js bumpCartIcon): about 1 s, the whole cart button fades to
   green and back to its own colour (berry; the docked white cart: green with a white icon, then back), the count badge
   grows and shrinks (the separate `scale` property: its position and any transform stay), and one ring pulse of the
   button's ::after layer (on phones the dock's round hit-area layer grows 1 -> 1.25 -> 1). The button's own transform is
   never animated (the phone dock's lift / pop keep their place). Without a motion preference: no animation, a short
   static ring while the class is on.
   ===================================================================================================================== */
body.v3-storefront[data-storefront="unified"] .cart-btn.is-add-feedback {
  --cart-add-glow: rgba(47, 143, 39, 0.4);
}
body.v3-storefront[data-storefront="unified"] .cart-btn.is-add-feedback::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--cart-add-glow);
}
@media (prefers-reduced-motion: no-preference) {
  body.v3-storefront[data-storefront="unified"] .cart-btn.is-add-feedback {
    animation: cart-add-fade 1s ease;
  }
  body.v3-storefront[data-storefront="unified"] .cart-btn.is-add-feedback .cart-count {
    animation: cart-add-count 1s ease;
  }
  body.v3-storefront[data-storefront="unified"] .cart-btn.is-add-feedback::after {
    box-shadow: none;
    animation: cart-add-halo 1s ease;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn.is-add-feedback::after {
    animation: cart-add-ring 1s ease;
  }
}
@keyframes cart-add-fade {
  35%, 55% { background-color: var(--green); color: #fff; }
}
@keyframes cart-add-count {
  0% { scale: 1; }
  35% { scale: 1.4; }
  65% { scale: 0.92; }
  100% { scale: 1; }
}
@keyframes cart-add-halo {
  0% { box-shadow: 0 0 0 0 var(--cart-add-glow); }
  40% { box-shadow: 0 0 0 7px var(--cart-add-glow); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes cart-add-ring {
  0% { scale: 1; box-shadow: 0 0 0 0 var(--cart-add-glow); }
  40% { scale: 1.25; box-shadow: 0 0 0 3px var(--cart-add-glow); }
  100% { scale: 1; box-shadow: 0 0 0 0 transparent; }
}

/* =====================================================================================================================
   DG-STOREFRONT-USABILITY-POLISH-26 (Mark) — catalogue / choice typography, the phone sale badge on the small list image,
   the account HerbaPoints link, the mobile menu link weight, checkout / address / payment typography. Exact values from
   Mark; presentation only (prices, savings, delivery amounts and every hook unchanged).
   ===================================================================================================================== */
/* role pills: font-weight 600 is set in place in v3-storefront-repositioning.css (the later owner rule) */
body.v3-storefront[data-storefront="unified"] .d-pcard-variant {
  font-weight: 600;
}
body.v3-storefront[data-storefront="unified"] .d-price-was {
  font-size: 14px;
  color: red;
}
body.v3-storefront[data-storefront="unified"] .d-catalog.is-category .d-price {
  font-size: 24px;
}
/* homepage product / pack cards (store, Popular picks, Order again): no "Save" line; the price itself is unchanged */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main [data-h1-home] :is(.d-pcard, .d-prow, .d-pcard2) .d-price-save {
  display: none;
}
body.v3-storefront[data-storefront="unified"] .c-choice .c-choice__label {
  font-size: 14px;
}
/* phones: the sale badge of the small list-row photo (product and pack rows) sits on the photo's top-left corner, half
   outside it; the photo keeps its own rounded clip (img) and the row its link, only the media box stops clipping the badge */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-prow > .d-prow-media:has(> .d-pcard-badge) {
    overflow: visible;
  }
  body.v3-storefront[data-storefront="unified"] .d-prow > .d-prow-media > .d-pcard-badge {
    top: -10px;
    left: -8px;
    z-index: 1;
  }
}
/* the account card's HerbaPoints panel is one link (the site's own `a` keeps the text colours): a quiet hover ring and a
   keyboard focus ring, both outside the box (no layout shift) */
body.v3-storefront[data-storefront="unified"] a.ac-panel.ac-credit:hover {
  box-shadow: 0 0 0 2px rgba(47, 143, 39, 0.35);
}
body.v3-storefront[data-storefront="unified"] a.ac-panel.ac-credit:focus-visible {
  outline: 3px solid var(--green, #2f8f27);
  outline-offset: 2px;
}
body.v3-storefront[data-storefront="unified"] .drawer-primary a {
  font-weight: 600;
}
/* checkout: address / payment */
body.v3-storefront[data-storefront="unified"] .d-corecap-body {
  font-weight: 400;
}
body.v3-storefront[data-storefront="unified"] .d-corecap-title {
  font-weight: 800;
}
body.v3-storefront[data-storefront="unified"] .d-cocard-head {
  margin-bottom: 20px;
}
body.v3-storefront[data-storefront="unified"] .d-cosum-title {
  font-size: 20px;
  font-weight: 700; /* DG-CART-CHECKOUT-REFINEMENT-26 (Mark): was 800 */
}
body.v3-storefront[data-storefront="unified"] .d-cosum-itemname {
  font-size: 15px;
}
body.v3-storefront[data-storefront="unified"] .d-cosum-edit {
  font-size: 14px;
  text-decoration: underline;
}
body.v3-storefront[data-storefront="unified"] .d-cosum-itemvar {
  font-size: 14px;
}
body.v3-storefront[data-storefront="unified"] .d-cosum-rows > div {
  font-size: 15px;
}
body.v3-storefront[data-storefront="unified"] .d-coactions-back {
  text-decoration: underline;
}
body.v3-storefront[data-storefront="unified"] .field-group label {
  font-size: 15px;
}
body.v3-storefront[data-storefront="unified"] .d-cocard-title {
  font-size: 22px;
}
body.v3-storefront[data-storefront="unified"] .d-cotoggle b {
  font-weight: 800;
}
body.v3-storefront[data-storefront="unified"] .d-cotoggle-note {
  font-size: 14px;
}
body.v3-storefront[data-storefront="unified"] .d-field-hint {
  font-size: 13px;
  font-weight: 600;
}

/* DG-STOREFRONT-USABILITY-POLISH-26-FIX01 (Mark, V20 owner decision) — phones: every card's sale badge sits on its own photo's
   top-left corner, half outside it (as the list row above), fully visible; only cards / photos that hold a badge change.
   1 small photo inside the card padding (comfort .d-pcard2, Popular picks, the How it works packs): only the photo box
     clipped the badge; the image keeps its own rounded clip.
   2 full-bleed photo at the card's top edge (store compact, Order again three-card, a compact Popular picks row): the card
     itself clipped the badge, so it no longer clips; its rounded top corners move onto the photo box and the image (card
     radius 16 minus its 1px border); nothing else of the card reaches its corners (the action row keeps its own inset). */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-pcard2 > .d-pcard2-media:has(> .d-pcard-badge),
  body.v3-storefront[data-storefront="unified"] :is(.d-catalog--home-bestsellers, .d-catalog--how-packs) .d-pcard > .d-pcard-media:has(> .d-pcard-badge) {
    overflow: visible;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard2 > .d-pcard2-media > .d-pcard-badge,
  body.v3-storefront[data-storefront="unified"] :is(.d-catalog--home-bestsellers, .d-catalog--how-packs) .d-pcard > .d-pcard-media > .d-pcard-badge {
    top: -10px;
    left: -8px;
    z-index: 1;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard:not(:is(.d-catalog--home-bestsellers, .d-catalog--how-packs) .d-pcard):has(> .d-pcard-media > .d-pcard-badge) {
    overflow: visible;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard:not(:is(.d-catalog--home-bestsellers, .d-catalog--how-packs) .d-pcard) > .d-pcard-media:has(> .d-pcard-badge) {
    overflow: visible;
    border-radius: 15px 15px 0 0;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard:not(:is(.d-catalog--home-bestsellers, .d-catalog--how-packs) .d-pcard) > .d-pcard-media:has(> .d-pcard-badge) img {
    border-radius: 15px 15px 0 0;
  }
  body.v3-storefront[data-storefront="unified"] .d-pcard:not(:is(.d-catalog--home-bestsellers, .d-catalog--how-packs) .d-pcard) > .d-pcard-media > .d-pcard-badge {
    top: -10px;
    left: -8px;
    z-index: 1;
  }
}

/* =====================================================================================================================
   DG-CART-CHECKOUT-REFINEMENT-26 (Mark) — address step, cart lines, the mini cart, Order again and the basket's loading
   mask. Exact values from Mark; presentation only (amounts, savings, delivery facts and every hook unchanged).
   ===================================================================================================================== */
/* address step (the address form only): no card subtitles (removed in checkout-details-v0.php), so the icon and the title
   sit centred on one row; the icon is the dark green token with a white glyph */
body.v3-storefront[data-storefront="unified"] .d-coform .d-cocard-head {
  align-items: center;
}
body.v3-storefront[data-storefront="unified"] .d-coform .d-cocard-icon {
  background: var(--green-dark, #1f6a1a);
  color: #fff;
}
body.v3-storefront[data-storefront="unified"] .d-cobilling-title {
  margin-bottom: 22px;
  font-size: 22px;
}
/* cart lines */
body.v3-storefront[data-storefront="unified"] .d-cline > .d-cline-info > .d-cline-name {
  font-size: 18px;
}
body.v3-storefront[data-storefront="unified"] .d-cline > .d-cline-media {
  padding: 6px;
}
/* the money column holds only a saving now (no line total): without one it takes no room */
body.v3-storefront[data-storefront="unified"] .d-cline-money:not(:has(> :not([hidden]))) {
  display: none;
}

/* mini cart: type */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line .d-mc-prices .d-mc-price {
  font-size: 18px;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line .d-mc-name {
  font-size: 16px; /* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 (Mark): was 18px */
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line .d-mc-varline {
  font-size: 13px;
  line-height: 1.5;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line .d-mc-varline :is(.d-mc-variant, .d-mc-meta) {
  font-size: inherit; /* their own sizes go: the line's 13px */
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line .d-mc-note {
  font-size: 13px;
  line-height: 13px;
}
/* the pack's item list stays in the markup / data, hidden for now (also for assistive technology) */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-packkids {
  display: none;
}
/* mini cart: header — cart icon, "Your cart" and the count as one centred group, the close button on the same middle line */
body.v3-storefront[data-storefront="unified"] .minicart .mc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.v3-storefront[data-storefront="unified"] .minicart .mc-head b {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
body.v3-storefront[data-storefront="unified"] .minicart .mc-head b .ico {
  margin-top: 0;
  flex: none;
}
body.v3-storefront[data-storefront="unified"] .minicart .mc-head .d-mc-count {
  flex: none;
}
/* mini cart: one item — top row photo | quantity | delete | prices (right), the name and variant on their own row below */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line {
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-areas: "media controls" "info info";
  align-items: center;
  row-gap: 10px;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line > .d-mc-media {
  grid-area: media;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line > .d-mc-info {
  grid-area: info;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line > .d-mc-bottom {
  grid-area: controls;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line > .d-mc-bottom > .qstep {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin: 0;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line > .d-mc-bottom > .d-mc-remove {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line > .d-mc-bottom > .d-mc-prices {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-items: flex-end;
  text-align: right;
  margin: 0;
  min-width: 0;
}
/* the narrowest phones: the prices stay top right, quantity and delete share the next row (never squeezed) */
@media (max-width: 359px) {
  body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line > .d-mc-bottom {
    grid-template-columns: auto auto minmax(0, 1fr);
  }
  body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line > .d-mc-bottom > .d-mc-prices {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line > .d-mc-bottom > :is(.qstep, .d-mc-remove) {
    grid-row: 2;
  }
}
/* mini cart: "Go to cart" — two calm glow pulses around the button when a drawer with items opens (v3-minicart.js adds
   the class once), no scale; the button's own shadow is the start and the end */
@media (prefers-reduced-motion: no-preference) {
  body.v3-storefront[data-storefront="unified"] .minicart #v3-mc-proceed.is-glow {
    animation: mc-proceed-glow 1.3s ease-in-out 2;
  }
  body.v3-storefront[data-storefront="unified"] .minicart #v3-mc-count.is-count-pulse {
    animation: mc-count-pulse 0.45s ease;
  }
}
@keyframes mc-proceed-glow {
  50% { box-shadow: 0 0 0 5px rgba(142, 21, 102, 0.16), 0 0 18px 6px rgba(142, 21, 102, 0.3); }
}
/* the drawer count after a confirmed quantity change: 1 -> 1.2 -> 1 with a short ring (scale, no layout move) */
@keyframes mc-count-pulse {
  50% { scale: 1.2; box-shadow: 0 0 0 4px rgba(142, 21, 102, 0.2); }
}

/* Order again only: no card descriptions */
body.v3-storefront[data-storefront="unified"] .d-order-again :is(.d-pcard-desc, .d-pcard2-desc, .d-prow-desc) {
  display: none;
}

/* the basket's loading mask while a cart write runs (v3-minicart.js maskSurfaces): the cart page content + summary, the open
   drawer's content + footer. The old figures are covered (not readable, not clickable), one calm spinner; the line-level
   overlays inside give way to it. */
body.v3-storefront[data-storefront="unified"] .is-surface-pending {
  position: relative;
}
body.v3-storefront[data-storefront="unified"] .is-surface-pending::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: progress;
}
body.v3-storefront[data-storefront="unified"] .is-surface-pending::before {
  content: "";
  position: absolute;
  z-index: 31;
  top: min(72px, calc(50% - 13px));
  left: calc(50% - 13px);
  width: 26px;
  height: 26px;
  border: 3px solid var(--line);
  border-top-color: var(--green, #2f8f27);
  border-radius: 50%;
  animation: checkoutSpinner 0.8s linear infinite;
}
body.v3-storefront[data-storefront="unified"] #v3-mc-foot.is-surface-pending::before {
  content: none;
}
body.v3-storefront[data-storefront="unified"] .is-surface-pending :is(.line-busy-overlay, .cart-busy-overlay) {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  body.v3-storefront[data-storefront="unified"] .is-surface-pending::before {
    animation: none;
  }
}

/* DG-CART-CHECKOUT-REFINEMENT-26-FIX01 — the cart page's fixed bottom bar (total + Go to address) during a cart write: the same
   cover as the main surface (old total not readable, not clickable; the bar is inert), without changing its fixed position /
   size and without a second spinner (the main surface has the one). */
body.v3-storefront[data-storefront="unified"] .d-mcta.is-surface-pending-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: progress;
}

/* DG-DETAIL-CART-MOTION-26 (Mark) — the cart toast ("Product added to cart.") fits one line on a 390px phone: its width is
   its own text (no shrink-to-fit against the left 50% offset), capped by the viewport with 16px sides; the icon keeps a
   fixed size, the text may wrap normally on a narrower screen (no ellipsis). On phones it sits above the safe area and
   above the cart page's bottom bar when that bar is shown. Desktop stays compact; text and timing are unchanged. */
body.v3-storefront .toast {
  width: max-content;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}

body.v3-storefront .toast > [data-ico] {
  flex: none;
  display: inline-flex;
  width: 18px;
  height: 18px;
}

body.v3-storefront .toast > span:last-child {
  min-width: 0;
  overflow-wrap: break-word;
}

@media (max-width: 720px) {
  body.v3-storefront .toast {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  body.v3-storefront.has-d-mcta .toast {
    bottom: calc(var(--v2-mcta-h, 0px) + 12px); /* the measured bar height already holds its safe area */
  }
}