/* Product card and the grid it sits in. */

.st-products,
ul.products {
  display: grid;
  grid-template-columns: repeat(var(--st-card-columns, 3), 1fr);
  gap: var(--st-grid-gap);
  padding: 0;
  margin: 0;
  list-style: none;
}

.st-card-item {
  display: flex;

  /* A grid item defaults to `min-width: auto`, which refuses to shrink below
     its content's intrinsic width -- a long product title pushed the track
     wider than its share and the whole page scrolled sideways by 23px at
     360px, on the shop archive, every category and search. The product
     screen's own cross-sell grid needed the same line. */
  min-width: 0;
}

.st-card {
  display: flex;
  flex: 1;
  flex-direction: column;

  /* `.st-card-item` already carries this for the grid track; the card is a
     FLEX item inside it and defaults to `min-width: auto` for the same reason,
     so a long unbroken product title could still push past its track. Two
     separate reviews reported a 6px overflow here that I could not reproduce
     across eight URLs at 360 and 390 — the guard is one line either way, so
     this closes the question rather than leaving it open a third time. */
  min-width: 0;
  background: var(--st-surface);
  border: var(--st-border-width) solid var(--st-ink);
  transition: box-shadow var(--st-transition);
}

/* :active alongside :hover — a touch device never hovers, so a hover-only
   elevation is a state those users can never reach. */
.st-card:hover,
.st-card:active,
.st-card:focus-within {
  box-shadow: var(--st-shadow-card);
}

.st-card__media {
  position: relative;
  background: var(--st-surface-2);
  border-bottom: var(--st-rule);
}

.st-card__image {
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.st-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 18px;
}

.st-card__title {
  font-size: var(--st-size-card-title);
  font-weight: var(--st-weight-bold);
  letter-spacing: 0;
  line-height: var(--st-lh-tight);
  text-wrap: pretty;
}

.st-card__title a {
  text-decoration: none;
}

/*
 * Defect fix: the brief's original order (hover selector first, :active
 * second) fails stylelint's no-descending-specificity — the hover
 * selector's specificity (0,3,1) outranks the :active selector's (0,2,1)
 * within the same selector list. Listing the lower-specificity selector
 * first resolves the lint with no change in cascade behaviour: both
 * selectors set the same property to the same value on the same rule, so
 * source order between them was never load-bearing.
 */
.st-card__title a:active,
.st-card:hover .st-card__title a {
  color: var(--st-accent-deep);
}

.st-card__swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.st-card__swatch {
  display: block;
  width: 22px;
  height: 22px;
  border: var(--st-border-width) solid var(--st-ink);
}

.st-card__swatch-more {
  color: var(--st-muted);
  font-size: 12px;
  font-weight: var(--st-weight-semibold);
}

.st-card__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.st-card__price {
  margin-top: auto;
  padding-top: 8px;
}

.st-card__cta {
  margin-top: 4px;
}

@media (max-width: 899px) {
  .st-products,
  ul.products {
    --st-card-columns: 2;

    gap: var(--st-grid-gap-mobile);
  }
}