/* Correctif Divi 5 Loop Builder ------------------------------------------------
 *
 * Divi ne genere la CSS "par carte" (fond, bordure arrondie, badge Promo !)
 * que pour un nombre limite d'elements de la boucle produits (5 dans nos
 * tests), quel que soit le nombre reel de resultats affiches. Au-dela, les
 * cartes retombent sur un rendu par defaut (non stylise).
 *
 * On recree ce style ici avec un selecteur qui ne depend pas du numero
 * d'instance genere par Divi (et_pb_column_N_tb_body), mais de l'attribut
 * data-loop-source present sur CHAQUE carte de la boucle produits, quel
 * que soit son rang : ca s'applique donc a tous les elements, sans plafond.
 *
 * A adapter si l'identifiant de boucle change ("loop-xxxxxxx", genere par
 * Divi si la boucle est reconstruite dans le Theme Builder).
 */

[data-loop-source="loop-5y7ktamcle"].et_pb_column {
    background-color: #fff8f4;
    border-radius: 15px;
    border: 2px solid #b5b5b5;
    overflow: hidden;
}

[data-loop-source="loop-5y7ktamcle"] span.onsale {
    background-color: var(--gcid-primary-color, #7a113a) !important;
    border-radius: 61px !important;
    color: #ffffff !important;
}

/* Meme plafond constate sur tout le bloc de CSS personnalise du module
   Images (ratio, recadrage, masquage loupe/zoom, lien de zoom desactive) :
   on le recree ici aussi avec le meme selecteur non plafonne. */
[data-loop-source="loop-5y7ktamcle"] .woocommerce-product-gallery__image img {
    aspect-ratio: 1 / 1;
}

[data-loop-source="loop-5y7ktamcle"] img {
    object-fit: cover !important;
    object-position: center !important;
}

[data-loop-source="loop-5y7ktamcle"] .woocommerce-product-gallery__trigger {
    display: none !important;
}

[data-loop-source="loop-5y7ktamcle"] .zoomImg {
    display: none !important;
}

[data-loop-source="loop-5y7ktamcle"] .woocommerce-product-gallery__image a {
    pointer-events: none;
    cursor: pointer;
}

/* Meme plafond sur la ligne imbriquee (titre / prix / bouton) situee sous
   l'image : son padding gauche/droite n'est lui non plus applique que sur
   les 5 premiers elements. */
[data-loop-source="loop-5y7ktamcle"] .et_pb_row_nested {
    padding-right: 15px !important;
    padding-left: 15px !important;
}

/* Meme plafond sur l'espacement du bloc "Ajouter au panier" et sur le bouton. */
[data-loop-source="loop-5y7ktamcle"] .et_pb_wc_add_to_cart {
    margin-top: 10px !important;
    margin-bottom: 15px !important;
}

[data-loop-source="loop-5y7ktamcle"] .et_pb_wc_add_to_cart .button {
    padding: 0.3em 1em !important;
}

/* Meme plafond sur le bloc prix (espacement au-dessus, couleur, taille). */
[data-loop-source="loop-5y7ktamcle"] .et_pb_wc_price {
    margin-top: 10px !important;
}

[data-loop-source="loop-5y7ktamcle"] .et_pb_wc_price .price {
    color: var(--gcid-link-color, #7a113a) !important;
    font-size: 22px !important;
}

/* Meme plafond sur la grille de vignettes de la galerie (utile si l'option
   "Afficher la galerie" du module Images est un jour reactivee). */
[data-loop-source="loop-5y7ktamcle"] ol.flex-control-thumbs.flex-control-nav {
    --horizontal-gap: 30px !important;
    --vertical-gap: 30px !important;
    --column-count: 4 !important;
    grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
}

[data-loop-source="loop-5y7ktamcle"] ol.flex-control-thumbs.flex-control-nav li {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
}