/**
 * FORCE GRID FINALE - Solution radicale
 * Ce fichier force une grille CSS sur TOUS les produits WooCommerce
 */

/* ===================================
   RESET COMPLET DE TOUS LES STYLES PRODUITS
   =================================== */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 25px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
    
    /* Désactiver flexbox */
    flex-direction: initial !important;
    flex-wrap: initial !important;
    justify-content: initial !important;
    align-items: initial !important;
}

ul.products li.product {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    position: relative !important;
    box-sizing: border-box !important;
    
    /* Forcer placement automatique dans la grille */
    grid-column: auto !important;
    grid-row: auto !important;
    
    /* Désactiver flexbox */
    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* Supprimer les classes WooCommerce qui interfèrent */
ul.products li.product.first,
ul.products li.product.last {
    clear: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ===================================
   TABLETTE - 3 COLONNES (768px - 992px)
   =================================== */
@media screen and (min-width: 768px) and (max-width: 992px) {
    ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

/* ===================================
   MOBILE - 2 COLONNES (max 767px)
   =================================== */
@media screen and (max-width: 767px) {
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: none !important;
    }
}

/* ===================================
   PETIT MOBILE - 2 COLONNES (max 575px)
   =================================== */
@media screen and (max-width: 575px) {
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* ===================================
   TRÈS PETIT ÉCRAN - 1 COLONNE (max 400px)
   =================================== */
@media screen and (max-width: 400px) {
    ul.products {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}