/**
 * [saf_merch] standalone storefront styles.
 *
 * Extracted from peer-dashboard.css (s126). The merch shortcode renders on a
 * PUBLIC page that has nothing to do with the peer dashboard, so it now carries
 * its own stylesheet rather than riding along on the dashboard bundle. That
 * coupling was load-bearing until this file existed: dropping the `saf_merch`
 * clause from SAF_PD_Shortcode::enqueue_assets() unstyled the live /merch/ page
 * while every non-visual gate stayed green (s125, reverted).
 *
 * Every selector below is emitted by SAF_PD_Shortcode::render_merch(). Keep the
 * two in sync -- `scripts/saf-merch-enqueue-gate.test.mjs` asserts the coupling.
 */

.saf-merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--saf-gap-4);
  margin-top: var(--saf-gap-4);
  /* Now a <ul role="list"> -- strip default list chrome. */
  list-style: none;
  padding: 0;
}

.saf-merch-card {
  background: #fff;
  border: 1px solid var(--saf-border);
  border-radius: 10px;
  padding: var(--saf-gap-4);
  display: grid;
  gap: var(--saf-gap-2);
  /* CTA pinned to the bottom so cards in a row stay equal height. */
  grid-template-rows: auto auto auto 1fr auto;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.saf-merch-card:hover,
.saf-merch-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.saf-merch-card__img,
.saf-merch-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
}

.saf-merch-card__img--placeholder {
  display: block;
  background: var(--saf-surface-alt, #f1ebd9);
  border: 1px dashed var(--saf-border);
}

.saf-merch-card h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--saf-charcoal);
}

.saf-merch-card p {
  margin: 0;
  font-size: var(--saf-text-sm);
  color: var(--saf-fg-muted);
}

.saf-merch-price {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--saf-charcoal);
}

.saf-merch-card__cta {
  align-self: end;
  text-align: center;
}

.saf-merch-card__oos {
  align-self: end;
}

/**
 * The out-of-stock badge is emitted as
 * `saf-pd__buy-stock--out saf-merch-card__oos`, so its COLOR lived in the
 * peer-dashboard bundle even though the markup is merch-only. Carried here so
 * an out-of-stock card still renders muted once this page stops loading that
 * bundle. Kept under the merch scope to avoid re-declaring a `saf-pd__` rule
 * that the dashboard also owns.
 */
.saf-merch-card .saf-pd__buy-stock--out,
.saf-merch-card__oos {
  color: var(--saf-fg-muted);
}

.saf-merch-empty {
  padding: var(--saf-gap-6, 2rem);
  text-align: center;
  color: var(--saf-fg-muted);
}

@media (prefers-reduced-motion: reduce) {
  .saf-merch-card {
    transition: none;
  }
  .saf-merch-card:hover,
  .saf-merch-card:focus-within {
    transform: none;
  }
}