/*
 * Catalogue et fiche produit.
 *
 * Les valeurs passent par des variables plutôt que par des déclarations
 * fixes : les réglages de la section Boutique redéfinissent ces variables, et
 * le mode de contraste renforcé redéfinit celles du socle dont elles
 * dépendent. Une valeur écrite en dur échapperait aux deux.
 */


/* =============================================================
   Commandes du catalogue
   ============================================================= */

/*
 * Les commandes se répartissent sur une ligne et passent l'une sous l'autre
 * quand la fenêtre ne suffit plus. La barre basse ne porte que la pagination,
 * qu'elle centre.
 */
.discovery-catalogue-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--discovery-space-2) var(--discovery-space-4);
    margin-block: var(--discovery-space-4);
}

.discovery-catalogue-barre .woocommerce-result-count {
    margin: 0;
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

.discovery-catalogue-barre .woocommerce-ordering {
    display: flex;
    align-items: center;
    gap: var(--discovery-space-2);
    margin: 0;
}

.discovery-catalogue-barre-basse {
    justify-content: center;
}


/* =============================================================
   Liste des produits
   ============================================================= */

/*
 * La grille compte au plus le nombre de colonnes réglé dans WooCommerce, que
 * la liste annonce par une classe. Elle en compte moins quand la place ne
 * suffit plus : la largeur minimale d'une carte commande alors le repli, sans
 * qu'aucun point de rupture n'ait à être écrit.
 *
 * Le nombre par défaut sert aux listes dépourvues de classe, celles que
 * produit une extension.
 */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(var(--discovery-produit-min, 14rem), 1fr)
    );
    gap: var(--discovery-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce ul.products.columns-1 { --discovery-produit-colonnes: 1; }
.woocommerce ul.products.columns-2 { --discovery-produit-colonnes: 2; }
.woocommerce ul.products.columns-3 { --discovery-produit-colonnes: 3; }
.woocommerce ul.products.columns-4 { --discovery-produit-colonnes: 4; }
.woocommerce ul.products.columns-5 { --discovery-produit-colonnes: 5; }
.woocommerce ul.products.columns-6 { --discovery-produit-colonnes: 6; }

.woocommerce ul.products[class*="columns-"] {
    grid-template-columns: repeat(
        auto-fill,
        minmax(
            max(
                var(--discovery-produit-min, 14rem),
                calc(
                    (100% - (var(--discovery-produit-colonnes, 4) - 1) * var(--discovery-space-6))
                    / var(--discovery-produit-colonnes, 4)
                )
            ),
            1fr
        )
    );
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none;
}

/*
 * La carte forme un bloc entier. Sa bordure la délimite du fond, dont elle
 * partage la couleur : sans elle, rien ne séparerait deux produits voisins.
 */
.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-2);
    min-width: 0;
    margin: 0;
    padding: var(--discovery-produit-marge, var(--discovery-space-4));
    background-color: var(--discovery-produit-fond, var(--discovery-color-surface));
    border: 1px solid var(--discovery-produit-bordure, var(--discovery-color-muted));
    border-radius: var(--discovery-produit-rayon, var(--discovery-radius-md));
}

.woocommerce ul.products li.product a {
    color: inherit;
}

/*
 * Les catégories partagent la présentation des produits : le catalogue peut
 * présenter les unes, les autres ou les deux ensemble, et deux présentations
 * distinctes dans une même grille se liraient comme deux listes.
 */
.woocommerce ul.products li.product-category {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-2);
    min-width: 0;
    margin: 0;
    padding: var(--discovery-produit-marge, var(--discovery-space-4));
    background-color: var(--discovery-produit-fond, var(--discovery-color-surface));
    border: 1px solid var(--discovery-produit-bordure, var(--discovery-color-muted));
    border-radius: var(--discovery-produit-rayon, var(--discovery-radius-md));
}

.woocommerce ul.products li.product-category a {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-2);
    color: inherit;
}

.woocommerce ul.products li.product-category img {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--discovery-produit-rayon, var(--discovery-radius-md));
}

.woocommerce ul.products li.product-category h2 {
    margin: 0;
    font-size: var(--discovery-text-lg);
    line-height: var(--discovery-line-tight);
}

/*
 * Le décompte accompagne le nom de la catégorie sans le concurrencer.
 */
.woocommerce ul.products li.product-category mark.count {
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
    background: none;
}

.woocommerce ul.products li.product img {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--discovery-produit-rayon, var(--discovery-radius-md));
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0;
    font-size: var(--discovery-text-lg);
    line-height: var(--discovery-line-tight);
    overflow-wrap: break-word;
}

.woocommerce ul.products li.product .price {
    color: var(--discovery-produit-prix, var(--discovery-color-text));
    font-weight: var(--discovery-weight-semibold);
}

/*
 * Le prix barré d'une promotion garde une couleur lisible : atténué au point
 * de disparaître, il laisserait croire à une seule valeur.
 */
.woocommerce ul.products li.product .price del,
.woocommerce div.product .price del {
    color: var(--discovery-color-muted);
    font-weight: var(--discovery-weight-normal);
}

/*
 * Le bouton d'achat se place en fin de carte, quelle que soit la hauteur du
 * titre : les boutons de deux cartes voisines restent ainsi alignés.
 */
.woocommerce ul.products li.product .button {
    margin-block-start: auto;
    align-self: start;
}


/* =============================================================
   Marque de promotion
   ============================================================= */

/*
 * La marque suit le texte plutôt qu'une position absolue : superposée à
 * l'image, elle en masquerait une partie et se déplacerait avec elle.
 */
.woocommerce span.onsale {
    display: inline-flex;
    align-items: center;
    align-self: start;
    min-block-size: var(--discovery-cible-min, 2.75rem);
    padding: var(--discovery-space-1) var(--discovery-space-3);
    color: var(--discovery-promotion-texte, var(--discovery-color-background));
    font-size: var(--discovery-text-sm);
    font-weight: var(--discovery-weight-semibold);
    background-color: var(--discovery-promotion-fond, var(--discovery-color-link));
    border-radius: var(--discovery-produit-rayon, var(--discovery-radius-md));
}


/* =============================================================
   Fiche produit
   ============================================================= */

/*
 * La galerie et le résumé se partagent la largeur au-delà du point de rupture
 * moyen, et se suivent en dessous. La disposition en grille remplace les
 * flottements de WooCommerce, dont la largeur en pourcentage ne tient pas
 * compte de la gouttière.
 */
@media (min-width: 768px) {

    .woocommerce div.product {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--discovery-space-8);
        align-items: start;
    }

    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        float: none;
        inline-size: auto;
        margin: 0;
    }

    .woocommerce div.product .woocommerce-tabs,
    .woocommerce div.product .related,
    .woocommerce div.product .upsells,
    .discovery-produit-galerie-dialogues {
        grid-column: 1 / -1;
    }
}

.woocommerce div.product .product_title {
    margin-block: 0 var(--discovery-space-2);
}

.woocommerce div.product .price {
    color: var(--discovery-produit-prix, var(--discovery-color-text));
    font-size: var(--discovery-text-xl);
    font-weight: var(--discovery-weight-semibold);
}

/*
 * Les dialogues des images de la galerie sont rendus hors du conteneur de
 * défilement : leur conteneur n'a rien à présenter.
 */
.discovery-produit-galerie-dialogues {
    display: contents;
}