/* ============================================
   SELECTION-FRONT — PENSEZ SAUVAGE KRAFT
   Styles du shortcode [selection id="X"] côté visiteur.
   Hérite au maximum de shop.css (produits) et blog.css (articles).
   ============================================ */

/* ---- Wrapper ---- */
.ps-selection {
    margin: 3rem 0;
}

/* ---- Titre H2 (style kraft, aligné sur .ps-produits-lies-titre du bloc 11)
   Plus grand car H2 (vs H3 du bloc 11) — section éditoriale identifiée. */
.ps-selection-titre {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #2C1810;
    font-size: 1.6rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 1.2rem;
    text-align: center;
}

/* ============================================
   TYPE = PRODUIT
   La grille reprend le pattern .ps-produits-lies (bloc 11 fiche produit)
   pour garantir une cohérence visuelle parfaite. Le wrapper porte
   container-type/name pour activer les masquages progressifs ci-dessous.
   ============================================ */

.ps-selection--produit .ps-selection-grille {
    container-type: inline-size;
    container-name: ps-selection;
}

/* Centrage du lot (par défaut shop.css est flex-start, identique au bloc 11) */
.ps-selection--produit .ps-selection-grille.products {
    justify-content: center !important;
}

/* Seuils alignés sur .ps-produits-lies (bloc 11 fiche produit).
 * Voir REF_DECISIONS 2026-05-14 nuit. Si modification ici,
 * vérifier la cohérence avec css/product.css.
 * Calcul : 236px par vignette (220 + marges). Seuils 1297/1061/825/589
 * absorbent paddings et garantissent qu'on ne coupe pas en plein milieu
 * d'une vignette quand le container rétrécit. */
@container ps-selection (max-width: 1297px) {
    .ps-selection--produit .ps-selection-grille li.product:nth-child(n+6) {
        display: none !important;
    }
}
@container ps-selection (max-width: 1061px) {
    .ps-selection--produit .ps-selection-grille li.product:nth-child(n+5) {
        display: none !important;
    }
}
@container ps-selection (max-width: 825px) {
    .ps-selection--produit .ps-selection-grille li.product:nth-child(n+4) {
        display: none !important;
    }
}
@container ps-selection (max-width: 589px) {
    .ps-selection--produit .ps-selection-grille li.product:nth-child(n+3) {
        display: none !important;
    }
}

/* Smartphone (viewport ≤599px) : shop.css fait passer les vignettes en
 * 50% de largeur (2 colonnes), on autorise 4 vignettes sur 2 lignes.
 * Cohérent avec l'exception @media du bloc 11. */
@media (max-width: 599px) {
    .ps-selection--produit .ps-selection-grille li.product:nth-child(-n+4) {
        display: flex !important;
    }
    .ps-selection--produit .ps-selection-grille li.product:nth-child(n+5) {
        display: none !important;
    }
}

/* ============================================
   TYPE = ARTICLE
   Le <ul role="list"> enveloppe les <a class="ps-blog-vignette"> exactement
   comme archive.php (mêmes classes, même HTML). On reset seulement la
   sémantique de liste (puces, marges) — l'apparence visuelle des vignettes
   et de la grille flex est intégralement gérée par blog.css.
   ============================================ */

.ps-selection--article .ps-selection-grille {
    /* Hérite de .ps-blog-grid (flex wrap centré + gap 1.2rem) via la double
       classe HTML ; on neutralise simplement la sémantique <ul>. */
    list-style: none;
    margin: 0;
    padding: 0;
}
.ps-selection--article .ps-selection-item-article {
    /* Le <li> est transparent : c'est le <a class="ps-blog-vignette">
       enfant qui porte tout le style (border-image, flex column, etc.).
       On préserve le flex-basis : flex-shrink/grow viennent de .ps-blog-vignette. */
    list-style: none;
    margin: 0;
    padding: 0;
    display: contents;
}

/* Neutralisation du soulignement des liens de vignette dans une sélection.
   La règle équivalente existe déjà dans blog.css (.ps-blog-vignette
   text-decoration:none) mais perd la cascade contre les styles WC/GP qui
   soulignent les liens dans les zones de description de catégorie produit.
   Sélecteur 2-classes (0,2,0) > sélecteur 1-classe (0,1,0) → on reprend la
   main sans !important. Couvre tous les états du lien. */
.ps-selection .ps-blog-vignette,
.ps-selection .ps-blog-vignette:hover,
.ps-selection .ps-blog-vignette:focus,
.ps-selection .ps-blog-vignette:visited {
    text-decoration: none;
}