/* =====================================================================
   DG-STOREFRONT-REPOSITIONING-MEGA-16 (Mark, 2026-10-16) — the chosen homepage A / revision 03 built for real, plus the
   catalogue / category / modal / PDP presentation points of the same round. One own file, loaded last (v3-main.php), so no
   shared stylesheet is rewritten. Existing type, palette and buttons; navy is the accent of the USP and account icons only.
   ===================================================================== */

body.v3-storefront[data-storefront="unified"] {
  --rp-navy: #1f3a5f;
  --rp-navy-soft: #e9eff7;
  --rp-card-shadow: 0 12px 30px -20px rgba(20, 42, 23, 0.45), 0 2px 6px -3px rgba(20, 42, 23, 0.12);
}

/* --- homepage section rhythm: the shop's one shared gap above every new top-level section (51A rule) --- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] main > .d-goals,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] main > .d-goalcards,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] main > .d-f1intro-sec {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--d-section-gap);
  padding-bottom: 0;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] main > .d-account-card {
  margin: 0;
  padding-top: 26px;
  padding-bottom: 0;
}

/* --- hero USPs: local Phosphor Fill, navy on a soft tint, one size for all four --- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .trust.d-trust .trust-ico.is-ph {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--rp-navy-soft);
  color: var(--rp-navy);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .trust.d-trust .trust-ico.is-ph .ph-ico {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--rp-navy);
}

/* --- "Shop by goal" (guests): four equal photo tiles --- */
body.v3-storefront[data-storefront="unified"] .d-goals-lede {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--d-c-ink-2, #3c4740);
}
body.v3-storefront[data-storefront="unified"] .d-goals-all {
  margin-left: 6px;
  color: var(--green-dark);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
body.v3-storefront[data-storefront="unified"] .d-goals-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
body.v3-storefront[data-storefront="unified"] .d-goal-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--rp-card-shadow);
  isolation: isolate;
}
body.v3-storefront[data-storefront="unified"] .d-goal-photo {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #dfe4da;
}
body.v3-storefront[data-storefront="unified"] .d-goal-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
body.v3-storefront[data-storefront="unified"] .d-goal-photo.is-top-right img {
  object-position: right top;
}
body.v3-storefront[data-storefront="unified"] .d-goal-tile:hover .d-goal-photo img {
  transform: scale(1.04);
}
body.v3-storefront[data-storefront="unified"] .d-goal-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 18px 18px;
}
body.v3-storefront[data-storefront="unified"] .d-goal-name,
body.v3-storefront[data-storefront="unified"] .d-goalcard-name {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body.v3-storefront[data-storefront="unified"] .d-goal-desc,
body.v3-storefront[data-storefront="unified"] .d-goalcard-desc {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--d-c-ink-2, #3c4740);
}
body.v3-storefront[data-storefront="unified"] .d-goal-go {
  margin-top: auto;
  padding-top: 12px;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 700;
}

/* --- "New to Herbalife?" (guests) and the Formula 1 intro (0 orders): Mark's copy and the two actions --- */
body.v3-storefront[data-storefront="unified"] .d-explain strong {
  color: var(--ink);
  font-weight: 700;
}
body.v3-storefront[data-storefront="unified"] .d-acts2 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
body.v3-storefront[data-storefront="unified"] .d-acts2 .btn {
  white-space: nowrap;
}
body.v3-storefront[data-storefront="unified"] .btn.btn-outline-green {
  border: 1.5px solid var(--green-dark);
  background: #fff;
  color: var(--green-dark);
  box-shadow: none;
}
body.v3-storefront[data-storefront="unified"] .btn.btn-outline-green:hover {
  background: var(--green-softer, #f1f9ec);
}
body.v3-storefront[data-storefront="unified"] .d-intro .d-intro-media > img {
  transform: none;
  object-position: 50% 30%;
}
body.v3-storefront[data-storefront="unified"] .d-f1intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 40px;
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--rp-card-shadow);
}
/* ACCOUNT CARD A addendum (Mark): signed in only (server-rendered body[data-auth="in"]), the Formula 1 intro card is berry-soft;
   guests keep the white card. */
body.v3-storefront[data-storefront="unified"][data-auth="in"] .d-f1intro {
  background: var(--berry-soft, #f9e3f1);
}
body.v3-storefront[data-storefront="unified"] .d-f1intro-shot {
  overflow: hidden;
  height: 320px;
  border-radius: 16px;
}
body.v3-storefront[data-storefront="unified"] .d-f1intro-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: scale(1.2);
}
body.v3-storefront[data-storefront="unified"] .d-f1intro-copy h2 {
  margin: 0;
}
body.v3-storefront[data-storefront="unified"] .d-f1intro-copy .d-explain {
  max-width: 46ch;
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--d-c-ink-2, #3c4740);
}
body.v3-storefront[data-storefront="unified"] .d-nowrap {
  white-space: nowrap;
}

/* --- "Or choose by goal" (0 orders): category cards with one full-width three-product strip --- */
body.v3-storefront[data-storefront="unified"] .d-goalcards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
body.v3-storefront[data-storefront="unified"] .d-goalcard {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--line, #e4e7dd);
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
}
/* CORRECTIONS01 (Mark): the strip keeps the full width (three equal columns incl. the gaps), each product in its own light
   tile with a fine border; the shared ground is transparent. */
body.v3-storefront[data-storefront="unified"] .d-pstrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 16px 0 4px;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
}
body.v3-storefront[data-storefront="unified"] .d-pstrip > span {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line, #e4e7dd);
  border-radius: 12px;
  background: #f7f8f4;
}
/* contain + multiply: the packshots' own white margin melts into the strip. No scale: the samples are any product of the
   category, so nothing may be enlarged past an unknown built-in margin (never cropped, never stretched). */
body.v3-storefront[data-storefront="unified"] .d-pstrip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* --- first packs (0 orders). DG-HOME-GOALS-PACKS-WELCOME-16 (Mark): all four registered packs, 4 equal cards per row on
   desktop, 2 x 2 below 1081px; no special third card. --- */
body.v3-storefront[data-storefront="unified"] .d-firstpacks-lede {
  margin: 6px 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--d-c-ink-2, #3c4740);
}
body.v3-storefront[data-storefront="unified"] .d-catalog.d-catalog--first-packs[data-density="compact"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1080px) {
  body.v3-storefront[data-storefront="unified"] .d-catalog.d-catalog--first-packs[data-density="compact"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- the account card (1 / 2+ / unknown; the compact welcome for 0 orders) ---
   DG-HOW-DESIGN-STOREFRONT-POLISH-17 ACCOUNT CARD A (Mark, chosen direction "Forest green"): replaces the light green card. A calm
   forest-green gradient card; the greeting in white on it; HerbaPoints and the latest order as off-white panels (desktop: three
   areas side by side; tablet: greeting above two panels; phone: everything stacked). Only the homepage account card
   (.d-account-card) is styled here; the data, panels and states come unchanged from account-card.php. */
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.2fr);
  align-items: center;
  gap: 24px;
  padding: 26px 28px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(128deg, #173f2c 0%, #2e623e 100%);
  box-shadow: var(--rp-card-shadow);
  color: #fff;
}
body.v3-storefront[data-storefront="unified"] .d-account-card.is-welcome .ac-card {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #3f8a55;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-h1 {
  margin: 0;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-line {
  margin: 4px 0 0;
  color: #d3ecc6;
  font-size: 17px;
  line-height: 1.4;
}
/* the off-white panels and the Starter Kit card */
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-panels {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  align-items: stretch;
  gap: 16px;
}
body.v3-storefront[data-storefront="unified"] .d-account-card :is(.ac-panel, .ac-kit) {
  min-width: 0;
  border: 1px solid #d6e9cc;
  border-radius: 18px;
  background: #fcfef9;
  color: #173f2c;
  box-shadow: inset 0 3px 9px rgba(23, 63, 44, 0.12), inset 0 1px 3px rgba(23, 63, 44, 0.08);
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}
/* desktop three areas: the points icon above its count, as in A */
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-panels > .ac-panel.ac-credit {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 12px;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #173f2c;
  color: #fff;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-ico .ph-ico {
  display: block;
  width: 24px;
  height: 24px;
  color: inherit;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-order .ac-ico {
  background: #e3f1db;
  color: #1f6a1a;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-txt {
  min-width: 0;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-lbl {
  display: block;
  color: #173f2c;
  font-size: 15px;
  font-weight: 700;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-val {
  display: block;
  margin-top: 2px;
  color: #173f2c;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
/* DG-HOW-DESIGN-STOREFRONT-POLISH-17 — the HerbaPoints panel: the points count is the value; its money worth is a small line. */
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-worth {
  display: block;
  margin-top: 3px;
  color: #4a5a4f;
  font-size: 14px;
  line-height: 1.35;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-na {
  display: block;
  margin-top: 4px;
  color: #3c4740;
  font-size: 15px;
  font-weight: 600;
}
/* DG-V0-UX-QUICKWINS-28-FINAL-2-6 — the one HerbaPoints policy note: a small quiet line under the points / worth. */
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-policy {
  display: block;
  margin-top: 6px;
  color: #4a5a4f;
  font-size: 13px;
  line-height: 1.4;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-ordline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 2px;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-ordno {
  color: #173f2c;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
/* the status keeps its own meaning: only Sent is the pale green; paid / processing calm blue; cancelled red; others neutral */
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-badge {
  padding: 3px 10px;
  border: 1px solid #d9ddd3;
  border-radius: 999px;
  background: #eef1ea;
  color: #3c4740;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-badge[data-status="sent"] {
  border-color: #c3e3b1;
  background: #dff2d3;
  color: #1f5f1a;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-badge:is([data-status="paid"], [data-status="processing"]) {
  border-color: #cddcee;
  background: #e8eff8;
  color: #1f3f66;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-badge[data-status="cancelled"] {
  border-color: #f1cccc;
  background: #fbeaea;
  color: #8a1c1c;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-acts {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--berry);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-btn:hover {
  background: var(--berry-dark, #6e0f4f);
  color: #fff;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-quiet {
  align-self: center;
  color: #173f2c;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
/* a focus ring that shows on the white panels and on the green card alike (dark outer ring, white inner ring) */
body.v3-storefront[data-storefront="unified"] .d-account-card a:focus-visible {
  outline: 3px solid #173f2c;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
/* the Starter Kit (0 orders, delivered eligibility only): the real kit artwork beside its copy */
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-kit {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px 20px 14px 14px;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-kit img {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-kit b {
  display: block;
  color: #173f2c;
  font-size: 20px;
  font-weight: 800;
}
body.v3-storefront[data-storefront="unified"] .d-account-card .ac-kit span {
  display: block;
  margin-top: 4px;
  color: #3c4740;
  font-size: 15px;
  line-height: 1.45;
}
@media (max-width: 1100px) {
  /* tablet: the greeting in a row above the panels (a clean break before the order and its button get squeezed) */
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-card,
  body.v3-storefront[data-storefront="unified"] .d-account-card.is-welcome .ac-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-who {
    flex-direction: row;
    align-items: center;
  }
}
@media (max-width: 720px) {
  /* phones: greeting, then HerbaPoints, then the latest order, each panel full width */
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-card,
  body.v3-storefront[data-storefront="unified"] .d-account-card.is-welcome .ac-card {
    padding: 18px;
    gap: 14px;
    border-radius: 20px;
  }
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-avatar {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-h1 {
    font-size: 24px;
  }
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-line {
    margin-top: 2px;
    font-size: 16px;
  }
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-panels {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-panels > .ac-panel.ac-credit {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
  }
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-panel {
    padding: 16px;
  }
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-ico {
    width: 44px;
    height: 44px;
  }
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-val {
    font-size: 26px;
  }
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-ordno {
    font-size: 20px;
  }
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-kit {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    padding: 12px 14px 12px 12px;
  }
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-kit img {
    width: 76px;
    height: 76px;
  }
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-kit b {
    font-size: 18px;
  }
}
@media (max-width: 360px) {
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-card,
  body.v3-storefront[data-storefront="unified"] .d-account-card.is-welcome .ac-card {
    padding: 14px;
  }
  body.v3-storefront[data-storefront="unified"] .d-account-card .ac-panel {
    padding: 14px;
  }
}

/* --- 1 / 2+ / unknown: the goals as one quiet secondary line --- */
body.v3-storefront[data-storefront="unified"] .d-goals-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding-top: 24px;
  color: var(--d-c-ink-2, #3c4740);
  font-size: 14.5px;
}
body.v3-storefront[data-storefront="unified"] .d-goals-line a {
  padding: 6px 12px;
  border: 1px solid var(--line, #e4e7dd);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

/* =====================================================================
   B — catalogue / category
   ===================================================================== */

/* page=catalog range cards: the three sample products share the card's full width, about a third each, whole (contain) */
body.v3-storefront[data-storefront="unified"] .cat-card .cc-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
}
/* CORRECTIONS01 (Mark): each product its own light tile with a fine border (no single shared colour field) */
body.v3-storefront[data-storefront="unified"] .cat-card .cc-thumb {
  display: block;
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line, #e4e7dd);
  border-radius: 12px;
  background: #f7f8f4;
  overflow: hidden;
}
body.v3-storefront[data-storefront="unified"] .cat-card .cc-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* the product flavour dropdown's 1.5px / 2.4px edge lives in its component owner v3-c-pdp-buy.css (one owner per family).
   CORRECTIONS01 (Mark): in a category product row the dropdown is wide but bounded (max 420px); on phones it keeps the full
   card width. Only the category row's proxy container; Quick View, product page and every other form are unchanged. */
body.v3-storefront[data-storefront="unified"] .d-catalog.is-category .d-prow-flavours > .d-variant-select {
  width: 100%;
  max-width: 320px;
}

/* back from a product page to its card (V2 30 return helper, #product-N anchor): the card is not hidden under the sticky
   header + category bar */
body.v3-storefront[data-storefront="unified"] .d-catalog [id^="product-"] {
  scroll-margin-top: calc(var(--chrome-top, 72px) + var(--catbar-h, 54px) + 16px);
}

/* the desktop category strip: at least 54px tall, labels centred (the phone dropdown is unchanged) */
@media (min-width: 721px) {
  body.v3-storefront[data-storefront="unified"] .cat-strip .container {
    min-height: 54px;
  }
}

/* =====================================================================
   C — top bar: no late icon pop-in, no phone dock jump
   ===================================================================== */
/* phones only: while the dock placer has not run yet (html.v3-dock-pending, set in the head), the top bar is not painted
   in its server arrangement (icon-only Sign in, cart, search and logo jumping into the berry dock); it appears once, in
   place. The space is kept (visibility), so nothing below moves. */
@media (max-width: 720px) {
  html.v3-dock-pending body.v3-storefront[data-storefront="unified"] #site-header,
  html.v3-dock-pending body.v3-storefront[data-storefront="unified"] #site-header *,
  html.v3-dock-pending body.v3-storefront[data-storefront="unified"] #v3-cat-select,
  html.v3-dock-pending body.v3-storefront[data-storefront="unified"] #v3-cat-select * {
    visibility: hidden;
  }
}

@media (max-width: 960px) {
  body.v3-storefront[data-storefront="unified"] .d-goals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
    body.v3-storefront[data-storefront="unified"][data-v3-page="home"] main > .d-account-card {
    padding-top: 16px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .trust.d-trust .trust-ico.is-ph {
    width: 40px;
    height: 40px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .trust.d-trust .trust-ico.is-ph .ph-ico {
    width: 24px;
    height: 24px;
  }
  body.v3-storefront[data-storefront="unified"] .d-goals-all {
    display: inline-block;
    margin: 6px 0 0;
  }
  body.v3-storefront[data-storefront="unified"] .d-goals-grid {
    gap: 12px;
  }
  body.v3-storefront[data-storefront="unified"] .d-goal-copy {
    padding: 12px 12px 14px;
  }
  body.v3-storefront[data-storefront="unified"] .d-goal-desc {
    font-size: 13px;
  }
  body.v3-storefront[data-storefront="unified"] .d-acts2 {
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
  }
  body.v3-storefront[data-storefront="unified"] .d-acts2 .btn {
    justify-content: center;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  body.v3-storefront[data-storefront="unified"] .d-f1intro {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 12px 12px 18px;
  }
  body.v3-storefront[data-storefront="unified"] .d-f1intro-shot {
    height: 280px;
  }
  body.v3-storefront[data-storefront="unified"] .d-f1intro-copy {
    padding: 0 6px;
  }
  body.v3-storefront[data-storefront="unified"] .d-f1intro-copy .d-explain {
    font-size: 16px;
  }
  body.v3-storefront[data-storefront="unified"] .d-goalcards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.v3-storefront[data-storefront="unified"] .d-goalcard {
    padding: 16px;
  }
  body.v3-storefront[data-storefront="unified"] .d-pstrip {
    margin: 12px 0 2px;
  }
  body.v3-storefront[data-storefront="unified"] .d-catalog.d-catalog--first-packs[data-density="compact"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* the head stacks: title + description, then "See all packs" on its own line (no wrapped link beside the text) */
  body.v3-storefront[data-storefront="unified"] .d-firstpacks .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body.v3-storefront[data-storefront="unified"] .d-firstpacks .section-head .d-best-all {
    white-space: nowrap;
  }
}

/* DG-STOREFRONT-REPOSITIONING-MEGA-16 CORRECTIONS01 — Weight guide "Move more, your way" (V2 10 copybook): the three
   cards reuse the guide's snack-card list style, three across from tablet up (the snack grid is four / two across);
   phones keep the guide's one-column list. */
@media (min-width: 721px) {
  body.v3-storefront[data-v3-page="info"] .d-how-weight-r2 .d-wr2-move-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
body.v3-storefront[data-v3-page="info"] .d-wr2-move-guidance {
  margin: 22px 0 0;
}
body.v3-storefront[data-v3-page="info"] .d-wr2-move-note {
  margin: 8px 0 0;
  color: var(--muted, #566159);
  font-size: 14.5px;
  line-height: 1.5;
}
body.v3-storefront[data-v3-page="info"] .d-wr2-move-link {
  margin: 14px 0 0;
}

/* DG-CATALOG-ROLEPILLS-DISPLAY-16 FIX01 — the product Quick View's role word under the title / variant line (the card's d-rolepill look). */
body.v3-storefront[data-storefront="unified"] .d-qv-role {
  margin: 8px 0 0;
}
body.v3-storefront[data-storefront="unified"] .d-qv-role[hidden] {
  display: none;
}

/* DG-HOW-DESIGN-STOREFRONT-POLISH-17 (Mark) — the product flavour dropdown (category rows, product page and Quick View on
   narrow screens) is the shop's own .flavour-select (v3-flavour-select.js enhances the radio group's proxy) with the pack
   dropdown's state colours: a required choice still open = amber, chosen = green, error = red at 2.4px (the padding absorbs
   the edge, so nothing shifts). The 420px category cap stays. */
body.v3-storefront[data-storefront="unified"] .d-variant-select .flavour-select {
  width: 100%;
  min-width: 0;
}
body.v3-storefront[data-storefront="unified"] .d-variant-select .fs-btn {
  min-height: 44px;
  padding: 10px 10px;
  border-width: 1.5px;
  border-radius: 12px;
}
body.v3-storefront[data-storefront="unified"] .d-variant[data-flavour-required="1"] .d-variant-select .fs-btn.is-placeholder {
  border-color: var(--d-status-wait);
}
body.v3-storefront[data-storefront="unified"] .d-variant[data-flavour-required="1"] .d-variant-select .fs-btn:not(.is-placeholder) {
  border-color: var(--d-status-ok);
}
body.v3-storefront[data-storefront="unified"] .d-variant[data-flavour-invalid="1"] .d-variant-select .fs-btn,
body.v3-storefront[data-storefront="unified"] .d-variant[data-flavour-invalid="1"] .d-variant-select .fs-btn.is-placeholder {
  padding: 8.6px 12.6px;
  border-width: 2.4px;
  border-color: var(--d-c-error);
}

/* =====================================================================
   DG-STOREFRONT-MICRO-POLISH-ADDENDUM-17 (Mark, 17 Oct) — searchbar / header, eyebrow and role pills, category cards,
   #register, footer USP icons, drawer account, #trust, public H2 weight, #routine buttons. The 0.95 phone zoom is gone
   (v3-mobile-compact.css), so every size below is the real on-screen size.
   ===================================================================== */
:root {
  --searchbar-h: 72px; /* the 56px field (+10px) in its band; the phone fold and the sticky offsets follow */
}

/* --- searchbar: berry band and field, 16px text, the controls on the taller field --- */
body.v3-storefront[data-storefront="unified"] .searchbar {
  background: var(--berry);
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
/* DG-STOREFRONT-FINISH-CART-21 B1 (Mark): the field is a lighter purple inside the berry band (as the category dropdown),
   with a modest inner depth and no outer ring / second border; a keyboard focus gets one calm inner ring. */
body.v3-storefront[data-storefront="unified"] .searchbar form {
  height: 56px;
  border: 0;
  background: #a0478d;
  box-shadow: inset 0 2px 6px rgba(52, 10, 43, 0.2);
}
body.v3-storefront[data-storefront="unified"] .searchbar form:focus-within {
  border-color: transparent;
  box-shadow: inset 0 2px 6px rgba(52, 10, 43, 0.2);
}
body.v3-storefront[data-storefront="unified"] .searchbar form:has(:focus-visible) {
  box-shadow: inset 0 2px 6px rgba(52, 10, 43, 0.2), inset 0 0 0 2px #fff;
}
/* B1: the live list opens just below the whole field (its lower edge stays visible), not on top of it */
body.v3-storefront[data-storefront="unified"] .search-wrap > .search-results {
  top: calc(100% + 6px);
}
body.v3-storefront[data-storefront="unified"] .searchbar form #v3-site-search:focus,
body.v3-storefront[data-storefront="unified"] .searchbar form #v3-site-search:focus-visible {
  outline: none;
}
body.v3-storefront[data-storefront="unified"] .searchbar form > .ico,
body.v3-storefront[data-storefront="unified"] .searchbar form > [data-ico="search"],
body.v3-storefront[data-storefront="unified"] .searchbar form > [data-ico="search"] .ico,
body.v3-storefront[data-storefront="unified"] .searchbar .search-clear .ico {
  color: #fff;
}
body.v3-storefront[data-storefront="unified"] #v3-site-search {
  font-size: 16px;
  color: #fff;
  caret-color: #fff;
}
body.v3-storefront[data-storefront="unified"] #v3-site-search::placeholder {
  color: rgba(255, 255, 255, 0.9);
  opacity: 1;
}
body.v3-storefront[data-storefront="unified"] .search-wrap .searchbar-submit {
  width: 44px;
  height: 44px;
  background: #fff;
  color: var(--berry);
}
body.v3-storefront[data-storefront="unified"] .search-wrap .searchbar-submit:hover {
  background: #f8e9f2;
}
body.v3-storefront[data-storefront="unified"] .search-wrap .searchbar-submit .ico {
  color: var(--berry);
}
body.v3-storefront[data-storefront="unified"] .searchbar .search-clear {
  width: 44px;
  height: 44px;
  color: #fff;
}
body.v3-storefront[data-storefront="unified"] .searchbar .search-clear:hover {
  background: rgba(255, 255, 255, 0.16);
  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: 0;
    box-shadow: 0 10px 18px -12px rgba(46, 6, 32, 0.55);
  }
  /* B1 (Mark): the open phone band reserved 62px (v3-storefront.css, html.v3-search-open) for a 72px field row (56px field
     + its 6px margins + the 2px container padding), so the field's lower edge fell under the band / the results. The band
     keeps the field's own height; the sticky offsets follow through --searchbar-h. */
  html.v3-search-open,
  html.v3-search-closing {
    --searchbar-h: 72px;
  }
}

/* --- cart button: a little larger, a little more room on the right; the hit area stays --- */
/* DG-MINICART-DETAIL-OPEN-23 (Mark): the button sits 4px lower in the header row (margin-bottom: -4px) */
body.v3-storefront[data-storefront="unified"] .cart-btn {
  width: 52px;
  height: 52px;
  margin-right: 8px;
  margin-bottom: -4px;
}
body.v3-storefront[data-storefront="unified"] .cart-btn > [data-ico="cart"] svg,
body.v3-storefront[data-storefront="unified"] .cart-btn > [data-ico="cart"] .ico {
  width: 32px;
  height: 32px;
}
/* DG-MOBILE-CATEGORY-BAR-70-18 — the phone berry dock (≤720px, html.v3-berry-dock only; desktop / tablet untouched).
   A 70px bar with 50px controls (10px above and below), a 44 x 50 search, a 48 x 48 cart without zoom, and one cart
   geometry for both anchors: the cart's size, right inset and gap are three variables, and the docked actions slot is
   computed from the same three, so the search hit area always ends --bh-cart-gap (8px) before the cart.
   Supersedes the POLISH-17 phone cart (zoom 1.1, the "/ 1.1 + 1px" lift, the docked "+ 3.5px") and the 38px cart with
   its ::after ring from the design overrides. --catbar-h, the cart lift, the reopened search and the category menu all
   follow --bh-dock-h through var(); v3-nav.js and v3-anchor-scroll.js measure the real bar. */
@media (max-width: 720px) {
  html.v3-berry-dock {
    --bh-dock-h: 70px;
    --bh-ctl-h: 50px;
    --bh-dock-pad: 8px;
    --bh-cart: 48px;
    --bh-cart-inset: 12px;
    --bh-cart-gap: 8px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select > .container {
    padding: 0 var(--bh-dock-pad);
  }
  /* Menu: the white tile, 50px tall. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .hamburger {
    height: var(--bh-ctl-h);
    min-height: var(--bh-ctl-h);
    min-width: 80px;
    gap: 5px;
    padding: 0 10px 0 8px;
    border-radius: 12px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .hamburger .ico {
    width: 24px;
    height: 24px;
  }
  /* Category: the translucent berry tile takes the remaining width. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .cat-select-btn {
    height: var(--bh-ctl-h);
    min-height: var(--bh-ctl-h);
    margin: 0 3px;
    padding: 0 10px 0 12px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .cat-select-btn .csb-label {
    gap: 8px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .cat-select-btn .csb-label > .ico {
    width: 24px;
    height: 24px;
  }
  /* Search (and the signed-in account toggle beside it at the top): 44 x 50, a 28px glyph. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions #v3-open-search,
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .acct-toggle {
    width: 44px;
    min-width: 44px;
    height: var(--bh-ctl-h);
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions #v3-open-search .ico {
    width: 28px;
    height: 28px;
  }
  /* Docked: the cart's slot = inset + cart + gap (minus the row padding the actions group already stands in). */
  html.v3-berry-dock.v3-dock-docked body.v3-storefront[data-storefront="unified"] .v3-dock-actions,
  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-cart-inset) + var(--bh-cart) + var(--bh-cart-gap) - var(--bh-dock-pad));
  }
  /* The one cart: 48 x 48, no zoom, centred in the bar. At the top the lift carries it into the 64px brand row, 2px
     below centre so its top lines up with Sign in (10px) and the count badge keeps 3px above it; the pop keyframes
     read the same variable, so the jump starts and lands on these two anchors. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn {
    --bh-cart-lift: calc(-0.5 * (var(--bh-brand-h) + var(--bh-dock-h)) + 2px);
    top: calc(50% - var(--bh-cart) / 2);
    right: var(--bh-cart-inset);
    width: var(--bh-cart);
    height: var(--bh-cart);
    min-width: var(--bh-cart);
    margin-right: 0;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn::after {
    inset: 0;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-btn .ico {
    width: 26px;
    height: 26px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] .v3-dock-actions .cart-count {
    top: -7px;
  }
  /* Guest at the top: Sign in sits left of the lifted cart with the same gap. */
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .v3-dock-actions .d-signin {
    right: calc(var(--bh-cart-inset) + var(--bh-cart) + var(--bh-cart-gap) - 4px);
  }
}
/* The narrowest phones: a little less padding and gap, no category icon (already), every control stays. */
@media (max-width: 360px) {
  html.v3-berry-dock {
    --bh-dock-pad: 6px;
    --bh-cart-inset: 10px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .hamburger {
    min-width: 72px;
    gap: 4px;
    padding: 0 7px 0 5px;
  }
  html.v3-berry-dock body.v3-storefront[data-storefront="unified"] #v3-cat-select .cat-select-btn {
    margin: 0 1px;
    padding: 0 6px 0 8px;
    gap: 4px;
  }
}

/* --- eyebrows and role pills: one pill, dark green with white text (functional status / sale / stock labels are not
   touched); on the green #register band the pill is white with green text. Eyebrows 14px / 700.
   DG-ROLEPILL-PDP-PRESENTATION-18 (Mark): the product / pack ROLE pills (listing cards, category rows and the product
   Quick View, the same .d-rolepill component) are 12px / 500 / padding 3px 10px on every width (Mark 20 Oct), and (COLOR ADDENDUM, Mark
   18 Oct) soft berry #eee1ee with berry-dark text instead of green / white (rule below). --- */
body.v3-storefront[data-storefront="unified"] .d-best-eyebrow,
body.v3-storefront[data-storefront="unified"] .d-pcard-cat.d-rolepill,
body.v3-storefront[data-storefront="unified"] .d-qv-role .d-rolepill {
  display: inline-block;
  width: auto;
  max-width: 100%;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--green-dark, #1f6a1a);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
body.v3-storefront[data-storefront="unified"] .d-pcard-cat.d-rolepill,
body.v3-storefront[data-storefront="unified"] .d-qv-role .d-rolepill {
  padding: 3px 10px;
  border: 0;
  background: #eee1ee;
  color: var(--berry-dark, #6b0f4d);
  font-size: 12px;
  font-weight: 500; /* DG-DETAIL-CART-MOTION-26 (Mark): 500 again (was 600) */
}
/* the homepage section eyebrows (same specificity as their shared #main rule, later file: wins; `display` is left to that
   rule, so the eyebrows it hides on phones stay hidden) */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main :is(.d-best-eyebrow, .d-ways-eyebrow, .d-meet-eyebrow) {
  width: fit-content;
  max-width: 100%;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--green-dark, #1f6a1a);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #register .d-reg-eyebrow {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--green-dark, #1f6a1a);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}

/* --- homepage goal tiles: the short line on phones --- */
body.v3-storefront[data-storefront="unified"] .d-goal-desc-short {
  display: none;
}
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-goal-desc-long {
    display: none;
  }
  body.v3-storefront[data-storefront="unified"] .d-goal-desc-short {
    display: inline;
  }
}

/* --- catalogue "Not sure where to start?" strip: a calmer, slightly darker green surface, compact on phones --- */
body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] .d-catalog-howstrip {
  background: #e4efdd;
  border-color: rgba(31, 74, 27, 0.16);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] .d-catalog-howstrip-ico {
  background: #fff;
}
@media (max-width: 560px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] .d-catalog-howstrip {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 2px 12px;
    padding: 12px 14px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] .d-catalog-howstrip-ico {
    grid-row: 1 / span 2;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="catalog"] .d-catalog-howstrip-link {
    min-height: 32px;
    margin-left: 0;
    font-size: 15px;
  }
}

/* --- category rows on phones: role / category spacing; product titles inherit the base type size --- */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-prow > .d-prow-info > :is(.d-pcard-cat, .d-pcard-role) {
    margin: 0 0 4px;
  }
  }

/* --- category pack banner copy: every text one pixel larger than its own size --- */
body.v3-storefront[data-storefront="unified"] .d-cpb .d-cpb-copy .d-cpb-eyebrow {
  font-size: 12px;
}
body.v3-storefront[data-storefront="unified"] .d-cpb .d-cpb-copy .d-cpb-title {
  font-size: 17px;
}
body.v3-storefront[data-storefront="unified"] .d-cpb .d-cpb-copy .d-cpb-text {
  font-size: 14.5px;
  line-height: 1.45;
}
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .d-cpb .d-cpb-copy .d-cpb-title {
    font-size: 16px;
  }
}

/* --- footer USPs: the USP bar's own Phosphor Fill icons in the footer tile --- */
body.v3-storefront[data-storefront="unified"] .foot-reassure li > .foot-ico.is-ph {
  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 li > .foot-ico.is-ph .ph-ico {
  display: block;
  width: 22px;
  height: 22px;
  color: #bfe6a6;
}

/* --- mobile menu account tiles: a 2px, slightly darker edge --- */
body.v3-storefront[data-storefront="unified"] .drawer-account a {
  border: 2px solid #cdd3c6;
}

/* --- the homepage USP bar (#trust): larger, easier to read --- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #trust .trust-item b {
  font-size: 16px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #trust .trust-item div > span {
  font-size: 14px;
  line-height: 1.4;
}
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #trust .trust-item b {
    font-size: 15px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #trust .trust-item div > span {
    font-size: 13.5px;
  }
}

/* --- public H2s at 800 (cart / checkout / payment pages and every dialog keep their own weight) --- */
body.v3-storefront[data-storefront="unified"]:not([data-v3-page="cart"], [data-v3-page="checkout"], [data-v3-page="payment"]) #main h2:not(:is([role="dialog"], .modal, .modal-overlay, .minicart) h2) {
  font-weight: 800;
}

/* --- #routine actions: the size of the shop's other large buttons --- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #routine .d-acts2 .btn {
  min-height: 48px;
  padding: 13px 28px;
}
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #routine .d-acts2 .btn {
    min-height: 46px;
    padding: 12px 16px;
  }
}


/* --- DG-STOREFRONT-MICRO-POLISH-ADDENDUM-17 (Mark, follow-up): heavier type in the minicart, cart lines, Starter Kit,
   cart summary and form labels. Same selectors as their owners in v3-design-overrides.css / v3-cart.css; this file
   loads after both, so only the weight changes. --- */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prices .d-mc-price {
  font-weight: 700;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-title b {
  font-weight: 800;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-name {
  font-weight: 700;
}
body.v3-storefront[data-storefront="unified"] .d-cline-name {
  font-weight: 700;
}
body.v3-storefront[data-storefront="unified"] .d-cline-total {
  font-weight: 700;
}
body.v3-storefront[data-storefront="unified"] .d-skit-name {
  font-weight: 800;
}
body.v3-storefront[data-storefront="unified"] .d-csum-title {
  font-weight: 800;
}
.vip-credits-copy b {
  font-weight: 700;
}
body.v3-storefront[data-storefront="unified"] .d-csum-ship {
  font-weight: 600;
}
body.v3-storefront[data-storefront="unified"] .field-group label.d-field-label {
  font-weight: 700;
}

/* DG-HOW-DESIGN-STOREFRONT-POLISH-17 (Mark, homepage follow-up) — the signed-in sale banner's celebration tagline under its
   headline (the headline keeps its own margin rule in homepage-launch-banner.css). */
body.v3-storefront[data-storefront="unified"] .lhb-sale-section .lhb-sale-headline:has(+ .lhb-sale-tagline) {
  margin-bottom: 6px;
}
body.v3-storefront[data-storefront="unified"] .lhb-sale-section .lhb-sale-tagline {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

/* Mark 17 Oct: approved neutral drawer with berry accents; existing structure and behaviour retained. */
body.v3-storefront[data-storefront="unified"] #v3-drawer-overlay {
  background: rgba(24, 25, 27, .58);
}
body.v3-storefront[data-storefront="unified"] #v3-drawer {
  background: #f8f9f7;
}
/* DG-HOME-JOURNEY-LOGGING-21 UI (Mark): the closed drawer sits off-screen (translateX(-100%)) and casts no shadow onto the
   page edge; the existing shadow belongs to the open drawer only. */
body.v3-storefront[data-storefront="unified"] #v3-drawer.open {
  box-shadow: 12px 0 32px rgba(22, 19, 24, .18);
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-head {
  background: linear-gradient(125deg, #68104f, var(--berry, #8e1566));
  border-bottom-color: transparent;
  color: #fff;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-head > b {
  font-size: 20px;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer #v3-close-drawer {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .7);
  color: #4e123e;
  border-radius: 12px;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-body {
  background: #f8f9f7;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-section-label {
  color: #48504b;
  font-size: 12px;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer :is(.drawer-primary, .drawer-account) > a {
  background: #fff;
  border-color: #dce1dc;
  color: #222922;
  box-shadow: inset 0 1px 2px rgba(28, 26, 30, .025);
  text-decoration: none;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-primary > a {
  padding: 10px 12px;
  min-height: 56px;
  font-size: 15px;
  gap: 12px;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-primary > a::after {
  content: "\203A";
  margin-left: auto;
  color: #4e123e;
  font-size: 23px;
  line-height: 1;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer :is(.drawer-primary, .drawer-account) > a > [data-ico] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  margin: 0;
  border-radius: 10px;
  background: #f0f2ef;
  color: #68104f;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer :is(.drawer-primary, .drawer-account) > a > [data-ico] .ico {
  width: 22px;
  height: 22px;
  margin: 0;
  color: inherit;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-account > a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 3px;
  padding: 11px 10px;
  align-content: center;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-account > a > [data-ico] {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  align-self: start;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-account > a > b {
  grid-column: 2;
  font-size: 13px;
  line-height: 1.35;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-account > a > span:not([data-ico]) {
  grid-column: 2;
  color: #68716b;
  font-size: 12px;
  line-height: 1.35;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-primary + .drawer-section-label {
  border-top: 1px solid #dce1dc;
  padding-top: 16px;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-acct-card {
  background: linear-gradient(125deg, #68104f, var(--berry, #8e1566));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(78, 18, 62, .12);
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-acct-who span {
  color: #f2e3ed;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-acct-card .acct-avatar {
  background: #f6edf3;
  color: #68104f;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-acct-points {
  background: #fff;
  color: #4e123e;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-acct-points .ico {
  color: inherit;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-closeout {
  background: #fff;
  border-top-color: #dce1dc;
  box-shadow: 0 -3px 12px rgba(28, 26, 30, .04);
}
body.v3-storefront[data-storefront="unified"] #v3-drawer .drawer-closeout-title {
  color: #222922;
  font-size: 14px;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer :is(.drawer-primary, .drawer-account) > a:is(:hover, :focus-visible) {
  background: #fbf8fa;
  border-color: #a47596;
  color: #4e123e;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer :is(.drawer-primary a, .drawer-account a, .drawer-acct-card, #v3-close-drawer):focus-visible {
  outline: 3px solid #68104f;
  outline-offset: 2px;
}
body.v3-storefront[data-storefront="unified"] #v3-drawer :is(.drawer-acct-card, #v3-close-drawer):focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px #68104f;
}

/* --- DG-FLAVOUR-DROPDOWN-THUMBNAILS-18 (Mark) — every flavour dropdown of the shared component (v3-flavour-select.js):
   the option names 600, the chosen option and the chosen value in the closed field 800 (the "Choose flavour" placeholder
   600); descriptions / out-of-stock lines keep their own style. A small photo of the flavour variant (the option's
   server-stamped packshot) sits before each name in a fixed 32 x 40 slot, contain on white (never cropped or stretched);
   the closed field shows the chosen one compactly (28 x 32) at the same control height. Covers the loose-product cart
   control too (its earlier 500-weight text is superseded for the names). --- */
body.v3-storefront .flavour-select .fs-name {
  font-weight: 600;
}
body.v3-storefront .flavour-select .fs-btn:not(.is-placeholder) .fs-name,
body.v3-storefront .flavour-select .fs-opt[aria-selected="true"] .fs-name {
  font-weight: 600; /* DG-CART-CHECKOUT-REFINEMENT-26 (Mark): was 800 */
}
body.v3-storefront .flavour-select .fs-menu.has-thumbs .fs-opt {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.v3-storefront .flavour-select .fs-thumb {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 40px;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}
body.v3-storefront .flavour-select .fs-thumb img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
body.v3-storefront .flavour-select .fs-opt-main {
  min-width: 0;
}
body.v3-storefront .flavour-select .fs-btn.has-thumb {
  justify-content: flex-start;
}
body.v3-storefront .flavour-select .fs-btn.has-thumb .fs-thumb {
  width: 28px;
  height: 32px;
  margin: -4px 0;
}
body.v3-storefront .flavour-select .fs-btn.has-thumb .fs-btn-txt {
  flex: 1 1 auto;
}
/* the pack page's per-slot choices (data-flavour-enhance): their control, state colours and the size container for the rule
   below live with their component owner, v3-c-pdp-buy.css */
@container (max-width: 230px) {
  body.v3-storefront .flavour-select .fs-btn.has-thumb .fs-thumb {
    display: none;
  }
}
/* the cart's loose-product control: a little more room for the chosen photo, so a flavour name keeps one line */
.cart-flavour-form .flavour-select:has(.fs-btn.has-thumb),
.cart-flavour-form .fs-btn.has-thumb {
  max-width: 260px;
}

/* DG-FLAVOUR-DROPDOWN-THUMBNAILS-18 FINISH01 (Mark) — taller open flavour menus: a 360px ceiling (was 260px). The script
   (v3-flavour-select.js) narrows it further to the real room inside the visible area, half of the visible height on phones;
   a short list stays as tall as its content. */
body.v3-storefront .flavour-select .fs-menu {
  max-height: 360px;
}
/* FINISH01 — the cart's pack-component flavour menu (.d-cpack-menu, its own builder in v3-cart-units.js, shared .fs-opt
   look): the same names, 600 for the options and 800 for the chosen option and the chosen value on its toggle; the
   description line keeps its own weight. (Photos: FINISH02 below.) */
body.v3-storefront .d-cpack-menu .fs-opt-main {
  font-weight: 600;
}
body.v3-storefront .d-cpack-menu .fs-opt[aria-selected="true"] .fs-opt-main,
body.v3-storefront .d-cpack-flav .d-cpack-flav-name {
  font-weight: 800;
}
body.v3-storefront .d-cpack-menu .fs-opt-desc {
  font-weight: 500;
}
/* FINISH02 — its photos: the V2 30 contract now gives every option its own flavour packshot (`image`), rendered by
   cart-pack-v0.php and by renderSlot in v3-cart-units.js into the same .fs-thumb box as the other flavour menus (32 x 40,
   contain on white, never cropped or stretched). Only a menu with at least one photo gets the aligned photo column. */
body.v3-storefront .d-cpack-menu .d-cpack-opts.has-thumbs .fs-opt {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.v3-storefront .d-cpack-menu .fs-thumb {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 40px;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}
body.v3-storefront .d-cpack-menu .fs-thumb img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
body.v3-storefront .d-cpack-menu .d-cpack-opts.has-thumbs .fs-opt-main {
  min-width: 0;
}

/* DG-FLAVOUR-MENU-SHADOW-18 (Mark): shared flavour-menu depth, including pack-slot and cart menus. */
body.v3-storefront[data-storefront="unified"] .fs-menu {
  box-shadow: 0 20px 48px rgba(20, 32, 24, 0.34), 0 6px 16px rgba(20, 32, 24, 0.20);
}
/* DG-DETAIL-FLAVOUR-PRESENTATION-27 F (Mark): a very light hairline between two flavours, in the shared menu and the cart's pack
   menu alike; drawn above the option's own background, so a hover / chosen row keeps it. None above the first or under the
   last; size, rail and scrolling unchanged. */
body.v3-storefront .fs-menu .fs-opt + .fs-opt,
body.v3-storefront .d-cpack-menu .fs-opt + .fs-opt {
  position: relative;
}
body.v3-storefront .fs-menu .fs-opt + .fs-opt::before,
body.v3-storefront .d-cpack-menu .fs-opt + .fs-opt::before {
  content: "";
  position: absolute;
  top: 0;
  right: 10px;
  left: 10px;
  height: 1px;
  background: rgba(23, 29, 24, .08);
  pointer-events: none;
}

/* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 (Mark) — the layered flavour dropdown (v3-flavour-select.js openLayer, also used by the
   cart pack menu): a light blanket under the open menu (the site stays readable; a tap on it only closes the menu; its
   padding carries the safe areas the placement keeps clear) and one visible scroll rail beside a list that scrolls (the
   native scrollbar is hidden meanwhile, so there is never a second indicator). Geometry is set by the script. */
body.v3-storefront .fs-blanket {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  border: 0;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
  z-index: 2147482999;
  animation: fs-blanket-in .14s ease-out;
}
body.v3-storefront .fs-blanket::backdrop {
  display: none;
}
@keyframes fs-blanket-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
body.v3-storefront .fs-menu:popover-open {
  color: inherit; /* the list keeps its page text colour in the top layer */
}
body.v3-storefront .fs-menu.fs-has-rail {
  scrollbar-width: none;
}
body.v3-storefront .fs-menu.fs-has-rail::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
body.v3-storefront .fs-rail {
  position: fixed;
  inset: auto;
  width: 4px;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(20, 32, 24, 0.10);
  overflow: hidden;
  pointer-events: none;
}
body.v3-storefront .fs-rail-thumb {
  display: block;
  width: 100%;
  border-radius: 2px;
  background: rgba(20, 32, 24, 0.42);
}
@media (prefers-reduced-motion: reduce) {
  body.v3-storefront .fs-blanket {
    animation: none;
  }
}

/* =====================================================================================================================
   DG-SOFT-HERO-ACCOUNT-MINICART-20 (Mark, direction "Warm & lavendel", with the later depth / compact-minicart steer)
   A real category page gets a light sand hero, the signed-in account card a soft lavender card with white panels, and
   the minicart's one progress block becomes a compact card (visual left, text right). Colours and depth only: every
   fact, state and copy stays its owner's (store-hero.php / account-card.php / v3-minicart.js).
   ===================================================================================================================== */

/* --- A. the category hero: only a real category (category.php sets `$heroTone = 'sand'` → .is-tone-sand); the shop
   overview, search, All and every other hero keep the green intro. Size, weight, spacing and the berry bar unchanged. --- */
body.v3-storefront[data-storefront="unified"] .d-store-hero.is-tone-sand {
  border-bottom: 1px solid #e7dbd0;
  background: linear-gradient(180deg, #f9f3ee 0%, #f6eee6 58%, #f3e9df 100%);
  box-shadow: 0 8px 18px -16px rgba(92, 64, 40, 0.45);
  color: #25262b;
}
body.v3-storefront[data-storefront="unified"] .d-store-hero.is-tone-sand .d-crumbs,
body.v3-storefront[data-storefront="unified"] .d-store-hero.is-tone-sand .d-crumbs a,
body.v3-storefront[data-storefront="unified"] .d-store-hero.is-tone-sand .d-store-lede {
  color: #5f626c;
}
body.v3-storefront[data-storefront="unified"] .d-store-hero.is-tone-sand .d-crumbs a:hover {
  color: #25262b;
}
body.v3-storefront[data-storefront="unified"] .d-store-hero.is-tone-sand .d-crumbs a:focus-visible {
  outline: 2px solid #25262b;
  outline-offset: 2px;
  border-radius: 3px;
}
body.v3-storefront[data-storefront="unified"] .d-store-hero.is-tone-sand .d-store-title {
  color: #25262b;
}
/* the status row (hidden on category pages: member by $heroHideMemberStatus, guest by CSS) keeps a readable tone if shown */
body.v3-storefront[data-storefront="unified"] .d-store-hero.is-tone-sand .d-store-status {
  border: 1px solid #e7dbd0;
  background: rgba(255, 255, 255, 0.72);
  color: #25262b;
}
body.v3-storefront[data-storefront="unified"] .d-store-hero.is-tone-sand .d-store-status b {
  color: #25262b;
}

/* --- B. the account card — DG-ACCOUNT-WARM-WHITE-GREEN-24 (Mark 24 Oct, chosen variant "Warm wit met groen"; replaces the
   lavender shell): ONE shared warm-white card with a 5px green top edge that follows the rounded corners (a plain border, a
   visual accent only, never a status or progress), calm off-white panels without the old inset depth, light-green avatar and
   icon tiles. Every account-card.php branch (welcome with / without Starter Kit or credit, points known / unknown, latest order
   with / without a number) uses these same rules; the layout grid of the earlier blocks stays, the berry action and the status
   badge colours are unchanged. Scoped to the homepage card (#account-card on the unified home). --- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card .ac-card {
  border: 1px solid #dce4d8;
  border-top: 5px solid #789764;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(28, 57, 32, 0.09);
  color: #202b23;
}
/* a card with only the greeting (welcome without Starter Kit or credit) is one column: no empty reserved area beside it */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card .ac-card:not(:has(> .ac-side, > .ac-panels)) {
  grid-template-columns: minmax(0, 1fr);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card .ac-avatar {
  border: 1px solid #dce4d8;
  background: #e8efdf;
  color: #31643b;
  box-shadow: none;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card .ac-h1 {
  color: #202b23;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card .ac-line {
  color: #5d6960;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card :is(.ac-panel, .ac-kit) {
  border: 1px solid #dce4d8;
  border-radius: 18px;
  background: #f6f7f1;
  box-shadow: none;
  color: #202b23;
}
/* DG-CARD-ACTIONS-ACCOUNT-POLISH-27 (Mark): every panel icon is white on the dark brand green (was green on pale green); same
   40px tile and corners, 21px symbol: the Phosphor order icon (.ph-ico, fill) and the HerbaPoints coin (.ico, stroke). */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card .ac-ico,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card .ac-order .ac-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--green-dark);
  color: #fff;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card .ac-ico :is(.ph-ico, .ico) {
  display: block;
  width: 21px;
  height: 21px;
  color: inherit;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card :is(.ac-lbl, .ac-val, .ac-ordno, .ac-quiet),
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card .ac-kit b {
  color: #202b23;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card .ac-worth,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card .ac-policy,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card .ac-kit span {
  color: #5d6960;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card .ac-na {
  color: #4b574e;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card a:focus-visible {
  outline: 3px solid #202b23;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
/* DG-ACCOUNT-HERO-SHADOW-29 (Mark) — shorter, lighter inset depth on desktop and phone;
   the HerbaPoints hover ring stays beside the inset. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card .ac-panel {
  box-shadow: inset 0 3px 9px rgba(23, 63, 44, 0.12), inset 0 1px 3px rgba(23, 63, 44, 0.08);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #account-card a.ac-panel.ac-credit:hover {
  box-shadow: inset 0 3px 9px rgba(23, 63, 44, 0.12), inset 0 1px 3px rgba(23, 63, 44, 0.08), 0 0 0 2px rgba(47, 143, 39, 0.35);
}

/* --- C. the minicart progress block: one compact card (visual 40px left, title + state, bar, remainder); in progress a
   very light lavender with a berry bar, unlocked a light sage with a dark green state and the full bar the payload gives.
   The delivery block keeps its truck; the Starter Kit artwork appears on the starter block only. --- */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e6e1e7;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #faf6fb 100%);
  box-shadow: 0 1px 2px rgba(74, 45, 92, 0.06);
  color: #5f626c;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-media {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 10px;
  background: #f3e8f2;
  color: var(--berry);
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-media.is-photo {
  border: 1px solid #efe9f0;
  background: #fff;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-media .ico {
  width: 20px;
  height: 20px;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
body.v3-storefront[data-storefront="unified"] .minicart :is(.d-mc-prog-title, .d-mc-prog-line.is-lead) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-title b {
  min-width: 0;
  color: #25262b;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-line {
  line-height: 1.35;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-state {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f3e8f2;
  color: var(--berry);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-state .ico {
  width: 12px;
  height: 12px;
  color: inherit;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-track {
  height: 5px;
  background: #eee9ef;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog-fill {
  background: var(--berry);
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog.is-on {
  border-color: #d9e4ce;
  background: #f4f7ef;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog.is-on .d-mc-prog-media:not(.is-photo),
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog.is-on .d-mc-prog-state {
  background: #e3edd9;
  color: #36572c;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog.is-on .d-mc-prog-title b {
  color: #2b4a22;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog.is-on .d-mc-prog-fill {
  background: #4e793c;
}
/* DG-SCROLL-CATEGORY-AVATAR-25-FIX01 (Mark): the Starter Kit block keeps its in-progress lavender / berry look once unlocked
   (only the state label says Unlocked); the sage unlocked look above stays for the delivery block. */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog.d-mc-prog--starter.is-on {
  border-color: #e6e1e7;
  background: linear-gradient(180deg, #ffffff 0%, #faf6fb 100%);
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog.d-mc-prog--starter.is-on .d-mc-prog-media:not(.is-photo),
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog.d-mc-prog--starter.is-on .d-mc-prog-state {
  background: #f3e8f2;
  color: var(--berry);
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog.d-mc-prog--starter.is-on .d-mc-prog-title b {
  color: #25262b;
}
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-prog.d-mc-prog--starter.is-on .d-mc-prog-fill {
  background: var(--berry);
}