:root {
    --mm-filtre-hauteur: 44px;
}
/**
 * Styles pour les LISTINGS (boutique, catégories, articles liés, accueil...).
 * Site-wide (pas seulement is_product()), puisque les listings apparaissent
 * sur beaucoup de pages différentes.
 * Extrait de bgs_loop_thumbnail_css() dans bgs-woo-sync.php.
 */

ul.products li.product:not(.product-category) {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    box-sizing: border-box;
    text-align: left;
    position: relative;
}

/* Badge "PROMO" (.onsale) : jamais stylisé dans cette feuille jusqu'ici
   (seulement dans bgs-product.css, réservée à la fiche produit) — d'où le
   badge affiché en simple encart texte, sans fond rouge ni positionnement
   en overlay, dans les listings. */
.onsale {
    position: absolute !important;
    top: 12px;
    left: 12px;
    z-index: 10;
    margin: 0 !important;
    background: #c0392b;
    color: #fff!important;
    font-weight: 700;
    font-size: 0.8em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 4px;
    line-height: 1.4;
    border: none!important;
}

/* Badge "NOUVEAUTE" (couleur de marque) — se superpose au badge "PROMO"
   natif (.onsale) si les deux s'appliquent, plutôt que de le remplacer.
   Dupliqué ici et dans bgs-product.css : les listings ont besoin de leur
   propre copie, cette dernière n'étant jamais chargée hors fiche produit. */
.bgs-badge-new {
    position: absolute !important;
    top: 12px;
    left: 12px;
    z-index: 10;
    margin: 0 !important;
    background: var(--brand-color);
    color: #fff;
    font-weight: 700;
    font-size: 0.8em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 4px;
    line-height: 1.4;
    border: none;
}
li.product:has(.onsale) .bgs-badge-new {
    top: 54px;
}

ul.products li.product:not(.product-category) a img,
ul.products li.product:not(.product-category) .woocommerce-loop-product__link img,
.woocommerce-loop-product__link img {
    background-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
}

/* Padding autour du contenu texte (pas de l'image, qui reste bord à bord
   en haut de la carte). Ciblé élément par élément plutôt qu'en enveloppant
   tout dans un conteneur, puisque WooCommerce génère ces blocs via des
   hooks séparés qu'on ne peut pas regrouper sans surcharger le template
   entier. */
.bgs-ref-line--loop,
ul.products li.product .woocommerce-loop-product__title,
.bgs-status-line--loop,
ul.products li.product .price,
.bgs-loop-add-to-cart,
ul.products li.product a.add_to_cart_button {
    padding-left: 16px !important;
    padding-right: 16px !important;
    text-align: left !important;
    box-sizing: border-box;
}
.bgs-ref-line--loop {
    padding-top: 14px !important;
}
/*
.bgs-loop-add-to-cart,
ul.products li.product a.add_to_cart_button {
    padding-bottom: 16px !important;
}*/
ul.products li.product .woocommerce-loop-product__title {
    margin: 4px 0 !important;
}

/* Prix rouge/gras : aussi dans les grilles, pas seulement la fiche produit
   (.summary .price, définie dans bgs-product.css, reste pour la fiche
   produit — les deux règles cohabitent sans conflit). */
ul.products li.product .price {
    font-size: 1.15em !important;
    font-weight: 800 !important;
    color: #c0392b !important;
    display: block;
}

/* Statut de stock (grilles) — styles de BASE dupliqués ici (et pas
   seulement dans bgs-product.css) car cette feuille est la seule chargée
   sur les pages de listing : bgs-product.css est restreinte à is_product().
   Sans ça, le point ne s'affichait pas du tout et le texte héritait la
   couleur violette du lien <a> qui enveloppe toute la vignette
   WooCommerce. */
.bgs-status-line--loop {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 6px;
    font-size: 0.85em;
}
.bgs-status-line--loop .bgs-status-line__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.bgs-status-line--loop .bgs-status-line__dot--ok {
    background: #4caf50;
}
.bgs-status-line--loop .bgs-status-line__dot--ko {
    background: #d9534f;
}
.bgs-status-line--loop .bgs-status-line__text {
    color: #333 !important;
    text-decoration: none !important;
}

/* Formulaire quantité + bouton (grilles) : hauteurs alignées, même padding
   vertical, icône panier centrée avec le texte. */
.bgs-loop-add-to-cart {
    display: flex;
    gap: 6px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.bgs-loop-add-to-cart .quantity {
    display: flex;
    margin: 0;
    flex-shrink: 0;
}
.bgs-loop-add-to-cart .qty {
    width: 48px;
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    text-align: center;
    padding: 0 4px;
}
.bgs-loop-add-to-cart__button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 44px;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0 8px !important;
    font-size: 0.85em;
    white-space: normal;
    line-height: 1.15;
    overflow: hidden;
}
.bgs-loop-add-to-cart__button span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.bgs-loop-add-to-cart__icon {
    flex-shrink: 0;
}
/* Sécurité anti-doublon : si le formulaire quantité (le nôtre) est présent
   dans la carte, on masque le bouton natif WooCommerce (un 
   class="add_to_cart_button">) qui peut s'afficher en plus si
   remove_action() n'a pas réussi à le retirer sur ce thème/cette version.
   N'affecte PAS les cartes où notre formulaire est absent (produits
   variables/groupés/en rupture), qui doivent garder leur bouton natif
   normalement. */
li.product:has(.bgs-loop-add-to-cart) a.add_to_cart_button {
    display: none;
}

/* Ligne "Art. Non. + marque" dans les vignettes de listing. Style autonome
   (ne dépend pas de bgs-product.css, puisque les listings s'affichent sur
   d'autres types de pages). */
.bgs-ref-line--loop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.8em;
    color: #333;
    margin-bottom: 4px;
}
.bgs-ref-line--loop strong {
    font-weight: 700;
}
.bgs-ref-line--loop .bgs-ref-line__brand-logo {
    height: 18px;
    width: auto;
    display: block;
}

/* Lien "Créez un compte pour voir le prix" (plugin de masquage de prix) —
   généré sans classe dédiée, donc ciblé par position : enfant direct du
   <li>, après le lien produit, avant le bouton "Lire la suite". Fragile si
   la structure du plugin change, à surveiller. */
ul.products li.product:not(.product-category) > a:not(.woocommerce-loop-product__link):not(.button) {
    display: block;
    margin: 0 16px 10px !important;
    padding: 8px 14px;
    box-sizing: border-box;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: var(--brand-color);
    font-size: 0.85em;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
}
ul.products li.product:not(.product-category) > a:not(.woocommerce-loop-product__link):not(.button):hover {
    background: #ececec;
}

/* Lien "Créez un compte pour voir le prix" (plugin de masquage de prix) —
   généré sans classe dédiée, donc ciblé par position : enfant direct du
   <li>, après le lien produit, avant le bouton "Lire la suite". Fragile si
   la structure du plugin change, à surveiller.
   Mis en avant : c'est l'action qu'on veut pousser (créer un compte pour
   débloquer le prix), donc style plein, couleur de marque. */
ul.products li.product:not(.product-category) > a:not(.woocommerce-loop-product__link):not(.button) {
    display: block;
    margin: 0 16px 10px !important;
    padding: 10px 14px !important;
    box-sizing: border-box;
    background: var(--brand-color) !important;
    color: #fff !important;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.9em;
    text-align: center;
    text-decoration: none !important;
    transition: opacity .15s ease;
}
ul.products li.product:not(.product-category) > a:not(.woocommerce-loop-product__link):not(.button):hover {
    opacity: .85;
}

/* Bouton "Lire la suite" (produits sans prix visible / sans ajout panier
   direct) — jusqu'ici sans style dédié, il gardait l'apparence WooCommerce
   par défaut (gris, pleine largeur, collé aux bords).
   Volontairement discret : action secondaire par rapport à "Créer un
   compte". */
ul.products li.product:not(.product-category) a.button.product_type_simple {
    display: block;
    margin: 0 16px 16px !important;
    padding: 8px 14px;
    box-sizing: border-box;
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #333;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85em;
    text-align: center;
    text-decoration: none !important;

    min-height:48px;
    display:flex;
    align-items: center;
    justify-content: center;
}
ul.products li.product:not(.product-category) a.button.product_type_simple:hover {
    background: #ececec;
}

/* Bloc Gutenberg "Produits" (wc-block-grid) — structure différente du
   loop classique WooCommerce (bgs_loop_thumbnail_css), donc classes et
   sélecteurs propres. Même hiérarchie visuelle que les listings
   classiques : "Créer un compte" mis en avant, "Lire la suite" discret. */

.wc-block-grid__product-price {
    padding: 0 16px;
    margin: 6px 0 10px;
}

/* Lien "Créez un compte pour voir le prix" — remplace le prix natif du
   bloc, affiché sans style par défaut (lien bleu/violet du thème). */
.wc-block-grid__product-price a {
    display: block;
    padding: 10px 14px !important;
    box-sizing: border-box;
    background: var(--brand-color) !important;
    color: #fff !important;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85em;
    text-align: center;
    text-decoration: none !important;
    transition: opacity .15s ease;
}
.wc-block-grid__product-price a:hover {
    opacity: .85;
}

/* Bouton "Lire la suite" — le bloc l'enveloppe déjà dans
   .wp-block-button, on neutralise son style natif pour repartir sur une
   base propre et cohérente avec le reste des vignettes. */
.wc-block-grid__product-add-to-cart {
    padding: 0 16px 16px;
    box-sizing: border-box;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 8px 14px !important;
    background: #f5f5f5 !important;
    border: 1px solid #ddd;
    color: #333 !important;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85em;
    text-align: center;
    text-decoration: none !important;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    background: #ececec !important;
}

.woocommerce-loop-category__title{
    .count{
        color: var(--brand-light-color2);  
    }
}


/* Filtres de recherche
redisposer les filtres de recherche après ajout des marques
*/
.storefront-sorting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    row-gap: 10px;
    column-gap:0;
}
.storefront-sorting .mm-filtre-marques {
    order: 1;
    flex: 0 1 auto;
    width: auto;
}
.storefront-sorting .woocommerce-ordering {
    order: 2;
    margin: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
.storefront-sorting .woocommerce-ordering select {
    height: var(--mm-filtre-hauteur);
    box-sizing: border-box;
    border-radius: 8px;
    padding: 0 12px;
}
.storefront-sorting .woocommerce-result-count {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
}
.storefront-sorting .mm-filtre-marques__reset {
    order: 2;
    margin: 0 0 0 1rem;
    white-space: nowrap;
}
.storefront-sorting .woocommerce-pagination {
    order: 4;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 0.5em;
}
.mm-filtre-marques {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding-right:10px;
}
.mm-filtre-marques__option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #f6f6f6;
    border-radius: 8px;
    padding: 0 14px;
    height: var(--mm-filtre-hauteur);
    box-sizing: border-box;
    cursor: pointer;
    font-size: 0.95em;
    color: #333;
    line-height: 1;
}
.mm-filtre-marques__option:hover {
    background: #efefef;
}
.mm-filtre-marques__logo {
    display: inline-flex;
    align-items: center;
}
.mm-filtre-marques__logo img {
    height: 26px;
    width: auto;
    max-width: 90px;
    display: block;
    object-fit: contain;
}
.mm-filtre-marques__name {
    white-space: nowrap;
}
.mm-filtre-marques__option input[type="checkbox"] {
    margin: 0 0 0 6px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #333;
}
.mm-filtre-marques__reset {
    font-size: 0.85em;
    text-decoration: underline;
}