/* =====================================================================
   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: 19px;
  font-weight: 700;
  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 8px 22px rgba(23, 63, 44, 0.26), inset 0 2px 5px rgba(23, 63, 44, 0.18), inset 0 -2px 8px rgba(23, 63, 44, 0.10);
}
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;
}
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) {
  /* category product titles on phones (one per row), the title only: 22px (DG-STOREFRONT-MICRO-POLISH-ADDENDUM-17, was 18px) */
  body.v3-storefront[data-storefront="unified"] .d-catalog.is-category .d-prow > .d-prow-info > .d-prow-name {
    font-size: 22px;
  }
  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-name {
    font-size: 16px;
  }
  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: 9.5px 13.5px;
  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);
}
body.v3-storefront[data-storefront="unified"] .searchbar form {
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: var(--berry);
  box-shadow: none;
}
body.v3-storefront[data-storefront="unified"] .searchbar form:focus-within {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
}
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.82);
  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: 40px;
  height: 40px;
  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);
  }
}

/* --- cart button: a little larger, a little more room on the right; the hit area stays --- */
body.v3-storefront[data-storefront="unified"] .cart-btn {
  width: 52px;
  height: 52px;
  margin-right: 8px;
}
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 11px / 600 / padding 2px 8px on every width, 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: 2px 8px;
  border: 0;
  background: #eee1ee;
  color: var(--berry-dark, #6b0f4d);
  font-size: 11px;
  font-weight: 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: the role / category line breathes, 22px product titles --- */
@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 6px;
  }
  body.v3-storefront[data-storefront="unified"] .d-catalog .d-prow > .d-prow-info > .d-prow-name {
    font-size: 22px;
  }
}

/* --- 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 {
  margin: 0 0 14px;
  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;
  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: 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-STOREFRONT-H3-WEIGHT-18 (Mark): every actual storefront h3 uses the same 800 weight,
   including component headings with more specific existing selectors. */
body.v3-storefront[data-storefront="unified"] h3 {
  font-weight: 800 !important;
}

/* 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 18px 44px rgba(20, 32, 24, 0.28), 0 4px 12px rgba(20, 32, 24, 0.16);
}