/* =========================================================================
   WooCommerce — Archive produit (boutique + catégories)
   Mise en page propre au listing : grille 3 colonnes + pagination.
   La tuile elle-même est stylée dans product-card.css (couche partagée avec
   les produits associés de la fiche produit).
   ========================================================================= */

/* ── Bloc de référencement collé au footer ───────────────────────────────
   Le `<main>` porte une marge basse globale (base/layout.css, `main{ }`). Quand
   la lame SEO (`lame-seo-affineur-cdm`, bande crème de clôture) est présente, on
   veut qu'elle touche le footer → on annule la marge basse du main. Le `:has(>)`
   garde la marge quand la lame SEO est masquée (catégorie sans contenu) pour
   ne pas coller la grille au footer. Ce fichier n'est chargé que sur les
   archives produit → pas d'impact ailleurs. Spécificité 0,1,1 > 0,0,1. */
main:has(> .lame-seo-affineur-cdm) {
    margin-bottom: 0;
}

/* ── Première lame (haut de page) ────────────────────────────────────────
   Sur le listing produits (boutique + catégories), la lame d'en-tête colle au
   header : on réduit son rythme haut xxxl (règle canonique de core-group.css)
   à `l`. Scopé au contexte archive via l'adjacence avec le listing (le
   `:has(+ …)` ne matche que la lame d'en-tête suivie de la grille produits),
   pour ne pas toucher la composition `haut-boutique-cdm` utilisée ailleurs.
   Spécificité 0,3,0 > 0,2,0 de la règle canonique. */
.wp-block-group.lame-haut-boutique-cdm:has(+ .lame-listing-produits-cdm) {
    margin-block-start: var(--wp--preset--spacing--l) !important;
}

/* ── Lame listing ─────────────────────────────────────────────────────────
   Marge haute réduite (l) : la grille suit l'en-tête de près. Spécificité 0,2,1
   (préfixe `main`) pour passer devant la règle canonique `xxxl` de
   core-group.css (0,2,0), les deux étant en !important. */
main .wp-block-group.lame-listing-produits-cdm {
    padding-block: 0;
    margin-block-start: var(--wp--preset--spacing--l) !important;
}

/* ── Compteur « N produits » (juste au-dessus de la grille) ──────────────────
   Typo mono (JetBrains Mono = font-family tertiary), gris texte (quinary).
   Préfixe `p.` pour battre `.woocommerce p` (0,1,1) sur les pages Woo. */
p.lame-listing-produits-cdm__count {
    margin: 0 0 var(--wp--preset--spacing--m);
    padding-bottom: var(--wp--preset--spacing--m);
    border-bottom: 1px solid var(--wp--custom--color--gris-bordure);
    font-family: var(--wp--preset--font-family--tertiary);
    font-size: var(--wp--preset--font-size--xxs);
    font-weight: var(--wp--custom--font-weight--regular);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--quinary);
}

/* ── Grille des tuiles — 3 colonnes ──────────────────────────────────────
   Woo fournit un flex fonctionnel via `.is-flex-container.columns-3`. On garde
   ce mécanisme (un `display:grid` en surcouche casse le calcul de largeur) et
   on pilote la largeur des `<li>` en tenant compte du gap. Woo double
   volontairement `.is-flex-container` pour gonfler sa spécificité → on la
   double aussi pour passer devant. Formule N colonnes :
   width = (100% - (N-1) × gap) / N. */
.lame-listing-produits-cdm__grid .wc-block-product-template {
    gap: var(--wp--preset--spacing--m);
}

/* La tuile est en content-box avec une bordure de 1px : sans border-box, cette
   bordure s'ajoute à la largeur calculée et fait déborder la rangée (3 tuiles
   repassent à 2). On inclut donc la bordure dans la largeur. */
.lame-listing-produits-cdm__grid .wc-block-product-template > li {
    box-sizing: border-box;
}

/* ≥ 993px : 3 tuiles par ligne */
.lame-listing-produits-cdm__grid .wc-block-product-template.is-flex-container.is-flex-container.columns-3 > li {
    width: calc((100% - var(--wp--preset--spacing--m) * 2) / 3);
}

/* 600–992px : 2 tuiles par ligne */
@media (min-width: 600px) and (max-width: 992px) {
    .lame-listing-produits-cdm__grid .wc-block-product-template.is-flex-container.is-flex-container.columns-3 > li {
        width: calc((99% - var(--wp--preset--spacing--m)) / 2);
    }
}

/* < 600px : 1 tuile par ligne */
@media (max-width: 599.98px) {
    .lame-listing-produits-cdm__grid .wc-block-product-template.is-flex-container.is-flex-container.columns-3 > li {
        width: 100%;
    }
}

/* ── Pagination ──────────────────────────────────────────────────────────
   Même traitement que le listing actualités/recettes (cf. core-group.css
   `.lame-listing-actualites-cdm__pagination`) : centrée, trait au-dessus,
   pastilles carrées, page courante en pastille pleine sombre. */
.lame-listing-produits-cdm__pagination {
    margin-top: var(--wp--preset--spacing--xxl) !important;
    padding-top: var(--wp--preset--spacing--xl);
    border-top: 1px solid var(--wp--custom--color--gris-bordure);
    gap: var(--wp--preset--spacing--xxs);
    align-items: center;
}

.lame-listing-produits-cdm__pagination .wp-block-query-pagination-numbers {
    display: flex;
    gap: var(--wp--preset--spacing--xxs);
}

.lame-listing-produits-cdm__pagination a,
.lame-listing-produits-cdm__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 50px;
    padding: 0 var(--wp--preset--spacing--xxs);
    font-family: var(--wp--preset--font-family--secondary);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: var(--wp--custom--font-weight--medium);
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.lame-listing-produits-cdm__pagination a:hover {
    color: var(--wp--preset--color--secondary);
}

/* Page courante : pastille pleine sombre */
.lame-listing-produits-cdm__pagination .page-numbers.current {
    color: var(--wp--preset--color--tertiary);
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}

.lame-listing-produits-cdm__pagination .page-numbers.dots {
    border-color: transparent;
}