/* ==========================================================================
   GBV România — card.css (chunk 3; PORT_MAPPING §8)
   The product card, grid variant: WooCommerce's loop markup inside Astra's
   wrappers (li.product › .astra-shop-thumbnail-wrap + .astra-shop-summary-
   wrap) restyled to ProductCard.dc.html. The tag, the binding chip, the
   author, the availability line and the button labels come from
   inc/card.php. Scope: ul.products li.product.gbv-card, which matches
   Astra's own selector depth so the rules win by source order. Token
   variables only; the literals carry their source. Not loaded on the block
   cart, the checkout or My Account (inc/enqueue.php). §6 is the row variant
   (chunk 4a, catalog pages with html.gbv-rows); the catalog grid steps are
   catalog.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Card shell: white, hairline, radius 10, lift on hover
   -------------------------------------------------------------------------- */
ul.products li.product.gbv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: var(--surface-card);
  border: var(--stroke-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  text-align: left;
  transition:
    transform var(--motion-lift) ease,
    box-shadow var(--motion-lift) ease;
}
@media (hover: hover) {
  ul.products li.product.gbv-card:hover {
    transform: translateY(var(--lift-y));
    box-shadow: var(--shadow-md);
  }
}

/* Stretched title link (audit E1): the whole card is the link, the
   add-to-cart control sits above it. */
ul.products li.product.gbv-card .ast-loop-product__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
ul.products li.product.gbv-card .ast-loop-product__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
ul.products li.product.gbv-card .gbv-card__add {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   2. Cover well: square, sunken, the cover contained; dimmed when out of stock
   -------------------------------------------------------------------------- */
ul.products li.product.gbv-card .astra-shop-thumbnail-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  margin: 0;
  padding: 9px;                                         /* ProductCard well */
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity var(--motion-base) ease;
}
ul.products li.product.gbv-card .astra-shop-thumbnail-wrap img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  border-radius: var(--radius-xs);
  box-shadow: none;
}
ul.products li.product.gbv-card.outofstock .astra-shop-thumbnail-wrap {
  opacity: 0.6;                                         /* ProductCard coverOpacity */
}

/* Tag „Nou” / „Recomandat” / „−N %” (shape and type: base.css .gbv-tag): a
   child of the card between the two wraps (inc/card.php), placed over the
   cover's top-left corner — the card is the containing block */
ul.products li.product.gbv-card .gbv-card__tag {
  position: absolute;
  top: 13px;                                            /* ProductCard tag offset */
  left: 10px;
  z-index: 2;
  margin: 0;
  box-shadow: var(--shadow-xs);
}

/* --------------------------------------------------------------------------
   3. Summary: a column with the buy group pinned to the bottom; the card body
      is the container the short button label is measured against
   -------------------------------------------------------------------------- */
ul.products li.product.gbv-card .astra-shop-summary-wrap {
  container-type: inline-size;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 14px 16px 16px;                              /* ProductCard body */
  text-align: left;
}
ul.products li.product.gbv-card .astra-shop-summary-wrap > *,
ul.products li.product.gbv-card .gbv-card__buy > * {
  margin: 0;
}
/* The price + availability wrapper (inc/card.php) is transparent in the
   card view; the row view lays it out as the right-hand column */
ul.products li.product.gbv-card .gbv-card__buy {
  display: contents;
}

/* Binding chip (neutral tag) */
ul.products li.product.gbv-card .gbv-card__binding {
  align-self: flex-start;
  margin-bottom: 2px;                                   /* ProductCard chip */
}

/* Title 15 / 600, no clamp (mockup) */
ul.products li.product.gbv-card .woocommerce-loop-product__title {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  line-height: 1.3;
  color: var(--text-strong);
}

/* Author 13 px muted */
ul.products li.product.gbv-card .gbv-card__author {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-caption);
  line-height: 1.3;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   4. Buy group: price (+ struck old price, „Gratuit”), availability, button
   -------------------------------------------------------------------------- */
ul.products li.product.gbv-card .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;                                             /* ProductCard price row */
  margin: auto 0 0;
  padding-top: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  line-height: 1;
  color: var(--color-brand);
}
ul.products li.product.gbv-card .price ins {
  order: 1;
  background: none;
  font-weight: var(--fw-bold);
  color: var(--color-accent-strong);
  text-decoration: none;
}
ul.products li.product.gbv-card .price del {
  order: 2;
  opacity: 1;
  font-weight: var(--fw-regular);
  font-size: var(--text-caption);
  color: var(--text-muted);
  text-decoration: line-through;
}
ul.products li.product.gbv-card .price .gbv-price--free {
  color: var(--text-strong);
}

ul.products li.product.gbv-card .gbv-card__avail {
  display: inline-flex;
  align-items: center;
  gap: 5px;                                             /* ProductCard availability */
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  line-height: 1;
  white-space: nowrap;
  color: var(--text-muted);
}
ul.products li.product.gbv-card .gbv-card__avail--backorder { color: var(--color-accent-strong); }
ul.products li.product.gbv-card .gbv-card__avail--free      { color: var(--text-strong); }
ul.products li.product.gbv-card .gbv-card__dot {
  flex: none;
  width: 7px;                                           /* ProductCard dot */
  height: 7px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

/* Add to cart: full width, 36 px (44 px below the tablet switch, B6), accent */
ul.products li.product.gbv-card .gbv-card__add,
ul.products li.product.gbv-card a.gbv-card__add,
ul.products li.product.gbv-card .button.gbv-card__add {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 6px;                                             /* ProductCard button */
  min-height: var(--btn-sm);
  margin: var(--space-1) 0 0;
  padding: 0 var(--space-3);
  background: var(--color-accent);
  border: var(--stroke-default) solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--text-on-accent);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-caption);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--motion-base) ease,
    border-color var(--motion-base) ease,
    color var(--motion-base) ease,
    opacity var(--motion-base) ease,
    transform var(--motion-press) ease;
}
ul.products li.product.gbv-card .gbv-card__add:hover,
ul.products li.product.gbv-card .gbv-card__add:focus-visible {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--text-on-brand);
}
ul.products li.product.gbv-card .gbv-card__add:active {
  transform: scale(0.98);
}
ul.products li.product.gbv-card .gbv-card__add .gbv-icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
}
/* WooCommerce's own loading / added indicators (padding, spinner, tick) are
   not used: the labels and the toast carry the feedback. */
ul.products li.product.gbv-card .gbv-card__add.loading {
  opacity: 0.7;
  cursor: progress;
}
ul.products li.product.gbv-card .gbv-card__add.loading::after,
ul.products li.product.gbv-card .gbv-card__add.added::after {
  content: none;
}
/* One label at a time: full › short (narrow card) › „Adăugat ✓” after an add */
ul.products li.product.gbv-card .gbv-card__label--short,
ul.products li.product.gbv-card .gbv-card__label--added {
  display: none;
}
@container (max-width: 139px) {                        /* ProductCard: long label needs ~140 px */
  ul.products li.product.gbv-card .gbv-card__label--full  { display: none; }
  ul.products li.product.gbv-card .gbv-card__label--short { display: inline; }
}
ul.products li.product.gbv-card .gbv-card__add.added .gbv-card__label--full,
ul.products li.product.gbv-card .gbv-card__add.added .gbv-card__label--short {
  display: none;
}
ul.products li.product.gbv-card .gbv-card__add.added .gbv-card__label--added {
  display: inline;
}
/* Out of stock / not purchasable: outlined, not a link (review R3) */
ul.products li.product.gbv-card .gbv-card__add--out,
ul.products li.product.gbv-card .gbv-card__add--out:hover {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-strong);
  cursor: default;
}
/* WooCommerce's post-add „Vezi coșul” link: the toast carries it */
ul.products li.product.gbv-card a.added_to_cart {
  display: none;
}
@media (max-width: 920.98px) {
  ul.products li.product.gbv-card .gbv-card__add {
    min-height: var(--btn-md);
  }
}

/* --------------------------------------------------------------------------
   5. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  ul.products li.product.gbv-card:hover,
  ul.products li.product.gbv-card .gbv-card__add:active {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   6. Row variant (chunk 4a; ProductCard.dc.html, row): the same markup laid
      out as a 128 px row — the cover left, tag + binding, title and author
      in the middle, the price column and a 140 px control at the right; a
      two-row card under 600 px; cards again under 360 px (catalog.css). The
      card itself is the grid and the summary wrap dissolves into it
      (display: contents) so the tag, printed between the wraps, joins the
      chips row. Keyed on html.gbv-rows (catalog.js) on catalog pages only.
      Spacer columns carry the mockup's 18 px paddings; two flexible pad rows
      centre the chips / title / author block the way the mockup's flex
      column does — the cover and the right-hand column span every row, and
      without the pads their 128 px would be spread over the text rows.
      Vertical rhythm by margins (chips 2 + 4 to the title, 4 to the
      author), not a row gap, so a missing author leaves no gap behind.
   -------------------------------------------------------------------------- */
@media (min-width: 360px) {
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card {
    display: grid;
    grid-template-columns: 128px 18px auto auto minmax(0, 1fr) auto 18px auto; /* cover · pad · tag · chip · (title) · price · pad · control */
    grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr); /* pad · chips · title · author · pad */
    align-items: center;
    height: 128px;                                      /* ProductCard row */
    padding-right: 18px;
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .astra-shop-thumbnail-wrap {
    grid-row: 1 / 6;
    grid-column: 1;
    align-self: stretch;                                /* the row's inner height (ProductCard row cover: height 100 %) */
    width: 128px;
    height: auto;
    aspect-ratio: auto;
    padding: 6px;                                       /* ProductCard row cover */
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .astra-shop-summary-wrap {
    display: contents;
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .gbv-card__tag {
    position: static;
    grid-row: 2;
    grid-column: 3;
    margin: 0 6px 6px 0;                                /* ProductCard row chips: gap 6, margin-bottom 2 + the info gap 4 */
    box-shadow: none;
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .gbv-card__binding {
    grid-row: 2;
    grid-column: 4;                                     /* beside the tag; without a tag column 3 is empty and 0 wide */
    align-self: center;
    margin: 0 0 6px;
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .ast-loop-product__link {
    grid-row: 3;
    grid-column: 3 / 6;
    min-width: 0;
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .gbv-card__author {
    grid-row: 4;
    grid-column: 3 / 6;
    margin: 4px 0 0;                                    /* ProductCard row info gap */
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .gbv-card__buy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;                                           /* ProductCard row price column */
    grid-row: 1 / 6;
    grid-column: 6;
    margin-left: 18px;
    text-align: right;
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .price {
    margin: 0;
    padding: 0;
    justify-content: flex-end;
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .gbv-card__add,
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card a.gbv-card__add,
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .button.gbv-card__add {
    grid-row: 1 / 6;
    grid-column: 8;
    width: auto;
    min-width: 140px;                                   /* ProductCard row control */
    margin: 0;
  }
}
/* Under 600 px: the cover spans a two-row card, the text block centred
   above the buy row (price left, control right, the short label), the
   mockup's 10 / 4 + 4 / 12 vertical paddings as a pad row, margins, a pad row */
@media (min-width: 360px) and (max-width: 599.98px) {
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card {
    grid-template-columns: 124px 14px auto auto minmax(0, 1fr) auto; /* cover · pad · tag · chip · (title) · control */
    grid-template-rows: 10px minmax(0, 1fr) auto auto auto minmax(0, 1fr) auto 12px; /* pad · (centre) chips · title · author (centre) · buy row · pad */
    height: auto;
    min-height: 178px;                                  /* ProductCard row < 600 */
    padding-right: 14px;
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .astra-shop-thumbnail-wrap {
    grid-row: 1 / 9;
    align-self: center;
    width: 124px;
    height: 166px;                                      /* ProductCard row < 600 */
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .gbv-card__tag,
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .gbv-card__binding {
    grid-row: 3;                                        /* the columns stay 3 and 4 */
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .ast-loop-product__link {
    grid-row: 4;
    grid-column: 3 / 7;
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .gbv-card__author {
    grid-row: 5;
    grid-column: 3 / 7;
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .gbv-card__buy {
    grid-row: 7;
    grid-column: 3 / 6;                                 /* through the flexible title column: a span over the auto tag and chip columns alone would size them to the price and push the chip off the title's edge */
    align-items: flex-start;
    justify-self: start;
    margin: 8px 10px 0 0;                               /* info padding-bottom 4 + buy padding-top 4 */
    text-align: left;
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .price {
    justify-content: flex-start;
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .gbv-card__add,
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card a.gbv-card__add,
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .button.gbv-card__add {
    grid-row: 7;
    grid-column: 6;
    justify-self: end;
    min-width: 0;
    margin-top: 8px;
  }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .gbv-card__label--full  { display: none; }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .gbv-card__label--short { display: inline; }
  html.gbv-rows body.gbv-archive ul.products li.product.gbv-card .gbv-card__add.added .gbv-card__label--short { display: none; }
}