/* =====================================================
   WooCommerce Products Alignment Fix — v1.1.0
   Root cause: Global Glass & Glow snippet applique
   padding:24px + box-sizing:border-box sur li.product,
   et un autre snippet force width:100% — cela casse
   le flex/float natif WooCommerce.
   Solution: passer en CSS Grid sur ul.products.
   ===================================================== */

/* --- Grid container --- */
ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: auto !important;
    justify-items: stretch !important;
    align-items: start !important;
    gap: 20px !important;
    direction: ltr !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
    float: none !important;
}

.woocommerce ul.products.columns-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.woocommerce ul.products.columns-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.woocommerce ul.products.columns-5 {
    grid-template-columns: repeat(5, 1fr) !important;
}

/* --- Grid items : annuler les overrides des autres snippets --- */
ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: auto !important;       /* annule width:100% du snippet parasite */
    min-width: 0 !important;
    margin: 0 !important;         /* le gap du grid gère l'espacement */
    float: none !important;
    clear: none !important;
    direction: ltr !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

/* --- Textes internes --- */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price,
ul.products li.product .button {
    text-align: left !important;
    direction: ltr !important;
}

/* --- Tablette : 2 colonnes --- */
@media screen and (max-width: 1024px) {
    ul.products,
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce ul.products.columns-2,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* --- Mobile : 2 colonnes --- */
@media screen and (max-width: 600px) {
    ul.products,
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce ul.products.columns-2,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}