/* DR-018 — Portal 1 homepage campaign modals and Meet Mark & Keely. */

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] button.promo {
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] button.promo:focus-visible,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo[data-pm-open]:focus-visible,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-spot[data-pm-open]:focus-visible {
  outline: 2px solid var(--berry, #c43b82);
  outline-offset: 3px;
}

/* DG-MOBILE-STOREFRONT-POLISH-20 (Mark): the former navy "How we can help" treatment is retired; the action is the
   shared .btn.btn-ghost next to the canonical WhatsApp CTA (meet-mark-keely.php). */

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-story {
  margin: 14px 0 0;
  font-size: 15px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-story a {
  color: var(--d-green-900, #1f4a1b);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-story a:focus-visible {
  outline: 2px solid var(--berry, #c43b82);
  outline-offset: 3px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-media img {
  object-position: 50% 70%; /* DG-INFO-PANEL-DEPTH-32B (Mark): both faces of the mountain-walk photo in the square frame */
}

.ss-info-modal:not(.open) {
  display: none;
}

.modal-overlay.ss-info-modal.open,
.ss-info-modal.open {
  display: grid;
  place-items: center;
  padding: 24px 20px;
}

.modal.ss-info-dialog,
.ss-info-dialog {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  grid-template-rows: none;
  width: min(680px, calc(100vw - 40px));
  max-width: 680px;
  max-height: min(88vh, 88dvh, 760px);
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}

.ss-info-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 0;
  max-height: min(86vh, 86dvh, 720px);
  margin: 0;
  padding: 0;
  text-align: left;
}

.ss-info-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ss-info-head {
  display: grid;
  grid-template-columns: 36px 1fr 38px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 24px 28px 14px;
  border-bottom: 1px solid var(--line);
}

.ss-info-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-softer, #e7f3e4);
  color: var(--green-dark);
}

.ss-info-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.ss-info-close {
  position: static;
  top: auto;
  right: auto;
  justify-self: end;
}

.ss-info-content {
  width: 100%;
  padding: 18px 28px 44px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1 1 auto;
}

.ss-info-media {
  max-width: 168px;
  margin: 0 auto 14px;
  border-radius: 16px;
  overflow: hidden;
  background: #f3f5f0;
}

.ss-info-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 148px;
  margin: 0 auto;
  object-fit: contain;
}

.ss-info-lead,
.ss-info-list {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}

.ss-info-list-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
}

.ss-info-list {
  padding-left: 1.15em;
}

.ss-info-foot {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 14px 28px 24px;
  border-top: 1px solid var(--line);
}

.ss-info-gotit {
  width: min(100%, 220px);
}

.ss-info-scroll > .d-dialog-fade {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

@media (max-width: 720px) {
  .ss-info-modal.open {
    padding: 16px;
    align-items: end;
  }

  .ss-info-dialog {
    width: min(100%, calc(100vw - 24px));
    max-height: min(92vh, 760px);
  }

  .ss-info-head,
  .ss-info-content,
  .ss-info-foot {
    padding-left: 18px;
    padding-right: 18px;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* PLT-SHARED-PORTAL-RUNTIME-01 — approved USP slot above the home hero; renders only when a portal's approved content
   carries USP copy (content-driven, no portal selector).
   DG-P8-ENGLISH-USP-47 (Mark) — supersedes the DG-LHL-004-RUNTIME-01B slim white ribbon: a prominent but compact
   branded band in normal flow between the header and the hero. Pale lavender / blue-violet surface (distinct from the
   berry buttons and the green hero), dark violet type in the shop font, the emphasised phrase underlined softly, one
   plain supporting line, and decorative flags (GB = the language, ES, a restrained PT) on a small white chip. Phone:
   left-aligned, flags as a narrow column so the copy keeps its width; no animation, no sticky layer. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-bar {
  /* DG-P8-USP-SHIPPING-SCROLL-47B: above the hero it briefly overlaps while held (max 24px), below the sticky top bar
     (z-index 60-70); the offset itself is a scroll-bound translateY from the inline script (no transition). */
  position: relative;
  z-index: 2;
  background: linear-gradient(115deg, #f4f1fd 0%, #ebe7fb 52%, #e4e7fb 100%);
  border-bottom: 1px solid rgba(76, 61, 150, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 3px rgba(43, 33, 96, 0.06);
  color: #2b2160;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-flags {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(76, 61, 150, 0.12), 0 2px 6px rgba(43, 33, 96, 0.08);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-flag {
  display: inline-block;
  width: 26px;
  height: 18px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(23, 29, 24, 0.1);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-flag-gb {
  background: #012169 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='s'%3E%3Cpath d='M0,0 v30 h60 v-30 z'/%3E%3C/clipPath%3E%3CclipPath id='t'%3E%3Cpath d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23s)'%3E%3Cpath d='M0,0 v30 h60 v-30 z' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-flag-es {
  background: linear-gradient(180deg, #c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75% 100%);
}

/* DG-P8-USP-FLAG-TYPE-47A (Mark): the accurate Portuguese flag (armillary sphere + national shield), same size as GB/ES.
   Source: Wikimedia Commons "File:Flag_of_Portugal.svg" (public domain), sha256 20ddeda8…cd923ce; viewBox added only. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-flag-pt {
  background: #006600 url("../img/v3/flags/flag-pt.svg") center / cover no-repeat;
}

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

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-bar-text {
  margin: 0;
  font-size: 17px; /* DG-P8-USP-FLAG-TYPE-47A (Mark): was 19px; phones keep 16px */
  font-weight: 700;
  line-height: 1.3;
  color: #2b2160;
  text-wrap: balance;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-em {
  font-weight: 800;
  color: #3b25a3;
  background: linear-gradient(transparent 64%, rgba(124, 99, 230, 0.24) 64%);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-sub {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #4a4373;
}

@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-inner {
    justify-content: flex-start;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-flags {
    flex-direction: column;
    gap: 5px;
    padding: 7px 6px;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-flag {
    width: 22px;
    height: 15px;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-bar-text {
    font-size: 16px;
    line-height: 1.3;
    text-wrap: wrap; /* DG-MOBILE-CARD-TEXT-WRAP-26-FIX01: normal wrapping (was pretty) */
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-sub {
    font-size: 13px;
  }
}

/* DG-LAUNCH-STOREFRONT-POLISH-01B — LHL-004H guest hero: the server-selected photo carries the
   manifest's own focal points as two custom properties (allowlisted keyword/percent values).
   Box, cover fit and layout stay as they are; the previous image (no data-guest-hero) keeps its
   existing framing. Mobile/desktop split follows the manifest boxes (<=960px / >=961px). */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-media img[data-guest-hero] {
  object-fit: cover;
  object-position: var(--gh-pos-m, center center);
}

@media (min-width: 961px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-media img[data-guest-hero] {
    object-position: var(--gh-pos-d, center top);
  }
}

/* DG-LAUNCH-STOREFRONT-POLISH-01C — tablet/stacked band only (561–960px). The stacked hero photo
   box was a fixed 260px band across the full card width (~2.8:1 at 768px), which cut every head.
   It now keeps the same 16:10 proportion the accepted phone view renders (≤560px, where the
   #main zoom makes the 260px box 1.6:1), so the manifest mobile focal points frame the same way.
   Phones (≤560px) and desktop (≥961px) are untouched; so is the legacy fallback image. */
@media (min-width: 561px) and (max-width: 960px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-media:has(> img[data-guest-hero]) {
    aspect-ratio: 16 / 10;
    min-height: 260px;
  }
}

/* LHL-HOMEPAGE-BESTSELLERS-WORTH-HIDE-11A — homepage bestsellers layout hook (columns only).
   The cards are the unchanged category Compact contract; this hook only fixes the homepage column count:
   4 per row on desktop (>= 1000px), 2 on tablet (600–999px), 1 on mobile (<= 599px). Two ids so it also
   outranks the later shared mobile-compact two-up rule. No card, price, button, media or modal styling here. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main #bestsellers.d-catalog--home-bestsellers[data-density="compact"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

@media (max-width: 599px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main #bestsellers.d-catalog--home-bestsellers[data-density="compact"] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* LHL-HOMEPAGE-BESTSELLERS-MOBILE-FINAL-11D (Mark, 2026-10-01): mobile keeps one card per row; the
     eyebrow/title/text column takes the full section width. Desktop and tablet are unchanged.
     DG-MOBILE-STOREFRONT-POLISH-20 (Mark): the list is now exactly four (App\Home\HomepageBestsellers), so the
     former cards-7–8 rule is gone, and "Shop all products" is visible again, directly under the intro. */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #bestsellers-sec .d-best-head .d-best-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #bestsellers-sec .d-best-head > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* =====================================================================
   DG-HERO-UK-FINAL-RUNTIME-29 (Mark, 2026-10-05) — final UK guest hero. Only the allowlisted `uk-final` hero variant emits
   `.d-ghf` (on the hero's container; Portal 1 guests), so every rule below is scoped to it; other portals keep the shared
   hero untouched. The approved photograph is never altered: panel, run-out and USP surface are CSS layers.
   DG-HERO-COMPOSITION-USP-POLISH-29A (Mark, 2026-10-05) — refined composition: hero and USPs are one surface; on desktop the
   photo fills the hero from top to bottom edge and runs broadly behind the copy with a long horizontal blend (no top band,
   no vertical fade), and each family has its own palette drawn from its photograph. The transparent logo (no backing) heads
   the copy over the blend, or sits on a measured calm corner of the photo where one exists; in these photographs the top
   right is taken by heads or is too bright for an unbacked logo, so a corner is used only where it is collision-free.
   DG-HERO-CATALOG-CART-POLISH-30A (Mark, 2026-10-05): the logo always sits top-left above the copy (no photo corner) on every
   family, in the official white or green asset that suits the copy panel.
   ===================================================================== */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf {
  --ghf-bg: #17251c;
  --ghf-ink: #ffffff;
  --ghf-sub: rgba(255, 255, 255, 0.92);
  --ghf-accent: #a9e58a;
  --ghf-fade: 48%;
  --ghf-photo-w: 74%;
}
/* Per-family palettes (from each photograph: gym charcoal, coastal petrol, kitchen ivory/stone, river slate, strength-gym
   graphite, city/high-street charcoal-olive, countryside moss, pink-studio plum). Brand green stays the "succeed." accent. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-charcoal-forest { --ghf-bg: #151d19; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-petrol { --ghf-bg: #17323a; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-ivory { --ghf-bg: #f3efe6; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-stone { --ghf-bg: #eee8dc; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-slate { --ghf-bg: #1f2b33; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-graphite { --ghf-bg: #1d1e22; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-charcoal-olive { --ghf-bg: #23271f; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-moss { --ghf-bg: #1c2e22; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-plum { --ghf-bg: #3f1c38; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--text-dark {
  --ghf-ink: #142a17;
  --ghf-sub: #233a26;
  --ghf-accent: #28732a;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--blend-soft { --ghf-fade: 40%; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--blend-strong { --ghf-fade: 56%; }

/* ---------- one surface: hero + USPs ---------- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-shell {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(20, 32, 22, 0.06), 0 22px 48px -30px rgba(20, 32, 22, 0.42);
  isolation: isolate;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ghf-bg);
  color: var(--ghf-ink);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-copy {
  position: relative;
  z-index: 2;
  padding: 24px 20px 22px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-logo {
  display: block;
  width: 128px;
  margin: 0 0 18px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-logo img {
  display: block;
  width: 100%;
  height: auto;
}
/* DG-FLAVOUR-ERROR-HERO-MICRO-POLISH-31A (Mark): on phones (this unscoped base layer) 40px above the headline and 40px
   below the subheadline; the tablet and desktop layers keep their own spacing. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-title {
  margin: 40px 0 0;
  color: var(--ghf-ink);
  font-size: clamp(36px, 10vw, 44px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.022em;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-title em {
  color: var(--ghf-accent);
  font-style: normal;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-sub {
  margin: 12px 0 40px;
  max-width: 24ch;
  color: var(--ghf-sub);
  font-size: clamp(19px, 5vw, 20px);
  font-weight: 600;
  line-height: 1.32;
  text-wrap: balance;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .hero-actions.d-ghf-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .hero-actions.d-ghf-actions .btn {
  justify-content: center;
  min-height: 48px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .hero-actions .btn-ghost {
  background: transparent;
  border-color: color-mix(in srgb, var(--ghf-ink) 55%, transparent);
  color: var(--ghf-ink);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .hero-actions .btn-ghost:hover {
  background: color-mix(in srgb, var(--ghf-ink) 10%, transparent);
  border-color: var(--ghf-ink);
  color: var(--ghf-ink);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .hero-actions .btn:focus-visible {
  outline: 3px solid var(--ghf-accent);
  outline-offset: 3px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-media {
  position: relative;
  aspect-ratio: 5 / 4; /* DG-HOME-AS-STORE-20-H1: phone photo frame 5:4 (was 1:1); the family's own horizontal focal point with headroom (--ghf-pos-m54, home.php) */
  overflow: hidden;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ghf-pos-m54, var(--ghf-pos-m, center center));
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Phone / tablet join: a clean edge by default; a short blend only where the photo has open background above the people. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--join-short .d-ghf-fade {
  background: linear-gradient(180deg, var(--ghf-bg) 0%, color-mix(in srgb, var(--ghf-bg) 45%, transparent) 4%, transparent 9%);
}

/* ---------- USP: one quiet light surface (exact copy, existing icons) ---------- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .trust.d-ghf-usp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: 0;
  padding: 6px 4px 8px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 14px 14px;
  border: 0;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item + .trust-item {
  border: 0;
}
/* Quiet hairline between the two rows, inset so it never crosses the words. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item:nth-child(n+3)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: rgba(20, 42, 23, 0.08);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-ico {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #f8e8f1;
  color: #8e1566;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-ico .ico {
  width: 19px;
  height: 19px;
  color: #8e1566;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item b {
  display: block;
  margin: 0;
  color: #17251a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item div > span {
  display: block;
  margin-top: 3px;
  color: #5a6458;
  font-size: 12.5px;
  line-height: 1.42;
}

@media (min-width: 561px) and (max-width: 960px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-copy {
    padding: 34px 40px 30px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-logo {
    width: 160px;
    margin-bottom: 22px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-title {
    margin-top: 40px;
    font-size: 54px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-sub {
    max-width: none;
    margin: 14px 0 34px;
    font-size: 22px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .hero-actions.d-ghf-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-media {
    aspect-ratio: 4 / 3;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-media img {
    object-position: var(--ghf-pos-t, center center);
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
  }
}

@media (min-width: 961px) {
  /* The photo fills the hero from its top edge to its bottom edge and runs broadly behind the copy. */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 470px;
    background: var(--ghf-bg);
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--ghf-photo-w);
    aspect-ratio: auto;
    z-index: 0;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-media img {
    object-position: var(--ghf-pos-d, center center);
  }
  /* Long horizontal blend only (no vertical fade): the panel colour holds behind the words, then thins out gradually
     before the people; its length is the family's blend. */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-fade {
    background: linear-gradient(90deg,
      var(--ghf-bg) 0%,
      var(--ghf-bg) 9%,
      color-mix(in srgb, var(--ghf-bg) 90%, transparent) calc(var(--ghf-fade) * 0.42),
      color-mix(in srgb, var(--ghf-bg) 62%, transparent) calc(var(--ghf-fade) * 0.66),
      color-mix(in srgb, var(--ghf-bg) 24%, transparent) calc(var(--ghf-fade) * 0.86),
      transparent var(--ghf-fade));
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-copy {
    position: static;
    width: 50%;
    padding: 56px 0 56px 56px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-copy > :not(.d-ghf-logo) {
    position: relative;
    z-index: 2;
  }
  /* The transparent logo (no backing) heads the copy, top-left above the text (30A: always; no photo corner). It is out of
     the flow, so the copy stays vertically centred without reserved space. */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-logo {
    position: absolute;
    z-index: 3;
    width: 176px;
    margin: 0;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--logo-pos-copy .d-ghf-logo {
    top: 32px;
    left: 56px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-title {
    margin-top: 0;
    font-size: clamp(50px, 4.3vw, 62px);
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-sub {
    max-width: 30ch;
    margin: 16px 0 30px;
    font-size: clamp(20px, 1.65vw, 23px);
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .hero-actions.d-ghf-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .trust.d-ghf-usp {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 6px 12px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 22px 22px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item:nth-child(n+3)::before {
    content: none;
  }
  /* Light inset separators between the four assurances (never full height). */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item + .trust-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 28%;
    bottom: 28%;
    width: 1px;
    background: rgba(20, 42, 23, 0.09);
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-ico .ico {
    width: 21px;
    height: 21px;
  }
}
@media (min-width: 961px) and (max-width: 1180px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf {
    --ghf-photo-w: 70%;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-copy {
    width: 54%;
    padding-left: 44px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--logo-pos-copy .d-ghf-logo {
    left: 44px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item {
    padding: 20px 16px;
    gap: 12px;
  }
}

/* ==========================================================================
   DG-HOME-PACK-APPROVED-BUILD-51 — approved homepage blocks (accepted 50D / 50E): hero product link, the
   three tinted steps, the graphite shop band, the guest support line and the compact two-per-row phone
   cards of the curated / "Order again" rows. Existing tones only: lavender (upsell pill), cream
   (--d-c-amber-soft / --d-c-amber-line), soft green (--green-soft), graphite (the guest-hero tone #1d1e22).
   ========================================================================== */
body.v3-storefront[data-storefront="unified"] .d-hero-browse {
  margin: 14px 0 0;
  font-size: 14.5px;
  opacity: 0.9;
}

body.v3-storefront[data-storefront="unified"] .d-hero-browse a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- section rhythm ---------------------------------------------------------
   DG-HOME-PACK-BUILD-CLOSEOUT-51A (Mark): every new top-level homepage section uses the shop's ONE shared section gap,
   exactly as the existing homepage sections do (v3-home-guest-section-space.css for guests, the 20L block in
   v3-design-overrides.css for signed-in customers): --d-section-gap above (76px, 64px at <=720px), nothing below. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] main > .d-steps,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] main > .d-startpacks,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] main > .d-order-again,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] main > .d-shopband-sec,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] main > .d-supportline-sec {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--d-section-gap);
  padding-bottom: 0;
}

/* --- three steps ---------------------------------------------------------
   DG-ROUTINE-PILLS-REORDER-POLISH-51B (Mark): the heading is the shop's standard section head (eyebrow + h2 + the
   shared heading-to-content gap of .section-head), so it has no size or margin of its own here. Below it ONE group:
   a row of three compact tinted steps and one foot.
   DG-HOME-ROUTINE-REFINEMENT-51H (Mark): the foot belongs to the whole row, not to single steps: one footnote the full
   width under all three, and under it one action. */
body.v3-storefront[data-storefront="unified"] .d-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body.v3-storefront[data-storefront="unified"] .d-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0;
  padding: 18px 18px 18px 16px;
  border: 1px solid transparent;
  border-radius: 18px;
}

body.v3-storefront[data-storefront="unified"] .d-step h3 {
  margin: 1px 0 4px;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--d-c-ink-2, #3c4740);
}

body.v3-storefront[data-storefront="unified"] .d-step-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
}

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

body.v3-storefront[data-storefront="unified"] .d-step--a {
  background: #eee8f7;
  border-color: #ddd2ee;
}

body.v3-storefront[data-storefront="unified"] .d-step--a .d-step-ico {
  color: #614778;
}

body.v3-storefront[data-storefront="unified"] .d-step--b {
  background: var(--d-c-amber-soft, #fff6e2);
  border-color: var(--d-c-amber-line, #f1dfb2);
}

body.v3-storefront[data-storefront="unified"] .d-step--b .d-step-ico {
  color: var(--d-c-amber, #8a5a00);
}

body.v3-storefront[data-storefront="unified"] .d-step--c {
  background: var(--green-soft);
  border-color: #cfe6c2;
}

body.v3-storefront[data-storefront="unified"] .d-step--c .d-step-ico {
  color: var(--green-dark);
}

/* The marker on the two weight steps and the same marker in front of their conditions. */
body.v3-storefront[data-storefront="unified"] .d-step-mark {
  font-weight: 700;
  color: var(--ink);
}

body.v3-storefront[data-storefront="unified"] .d-step h3 .d-step-mark {
  margin-left: 2px;
  font-size: 0.8em;
  line-height: 0;
}

/* The foot: the footnote and the action each on their own row, both from the row's left edge (as the heading above). */
body.v3-storefront[data-storefront="unified"] .d-steps-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 2px;
  margin-top: 14px;
  padding: 0 4px;
}

/* One footnote for the whole row: smaller and quieter than the step texts, always complete (no clamp, no control). */
/* DG-WEIGHT-LOSS-CONTENT-REFRESH-14 (Mark): a short explanation of Herbalife and Formula 1 above the steps, and the
   maintenance follow-on line above the action (the footnote now closes the foot). */
body.v3-storefront[data-storefront="unified"] .d-steps-intro {
  max-width: 72ch;
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--d-c-ink-2, #3c4740);
}

body.v3-storefront[data-storefront="unified"] .d-steps-follow {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--d-c-ink-2, #3c4740);
}

/* DG-WEIGHT-LOSS-CONTENT-REFRESH-14 REVISION02 / HOME MARKETING04 (Mark): the routine section is one calm block: the Formula 1
   shake photo (left on wide screens, after the text in the markup) and a short story with one action. No use-case boxes,
   no conditions in this block. Existing type, palette and buttons. */
body.v3-storefront[data-storefront="unified"] .d-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}

body.v3-storefront[data-storefront="unified"] .d-intro-media {
  position: relative;
  order: -1;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--green-soft);
}

body.v3-storefront[data-storefront="unified"] .d-intro-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 30%;
  transform: scale(1.06);
}

body.v3-storefront[data-storefront="unified"] .d-intro-product {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 14px;
  line-height: 1.35;
  color: var(--d-c-ink-2, #3c4740);
}

body.v3-storefront[data-storefront="unified"] .d-intro-product img {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

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

body.v3-storefront[data-storefront="unified"] .d-intro-copy {
  max-width: 34rem;
}

body.v3-storefront[data-storefront="unified"] .d-intro-copy h2 {
  margin: 6px 0 12px;
}

body.v3-storefront[data-storefront="unified"] .d-intro-lede {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--d-c-ink-2, #3c4740);
}

body.v3-storefront[data-storefront="unified"] .d-intro-nowrap {
  white-space: nowrap;
}

body.v3-storefront[data-storefront="unified"] .d-intro-ease {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--green-dark);
}

@media (max-width: 760px) {
  body.v3-storefront[data-storefront="unified"] .d-intro-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body.v3-storefront[data-storefront="unified"] .d-intro-media {
    order: 0;
    aspect-ratio: 16 / 16;
  }

  body.v3-storefront[data-storefront="unified"] .d-intro-lede,
  body.v3-storefront[data-storefront="unified"] .d-intro-ease {
    font-size: 16px;
  }

  body.v3-storefront[data-storefront="unified"] .d-intro-ease {
    margin-bottom: 18px;
  }

  /* HOME MARKETING04 (Mark): this block opens with "What is Herbalife?" on phones too (homepage eyebrows stay hidden
     on phones elsewhere, DG-MOBILE-STOREFRONT-POLISH-20M). */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main .d-intro .d-best-eyebrow {
    display: block;
  }
}

body.v3-storefront[data-storefront="unified"] .d-startpacks-intro {
  max-width: 72ch;
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--d-c-ink-2, #3c4740);
}

body.v3-storefront[data-storefront="unified"] .d-startpacks-more,
body.v3-storefront[data-storefront="unified"] .d-startpacks-goals {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--d-c-ink-2, #3c4740);
}

body.v3-storefront[data-storefront="unified"] .d-startpacks-goals {
  margin-top: 4px;
}

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

body.v3-storefront[data-storefront="unified"] .d-steps-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

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

/* --- "Order again" header --------------------------------------------------
   DG-CARD-ALIGNMENT-QUICKVIEW-51E (Mark): on a viewport narrower than 390px the title and "Shop all products" no longer
   share one line (they squeezed each other into two-line fragments). The heading group and the link each take the full
   width, left aligned, the link under the title. A local modifier of this one header; 390px and wider is unchanged. */
@media (max-width: 389.98px) {
  body.v3-storefront[data-storefront="unified"] .d-order-again .d-order-again-head {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  body.v3-storefront[data-storefront="unified"] .d-order-again .d-order-again-head > div,
  body.v3-storefront[data-storefront="unified"] .d-order-again .d-order-again-head > .d-best-all {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    text-align: left;
  }
}

/* --- "Order again" with exactly three cards on a narrow phone ---------------
   DG-RESPONSIVE-FLAVOURS-HOME-HELP-POLISH-51G (Mark): below 390px three cards are no longer squeezed into two small
   columns. Each card takes its own row, as the shop's shared one-per-row phone card: a small photo left of pill, name and
   fact line; description, price and actions the full width beneath. The declarations are those of that card
   (v3-design-overrides.css, section C, `.d-catalog--home-bestsellers .d-pcard`), repeated for this one case because
   section C applies up to 720px and this row must stay as it is at 390px and wider. One, two and four cards are
   untouched. `data-order-again-count` is the validated number of cards the row really shows. The card foot takes its
   area in its owner file, v3-c-card.css. */
@media (max-width: 389.98px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main .d-order-again[data-order-again-count="3"] .d-catalog[data-density="compact"] {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main .d-order-again[data-order-again-count="3"] .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"][data-v3-page="home"] #main .d-order-again[data-order-again-count="3"] .d-pcard > .d-pcard-body {
    display: contents;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main .d-order-again[data-order-again-count="3"] .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"][data-v3-page="home"] #main .d-order-again[data-order-again-count="3"] .d-pcard > .d-pcard-media > a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main .d-order-again[data-order-again-count="3"] .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"][data-v3-page="home"] #main .d-order-again[data-order-again-count="3"] .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"][data-v3-page="home"] #main .d-order-again[data-order-again-count="3"] .d-pcard .d-pcard-cat {
    grid-area: cat;
    margin: 0 0 3px;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main .d-order-again[data-order-again-count="3"] .d-pcard .d-pcard-name {
    grid-area: name;
    font-size: 18px;
    line-height: 1.3; /* DG-STOREFRONT-USABILITY-POLISH-26 (Mark): one card-name line-height on the homepage (was 1.25) */
    overflow-wrap: anywhere;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main .d-order-again[data-order-again-count="3"] .d-pcard .d-pcard-variant {
    grid-area: variant;
    margin-top: 3px;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main .d-order-again[data-order-again-count="3"] .d-pcard .d-pcard-desc {
    grid-area: desc;
    margin: 12px 0 0;
  }
}

/* --- graphite shop band --------------------------------------------------- */
/* DG-RESPONSIVE-FLAVOURS-HOME-HELP-POLISH-51G (Mark): more depth. The graphite stays the band's own colour (a solid
   fallback first), with a diagonal gradient from a lighter graphite to the site's ink and a faint light from the top
   right, where the product montage sits. Still clearly apart from the green registration block. */
body.v3-storefront[data-storefront="unified"] .d-shopband {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 32px;
  border-radius: 22px;
  background: #1d1e22;
  background-image: radial-gradient(90% 130% at 100% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #2c2e35 0%, #1d1e22 46%, var(--ink) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-md);
  color: #fff;
  overflow: hidden;
}

body.v3-storefront[data-storefront="unified"] .d-shopband-copy {
  position: relative;
  min-width: 0;
}

/* The montage: the shop's own product photos for this portal, each on a white tile (the photos have a white background),
   partly overlapping and fading into the band on the side of the copy. Decorative: no pointer target. */
body.v3-storefront[data-storefront="unified"] .d-shopband-shots {
  display: flex;
  align-items: center;
  flex: none;
  margin-left: auto;
  padding: 8px 4px 8px 34px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0, #000 42%);
}

body.v3-storefront[data-storefront="unified"] .d-shopband-shot {
  display: grid;
  place-items: center;
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.v3-storefront[data-storefront="unified"] .d-shopband-shot + .d-shopband-shot {
  margin-left: -20px;
}

body.v3-storefront[data-storefront="unified"] .d-shopband-shot:nth-child(odd) {
  transform: rotate(-5deg) translateY(3px);
}

body.v3-storefront[data-storefront="unified"] .d-shopband-shot:nth-child(even) {
  transform: rotate(4deg) translateY(-3px);
}

body.v3-storefront[data-storefront="unified"] .d-shopband-shot img {
  display: block;
  width: 80%;
  height: 80%;
  object-fit: contain;
}

body.v3-storefront[data-storefront="unified"] .d-shopband h2 {
  margin: 0 0 4px;
  font-size: clamp(20px, 2.2vw, 26px);
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .d-shopband p {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

body.v3-storefront[data-storefront="unified"] .d-shopband-guide {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.v3-storefront[data-storefront="unified"] .d-shopband-guide:hover,
body.v3-storefront[data-storefront="unified"] .d-shopband-guide:focus-visible {
  color: #fff;
}

body.v3-storefront[data-storefront="unified"] .d-shopband-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

body.v3-storefront[data-storefront="unified"] .d-shopband-btn:focus-visible,
body.v3-storefront[data-storefront="unified"] .d-shopband-guide:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

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

/* --- guest support block ---------------------------------------------------
   DG-RESPONSIVE-FLAVOURS-HOME-HELP-POLISH-51G (Mark): small, but designed. The Help page's compact signpost language: a
   berry icon well, a short heading with one line, the actions on the right. A white card on a hairline, deliberately
   not another large content card and not a second green registration block. */
body.v3-storefront[data-storefront="unified"] .d-support {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2.2vw, 24px);
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

body.v3-storefront[data-storefront="unified"] .d-support-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--berry-soft);
  color: var(--berry);
}

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

body.v3-storefront[data-storefront="unified"] .d-support-copy h2 {
  margin: 0 0 2px;
  font-size: 18px;
  line-height: 1.3;
}

body.v3-storefront[data-storefront="unified"] .d-support-copy p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
}

body.v3-storefront[data-storefront="unified"] .d-support-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

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

  body.v3-storefront[data-storefront="unified"] .d-step {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 14px 13px 12px;
    border-radius: 16px;
  }

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

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

  body.v3-storefront[data-storefront="unified"] .d-step h3 {
    font-size: 16px;
  }

  body.v3-storefront[data-storefront="unified"] .d-step p {
    font-size: 14px;
  }

  body.v3-storefront[data-storefront="unified"] .d-steps-foot {
    margin-top: 12px;
  }

  /* the page content is shown slightly reduced on phones: a little more height keeps the link a 44px touch target */
  body.v3-storefront[data-storefront="unified"] .d-steps-link {
    min-height: 47px;
  }

  body.v3-storefront[data-storefront="unified"] .d-shopband {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
  }

  /* phones: the montage is a small row under the copy, fading out to the right, so the text is never crowded */
  body.v3-storefront[data-storefront="unified"] .d-shopband-shots {
    margin-left: 0;
    padding: 4px 30px 4px 2px;
    -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 38%);
    mask-image: linear-gradient(270deg, transparent 0, #000 38%);
  }

  body.v3-storefront[data-storefront="unified"] .d-shopband-shot {
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }

  body.v3-storefront[data-storefront="unified"] .d-shopband-shot + .d-shopband-shot {
    margin-left: -12px;
  }

  body.v3-storefront[data-storefront="unified"] .d-shopband-btn {
    width: 100%;
  }

  body.v3-storefront[data-storefront="unified"] .d-support {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px 14px;
    padding: 16px;
  }

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

  /* each action keeps its label on one line: side by side where two fit, one under the other on a phone */
  body.v3-storefront[data-storefront="unified"] .d-support-actions .btn {
    flex: 1 1 200px;
    justify-content: center;
    white-space: nowrap;
  }
}

/* DG-HOME-ROUTINE-REFINEMENT-51H (Mark): tablets in portrait (761px to 960px) keep the three steps in one row, but a step is
   too narrow there for an icon BESIDE the text (the text ran to four lines and a title to two). The icon stands above
   the text instead, so the text has the step's full width. Wider and narrower screens are unchanged. */
@media (min-width: 761px) and (max-width: 960px) {
  body.v3-storefront[data-storefront="unified"] .d-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 16px;
  }

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

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

/* tablets in landscape (961px to 1100px): the wide layout with smaller tiles */
@media (min-width: 961px) and (max-width: 1100px) {
  body.v3-storefront[data-storefront="unified"] .d-shopband-shot {
    width: 66px;
    height: 66px;
    border-radius: 17px;
  }

  body.v3-storefront[data-storefront="unified"] .d-shopband-shot + .d-shopband-shot {
    margin-left: -18px;
  }

  body.v3-storefront[data-storefront="unified"] .d-shopband-shots {
    padding-left: 22px;
  }
}

/* tablets in portrait (761px to 960px): next to the button there is no room for the photos without squeezing the text,
   so they sit in a small row under the copy (as on phones) and the button keeps its place on the right */
@media (min-width: 761px) and (max-width: 960px) {
  body.v3-storefront[data-storefront="unified"] .d-shopband.has-shots {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    row-gap: 12px;
  }

  body.v3-storefront[data-storefront="unified"] .d-shopband.has-shots .d-shopband-shots {
    grid-column: 1;
    grid-row: 2;
    margin-left: 0;
    padding: 4px 30px 4px 2px;
    -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 38%);
    mask-image: linear-gradient(270deg, transparent 0, #000 38%);
    justify-self: start;
  }

  body.v3-storefront[data-storefront="unified"] .d-shopband.has-shots .d-shopband-shot {
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }

  body.v3-storefront[data-storefront="unified"] .d-shopband.has-shots .d-shopband-shot + .d-shopband-shot {
    margin-left: -12px;
  }

  body.v3-storefront[data-storefront="unified"] .d-shopband.has-shots .d-shopband-btn {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* =====================================================================================================================
   DG-HOME-AS-STORE-20-H1 — the homepage IS the store. Guest hero actions, the 5:4 phone photo, the one combined New to
   Herbalife / Formula 1 / How block, the compact sale line, the store sections and their anchors. Home only.
   ===================================================================================================================== */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] {
  --h1-ink: #25262b;
  --h1-muted: #5f626c;
  --h1-accent-blue: #46607f;
  --h1-accent-blue-soft: #e9eff6;
}

/* --- guest hero (FIX01, Mark): exactly two actions, Shop product (primary, arrow right) and Sign in (outline); nothing under
   them. Phone base: two calm equal-height buttons in one row where they fit, stacked on the narrowest phones; from 561px
   they sit side by side at their natural width. --- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-h1-hero-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: stretch;
  gap: 10px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-h1-hero-actions .btn {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  white-space: nowrap;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-h1-hero-actions .btn .ico {
  width: 18px;
  height: 18px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-h1-hero-actions .d-h1-signin-btn {
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
}
/* in the P1 final hero the outline follows the family's own ink (light text on dark families, dark on light ones) */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-h1-hero-actions .d-h1-signin-btn {
  border-color: var(--ghf-ink, #fff);
  color: var(--ghf-ink, #fff);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-h1-hero-actions .d-h1-signin-btn:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-h1-hero-actions .btn:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
@media (min-width: 561px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-h1-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-h1-hero-actions .btn {
    width: auto;
  }
}
/* P8-POST-GSM112-REPAIR-01 (V20 hero CTA contract, 1 Nov 2026): in a Spanish document the longer full label + arrow ("Comprar productos")
   overflowed a 140px track on phones; the same auto-fit grid gets a minimum track that fits it, so each action takes its own full-width
   row when two do not fit (min(100%, ...) keeps the minimum itself from overflowing a compact container). Language-scoped (only the P8
   Spanish document is es), no portal selector and no new breakpoint: from 561px the existing flex rule above still applies. Copy,
   icons, 48px height, focus, order and hooks unchanged; EN / P1 / P4 untouched. */
html[lang|="es"] body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-h1-hero-actions {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
/* P8-POST-GSM112-DISPLAY-ALT-AND-COMPACT-CLOSURE-03 (V20 compact 320 gap): measured at 320px, the hero card's single grid track was
   sized by the min-content of .hero-copy (computed min-width: auto), which the unbreakable heading word "complicaciones," pushed to
   343px inside a 292px card, so the CTA column and both pills ran 14px past the viewport. The grid item may shrink to its track and
   the heading may wrap / hyphenate a word wider than the copy column; font size, labels, icons and the 48px pills unchanged, no clip. */
html[lang|="es"] body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-copy {
  min-width: 0;
}
html[lang|="es"] body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-copy h1 {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* --- the combined New to Herbalife / Formula 1 / How block: warm neutral card, a light blue accent on the copy side only.
   FIX01 (Mark): the existing lifestyle photo (woman with a chocolate shake in her kitchen) at the left, rounded, never
   tinted; cropped so face, hands and glass stay in frame; on phones a moderate full-width band above the words. --- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-sec {
  padding-top: 36px;
  padding-bottom: 0;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo {
  display: grid;
  grid-template-columns: minmax(0, clamp(240px, 28vw, 320px)) minmax(0, 1fr);
  grid-template-areas: "shot head" "shot body";
  align-items: center;
  gap: 4px 36px;
  padding: 28px 36px 28px 28px;
  border: 1px solid #e6e3dc;
  border-radius: 22px;
  background: linear-gradient(118deg, #fdfcf9 0%, #f8f6f1 46%, #f1f4f8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 16px 34px -24px rgba(37, 46, 60, 0.45), 0 2px 6px rgba(37, 46, 60, 0.06);
  color: var(--h1-ink);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-shot {
  grid-area: shot;
  aspect-ratio: 768 / 682;
  overflow: hidden;
  border-radius: 18px;
  background: #f3efe8;
  box-shadow: 0 1px 2px rgba(37, 46, 60, 0.06), 0 10px 22px -18px rgba(37, 46, 60, 0.5);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-head {
  grid-area: head;
  align-self: end;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-body {
  grid-area: body;
  align-self: start;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--h1-accent-blue-soft);
  color: var(--h1-accent-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-head h2 {
  margin: 0;
  color: var(--h1-ink);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.15;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-text {
  max-width: 58ch;
  margin: 12px 0 0;
  color: var(--h1-muted);
  font-size: 16px;
  line-height: 1.55;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-start {
  margin: 6px 0 0;
  color: var(--h1-ink);
  font-size: 16px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-start strong {
  font-weight: 700;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 18px;
}
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-sec {
    padding-top: 24px;
  }
  /* phones (FIX01): the lifestyle photo as a moderate full-width band above the words, face and glass in frame */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "shot" "head" "body";
    gap: 12px;
    padding: 12px 12px 18px;
    border-radius: 20px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-shot {
    aspect-ratio: 16 / 10;
    border-radius: 14px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-head,
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-body {
    padding: 0 6px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-head {
    align-self: start;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-head h2 {
    font-size: 22px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-text {
    margin-top: 0;
    font-size: 15.5px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-combo-acts .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* --- the current sale (FIX01, Mark): a compact campaign card under the account card. Three parts: the campaign heading
   (tag + celebration line), the delivered percentage as the main element with "OFF EVERYTHING", and Shop now. Warm red
   gradient with a soft light and depth; no motion. Phone base: stacked; from 561px one row. --- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline-wrap {
  margin-top: 14px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 10px;
  overflow: hidden;
  margin: 0;
  padding: 18px 18px 18px 20px;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(115deg, #9e211e 0%, #b42c27 45%, #d04735 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 16px 30px -20px rgba(110, 25, 20, 0.85), 0 2px 6px rgba(110, 25, 20, 0.18);
  color: #fff;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline-head {
  display: grid;
  gap: 2px;
  margin: 0;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline-tag .ico {
  width: 16px;
  height: 16px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline-sub {
  font-size: 15px;
  opacity: 0.92;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline-offer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  line-height: 1;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline-pct {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(60, 12, 8, 0.25);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline-off {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 14px -8px rgba(60, 12, 8, 0.6);
  color: #9a241e;
  font-weight: 800;
  text-decoration: none;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@media (min-width: 561px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px 28px;
    padding: 16px 16px 16px 24px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline-pct {
    font-size: 52px;
  }
}
/* DG-STOREFRONT-FINISH-CART-21 A4 (Mark): between phone and wide desktop the three areas squeezed the campaign heading word
   by word; there the heading takes the full first row and the percentage + Shop now share the second. From 1024px the three
   calm areas side by side. No smaller type. */
@media (min-width: 561px) and (max-width: 1023px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-saleline-head {
    grid-column: 1 / -1;
  }
}

/* --- Popular picks / Order again (FIX01): a selection row on its own warm lavender surface, apart from the full range --- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-pick {
  padding-top: 28px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-pick > .section {
  padding: 0;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-pick-panel {
  padding: 18px 8px 12px;
  border: 1px solid #e9e1f1;
  border-radius: 24px;
  background: linear-gradient(160deg, #faf6fd 0%, #f4eefa 55%, #fbf8f3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 34px -28px rgba(70, 40, 100, 0.55);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-pick .section-head {
  margin-bottom: 14px;
  padding: 0 8px;
}
@media (min-width: 721px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-pick-panel {
    padding: 26px 26px 28px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-pick .section-head {
    padding: 0;
  }
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-pick .section-head h2 {
  font-size: clamp(22px, 2.2vw, 26px);
}

/* --- the store (DG-HOME-LESS-IS-MORE-20, Mark): no visible introduction; the group headings carry the structure. Measured
   air: the last intro block's bottom edge → the first group heading 80px desktop / 56px phone (the store's own top padding;
   the first section has no top margin / padding); between groups 56px / 40px: 20 / 14px to the existing hairline, then the
   rest to the next heading. --- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop {
  padding-top: 104px; /* DG-STOREFRONT-FINISH-CART-21 A5 (Mark): more air before Nutrition Packs (was 80px / 56px phone) */
  scroll-margin-top: var(--v2-anchor-offset, 120px);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop-sections {
  gap: 0;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop-sections > .d-home-shop-section {
  margin: 0;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop-sections > .d-home-shop-section + .d-home-shop-section {
  margin-top: 20px; /* the existing hairline sits a little below the cards, not on them */
  padding-top: 59px; /* A5: 80px from the previous cards to the next group heading (20 + 1 hairline + 59; was 56) */
}
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop {
    padding-top: 80px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop-sections > .d-home-shop-section + .d-home-shop-section {
    margin-top: 14px;
    padding-top: 49px; /* A5: 64px on phones (14 + 1 + 49; was 40) */
  }
}
/* product and pack cards on the homepage (store, Popular picks, Order again): a slightly clearer neutral edge, same 1px
   width; the hover edge stays the existing green, a step stronger so it is still more visible than the resting edge */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-home] :is(.d-prow, .d-pcard)[data-h1-identity] {
  border-color: #c6cec0;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-home] :is(.d-prow, .d-pcard)[data-h1-identity]:hover {
  border-color: rgba(90, 177, 32, 0.7);
}
/* DG-DETAIL-IMAGE-CART-INTEGRATION-22 (DG-MODAL-RETURN-CARD-STATE-22) — right after the full detail closes, the card under a
   pointer that has not moved keeps its resting edge (v3-full-detail.js sets html.fd-hover-quiet until the pointer really
   moves, is pressed or scrolls); keyboard focus indication is untouched */
html.fd-hover-quiet body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-home] :is(.d-prow, .d-pcard)[data-h1-identity]:hover {
  border-color: #c6cec0;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop-section {
  scroll-margin-top: var(--v2-anchor-offset, 120px);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-occurrence] {
  scroll-margin-top: calc(var(--v2-anchor-offset, 120px) + 8px);
}
/* an explicitly chosen search result: a short, calm mark on its card */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-occurrence].is-h1-found {
  outline: 3px solid var(--green, #2f7d32);
  outline-offset: 4px;
  border-radius: 16px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-occurrence]:focus {
  outline: none;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-occurrence].is-h1-found:focus {
  outline: 3px solid var(--green, #2f7d32);
}
/* the store's list rows reserve their square photo box before the (lazy) photo arrives, so nothing below moves while
   scrolling: section anchors, search choices and the detail return land and stay where they are measured */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-home] .d-prow-media {
  aspect-ratio: 1 / 1;
}

/* --- the register block for guests on the home-as-store page: the ORIGINAL green design (v3-design-overrides.css, #register
   .d-reg-copy) — DG-HOME-LESS-IS-MORE-20 removed FIX01's lavender overrides; only the compact spacing and the 44px hit area of
   "Sign in instead" stay --- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-home] .d-reg-section {
  padding-top: 28px;
  padding-bottom: 0;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-home] .d-reg-alt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- FIX01 (Mark): the compact Mark & Keely help strip before the store (guests, proven zero orders) — a small warm card,
   round avatar, the approved sentence and one contact action; not a second Meet section --- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-support {
  padding-top: 36px; /* LESS-IS-MORE-20-FIX01: clearly apart from the block above (28px on phones, below) */
  padding-bottom: 0;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-support-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "avatar copy" "action action";
  align-items: center;
  gap: 12px 14px;
  padding: 14px 16px;
  border: 1px solid #e9e1f1;
  border-radius: 18px;
  background: linear-gradient(120deg, #fbf8fe 0%, #f6f0fa 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 26px -22px rgba(70, 40, 100, 0.55);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-support-avatar {
  grid-area: avatar;
  width: 56px;
  height: 56px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  object-position: 55% 62%;
  box-shadow: 0 4px 10px -6px rgba(37, 38, 43, 0.5);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-support-copy {
  grid-area: copy;
  margin: 0;
  color: var(--h1-ink);
  font-size: 16px;
  line-height: 1.4;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-support-copy p {
  margin: 2px 0 0;
  color: var(--h1-muted);
  font-size: 15px;
  line-height: 1.45;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-support-title {
  margin: 0;
  color: var(--h1-ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-support-action {
  grid-area: action;
  /* DG-LOCAL-FINAL-JOURNEYS-21: the WhatsApp button with the calm form link centred beneath it */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-support-alt {
  font-size: 14.5px;
  color: var(--h1-ink);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-support-btn {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}
@media (min-width: 561px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-support-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "avatar copy action";
    padding: 14px 18px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-support-title {
    font-size: 20px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-support-btn {
    width: auto;
  }
}

/* --- DG-HOME-LESS-IS-MORE-20-FIX01 (Mark) ------------------------------------------------------------------------------
   1 product and pack names on the homepage cards (store, Popular picks, Order again): 22px desktop / 20px phone, 800;
     same ID-level weight as the existing Order again three-card rule so every card variant follows; words wrap whole. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main [data-h1-home] :is(.d-prow-name, .d-pcard-name, .d-pcard2-name) {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3; /* DG-STOREFRONT-USABILITY-POLISH-26 (Mark): was 1.22 */
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto; /* where the browser has a dictionary, a word wider than its card hyphenates instead of breaking anywhere */
}
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main [data-h1-home] :is(.d-prow-name, .d-pcard-name, .d-pcard2-name) {
    font-size: 20px;
  }
  /* the narrow two-up phone grids (Popular picks, the compact Order again row) keep their existing 18px: at 20px a word
     like "Replacement" is wider than the card's text column and would break mid-word (no hyphenation dictionary to rely on) */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main [data-h1-home] .d-home-pick :is(.d-catalog--home-bestsellers, .d-catalog[data-density="compact"]) .d-pcard-name {
    font-size: 18px;
  }
}
/* 2 the contact strip clearly apart from the block above it: 36px desktop (its own rule above) / 28px phone to the card's
     top edge (the block above ends without bottom padding); its distance to the first group stays the store's 80 / 56px. */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-support {
    padding-top: 28px;
  }
}
/* DG-STOREFRONT-FINISH-CART-21 A5 (Mark) supersedes the green direction below: ONE shared dark berry panel (--berry-dark
     #6b0f4d → the berry tone) with the same soft glow, for every group (no colour per category). Larger: title 34px phone /
     36px desktop at 800, padding about 28px / 30px block, 24px / 26px inline, 16px between its parts; on phones the panel
     runs edge to edge (it breaks out of the store's own container inset, the cards keep their gutter; radius 0 there).
   3 the range groups (FINAL, Mark): the whole existing group heading (title + subtitle + count) is ONE calm dark green panel:
     a 135deg gradient #1f3d29 → #315b3b with a soft light-green glow top right, a quiet outer glow and an inset highlight;
     the title is transparent inside it (no bar of its own). Title 30px desktop / 26px phone; subtitle #edf4ea 14.5px / 500;
     count 12.5px / 600 in a soft light inset (right on desktop). Panel bottom → first card 20px; group gaps unchanged. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop-section > .d-catalog-all-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 16px;
  margin: 0 calc(-1 * var(--d-shop-pad, 20px)) 20px;
  padding: 28px max(24px, env(safe-area-inset-right, 0px)) 28px max(24px, env(safe-area-inset-left, 0px));
  border-radius: 0;
  background:
    radial-gradient(85% 160% at 100% 0%, rgba(232, 160, 212, 0.26) 0%, rgba(232, 160, 212, 0) 58%),
    linear-gradient(135deg, var(--berry-dark, #6b0f4d) 0%, var(--berry, #8e1566) 100%);
  box-shadow: 0 10px 24px -18px rgba(107, 15, 77, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* the store's own phone inset as one value, so the panel's break-out equals it exactly; DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 H:
   that value is the shared page gutter (14px on phones), never an own number */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop > .container {
    --d-shop-pad: var(--page-gutter);
    padding-left: var(--d-shop-pad);
    padding-right: var(--d-shop-pad);
  }
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop-section > .d-catalog-all-heading > h2 {
  margin: 0;
  padding: 0;
  background: none;
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: break-word;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop-section > .d-catalog-all-heading > .d-catalog-all-sub {
  max-width: 68ch;
  color: #f6eaf3;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop-section > .d-catalog-all-heading > .d-catalog-all-count {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
@media (min-width: 721px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop-section > .d-catalog-all-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    margin-left: 0;
    margin-right: 0;
    padding: 30px 26px;
    border-radius: 16px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop-section > .d-catalog-all-heading > h2 {
    grid-column: 1;
    font-size: 36px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop-section > .d-catalog-all-heading > .d-catalog-all-sub {
    grid-column: 1;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop-section > .d-catalog-all-heading > .d-catalog-all-count {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
}
/* 4 card descriptions on the homepage (store, Popular picks, Order again): weight 400; names, prices, pills unchanged */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main [data-h1-home] :is(.d-prow-desc, .d-pcard-desc, .d-pcard2-desc) {
  font-weight: 400;
}
/* 5 guests: the card action row (hidden for guests site-wide by v3-c-card.css) shows on the homepage store only when the card
     rendered the opt-in "More info" (catalog-product-card.php / catalog-program-card.php `guest_more_info` → the row's own
     data-guest-more-info hook; no c-card selector here, that family belongs to v3-c-card.css) */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"][data-auth="out"] [data-h1-home] [data-guest-more-info] {
  display: flex;
}

/* DG-STOREFRONT-FINISH-CART-21 A6 (Mark) — one rhythm between the actual top sections (guest and signed-in alike): hero /
   account card ↔ sale ↔ combo ↔ register ↔ contact ↔ Popular picks / Order again, only where shown. One scoped token, 48px
   desktop / 36px phone, as the TOP space of each following section (no section adds bottom space of its own, so nothing
   doubles); the store keeps its larger 104 / 80px and the steps between groups their 80 / 64px. Copy, order and audiences
   unchanged. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-home] {
  --d-home-top-gap: 36px;
}
@media (min-width: 721px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-home] {
    --d-home-top-gap: 48px;
  }
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-home] > .d-account-card {
  padding-bottom: 0;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-home] > .d-saleline-wrap {
  margin-top: var(--d-home-top-gap);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-home] > :is(.d-combo-sec, .d-reg-section, .d-home-support, .d-home-pick) {
  padding-top: var(--d-home-top-gap);
}
/* A6 (Mark): phones — the combo lifestyle photo reaches the card's own edges, top included (the card's real inner padding,
   not a fixed -12px); top corners follow the card, the bottom edge is straight; the card stays container wide and the words
   and buttons keep their padding. */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-home] .d-combo {
    --d-combo-pad: 12px;
    padding: var(--d-combo-pad) var(--d-combo-pad) 18px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] [data-h1-home] .d-combo-shot {
    margin: calc(-1 * var(--d-combo-pad)) calc(-1 * var(--d-combo-pad)) 0;
    border-radius: 19px 19px 0 0; /* the card's 20px radius inside its 1px edge */
    box-shadow: none;
  }
}

/* DG-HOME-SHOP-GUIDE-ANCHORS-24 (Mark, approved "Rustige wegwijzer") — one quiet guide under the first pack heading of the home
   store, above its first card: a compact lavender panel, an icon tile with the existing grid icon, the title, one line and the
   one underlined action (a button only where a category UI exists; plain words otherwise). Home store only. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop .d-shop-guide {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid #d5c4dc;
  border-radius: 16px;
  background: #e9e0ed;
  box-shadow: 0 3px 10px rgba(54, 24, 60, 0.03);
  color: #39283f;
  font-size: 14px;
  line-height: 1.6;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop .d-shop-guide-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin-top: 2px;
  border-radius: 11px;
  background: #d8c7e1;
  color: #6e245f;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop .d-shop-guide-icon svg {
  width: 20px;
  height: 20px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop .d-shop-guide-text {
  min-width: 0;
  margin: 0;
  color: inherit;
  font-size: 14px;
  line-height: 1.6;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop .d-shop-guide-title {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop .d-shop-guide-mobile {
  display: none;
}
@media (max-width: 960px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop .d-shop-guide-mobile {
    display: inline;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop .d-shop-guide-desktop {
    display: none;
  }
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop :is(button, a).d-shop-guide-action {
  padding: 0;
  border: 0;
  background: transparent;
  color: #71135f;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #a56a9a;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-home-shop :is(button, a).d-shop-guide-action:focus-visible {
  outline: 2px solid #71135f;
  outline-offset: 2px;
  border-radius: 3px;
}

/* DG-CATEGORY-GUIDE-MOTION-24 (Mark) — the shop guide's action points at the category control with ONE soft 500 ms
   lavender pulse (class set and removed by v3-home-navigation.js): the whole strip on desktop (an overlay layer, so the strip's
   own shadow and the text / selected tab contrast stay), the products button on phone / tablet. Never hides, never repeats. */
@keyframes d-guide-pulse-strip {
  0%, 100% { background-color: var(--berry); }
  45% { background-color: #cceaff; }
}
@keyframes d-guide-pulse-strip-ink {
  0%, 100% { color: rgba(255, 255, 255, 0.94); }
  45% { color: #163c56; }
}
@keyframes d-guide-pulse-button {
  0% { box-shadow: 0 0 0 0 rgba(233, 224, 237, 0); background-color: rgba(255, 255, 255, 0.14); }
  45% { box-shadow: 0 0 0 4px rgba(233, 224, 237, 0.9); background-color: rgba(255, 255, 255, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(233, 224, 237, 0); background-color: rgba(255, 255, 255, 0.14); }
}
/* Mark24Oct direct: pulse the real desktop bar background, keeping links legible. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .cat-strip.is-guide-pulse {
  animation: d-guide-pulse-strip 500ms ease-out 1;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .cat-strip.is-guide-pulse a:not(.is-active),
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .cat-strip.is-guide-pulse a:not(.is-active) .ico.cat-ico {
  animation: d-guide-pulse-strip-ink 500ms ease-out 1;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #v3-cat-select .cat-select-btn.is-guide-pulse {
  animation: d-guide-pulse-button 500ms ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .cat-strip.is-guide-pulse,
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .cat-strip.is-guide-pulse a:not(.is-active),
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .cat-strip.is-guide-pulse a:not(.is-active) .ico.cat-ico,
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #v3-cat-select .cat-select-btn.is-guide-pulse {
    animation: none;
  }
}