/* =====================================================================================================
   v3-c-pdp-buy.css — pack composition + per-slot flavour dropdowns + the accepted validation look.
   DG-PRODUCT-PACK-EXPERIENCE-RUNTIME-10 · accepted 09 §5.6 / 09A §6 (pack Quick View and pack PDP share it).

   Products keep flavour chips; packs always use one native <select> per required PHYSICAL slot, blank first
   option, no default. The JS hooks stay the protected 07/07A contract (`.pkg-flavour-row` row + `.is-missing`,
   `select[data-pkg-required]`, `#pkg-flavour-error-N`, `#pkg-flavour-summary`) owned by cart-ajax.js; this
   file styles the component classes that sit on the same elements. Single-class (or class + state) selectors.
   ===================================================================================================== */

.c-comp {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.c-comp__thumb {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.c-comp__thumb img {
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
}

.c-comp__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.c-comp__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

.c-comp__qty {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 11.5px;
  font-weight: 800;
}

.c-comp__variant {
  font-size: 12.5px;
  color: var(--muted);
}

.c-comp__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--d-c-ink-2);
}

.c-comp__choices {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.c-comp__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.c-comp__note--count {
  text-align: right;
}

.c-choice {
  display: grid;
  gap: 4px;
  margin: 0;
}

.c-choice .c-choice__label {
  display: block;
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--d-c-ink-2);
}

.c-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 44px;
  margin: 0;
  /* DG-STOREFRONT-POLISH-PACK-BANNER-19 (Mark): a 2px edge in every state (initial amber, valid green, error red);
     the padding absorbs the extra 1px so the box never shifts between states. */
  padding: 9px 43px 9px 11px;
  border: 2px solid var(--d-c-choice-line);
  border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23171d18' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center / 18px 18px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.c-select {
  scroll-margin: 16px 0 24px;
}

/* One state set for every required flavour select (pack page + pack Quick View): still to choose = amber,
   a valid choice = green, a validation error = the red `.is-missing` rule below (later in the file, so it wins). */
.c-select:required:invalid {
  border-color: var(--d-status-wait);
}

.c-select:required:valid {
  border-color: var(--d-status-ok);
}

/* DG-FLAVOUR-FOCUS-RING-32G (Mark): no extra outer ring around a focused/open flavour select. Chrome matches
   :focus-visible on a native <select> after a mouse click or tap as well, so CSS cannot tell pointer from keyboard here;
   focus is therefore marked inside the existing edge: the state border (amber / green / red) doubles to 4px in its own
   colour (inset, so nothing moves) and the state stays readable. Was `box-shadow: var(--d-c-focus)` (white 3px gap +
   dark green 5px outer ring). */
.c-select:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--d-c-choice-line);
}

.c-select:required:invalid:focus-visible {
  box-shadow: inset 0 0 0 2px var(--d-status-wait);
}

.c-select:required:valid:focus-visible {
  box-shadow: inset 0 0 0 2px var(--d-status-ok);
}

.c-choice.is-missing .c-select:focus-visible,
.c-comp.is-missing .c-select:focus-visible {
  box-shadow: inset 0 0 0 2px var(--d-c-error);
}

@media (hover: none) and (pointer: coarse) {
  .c-select {
    font-size: 16px;
  }
}

.c-choice.is-missing .c-select {
  border: 2px solid var(--d-c-error);
  padding: 9px 43px 9px 11px;
}

/* DG-FLAVOUR-ERROR-HERO-MICRO-POLISH-31A (Mark): 600 on both pack surfaces (programme page + pack Quick View). */
.c-choice__error {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--d-c-error);
}

.c-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--d-c-error-line);
  border-left: 4px solid var(--d-c-error);
  border-radius: 12px;
  background: var(--d-c-error-soft);
  color: #7a1d17;
  font-size: 13.5px;
  font-weight: 700;
}

.c-summary[hidden] {
  display: none;
}

.c-summary .ico {
  width: 18px;
  height: 18px;
  flex: none;
}

.c-summary:focus {
  outline: none;
}

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

/* loading skeleton (pack Quick View fragment) */
.c-skeleton {
  display: grid;
  gap: 10px;
}

.c-skeleton span {
  display: block;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(90deg, #f1f3ee, #f8f9f6, #f1f3ee);
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .c-skeleton span {
    animation: c-skeleton-shine 1.2s ease-in-out infinite;
  }
}

@keyframes c-skeleton-shine {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ---------- pack page: configure section (accepted 09A §6) ---------- */
.c-req {
  padding: 1px 7px;
  border: 1px solid #f3d9b8;
  border-radius: var(--radius-pill);
  background: #fff4e5;
  color: #7a3a12;
  font-size: 11px;
  font-weight: 800;
}

/* DG-FLAVOUR-ERROR-HERO-MICRO-POLISH-31A (Mark): no "Required" pill on the programme page. The required flavour selects
   keep their `required` attribute (announced by assistive tech) and the missing-choice validation. */
[data-v3-page="program"] .c-req {
  display: none;
}
/* HOME-FULL-PRODUCT-MODAL-20: the same pack mounted in the full detail modal (its page family hook is the source page's) */
.fd-detail[data-detail-kind="pack"] .c-req {
  display: none;
}

.c-config {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  align-items: start;
  gap: 24px;
  margin: 0;
}

.c-config__main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.c-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.c-slot {
  grid-template-columns: 56px minmax(0, 1fr);
  padding: 14px;
  border-color: #efd9c4;
  border-radius: 16px;
}

.c-slot .c-comp__thumb {
  width: 56px;
  height: 56px;
}

.c-slot .c-comp__thumb img {
  max-width: 48px;
  max-height: 48px;
}

.c-slot .c-comp__name {
  font-size: 16px;
}

.c-comp.is-fixed {
  border-color: var(--line);
  background: #fbfcfa;
}

.c-comp.is-missing {
  border-color: var(--d-c-error-line);
  background: var(--d-c-error-soft);
}

.c-comp.is-missing .c-select {
  border: 2px solid var(--d-c-error);
  padding: 9px 43px 9px 11px;
}

/* a focused choice clears the pinned section navigation and the docked order summary */
.c-config .c-select {
  scroll-margin-top: calc(var(--v2-anchor-offset, 120px) + var(--d-c-secnav-h) + 12px);
  scroll-margin-bottom: 150px;
}

.c-order {
  position: sticky;
  top: calc(var(--v2-anchor-offset, calc(var(--chrome-top, 0px) + 12px)) + var(--d-c-secnav-h) + 4px);
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--d-c-shadow-card);
}

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

.c-order__now {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.c-progress {
  display: grid;
  gap: 6px;
}

.c-progress__bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #e9eee6;
}

.c-progress__bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--green);
}

@media (prefers-reduced-motion: no-preference) {
  .c-progress__bar i {
    transition: width 0.2s ease;
  }
}

.c-progress__text {
  font-size: 13px;
  font-weight: 700;
  color: var(--d-c-ink-2);
}

.c-order__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--d-c-ink-2);
}

.c-order__list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.c-order__list li.is-open {
  color: var(--muted);
  font-weight: 600;
}

.c-order.is-attempted .c-order__list li.is-open {
  color: var(--d-c-error);
  font-weight: 700;
}

.c-order__add {
  width: 100%;
  justify-content: center;
  min-height: 48px;
}

/* ≤1100px: the summary docks to the bottom of the viewport while the configure form is on screen (sticky inside
   the form, never a second button) */
@media (max-width: 1100px) {
  /* a block form: the summary's sticky bound is the whole form, not its own grid cell */
  .c-config {
    display: block;
  }

  .c-config__main {
    margin-bottom: 16px;
  }

  .c-order {
    top: auto;
    bottom: 0;
    z-index: 15;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px -14px rgba(20, 30, 25, 0.35);
  }

  .c-order__list {
    display: none;
  }

  .c-order__now {
    font-size: 22px;
  }

  .c-order__add {
    width: auto;
  }

  .c-order .c-progress {
    grid-column: 1 / -1;
  }
}

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

/* phones: one compact row [price + progress | the one submit]; #main renders at zoom .9 here */
@media (max-width: 560px) {
  .c-order {
    row-gap: 2px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }

  .c-order__price {
    grid-column: 1;
    grid-row: 1;
  }

  .c-order__price .c-pdp-price__label,
  .c-progress__bar {
    display: none;
  }

  .c-order__now {
    font-size: 20px;
  }

  .c-order .c-progress {
    grid-column: 1;
    grid-row: 2;
  }

  .c-progress__text {
    font-size: 12px;
  }

  .c-order__add {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 52px;
  }

  .c-select {
    min-height: 52px;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .c-progress__bar {
    display: none;
  }
}

.c-slot .c-comp__choices {
  gap: 4px;
  margin-top: 4px;
}

.c-comp__choices .c-choice__label {
  display: block;
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--d-c-ink-2);
}

.c-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* phones render the pack page (#main) and the Quick View main column at zoom .9: a 2px edge (1.8px) would floor to
   1px on a 1x screen, 2.4px renders 2px */
@media (max-width: 560px) {
  .c-select,
  .c-slot.is-missing .c-select,
  .c-choice.is-missing .c-select,
  .c-comp.is-missing .c-select {
    border-width: 2.4px;
    padding: 8.6px 42.6px 8.6px 10.6px;
  }
}

/* DG-STOREFRONT-REPOSITIONING-MEGA-16 (Mark) — the product flavour dropdown (category rows, product page, product Quick
   View: the v3-flavour-select.js proxy inside .d-variant-select): a 1.5px edge, 2.4px only in the error state. The padding
   absorbs the difference so the box never shifts; pack slots and every other control are unchanged. */
.d-variant-select .c-select {
  border-width: 1.5px;
  padding: 9.5px 43.5px 9.5px 11.5px;
}

.d-variant-select.c-choice.is-missing .c-select {
  border-width: 2.4px;
  padding: 9.1px 43.1px 9.1px 11.1px;
}

/* DG-FLAVOUR-DROPDOWN-THUMBNAILS-18 (Mark) — the pack page's per-slot flavour choices (enhanced with data-flavour-enhance): the same control and the pack dropdown's
   state colours as the product proxy (required still open = amber, chosen = green, missing = red at 2.4px) */
.c-comp__choices .flavour-select {
  width: 100%;
  min-width: 0;
}
.c-comp__choices .fs-btn {
  min-height: 44px;
  padding: 9px 13px; /* DG-DETAIL-FLAVOUR-PRESENTATION-27 D (Mark): 2px border (was 1.5px), same outer size */
  border-width: 2px;
  border-radius: 12px;
}
.c-comp__choices .flavour-select:has(> select[data-pkg-required]) .fs-btn.is-placeholder {
  border-color: var(--d-status-wait);
}
.c-comp__choices .flavour-select:has(> select[data-pkg-required]) .fs-btn:not(.is-placeholder) {
  border-color: var(--d-status-ok);
}
.pkg-flavour-row.is-missing .c-comp__choices .flavour-select:has(> select[data-pkg-required]) .fs-btn,
.c-comp__choices .pkg-flavour-row.is-missing .flavour-select:has(> select[data-pkg-required]) .fs-btn {
  padding: 8.6px 12.6px;
  border-width: 2.4px;
  border-color: var(--d-c-error);
}
/* the pack page's two-column slot cards: where the closed field is narrower than 230px the compact photo in it steps aside
   (the name keeps the width and the control its height); the open menu keeps every photo */
.c-comp__choices {
  container-type: inline-size;
}

/* DG-CART-MINICART-POLISH-25 (Mark) — "Add pack" with missing choices in the pack Quick View (v3-pack-quick-view.js
   showMissing adds .is-missing-flash): every missing component gets ONE calm, about one-second highlight (a soft
   error-coloured ring that fades in and out, motion only without a reduced-motion preference); otherwise a short static ring. The marked fields,
   errors and summary stay the validation owner's own states. */
.c-comp.is-missing-flash {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.22);
}

@media (prefers-reduced-motion: no-preference) {
  .c-comp.is-missing-flash { animation: c-comp-missing-flash 1s ease-in-out 1; box-shadow: none; }
}

@keyframes c-comp-missing-flash {
  0% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0); }
  35% { box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0); }
}

/* DG-DETAIL-CART-MOTION-26 (Mark) — the docked order summary (≤1100px) is one finished card: all corners round, a full
   clear border, a warm white surface and an upward shadow; pinned it floats 10px above the bottom edge (plus the safe
   area) with the same width / inset as in flow, so nothing changes shape when it comes to rest at the end of the form.
   Same single form, the same one submit; the trust lines stay out of the dock. The desktop summary is unchanged. */
@media (max-width: 1100px) {
  .c-order {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 12px 14px;
    border: 1px solid #d5dccf;
    border-radius: 18px;
    background: #fffefb;
    box-shadow: 0 -8px 24px -12px rgba(20, 30, 25, 0.32), 0 2px 8px rgba(20, 30, 25, 0.06);
  }
}

@media (max-width: 560px) {
  .c-order {
    padding: 10px 14px;
  }
}

/* DG-FLAVOUR-DROPDOWNS-CART-POLISH-27 K (Mark) — the pack's order summary in the full detail, phones: a little roomier and
   clearer (light sage surface, a stronger upward shadow), the same rounded card in flow and pinned, the same one form and
   green submit. The product detail, the standalone pack page and wider screens keep the block above. */
@media (max-width: 720px) {
  .fd-scroller .c-order {
    padding: 14px 16px;
    background: #f1f7ec;
    box-shadow: 0 -10px 30px rgba(20, 45, 25, 0.18), 0 4px 14px rgba(20, 45, 25, 0.10);
  }
}