/**
 * Styles frontend pour les bandeaux publicitaires
 *
 * @package Contextual_Ads_Plugin
 */

/* Import de la police Open Sans depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap');

.cap-ad-container {
    margin: 20px 0;
    clear: both;
}

.product-list {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: visible; /* Pas de défilement */
}

.product-card {
    /* Pas de bordure comme demandé */
    padding: 10px 10px 12px 10px;
    text-align: center;
    width: calc(25% - 12px); /* 4 produits sur une ligne avec gap de 15px */
    min-width: 200px; /* Largeur minimale pour éviter que ce soit trop petit */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 1; /* Permet de réduire si nécessaire */
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px; /* Légèrement réduit */
}

.product-card img {
    display: block;
    margin: 0 auto 10px;
    max-width: 100%;
    height: auto;
}

.product-info ul.wp-product-list {
    text-align: left !important;
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-top: 5px !important;
    margin-left: 0 !important;
    margin-bottom: 10px !important;
    font-size: 1em !important;
    /* min-height: 60px !important; */
}

.product-info ul.wp-product-list li {
    margin-bottom: 2px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 33px !important;
    position: relative;
    display: list-item !important;
    color: #5e6d82;
}

/* Puce carrée personnalisée avec ::before */
.product-info ul.wp-product-list li::before {
    content: '■' !important;
    position: absolute;
    left: 8px;
    color: #12709b; /* couleur de la puce */
    font-size: 1.8em;
    line-height: 0.6;
   
}

.product-card .price {
    font-weight: bold;
    color: #d03a0c;
    margin-top: 5px;
    margin-bottom: 10px;
    display: block;
    font-size: 18px;
}

/* Bouton fixé en bas de la carte */
.product-card a.product-link {
    display: block;
    margin-top: auto;
    margin-bottom: 0;
    text-decoration: none;
    background-color: #d03a0c !important;
    color: white !important;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    position: relative;
    /* CENTRAGE ET ESPACEMENT CORRIGÉS */
    padding-left: 0; /* On retire le padding-left fixe */
    height: 45px;
    line-height: 35px;
    box-sizing: border-box;
    /* Utilisation de flexbox pour centrer le contenu horizontalement */
    display: flex;
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal du bloc icône + texte */
}

/* Icône à gauche du texte */
.product-card a.product-link::before {
    content: '';
    /* On retire les propriétés de positionnement absolu pour le flux flexbox */
    position: static;
    transform: none;
    /* AJOUT DE L'ESPACEMENT DE 7PX */
    margin-right: 7px; 
    width: 17px;
    height: 14px;
    background-image: url('data:image/webp;base64,UklGRuQDAABXRUJQVlA4WAoAAAAwAAAAEAAADgAASUNDUKACAAAAAAKgbGNtcwQwAABtbnRyUkdCIFhZWiAH6QACABsACAASAAlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA1kZXNjAAABIAAAAEBjcHJ0AAABYAAAADZ3dHB0AAABmAAAABRjaGFkAAABrAAAACxyWFlaAAAB2AAAABRiWFlaAAAB7AAAABRnWFlaAAACAAAAABRyVFJDAAACFAAAACBnVFJDAAACFAAAACBiVFJDAAACFAAAACBjaHJtAAACNAAAACRkbW5kAAACWAAAACRkbWRkAAACfAAAACRtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACQAAAAcAEcASQBNAFAAIABiAHUAaQBsAHQALQBpAG4AIABzAFIARwBCbWx1YwAAAAAAAAABAAAADGVuVVMAAAAaAAAAHABQAHUAYgBsAGkAYwAgAEQAbwBtAGEAaQBuAABYWVogAAAAAAAA9tYAAQAAAADTLXNmMzIAAAAAAAEMQgAABd7///MlAAAHkwAA/ZD///uh///9ogAAA9wAAMBuWFlaIAAAAAAAAG+gAAA49QAAA5BYWVogAAAAAAAAJJ8AAA+EAAC2xFhZWiAAAAAAAABilwAAt4cAABjZcGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltjaHJtAAAAAAADAAAAAKPXAABUfAAATM0AAJmaAAAmZwAAD1xtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAEcASQBNAFBtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJBTFBI7wAAAAGAa1vbMeeJrYqVnVyAjco2Ktu27aSzKquzbXNYxdZ45hoiYgLALlA9pzLTIAgeLc+HlAevHHiQ7SFbCBkRe+W4BVDKpCFVTA3iojG5bQjAYHtaA4BjjEvYQ1pQTExMcMZDuEuM5/79mE92ztnjw+NZTo7/+MOx0cL7ZPMljUan0S5bxt8WjSWz6R93Ly+EH8L9690HvUBSwObvJH11JIWS1LGedkizFYDWxUnKykgCObp9PfngWhuQ7z5NWRnmdNSvAIjGXGWvT2ZS0/o3sy7iRAFYXJDenghfhPs30q0VAIhaztJ/0kKTCPQjd1EAAFZQOCAmAAAAsAIAnQEqEQAPAD4xFIhCoiEhGAQAIAMEtIAAPZAAAP7+VdAAAAA=');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.product-card a.product-link:hover {
    background-color: #80b601 !important;
}

.product-card .product-name {
    flex-grow: 1;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.3;
    color:#5e6d82;
}

.product-list-two-items {
    justify-content: flex-start;
}

/* Responsive */
@media (max-width: 768px) {
    .product-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .product-card {
        width: 250px;
    }
    
    /* Masque tous les produits sauf le premier sur mobile */
    .product-card:not(:first-child) {
        display: none;
    }
    
    /* Centre le premier produit */
    .product-list {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .product-card {
        width: 100%;
        max-width: 280px;
    }
    
    .product-card .product-name {
        font-size: 0.9em;
    }
    
    .product-info ul {
        font-size: 0.8em;
    }
    
    /* Masque tous les produits sauf le premier sur petit mobile */
    .product-card:not(:first-child) {
        display: none;
    }
    
    /* Centre le premier produit */
    .product-list {
        justify-content: center;
    }
}