/* =====================================================================================================
   v3-c-pdp.css — the full product / pack detail page (accepted DG-FULL-PRODUCT-PACK-PDP-DESIGN-09A §6).
   DG-PRODUCT-PACK-EXPERIENCE-RUNTIME-10.

   One page system for both first-class routes: a white hero panel [gallery | identity + buy box + trust],
   a pinned section navigation, then full-width calm content bands (heading column + max 72ch content) and
   the completion strip. The superseded right-column `.d-pdp-*` layout was deleted with its markup.
   Single-class selectors; JS hooks stay data-* / ids and are never used for styling.
   ===================================================================================================== */

.c-pdp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(16px, 2.4vw, 32px);
  border-radius: 28px;
  background: #fff;
}

.c-pdp-gallery {
  position: sticky;
  top: calc(var(--v2-anchor-offset, calc(var(--chrome-top, 0px) + 12px)) + 4px);
  display: grid;
  gap: 10px;
  min-width: 0;
}

.c-pdp-gallery__main {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}

.c-pdp-gallery__main img {
  /* CORRECTION-11: the whole asset always fits (no crop on any browser or geometry). The image fills the frame
     absolutely — no percentage height inside a grid cell, which Safari resolves to the intrinsic height — and
     `contain` keeps tall canisters, wide packs and the fallback art complete; the padding keeps the calm margin. */
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 7%;
  object-fit: contain;
  object-position: center;
}

.c-pdp-jump,
.c-pill-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--d-c-line-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--green-dark);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.c-pdp-jump:hover,
.c-pill-link:hover {
  border-color: var(--green);
}

.c-pdp-jump .ico,
.c-pill-link .ico {
  width: 15px;
  height: 15px;
}

.c-pdp-id {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.c-pdp-id > * {
  margin: 0;
}

.c-pdp-eyebrow,
.c-band__eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-dark);
}

.c-pdp-title {
  font-size: 28px; /* DG-ROLEPILL-PDP-PRESENTATION-18 (Mark): product and pack page title 28px (was 24px), phones too */
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.c-pdp-variant {
  margin-top: -6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.c-pdp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  list-style: none;
}

.c-pdp-meta li {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 12.5px;
  font-weight: 700;
}

.c-pdp-intro {
  padding: 10px 0;
  font-size: 16px;
  line-height: 1.5;
  color: #25302a;
}

.c-pdp-buy {
  display: grid;
  gap: 16px;
  margin-top: 20px; /* DG-HOME-JOURNEY-LOGGING-21 UI (Mark): was 6px; no responsive override, so desktop and phone alike */
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--d-c-quiet);
  scroll-margin-top: calc(var(--v2-anchor-offset, 0px) + var(--d-c-secnav-h) + 8px);
}

.c-pdp-buy > * {
  margin: 0;
}

.c-pdp-price {
  display: grid;
  gap: 2px;
}

.c-pdp-price__label {
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.c-pdp-price__meta {
  font-size: 13px;
  color: var(--muted);
}

.c-pdp-form {
  display: grid;
  gap: 16px;
  margin: 0;
}

.c-pdp-buyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.c-pdp-buyrow .qstep {
  flex: none;
}

.c-pdp-add {
  flex: 1 1 200px;
  justify-content: center;
  min-height: 48px;
}

.c-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
  color: var(--d-c-ink-2);
}

.c-trust li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.c-trust .ico {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  color: var(--green-dark);
}

/* ---------- pinned section navigation ---------- */
.c-secnav {
  position: sticky;
  top: calc(var(--v2-anchor-offset, calc(var(--chrome-top, 0px) + 12px)) - 14px);
  z-index: 20;
  margin-top: 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(243, 244, 240, 0.96);
  box-shadow: 0 0 0 100vmax rgba(243, 244, 240, 0.96);
  clip-path: inset(0 -100vmax);
}

.c-secnav__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--d-c-secnav-h);
}

.c-secnav__list {
  display: flex;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.c-secnav__list::-webkit-scrollbar {
  display: none;
}

.c-secnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  color: var(--d-c-ink-2);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.c-secnav__link:hover {
  background: #fff;
}

.c-secnav__link[aria-current="true"] {
  background: var(--ink);
  color: #fff;
}

.c-secnav__link:focus-visible {
  outline: none;
  box-shadow: var(--d-c-focus);
}

/* ---------- content bands ---------- */
.c-band {
  padding: var(--d-c-band-space) 0;
  scroll-margin-top: calc(var(--d-c-secnav-h) + 8px);
}

/* alternate calm white bands, full-bleed behind the page container */
.c-band:nth-of-type(odd) {
  background: #fff;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}

.c-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr);
  gap: clamp(18px, 3vw, 48px);
}

.c-band__stack {
  display: grid;
  gap: 18px;
}

.c-band__head {
  display: grid;
  align-self: start;
  align-content: start;
  gap: 6px;
  position: sticky;
  top: calc(var(--v2-anchor-offset, calc(var(--chrome-top, 0px) + 12px)) + var(--d-c-secnav-h) + 8px);
}

.c-band__stack > .c-band__head {
  position: static;
}

.c-band__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.c-band__lede {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* DG-FLAVOUR-ERROR-HERO-MICRO-POLISH-31A (Mark): body copy 15px (was 16px); headings, line-height and links unchanged. */
.c-prose {
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.65;
  color: #25302a;
}

.c-prose > :first-child {
  margin-top: 0;
}

.c-prose p {
  margin: 0 0 12px;
}

.c-prose h3 {
  margin: 26px 0 8px;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.c-prose ul,
.c-prose ol {
  margin: 0 0 12px;
  padding-left: 20px;
}

.c-prose li {
  margin: 4px 0;
}

.c-ticks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-ticks li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}

.c-ticks li::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 14px;
}

/* DG-PACK-GOAL-PILLS-CONSUME-18 — the pack page's three accepted detail bullets under the intro: the same tick list, one
   column in the narrow detail column (the capsule pill above the title stays the only pill). */
.c-pdp-points {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 2px 0 6px;
}

.c-pdp-points li {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  font-size: 15px;
  line-height: 1.4;
}

.c-pdp-points li::before {
  width: 24px;
  height: 24px;
  background-size: 13px;
}

/* DG-STOREFRONT-FINISH-CART-21 A1 (Mark) — in the full detail modal the pack's detail bullets carry the dark berry marker with a
   white tick; the text keeps the page ink and the list keeps its list semantics. */
.fd-detail .c-ticks.c-pdp-points li::before {
  background: var(--berry-dark, #6b0f4d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 13px;
}

/* DG-DETAIL-FLAVOUR-PRESENTATION-27 G (Mark): the product's Benefits list in the full detail carries the same dark berry marker
   with the white tick as the pack (its own 26px circle and 14px tick kept); the page keeps its green marker. */
.fd-detail .c-ticks:not(.c-pdp-points) li::before {
  background: var(--berry-dark, #6b0f4d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 14px;
}

/* DG-STOREFRONT-FINISH-CART-21 A3 (Mark) — two-column bands: the first heading on the right (also the first heading of the nested
   pack usage plan) starts on the band title's top line, on the page and in the full detail modal alike; later headings keep
   their own rhythm. */
.c-band__grid > .c-prose > .c-pack-usage__plan:first-child > h3:first-child {
  margin-top: 0;
}

/* DG-STOREFRONT-FINISH-CART-21 A3 (Mark) — the pack's "More information" lists, structured by App\Ui\PackInfoPresentation: every
   line has a marker (the house light green tick circle); a product line of the pack's own "What is in the pack" list shows its
   verified quantity in a dark berry circle instead (the number moved out of the text, never a counter). */
.c-prose .c-pack-list {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.c-prose .c-pack-list > li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 0;
}

.c-prose .c-pack-list > li:not(.c-pack-list__item--qty)::before {
  content: "";
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 14px;
}

.c-pack-list__qty {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--berry-dark, #6b0f4d);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.c-pack-list__text {
  min-width: 0;
}

.c-pdp-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.c-pdp-labels__item[hidden],
.c-pdp-labels__none[hidden] {
  display: none;
}

.c-pdp-labels__none {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.c-pdp-back {
  margin: 24px 0 0;
}

.c-pdp-back__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.c-pdp-back__link:hover {
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .c-trust {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .c-pdp-hero {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 22px;
  }

  .c-pdp-gallery {
    position: static;
  }

  .c-pdp-gallery__main {
    width: 100%;
    max-height: 46vh;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
  }

  .c-band__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .c-band__head {
    position: static;
  }

  .c-ticks {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ≤560px #main renders at zoom .9 (v3-mobile-compact.css, CORRECTION-11A): targets use 48px CSS (≈43px on screen),
   and the sticky offsets are divided by the zoom so the navigation sits exactly under the sticky header stack. */
@media (max-width: 560px) {
  .c-pdp-hero {
    gap: 14px;
    padding: 12px;
    border-radius: 18px;
  }

  .c-pdp-gallery__main {
    max-height: 38vh;
    aspect-ratio: 5 / 4;
    border-radius: 16px;
  }

  /* DG-DETAIL-FLAVOUR-PRESENTATION-27 A (Mark): the product / pack intro is shown in full on phones too (the earlier
     three-line clamp is gone) */

  .c-pdp-buy {
    padding: 14px;
    border-radius: 16px;
  }

  .c-secnav {
    top: calc(var(--v2-anchor-offset, calc(var(--chrome-top, 0px) + 12px)) - 14px); /* DG-STOREFRONT-MICRO-POLISH-ADDENDUM-17 (Mark): no phone zoom, no division */
  }

  .c-secnav__link,
  .c-pdp-jump,
  .c-pill-link,
  .c-pdp-back__link {
    min-height: 48px;
  }

  .c-pdp-add {
    min-height: 52px;
  }

  .c-pdp-buyrow .qs-btn {
    min-width: 48px;
    min-height: 48px;
  }
}

/* phones: long rich pack copy folds every H3 after the first (v3-pdp-sections.js; content stays in the DOM) */
.c-prose-fold {
  border-top: 1px solid var(--line);
}

.c-prose-fold > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  list-style: none;
  cursor: pointer;
}

.c-prose-fold > summary::-webkit-details-marker {
  display: none;
}

.c-prose-fold > summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--green-dark);
}

.c-prose-fold[open] > summary::after {
  content: "\2212";
}

.c-prose-fold > summary h3 {
  margin: 0;
  font-size: 16px;
}

.c-prose-fold > div {
  padding: 0 0 14px;
}

/* DG-MOBILE-STOREFRONT-POLISH-20 (Mark) — product & programme pages. The trust strip and the band eyebrows are
   hidden at every width; on phones the section navigation is hidden and the hero keeps a 20px gap below it. */
.c-trust,
.c-band__eyebrow {
  display: none;
}

@media (max-width: 720px) {
  .c-secnav {
    display: none;
  }

  .c-pdp-hero {
    margin-bottom: 20px;
  }
}

/* DG-MOBILE-STOREFRONT-POLISH-20B (Mark) — phones: the main gallery image fills its frame without inner padding and
   the in-page jump links are hidden. */
@media (max-width: 720px) {
  .c-pdp-gallery__main img {
    padding: 0;
  }

  .c-pdp-jump {
    display: none;
  }
}

/* DG-HOME-JOURNEY-LOGGING-21 UI (Mark 09.24) — phones: the band heading (eyebrow + title) starts further left, in the
   ordinary page and in the full detail alike. Component owner file (single-class selector); the storefront wrapper is
   implied: this file only loads in the unified storefront. DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 I (Mark): by exactly the one
   page gutter (14px on phones; was a fixed 20px). */
@media (max-width: 720px) {
  .c-band__head {
    margin-left: calc(-1 * var(--page-gutter));
  }
}

/* ==========================================================================
   DG-HOME-PACK-APPROVED-BUILD-51 — pack page: quiet fact line, "In your pack" with unit circles, and the
   compact purchase reassurance (accepted task 49 C1 / 50D parts 4 and 5). Existing tokens only; the unit
   circle uses the upsell pill tones (--v2-upo-pill-bg / --v2-upo-pill-ink values).
   ========================================================================== */
.c-pdp-roles {
  margin: 0; /* DG-ROLEPILL-PDP-PRESENTATION-18: above the title; the .c-pdp-id grid gap (10px) spaces it */
}

/* DG-STOREFRONT-MICRO-POLISH-ADDENDUM-17 (Mark): the product / pack page role pills take the storefront role pill look
   (dark green, white text); other .c-pdp-meta facts are unchanged.
   DG-ROLEPILL-PDP-PRESENTATION-18 (Mark): every product / pack role pill is 11px, 600, padding 2px 8px; COLOR ADDENDUM
   (Mark, 18 Oct): soft berry #eee1ee with berry-dark text (was dark green / white). */
.c-pdp-roles li {
  padding: 2px 8px;
  border: 0;
  background: #eee1ee;
  color: var(--berry-dark, #6b0f4d);
  font-size: 11px;
  font-weight: 600;
}

.c-pdp-fact {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

.c-inpack {
  margin-top: 12px; /* DG-HOME-JOURNEY-LOGGING-21 UI (Mark): was 18px */
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.c-inpack__title {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.3;
}

.c-inpack__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-inpack__list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.c-inpack__qty {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eee8f7;
  color: #614778;
  font-size: 14px;
  font-weight: 800;
}

.c-inpack__text b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.c-inpack__text small {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}

/* Compact purchase reassurance: one hairline, optional payment marks, three short points. No panel, no badge. */
.c-ptrust {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.c-ptrust .d-paymarks-row {
  gap: 5px;
}

.c-ptrust .d-paymark {
  width: 34px;
  height: 23px;
}

.c-ptrust__points {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
  color: var(--d-c-ink-2, #3c4740);
}

.c-ptrust__points li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.c-ptrust__points [data-ico] {
  display: inline-flex;
  flex: none;
  color: var(--green-dark);
}

.c-ptrust__points [data-ico] svg {
  width: 15px;
  height: 15px;
}

.c-ptrust__points a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* DG-CARD-ACTIONS-ACCOUNT-POLISH-27 (Mark) — in the product and pack modals (the full detail) the points are always one under
   the other, desktop and phone: icon on the left, its line beside it (a long line wraps inside its own item). The pages keep
   their row. */
.fd-detail .c-ptrust__points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.fd-detail .c-ptrust__points li {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

.fd-detail .c-ptrust__points [data-ico] {
  margin-top: 1.5px;
}

/* Pack hero: the button there only scrolls, so one quiet sentence about the next step (no trust points, never payment
   marks: those belong to the real "Add pack to cart", DG-RESPONSIVE-FLAVOURS-HOME-HELP-POLISH-51G). */
.c-ptrust--hero {
  gap: 6px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.c-ptrust__next {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--d-c-ink-2, #3c4740);
}

/* Pack page: two mounts, exactly one visible. In the summary on wide screens; in normal flow above the docked
   summary at <=1100px (the dock itself is unchanged). display:none also removes the hidden mount from the a11y tree. */
.c-ptrust--flow {
  display: none;
}

.c-ptrust--summary {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .c-ptrust--summary {
    display: none;
  }

  .c-ptrust--flow {
    display: grid;
    margin: 4px 0 18px;
  }
}

/* DG-STOREFRONT-REPOSITIONING-MEGA-16 (Mark) — the stored product / pack text (`omschrijving_meerinfo`) keeps its own
   paragraphs, h3 headings and bold words (safe HTML: V2 30 CatalogText); this only gives it room: a calmer line height,
   clear space between paragraphs and a distinct h3 level. The text itself is the catalogue's own. */
.c-prose {
  line-height: 1.75;
}

.c-prose p {
  margin: 0 0 16px;
}

.c-prose h3 {
  margin: 30px 0 10px;
  font-size: 18px; /* DG-CARD-ACTIONS-ACCOUNT-POLISH-27 (Mark): 18px on every width (was 19px, 17px <=899.98px) */
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.c-prose > h3:first-child {
  margin-top: 0;
}

.c-prose :is(b, strong) {
  font-weight: 600;
  color: var(--ink);
}

/* Mark 20 Oct: distinguish stacked product/pack sections from their prose on mobile. */
@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"] .c-band__head {
    padding: 8px 12px; /* DG-DETAIL-CART-MOTION-26 (Mark): a calmer section bar (was 14px 16px) */
    border-inline-start: 4px solid var(--berry-dark, #6b0f4d);
    border-radius: 0 12px 12px 0;
    background: #f3ebf3;
  }

  body.v3-storefront[data-storefront="unified"] .c-band__title {
    color: var(--berry-dark, #6b0f4d);
  }
}

/* ==========================================================================
   DG-DETAIL-CART-MOTION-26 (Mark) — product / pack details, the page and the full detail modal alike (placed before the
   pack usage block, which stays the last block of this file).
   - The hero panel has no card border / shadow at any width (removed above) and no inner padding below 900px.
   - The hero eyebrow and the "you choose your flavours next" line are hidden.
   - Below 900px the bands are compact: 20px band spacing, 21px / 1.3 titles, 15px / 1.6 prose.
   - Below 900px the secondary bands (More information, How to use this pack, How to use) fold into one native
     disclosure each, closed (v3-pdp-sections.js); their own long-copy H3 folds are then not added (no nested folds).
   ========================================================================== */
.c-pdp-eyebrow,
.c-ptrust__next {
  display: none;
}

/* DG-DETAIL-FLAVOUR-PRESENTATION-27 B (Mark): with its only line hidden, the hero trust wrapper would still be an empty grid
   row in the price block (one 16px gap under the button); it goes too. */
.c-ptrust--hero {
  display: none;
}

@media (max-width: 899.98px) {
  .c-pdp-hero {
    padding: 0;
  }

  .c-band {
    padding: 20px 0;
  }

  .c-band__title {
    font-size: 21px;
    line-height: 1.3;
  }

  .c-prose {
    line-height: 1.6;
  }

  .c-prose p {
    margin: 0 0 12px;
  }

  .c-prose h3 {
    margin: 20px 0 8px;
  }
}

.c-band__fold > summary {
  position: relative;
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

.c-band__fold > summary::-webkit-details-marker {
  display: none;
}

.c-band__fold > summary > .c-band__head {
  position: static;
  flex: 1 1 auto;
  min-width: 0;
}

/* the + / − sits inside the band's own title bar, on the right */
body.v3-storefront[data-storefront="unified"] .c-band__fold > summary > .c-band__head {
  padding-right: 44px;
}

.c-band__fold > summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 24px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  color: var(--green-dark);
}

.c-band__fold[open] > summary::after {
  content: "\2212";
}

.c-band__fold > summary:focus-visible {
  outline: 3px solid var(--green-bright, #5fbf3a);
  outline-offset: 2px;
  border-radius: 12px;
}

.c-band__fold-body {
  display: grid;
  gap: 14px;
  padding-top: 14px;
}

/* ==========================================================================
   CP-PACK-USAGE-ROLLOUT-20 (V2 20 render contract) — the approved pack usage presentation in #pkg-use
   (views/partials/v3/pack-usage.php): the plan stays visible with the day as quiet lavender cards, every included
   product is a native disclosure (Formula 1 open, the others closed and independent, 52px targets, keyboard focus
   ring), the closing note is a calm neutral card. Scoped to .c-pack-usage; the shared .c-prose type is unchanged.
   ========================================================================== */
.c-pack-usage__plan > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 16px;
  padding: 0;
  list-style: none;
}

.c-pack-usage__plan > ul > li {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f6eff6;
  font-size: 14px;
  line-height: 1.55;
}

.c-pack-usage__plan > ul > li > b:first-child {
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
  color: var(--berry-dark, #6b0f4d);
}

.c-pack-usage__products {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
}

.c-pack-usage__item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.c-pack-usage__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  border-radius: 14px;
  list-style: none;
  cursor: pointer;
}

.c-pack-usage__summary::-webkit-details-marker {
  display: none;
}

.c-pack-usage__summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--green-dark);
}

.c-pack-usage__item[open] > .c-pack-usage__summary::after {
  content: "\2212";
}

.c-pack-usage__summary:focus-visible {
  outline: none;
  box-shadow: var(--d-c-focus);
}

.c-pack-usage__thumb {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.c-pack-usage__label {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.c-pack-usage__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.c-pack-usage__role {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
}

.c-pack-usage__body {
  padding: 0 16px 14px;
}

.c-pack-usage__body > :last-child,
.c-pack-usage__tail > :last-child {
  margin-bottom: 0;
}

.c-pack-usage__body small {
  font-size: 13.5px;
  color: var(--muted);
}

.c-pack-usage__tail {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--d-c-quiet);
}

.c-pack-usage__tail > h3 {
  margin-top: 0;
}

@media (max-width: 720px) {
  .c-pack-usage__plan > ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* CP-CATALOG-COPY-REVIEW-27-LOCAL (Mark) — How to use only: one soft line before every product of a pack (also before
   Formula 1; the products stack on the lines instead of a gap), and compact list items in product and pack usage copy
   (indent, numbers / bullets and line height unchanged). Benefits / More information lists keep their spacing. */
.c-pack-usage__products {
  gap: 0;
}

.c-pack-usage__sep {
  height: 0;
  margin: 28px 0 22px;
  border: 0;
  border-top: 1px solid var(--line);
}

.c-pack-usage__sep:first-child {
  margin-top: 14px;
}

.c-pack-usage__body li,
.c-prose--usage li {
  margin: 0;
  padding: 0;
}