/* =====================================================================================================
   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;
}

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

/* List: the buy column — gate/price → [quantity + Add to cart] → Quick view → 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);
}

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

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

.c-card-buyrow > .btn {
  flex: 1 1 120px;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14.5px;
  white-space: nowrap;
}

.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;
}

/* 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-buyrow,
  .c-card-buycol > .c-card-actions {
    flex: 1 1 220px;
  }

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

/* ≤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-buyrow > .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-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;
  }
}