/* =========================================
= COMPOSANT — GRILLE PRODUITS (.nl-category-list)
= Grille responsive 1 / 3 / 4 colonnes des archives (boutique + catégorie).
= Conteneur des cartes (wc-card) et des tuiles suggestion (wc-card-sug).
= Définit --grid-gap / --grid-gap-m + container-type (cqw) dont wc-card-sug hérite.
========================================= */
.nl-category-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 1.25rem 1rem;
  --grid-gap: 1.25rem;
  --grid-gap-m: 1.25rem;         /* référence pour le calcul de hauteur des tuiles larges */
  container-type: inline-size; /* active les unités cqw (largeur réelle de la grille) */
}
@media (min-width: 48rem) {
  .nl-category-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 64rem) {
  .nl-category-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 2.5rem 2rem;}
}

/* Reveal au scroll (wc-category-list.js) : état initial masqué AVANT le JS,
   UNIQUEMENT si le scripting est actif ET les animations autorisées → aucun flash.
   Sans JS / GSAP absent / reduced-motion → cartes visibles (le JS révèle en fallback). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .nl-category-list > li { opacity: 0; }
}