/**
 * SURCHARGE FORCÉE DE LA GRILLE WOOCOMMERCE
 * Ce fichier est chargé en dernier pour écraser tous les styles WooCommerce
 * 
 * @package Superette_Romain
 */

/* ===================================
   FORCER LA GRILLE RESPONSIVE - DESKTOP
   =================================== */
.products-grid-wrapper ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products,
body.woocommerce ul.products,
body.woocommerce-page ul.products,
body.archive.woocommerce ul.products,
body.post-type-archive-product ul.products,
.featured-products-section ul.products,
.new-products-section ul.products,
.sale-products-section ul.products,
ul.products.featured-products,
ul.products.new-products,
ul.products.sale-products,
.woocommerce ul.products[class*="columns-"],
.woocommerce-page ul.products[class*="columns-"],
ul.products.columns-1,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5,
ul.products.columns-6,
.woocommerce .products.columns-1,
.woocommerce .products.columns-2,
.woocommerce .products.columns-3,
.woocommerce .products.columns-4,
.woocommerce .products.columns-5,
.woocommerce .products.columns-6 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 30px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-direction: initial !important;
    flex-wrap: initial !important;
}

/* Produits individuels */
.products-grid-wrapper ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
.featured-products-section ul.products li.product,
.new-products-section ul.products li.product,
.sale-products-section ul.products li.product,
ul.products.featured-products li.product,
ul.products.new-products li.product,
ul.products.sale-products li.product,
ul.products li.product {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    flex: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

/* Désactiver tous les nth-child de WooCommerce */
.woocommerce ul.products li.product:nth-child(2n+1),
.woocommerce ul.products li.product:nth-child(3n+1),
.woocommerce ul.products li.product:nth-child(4n+1),
.woocommerce ul.products li.product:nth-child(5n+1),
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
    clear: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ===================================
   TABLETTE - 3 COLONNES
   =================================== */
@media screen and (min-width: 768px) and (max-width: 992px) {
    .products-grid-wrapper ul.products,
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    body.woocommerce ul.products,
    body.woocommerce-page ul.products,
    body.archive.woocommerce ul.products,
    body.post-type-archive-product ul.products,
    .featured-products-section ul.products,
    .new-products-section ul.products,
    .sale-products-section ul.products,
    .woocommerce ul.products[class*="columns-"],
    .woocommerce-page ul.products[class*="columns-"],
    ul.products.columns-1,
    ul.products.columns-2,
    ul.products.columns-3,
    ul.products.columns-4,
    ul.products.columns-5,
    ul.products.columns-6,
    .woocommerce .products.columns-1,
    .woocommerce .products.columns-2,
    .woocommerce .products.columns-3,
    .woocommerce .products.columns-4,
    .woocommerce .products.columns-5,
    .woocommerce .products.columns-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}

/* ===================================
   MOBILE - 2 COLONNES
   =================================== */
@media screen and (max-width: 767px) {
    .products-grid-wrapper ul.products,
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    body.woocommerce ul.products,
    body.woocommerce-page ul.products,
    body.archive.woocommerce ul.products,
    body.post-type-archive-product ul.products,
    .featured-products-section ul.products,
    .new-products-section ul.products,
    .sale-products-section ul.products,
    ul.products.featured-products,
    ul.products.new-products,
    ul.products.sale-products,
    .woocommerce ul.products[class*="columns-"],
    .woocommerce-page ul.products[class*="columns-"],
    ul.products.columns-1,
    ul.products.columns-2,
    ul.products.columns-3,
    ul.products.columns-4,
    ul.products.columns-5,
    ul.products.columns-6,
    .woocommerce .products.columns-1,
    .woocommerce .products.columns-2,
    .woocommerce .products.columns-3,
    .woocommerce .products.columns-4,
    .woocommerce .products.columns-5,
    .woocommerce .products.columns-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 15px !important;
    }
}

/* ===================================
   PETIT MOBILE - 2 COLONNES MAINTENUES
   =================================== */
@media screen and (max-width: 575px) {
    .products-grid-wrapper ul.products,
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    body.woocommerce ul.products,
    body.woocommerce-page ul.products,
    body.archive.woocommerce ul.products,
    body.post-type-archive-product ul.products,
    .featured-products-section ul.products,
    .new-products-section ul.products,
    .sale-products-section ul.products,
    ul.products.featured-products,
    ul.products.new-products,
    ul.products.sale-products,
    .woocommerce ul.products[class*="columns-"],
    .woocommerce-page ul.products[class*="columns-"],
    ul.products.columns-1,
    ul.products.columns-2,
    ul.products.columns-3,
    ul.products.columns-4,
    ul.products.columns-5,
    ul.products.columns-6,
    .woocommerce .products.columns-1,
    .woocommerce .products.columns-2,
    .woocommerce .products.columns-3,
    .woocommerce .products.columns-4,
    .woocommerce .products.columns-5,
    .woocommerce .products.columns-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

/* ===================================
   PAYSAGE MOBILE - 3 COLONNES
   =================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    body.woocommerce ul.products,
    body.woocommerce-page ul.products,
    .featured-products-section ul.products,
    .new-products-section ul.products,
    .sale-products-section ul.products,
    ul.products.featured-products,
    ul.products.new-products,
    ul.products.sale-products,
    .woocommerce ul.products[class*="columns-"],
    .woocommerce-page ul.products[class*="columns-"],
    ul.products.columns-1,
    ul.products.columns-2,
    ul.products.columns-3,
    ul.products.columns-4,
    ul.products.columns-5,
    ul.products.columns-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

/* ===================================
   DÉSACTIVATION COMPLÈTE DES STYLES INLINE
   =================================== */
.woocommerce ul.products[style] {
    display: grid !important;
}

.woocommerce ul.products li.product[style] {
    width: 100% !important;
    max-width: 100% !important;
}