/* =========================================================================
   WooCommerce — Tuile produit (ProductCard)
   Couche partagée : produits associés (fiche produit) ET listing boutique
   (3 tuiles/ligne). Cf. assets/img/plus.svg pour le bouton « + ».
   ========================================================================= */

/* ── En-tête de section « Vous pourriez aussi aimer » ───────────────────── */
.wp-block-group.lame-produits-associes-cdm {
    padding-block: 0;
    /* Respiration avant le footer (dernière lame de la fiche produit). */
    margin-bottom: var(--wp--preset--spacing--xxxl);

    .lame-produits-associes-cdm__head {
        margin-bottom: var(--wp--preset--spacing--xl);
        gap: var(--wp--preset--spacing--m);
    }

    .lame-produits-associes-cdm__intro > .is-style-paragraph-overline-cdm {
        margin-bottom: var(--wp--preset--spacing--xs);
    }

    .lame-produits-associes-cdm__title {
        margin: 0;

        em {
            font-style: italic;
        }
    }

    /* Lien « Tous les fromages » : jamais étiré, jamais renvoyé à la ligne seul */
    .lame-produits-associes-cdm__action {
        flex: 0 0 auto;
    }
}

/* ── Grille des tuiles ────────────────────────────────────────────────── */
/* Woo fournit déjà un flex 4-colonnes fonctionnel (`.is-flex-container.columns-4`
   → `width:calc(25% - .9375em)` par tuile) : on garde ce mécanisme (un
   `display:grid` en surcouche casse ce calcul de largeur) et on ne réajuste
   que le gap + le nombre de colonnes en dessous du desktop. Formule N colonnes :
   width = (100% - (N-1) × gap) / N. */
.lame-produits-associes-cdm__grid .wc-block-product-template {
    gap: var(--wp--preset--spacing--m);
}

/* Woo scope ses largeurs via `.is-flex-container.is-flex-container.columns-4`
   (classe doublée = spécificité gonflée). On double aussi `.is-flex-container`
   pour passer devant, sinon le 4-colonnes natif reste prioritaire. */

/* 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 (la 4ᵉ
   tuile repasse à la ligne). On inclut donc la bordure dans la largeur. */
.lame-produits-associes-cdm__grid .wc-block-product-template > li {
    box-sizing: border-box;
}

/* ≥993px : 4 tuiles par ligne. La largeur native Woo (calc(25% - .9375em))
   suppose le gap Woo par défaut, pas notre gap `m` → recalcul explicite. */
.lame-produits-associes-cdm__grid .wc-block-product-template.is-flex-container.is-flex-container.columns-4 > li {
    width: calc((100% - var(--wp--preset--spacing--m) * 3) / 4);
}

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

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

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

/* ── Lame « Fromages vedettes » (accueil) ──────────────────────────────
   Réutilise la MÊME tuile que les produits associés (classes
   `.lame-produits-associes-cdm__*`, stylées plus bas) ; seuls l'en-tête et
   la grille (3 colonnes au lieu de 4) sont propres à cette lame. */
.wp-block-group.lame-fromages-vedettes-cdm {
    padding-block: 0;

    .lame-fromages-vedettes-cdm__head {
        margin-bottom: var(--wp--preset--spacing--xl);
        gap: var(--wp--preset--spacing--m);
    }

    .lame-fromages-vedettes-cdm__intro > .is-style-paragraph-overline-cdm {
        margin-bottom: var(--wp--preset--spacing--xs);
    }

    .lame-fromages-vedettes-cdm__title {
        margin: 0;

        em {
            font-style: italic;
        }
    }

    /* Lien « Tous les fromages » : jamais étiré, jamais renvoyé à la ligne seul */
    .lame-fromages-vedettes-cdm__action {
        flex: 0 0 auto;
    }
}

/* Grille 3 colonnes. Base desktop = flex natif Woo `.columns-3` ; on ne
   réajuste que le gap + le nombre de colonnes sous le desktop. Doublage de
   `.is-flex-container` pour passer devant la largeur native Woo (0,4,1). */
.lame-fromages-vedettes-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 (la 3ᵉ
   tuile repasse à la ligne). On inclut donc la bordure dans la largeur. */
.lame-fromages-vedettes-cdm__grid .wc-block-product-template > li {
    box-sizing: border-box;
}

/* ≥993px : 3 tuiles par ligne */
.lame-fromages-vedettes-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-fromages-vedettes-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-fromages-vedettes-cdm__grid .wc-block-product-template.is-flex-container.is-flex-container.columns-3 > li {
        width: 100%;
    }
}

/* ── Tuile ─────────────────────────────────────────────────────────────
   Sélecteur générique `.wc-block-product` : réutilisable telle quelle sur
   le futur listing boutique (product-collection en 3 colonnes). */
.wc-block-product-template .wc-block-product {
    /* z-index (même à 0) force un contexte d'empilement local : le ::after
       du bouton (z-index:2) est alors garanti au-dessus de l'image, quel
       que soit l'ordre du DOM. */
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    background: var(--wp--preset--color--tertiary);
    border: 1px solid var(--wp--custom--color--gris-bordure);
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;

    &:hover,
    &:focus-within {
        border-color: var(--wp--preset--color--secondary);
        box-shadow: var(--wp--preset--shadow--card-hover);
        transform: translateY(-4px);
    }
}

/* Média — image carrée + badge d'affinage en overlay */
.lame-produits-associes-cdm__media {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;

    .wc-block-components-product-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
    }
}

.wc-block-product-template .wc-block-product:hover .lame-produits-associes-cdm__media img,
.wc-block-product-template .wc-block-product:focus-within .lame-produits-associes-cdm__media img {
    transform: scale(1.04);
}

/* Parent `.__media` dans le sélecteur : la règle globale `.wp-block-group{
   position:relative}` (0,1,0) égalait la spécificité et pouvait l'emporter
   selon l'ordre de chargement (cas de l'éditeur) → le badge retombait dans le
   flux. Avec le parent (0,2,0), l'overlay tient toujours, front comme éditeur. */
.lame-produits-associes-cdm__media .lame-produits-associes-cdm__badge {
    position: absolute;
    top: var(--wp--preset--spacing--xs);
    left: var(--wp--preset--spacing--xs);
    margin-right: var(--wp--preset--spacing--xs);
    z-index: 1;
    align-items: center;
    gap: var(--wp--preset--spacing--xxs);
    padding: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xxs);
    background: var(--wp--preset--color--tertiary);
    border: 1px solid var(--wp--preset--color--primary);

    /* Pas de texte d'affinage renseigné pour ce produit → pas de badge */
    &:has(.lame-produits-associes-cdm__badgeText:empty) {
        display: none;
    }
}

.lame-produits-associes-cdm__badgeIcon {
    margin: 0;
    flex: none;
    color: var(--wp--custom--color--or-hover);

    img {
        display: block;
        width: 12px;
        height: auto;
    }
}

.lame-produits-associes-cdm__badgeText {
    margin: 0;
    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--primary);
}

/* Corps — surtitre région, titre, prix + bouton */
.lame-produits-associes-cdm__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--wp--preset--spacing--xs);
    padding: var(--wp--preset--spacing--s);
}

/* `.wp-block-group{position:relative}` (core-group.css) créerait un nouveau
   bloc englobant sur ces groupes imbriqués et couperait le lien étendu du
   bouton avant qu'il n'atteigne toute la tuile → neutralisé ici. */
.wc-block-product .lame-produits-associes-cdm__body,
.wc-block-product .lame-produits-associes-cdm__foot {
    position: static;
}

.lame-produits-associes-cdm__region {
    margin: 0;
    color: var(--wp--preset--color--quinary);

    /* Catégorie affichée en libellé seul (post-terms) : pas de lien cliquable
       dans la tuile — c'est le lien étendu vers le produit qui prime. */
    a {
        color: inherit;
        text-decoration: none;
        pointer-events: none;
    }

    /* Pas de surtitre renseigné pour ce produit → pas de ligne vide dans le flex-gap */
    &:empty {
        display: none;
    }
}

.lame-produits-associes-cdm__name {
    margin: 0;

    a {
        color: inherit;
        text-decoration: none;
    }

    /* Lien étendu de la tuile (07/07/2026) : porté par le LIEN DU TITRE, qui
       pointe toujours vers la fiche produit quel que soit le type de produit.
       (Avant : ::after sur `product-button` → sur produit SIMPLE ce bloc rend
       un bouton AJAX « Ajouter au panier », et cliquer n'importe où sur la
       tuile ajoutait au panier au lieu d'ouvrir la fiche.) Pas d'ancêtre
       positionné entre le titre et `.wc-block-product` (groupes intermédiaires
       en position:static, cf. plus haut) → inset:0 couvre toute la tuile. */
    a::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        cursor: pointer;
    }
}

/* Prix + bouton toujours collés en bas de la tuile, quelle que soit la
   hauteur du titre (1 ou 2 lignes). `!important` obligatoire : le thème
   réinitialise tous les groupes via `:root :where(.wp-block-group){margin-top:0
   !important}` (core-group.css), ce qui écrase un `margin-top:auto` simple. */
.lame-produits-associes-cdm__foot {
    margin-top: auto !important;
}

.lame-produits-associes-cdm__foot .wp-block-woocommerce-product-price {
    margin-top: 0;
}

/* On style UNIQUEMENT le montant (`.woocommerce-Price-amount`, chiffre + €), pas
   le préfixe « À partir de » (nœud texte nu dans le conteneur de prix), qui reste
   à sa taille héritée. Préfixe `.wc-block-product` (présent sur le <li> des deux
   contextes — archives ET produits liés) pour s'appliquer partout ET battre la
   règle buy-box `single-product.css` `.woocommerce div.product … .woocommerce-Price-amount`
   (0,4,1, en xxxl — `.woocommerce` compte comme classe) qui, sinon, déborderait sur les
   tuiles de produits liés. On double la classe du montant (`.amount`, présente sur le
   même span) pour atteindre 0,5,0 et passer devant. */
.wc-block-product .lame-produits-associes-cdm__foot .wp-block-woocommerce-product-price .woocommerce-Price-amount.amount {
    margin: 0;
    font-family: var(--wp--preset--font-family--secondary);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: var(--wp--custom--font-weight--medium);
    color: var(--wp--preset--color--primary);
}

/* Prix en promotion sur la tuile : même piège que sur la fiche produit — le
   trait de `line-through` est tracé d'après la font-size du `<del>` (héritée,
   16px) alors que le montant est monté à `xl` (20px) par la règle ci-dessus,
   donc le trait tombe trop haut sur les chiffres. On ramène le montant barré à
   la taille du `<del>` : trait à la bonne hauteur, et ancien prix
   naturellement plus discret que le prix en vigueur, sans nouvelle valeur.
   (0,5,1) pour passer devant la règle `xl` en (0,5,0). */
.wc-block-product .lame-produits-associes-cdm__foot .wp-block-woocommerce-product-price del {
    margin-right: var(--wp--preset--spacing--xxs);
}

.wc-block-product .lame-produits-associes-cdm__foot .wp-block-woocommerce-product-price del .woocommerce-Price-amount.amount {
    font-size: inherit;
}

/* Bouton « + » — carré doré, texte natif masqué, icône en masque CSS.
   NE porte PLUS le lien étendu (déplacé sur le lien du titre, cf. __name) :
   il reste une action propre — ajout panier AJAX (produit simple) ou fiche
   produit (produit variable, « Choix des options ») — remontée AU-DESSUS du
   lien étendu via z-index. */
.lame-produits-associes-cdm__add {
    flex: none;
    margin: 0;
}

.lame-produits-associes-cdm__add a.wc-block-components-product-button__button,
.lame-produits-associes-cdm__add button.wc-block-components-product-button__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
    padding: 0;
    background-color: var(--wp--preset--color--secondary);
    border: 0;
    border-radius: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    /* Au-dessus du lien étendu du titre (z-index:2) pour rester cliquable. */
    position: relative;
    z-index: 3;
    transition: background-color 0.15s ease;

    &::before {
        content: "";
        display: block;
        flex: none;
        width: 16px;
        height: 16px;
        background-color: var(--wp--preset--color--primary);
        -webkit-mask: url(../../img/plus.svg) no-repeat center / contain;
        mask: url(../../img/plus.svg) no-repeat center / contain;
    }

    /* :hover propre possible désormais (le ::after plein-tuile est parti sur
       le titre) : feedback doré foncé sur le seul carré. */
    &:hover,
    &:focus-visible {
        background-color: var(--wp--custom--color--or-hover);
    }
}