/* =====================================================================================================
   v3-c-card.css — catalogue card foot + actions, product and pack, all three densities.
   DG-PRODUCT-PACK-EXPERIENCE-RUNTIME-10 · accepted DG-CATALOG-PACK-PRODUCT-EXPERIENCE-ARCHITECTURE-09 §5.4.

   One action order everywhere: gate / price / status → green primary (member) → white Quick view →
   details link (List only). The foot owns ONE gap token (--d-c-card-foot-gap, 10px) between the price or
   gate and the actions; the actions row itself has no padding (Mark #3: was `padding: 6px 0 0` plus a
   second gap). The Compact card's hover-only media overlay is replaced by the normal visible button, so
   touch users get the same Quick view. Card geometry (.d-pcard / .d-pcard2 / .d-prow shells) is unchanged.
   Single-class selectors; data-* stay the JS hooks.
   ===================================================================================================== */

.c-card-foot {
  display: grid;
  gap: var(--d-c-card-foot-gap);
  align-content: end;
  margin-top: auto;
  padding-top: 12px;
}

.c-card-foot > *,
.c-card-buycol > * {
  margin: 0;
}

.c-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
}

.c-card-actions .btn {
  flex: 1 1 108px;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13.5px;
  white-space: nowrap;
}

.c-card-actions .ico {
  width: 15px;
  height: 15px;
}

.c-card-qv {
  border: 1px solid var(--d-c-line-strong);
  background: #fff;
  color: var(--ink);
}

.c-card-qv:hover {
  border-color: var(--green);
  color: var(--green-dark);
  background: #fff;
}

/* DG-DETAIL-IMAGE-CART-INTEGRATION-22 (DG-MODAL-RETURN-CARD-STATE-22) — no hover edge on the Quick view / More info under a
   pointer that has not moved since the full detail closed (html.fd-hover-quiet); :focus-visible below is unchanged */
html.fd-hover-quiet .c-card-qv:hover {
  border-color: var(--d-c-line-strong);
  color: var(--ink);
}

.c-card-qv:focus-visible,
.c-card-details:focus-visible {
  outline: none;
  box-shadow: var(--d-c-focus);
}

/* List: the buy column — gate/price → one action group (quantity, Add to cart, More info) → details link */
.c-card-buycol {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--d-c-card-foot-gap);
  min-width: 0;
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 1px solid var(--line);
}

/* DG-CARD-ACTIONS-ACCOUNT-POLISH-27 (Mark) — the signed-in List row with the direct Add: quantity, Add to cart and More info are
   ONE action group under the price (the row's own form owns every field and button, as before). Wide: the three stacked with
   one 8px gap, both buttons the column width, the stepper its own width on the left. <=999px: below. */
.c-card-actions--buy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.c-card-actions--buy > .qstep {
  justify-self: start;
}

.c-card-actions--buy > .btn.c-card-primary {
  padding: 10px 16px;
  font-size: 14.5px;
}

.c-card-buycol .c-card-actions .btn {
  flex-basis: 100%;
  min-height: 44px;
}

.c-card-details {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  text-decoration: none;
}

.c-card-details:hover {
  text-decoration: underline;
}

.c-card-details .ico {
  width: 15px;
  height: 15px;
}

/* DG-V0-UX-QUICKWINS-28 (item 7, Mark) — the content size at the end of a product card's variant line (catalog-product-card.php,
   only the approved size that survived O2/O3): a quiet static accent, not a chip or control; every density. */
.d-pcard-size {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--d-c-quiet);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

/* Mark29: spacing replaces the separator before the content-size badge. */
.d-pcard-variant-label + .d-pcard-size {
  margin-inline-start: 6px;
}

/* pack cards: a small "Pack" tag on the media */
.c-card-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 3px 9px;
  border: 1px solid var(--green-soft);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 999px) {
  .c-card-buycol {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 14px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .c-card-buycol > .d-price,
  .c-card-buycol > .c-gate,
  .c-card-buycol > .d-sellstate {
    flex: 1 1 100%;
  }

  .c-card-buycol > .c-card-actions {
    flex: 1 1 220px;
  }

  /* the action group: the stepper on its own row, Add to cart and More info side by side in two equal columns */
  .c-card-buycol > .c-card-actions--buy {
    flex: 1 1 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-card-actions--buy > .qstep {
    grid-column: 1 / -1;
  }

  .c-card-actions--buy > .btn {
    min-width: 0;
  }

  .c-card-actions--buy > .btn.c-card-primary {
    padding: 10px 12px;
  }

  .c-card-buycol > .c-card-details {
    flex: 1 1 100%;
  }
}

/* DG-MOBILE-PRODUCT-PRICE-QTY-30 (Mark) — <=999px, the List row with the direct Add: one buy row with the stepper on the left and
   the price (with any old price) on the right, Add to cart and More info side by side beneath it. The action group's own box
   steps aside (display: contents on a role-less div) so its stepper and buttons share the buy column's two-column grid with the
   price; the DOM order, the form, every field, button and data hook are unchanged. A wide price wraps inside its own column.
   The column is now the size container for the homepage's short "Add" / "View" words (a display: contents group has no box). */
@media (max-width: 999px) {
  .c-card-buycol:has(> .c-card-actions--buy) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    container-type: inline-size;
  }

  /* two classes on the group: also beats the later homepage grid rule [data-h1-home] .c-card-actions:has(> :nth-child(2)) */
  .c-card-buycol:has(> .c-card-actions--buy) > .c-card-actions.c-card-actions--buy {
    display: contents;
  }

  .c-card-buycol:has(> .c-card-actions--buy) > .d-price {
    grid-row: 1;
    grid-column: 2;
    justify-content: flex-end;
    min-width: 0;
    text-align: right;
  }

  .c-card-buycol:has(> .c-card-actions--buy) .qstep {
    grid-row: 1;
    grid-column: 1;
  }
}

/* ≤560px the storefront renders #main at zoom .9 (v3-mobile-compact.css): 48px CSS keeps every card action
   ≥40px on screen. */
@media (max-width: 560px) {
  .c-card-tag {
    top: 6px;
    right: 6px;
    padding: 2px 6px;
    font-size: 9.5px;
  }

  .c-card-actions .btn,
  .c-card-buycol .c-card-actions .btn,
  .c-card-details {
    min-height: 48px;
  }
}

/* DG-MOBILE-STOREFRONT-POLISH-20 (Mark) — the phone product card (layout in v3-design-overrides.css, section C):
   the shared foot spans the full card width beneath the image/identity row. */
@media (max-width: 720px) {
  .d-pcard2 .c-card-foot,
  .d-catalog--home-bestsellers .d-pcard .c-card-foot,
  .d-catalog--how-packs .d-pcard .c-card-foot {
    grid-area: foot;
    margin-top: 12px;
    min-width: 0;
  }
}

/* DG-RESPONSIVE-FLAVOURS-HOME-HELP-POLISH-51G (Mark) — "Order again" with exactly three cards below 390px uses the same
   one-per-row phone card (layout in v3-home-refine.css): the shared foot takes the same full-width area. */
@media (max-width: 389.98px) {
  .d-order-again[data-order-again-count="3"] .d-pcard .c-card-foot {
    grid-area: foot;
    margin-top: 12px;
    min-width: 0;
  }
}

/* DG-MOBILE-STOREFRONT-POLISH-20 (Mark, 2026-10-02) — guests (not signed in) see no card action row (Quick view /
   pack actions) on any width; the price gate and the card's own links stay. Signed-in customers are unchanged. */
[data-auth="out"] .c-card-actions {
  display: none;
}

/* DG-MOBILE-STOREFRONT-POLISH-20H — phones: in the list row the buy column spans the full card width beneath the
   flavour picker (layout in v3-design-overrides.css, 20H). */
@media (max-width: 720px) {
  .d-prow > .c-card-buycol {
    grid-area: buy;
    margin-top: 12px;
  }
}

/* ==========================================================================
   DG-HOME-PACK-BUILD-CLOSEOUT-51A / DG-CARD-ALIGNMENT-QUICKVIEW-51E — .c-card-row: the homepage's curated and "Order
   again" rows of the approved signed-in tiers. The grid is the standard compact grid (four across, two per row on
   phones) and the cards keep the standard action row: the green primary and the outlined "Quick view" (Mark, 51E:
   never hidden, also on phones). The modifier only lets the foot and its buttons fit a two-per-row phone card: they
   may shrink with the card and wrap their label instead of pushing past it.
   ========================================================================== */
@media (max-width: 760px) {
  .c-card-row .c-card-foot,
  .c-card-row .c-card-foot > * {
    min-width: 0;
  }

  .c-card-row .c-card-actions {
    gap: 6px;
  }

  .c-card-row .c-card-actions .btn {
    min-width: 0;
    padding: 8px 6px;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
  }
}

/* DG-STOREFRONT-FINISH-CART-21 A2 (Mark) — homepage cards on phones: the buy action and the information action side by side
   in two equal columns (8px gap, 44px targets, no overflow) in every density, also in the two-per-row rows. Where the row
   gets narrow the visible words become "Add" and "View" (Mark, exact): the original label stays in the accessibility tree
   (font-size 0, not removed) and the short word is generated content with an empty alternative, so every accessible name
   (and its product / pack context) is unchanged. Form fields, actions and data are untouched. */
@media (max-width: 720px) {
  [data-h1-home] .c-card-actions:has(> :nth-child(2)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    container-type: inline-size;
  }

  [data-h1-home] .c-card-actions:has(> :nth-child(2)) > * {
    min-width: 0;
  }

  [data-h1-home] .c-card-actions:has(> :nth-child(2)) .btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    white-space: nowrap;
  }
}

/* DG-CART-CHECKOUT-REFINEMENT-26 (Mark): the hidden full label is a zero-width flex item, so the button's own gap pushed the
   short word off centre (an empty gap on the left); the space now belongs to the icon only (gone with it). While the Add is
   loading the short word comes from ::before and stays still: only the existing spinner (::after) turns. */
@container (max-width: 300px) {
  [data-h1-home] .c-card-actions .btn:is(.c-card-primary, .c-card-qv) {
    font-size: 0;
    gap: 0;
  }

  [data-h1-home] .c-card-actions .btn:is(.c-card-primary, .c-card-qv) [data-ico] {
    margin-right: 6px;
  }

  [data-h1-home] .c-card-actions .btn.c-card-primary::after {
    content: "Add" / "";
    font-size: 14px;
  }

  [data-h1-home] .c-card-actions .btn.c-card-qv::after {
    content: "View" / "";
    font-size: 14px;
  }

  [data-h1-home] .c-card-actions .btn.c-card-primary.is-loading::before {
    content: "Add" / "";
    font-size: 14px;
  }

  [data-h1-home] .c-card-actions .btn.c-card-primary.is-loading::after {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    margin-left: 4px;
  }
}

@container (max-width: 190px) {
  [data-h1-home] .c-card-actions .btn:is(.c-card-primary, .c-card-qv) [data-ico] {
    display: none;
  }
}

/* DG-LOCAL-FINAL-JOURNEYS-21 (Mark) / DG-CARD-ACTIONS-ACCOUNT-POLISH-27 — homepage phones: the List row's action group takes the
   shared two-column action grid and its short words above ("Add" / "View" where the group gets narrow; the original label
   stays the accessible name); the stepper keeps its own row (rule above) and the buttons keep the 48px List targets. */
@media (max-width: 720px) {
  [data-h1-home] .c-card-actions--buy .btn:is(.c-card-primary, .c-card-qv) {
    min-height: 48px;
  }
}