/* "product_cards" layout: heading row + auto-fit card grid (square media, meta, title, price, subscribe line, 2 CTAs). */
.product-cards { padding-block: var(--section-pad); }
.product-cards--pad-top { padding-bottom: 0; }
.product-cards--pad-bottom { padding-top: 0; }
.product-cards--pad-none { padding-block: 0; }
/* The band gap sits on whichever element the contract keys: the section root, or the inner container. */
.product-cards { margin-top: var(--product-cards-root-offset, 0px); }
.product-cards__wrap { margin-top: var(--product-cards-offset, 0px); }
.product-cards__content { margin-top: var(--product-cards-content-offset, 0px); }
.product-cards {
  display: block;
  background: rgba(var(--color-background));
  color: rgba(var(--color-text));
}
.product-cards__grid { margin-top: var(--product-cards-head-gap, 34px); }
.product-cards__card {
  background: rgba(var(--color-card-background)); border: 1px solid var(--theme-line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-cards__card:hover { transform: translateY(-3px); box-shadow: var(--theme-shadow); }
.product-cards__media { background: rgba(var(--color-media-background)); position: relative; display: block; overflow: hidden; }
.product-cards__media img, .product-cards__media svg { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.product-cards__card:hover .product-cards__media img { transform: scale(1.04); }
.product-cards__badge { position: absolute; top: 14px; left: 14px; }
.product-cards__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-cards--compact .product-cards__body { padding: 18px; gap: 8px; }
.product-cards__meta { font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-text-mono); }
.product-cards__short { font-size: 14px; line-height: 1.5; }
.product-cards__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.product-cards__unit { font: 500 13px/1 var(--font-mono); color: var(--theme-text-mono); }
.product-cards__sub { background: rgba(var(--color-background)); border-radius: var(--radius-sm); padding: 11px 13px; font: 600 12px/1.4 var(--font-body); }
.product-cards__cta { display: flex; gap: 8px; margin-top: auto; }
.product-cards__form, .product-cards__product-form { display: contents; }
.product-cards__cta .theme-btn { flex: 1; padding-inline: 12px; white-space: nowrap; }
.product-cards__error { display: none; }
@media (max-width: 480px) {
  .product-cards__cta { flex-direction: column; }
  .product-cards__cta .theme-btn { width: 100%; }
  .product-cards__body { padding: 18px; }
}

/* ---- "Row" card variant ------------------------------------------------------------------
   A wide two-column card (contained media panel beside the body) used when a catalogue shows
   two cards per row instead of the square auto-fit grid. Shared from here so a merchant never
   sees two different product cards in one theme; `main-collection-products` loads this file
   through `../featured-collection/product-cards.css`. */
.product-cards__grid--rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.product-cards__card--row { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.product-cards__card--row .product-cards__media { display: flex; align-items: center; justify-content: center; padding: 14px; }
.product-cards__card--row .product-cards__media img,
.product-cards__card--row .product-cards__media svg {
  aspect-ratio: auto; height: 100%; min-height: 210px; max-height: 280px; object-fit: contain;
}
.product-cards__card--row .product-cards__body { padding: 24px; }
.product-cards__card--row .product-cards__badge { top: 12px; left: 12px; }
@media (max-width: 1040px) {
  .product-cards__grid--rows { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .product-cards__card--row { grid-template-columns: 1fr; }
  .product-cards__card--row .product-cards__media img,
  .product-cards__card--row .product-cards__media svg { min-height: 0; max-height: none; aspect-ratio: 1; width: 100%; }
  .product-cards__card--row .product-cards__body { padding: 20px; }
}

/* ---- Plain card image ---------------------------------------------------------------------
   The plain card (components/product-plain-card.html) prints its image through the stock image tag,
   which carries the file's own width and height attributes. Without `height: auto` the height
   attribute beats the square `aspect-ratio` set on `.product-cards__media img` above. */
.product-cards__media .product-cards__image { height: auto; }

/* ---- Row filled from a collection ------------------------------------------------------------
   `.product-cards__grid--fallback` is on the grid only when the section fills it with plain cards.
   The shared grid is `auto-fit`, which stretches one or two cards across the whole box. Here the
   tracks are `auto-fill` and never narrower than one of N equal columns (N = the section's
   "Products from the collection", carried by the cap class), so a full row looks exactly like a typed
   row of N cards and a short row keeps that column's width. The 0.5px keeps N columns from rounding
   down to N - 1. Breakpoints and gaps mirror `.theme-grid` / `.theme-grid--cards` in tokens.css. */
.product-cards__grid.product-cards__grid--fallback {
  --product-cards-gap: 20px;
  --product-cards-col: calc((100% - (var(--product-cards-cap, 3) - 1) * var(--product-cards-gap)) / var(--product-cards-cap, 3) - 0.5px);
  grid-template-columns: repeat(auto-fill, minmax(max(290px, var(--product-cards-col)), 1fr));
}
@media (max-width: 900px) {
  .product-cards__grid.product-cards__grid--fallback {
    --product-cards-gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 260px), var(--product-cards-col)), 1fr));
  }
}
@media (max-width: 560px) {
  .product-cards__grid.product-cards__grid--fallback { grid-template-columns: 1fr; }
}
/* Bottle has no render-time counter: the section prints one member more than it shows (so skipping the
   viewed product still fills the row) and the row is capped here. */
.product-cards__grid--cap-1 { --product-cards-cap: 1; }
.product-cards__grid--cap-2 { --product-cards-cap: 2; }
.product-cards__grid--cap-3 { --product-cards-cap: 3; }
.product-cards__grid--cap-4 { --product-cards-cap: 4; }
.product-cards__grid--cap-5 { --product-cards-cap: 5; }
.product-cards__grid--cap-6 { --product-cards-cap: 6; }
.product-cards__grid--cap-1 > :nth-child(n+2),
.product-cards__grid--cap-2 > :nth-child(n+3),
.product-cards__grid--cap-3 > :nth-child(n+4),
.product-cards__grid--cap-4 > :nth-child(n+5),
.product-cards__grid--cap-5 > :nth-child(n+6),
.product-cards__grid--cap-6 > :nth-child(n+7) { display: none; }

/* ---- Plain card without an image -----------------------------------------------------------
   The platform's placeholder tag prints nothing on this store, so a plain card whose product has no
   image printed an empty media link: a bare strip. Both plain cards (the catalogue's and the related
   row's) print the product's title here instead — display type, cream on ink, the empty-gallery
   panel's family. The box takes the shape a square product image takes in the same place: square in
   the grid card, square held between 210 and 280 px tall beside the body in the row card, square
   again when the row card stacks (≤ 560 px) — so it can never collapse. The type is sized from the box itself (container
   units, with a viewport fallback) and breaks inside a word before it would overflow. */
.product-cards__placeholder {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 100%; aspect-ratio: 1; padding: 10%; overflow: hidden; container-type: inline-size;
  background: var(--theme-ink); color: var(--theme-cream); text-align: center;
}
.product-cards__placeholder-text {
  max-width: 100%; overflow-wrap: anywhere;
  font: 400 clamp(16px, 2.2vw, 30px)/1 var(--font-display); letter-spacing: -0.02em; text-transform: uppercase;
  font-size: clamp(16px, 9cqw, 34px);
}
/* Row card: a square image there is as tall as it is wide, held between 210 and 280 px. */
.product-cards__card--row .product-cards__placeholder { min-height: 210px; max-height: 280px; padding: 8%; }
@media (max-width: 560px) {
  .product-cards__card--row .product-cards__placeholder { min-height: 0; max-height: none; padding: 10%; }
}