/* ==========================================================================
   all_cats_tags.css — shared overrides for the all-categories
   (all_cats.ejs) and all-tags (all_tags.ejs) browse pages.
   Loaded AFTER index.css/header.css/home.css/category.css. category.css
   supplies the page hero + (for all_tags.ejs) the filters sidebar/
   offcanvas/toolbar shell. This file only adds the wrapping card grid
   sized for .sp-cat-card cards (from partials/featured_category_card.ejs)
   -- distinct from category.css's .sp-cat-grid, which is sized for
   product cards instead.
   ========================================================================== */

/* All-categories page has no filters sidebar, so its grid spans full width
   on its own -- no .sp-cat-items two-column wrapper needed there. */
.sp-all-cats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 8px 0 56px;
}

/* All-tags page's grid sits inside .sp-cat-items' second column, next to
   its category filters sidebar (see category.css for that shell). */
.sp-cats-tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

@media (max-width: 560px) {
  .sp-all-cats-grid,
  .sp-cats-tags-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}