/* Category and search results: four or five products a row on a desktop.
 *
 * The skin asks for product cards at least 350px wide (globalProductAutoGrid,
 * compiled into --grid-min-width on div.main-products.product-grid). Next to
 * the 260px filter column and its gap, that left a 1440px screen two products
 * a row on the category page and three only on much wider screens.
 *
 * The theme's own grid formula already has the lever for this: each track's
 * minimum is min(--grid-min-width, the width of one --grid-min-col'th share of
 * the row). Raising --grid-min-col caps the card's minimum at a quarter of the
 * row, so the row always fits four, and the card itself is not touched.
 *
 * Four only from 1280px: below that a quarter of the row is under ~215px and
 * the card's buttons get cramped, so 1024-1279px gets three. Five from 1400px
 * (2026-10-13): a card is then ~195px at 1440 and ~215px at 1536, wide enough
 * for the two stacked market buttons; at 1366 a fifth would be ~180px, so
 * that screen keeps four.
 *
 * Below 1024px (phones, tablets) two a row (2026-10-13, with sql/215, which
 * turns the phone listing from a list into this grid): --grid-min-col: 2 caps
 * the 350px minimum at half the row, so a 360px phone fits two ~160px cards.
 * A tablet still gets the 350px card, two or more a row.
 *
 * Both routes, so the two listings look the same. Three classes beat the
 * skin's "div.main-products.product-grid", so no !important - and it should
 * not grow one, or it would also override whatever the skin sets elsewhere.
 *
 * The filter column is about a third narrower on these two pages (2026-10-12):
 * the skin sets --col-l-width on body, 260px and 200px at 1200px and below;
 * here 175px and 140px. html.route-... body outranks the skin's bare "body"
 * rule. Desktop widths only: below 1024px the column is the theme's filter
 * panel, sized its own way. */

@media (max-width: 1023px) {
  .route-product-category .main-products.product-grid,
  .route-product-search .main-products.product-grid {
    --grid-min-col: 2;
  }
}

@media (min-width: 1024px) {
  .route-product-category .main-products.product-grid,
  .route-product-search .main-products.product-grid {
    --grid-min-col: 3;
  }
}

@media (min-width: 1280px) {
  .route-product-category .main-products.product-grid,
  .route-product-search .main-products.product-grid {
    --grid-min-col: 4;
  }
}

@media (min-width: 1400px) {
  .route-product-category .main-products.product-grid,
  .route-product-search .main-products.product-grid {
    --grid-min-col: 5;
  }
}

@media (min-width: 1024px) {
  html.route-product-category body,
  html.route-product-search body {
    --col-l-width: 175px;
  }
}

@media (min-width: 1024px) and (max-width: 1200px) {
  html.route-product-category body,
  html.route-product-search body {
    --col-l-width: 140px;
  }
}