/*
 * sd-product-grid + sd-listing — product listing (Session 2.3; Blueprint 5.17, D-011, D-026 item 3)
 * Grid of sd-card--product: 5 per row on wide desktop (≥ 1280px, Blueprint 5.17), 4 at 1024px, 3 at 640px, 2 on phones.
 * The homepage products section uses --four (four per row, D-026).
 * Listing toolbar: result count (live region) + filter chips (chip.css); on phones the filters sit in an
 * accordion ("Filter products") so the products stay near the top.
 * Images: square 1:1, width/height set, loading="lazy" below the first row.
 */

.sd-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sd-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .sd-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sd-grid-gutter); }
}

@media (min-width: 1024px) {
  .sd-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .sd-product-grid:not(.sd-product-grid--four) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Narrow product cards: smaller title and padding (two per row on phones) */
.sd-product-grid .sd-card__title { font-size: var(--sd-font-size-body); line-height: var(--sd-line-height-small); }

@container (max-width: 13rem) {
  .sd-card--product .sd-card__body { padding: var(--sd-space-3); gap: var(--sd-space-2); }
  .sd-card--product .sd-card__media img { padding: var(--sd-space-2); }
  .sd-card--product .sd-card__footer { font-size: var(--sd-font-size-small); }
}

/* ---------- Listing toolbar ---------- */

.sd-listing__toolbar {
  display: grid;
  gap: var(--sd-space-4);
  margin-bottom: var(--sd-space-6);
}

.sd-listing__count {
  font-size: var(--sd-font-size-small);
  color: var(--sd-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.sd-listing__filters-mobile { display: none; }

@media (max-width: 639.98px) {
  .sd-listing__filters-desktop { display: none; }
  .sd-listing__filters-mobile { display: block; }
}

/* Empty state: no products in a category (Coming Soon) */
.sd-listing__empty {
  display: grid;
  gap: var(--sd-space-3);
  justify-items: start;
  padding: var(--sd-space-6);
  border: var(--sd-border-width) dashed var(--sd-color-border-control);
  border-radius: var(--sd-radius-md);
  background: var(--sd-color-surface-subtle);
}