/* WooCommerce responsive override
   Chargé après les styles existants pour garantir l'affichage correct
   sur les pages catégories produits (grid responsive, images, buttons)
*/

/* Conteneur produits - forcer une grille moderne (sélecteurs fortement spécifiques) */
body.woocommerce .site-main .container .woocommerce ul.products,
body.woocommerce .site-main .container .woocommerce-page ul.products,
body.woocommerce .site-main .container .woocommerce .products,
body.woocommerce .site-main .container ul.products,
body.woocommerce .site-main .container .products-grid-responsive,
.woocommerce.woocommerce-page .site-main .container ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 20px !important;
    margin: 30px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Cartes produits : layout en colonne pour garder les actions en bas */
body.woocommerce .site-main .container .woocommerce ul.products li.product,
body.woocommerce .site-main .container .woocommerce-page ul.products li.product,
body.woocommerce .site-main .container li.product,
body.woocommerce .site-main .container .product,
.woocommerce.woocommerce-page .site-main .container li.product,
li.product,
.product {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    height: 100% !important;
}

/* Image container responsive : aspect ratio pour éviter hauteurs fixes */
body.woocommerce .site-main .container .woocommerce ul.products li.product .woocommerce-loop-product__link,
body.woocommerce .site-main .container .woocommerce ul.products li.product a:first-child,
body.woocommerce .site-main .container li.product .woocommerce-loop-product__link,
body.woocommerce .site-main .container li.product a:first-child,
li.product .woocommerce-loop-product__link,
li.product a:first-child,
.product-image-responsive {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    background: #f8f9fa !important;
    aspect-ratio: 4/3 !important;
    height: auto !important;
}

.woocommerce.woocommerce-page .site-main .container ul.products li.product img,
body.woocommerce .site-main .container li.product img,
.woocommerce ul.products li.product img,
li.product img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    background: #f8f9fa !important;
}

/* Titre / prix / boutons */
.woocommerce.woocommerce-page .site-main .container ul.products li.product .woocommerce-loop-product__title,
body.woocommerce .site-main .container li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
li.product .woocommerce-loop-product__title {
    padding: 12px 14px 6px !important;
    text-align: center !important;
}

.woocommerce.woocommerce-page .site-main .container ul.products li.product .price,
body.woocommerce .site-main .container li.product .price,
.woocommerce ul.products li.product .price,
li.product .price {
    padding: 0 14px 10px !important;
    text-align: center !important;
}

body.woocommerce .site-main .container .woocommerce ul.products li.product .button,
body.woocommerce .site-main .container .woocommerce ul.products li.product .add_to_cart_button,
body.woocommerce .site-main .container li.product .button,
body.woocommerce .site-main .container li.product .add_to_cart_button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
li.product .button,
li.product .add_to_cart_button {
    margin: 12px auto 16px !important;
    margin-top: auto !important; /* pousse le bouton vers le bas */
    display: block !important;
    width: calc(100% - 28px) !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Breakpoints spécifiques (complémentaires) */
@media (max-width: 420px) {
    .woocommerce ul.products,
    .products-grid-responsive {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 12px !important;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__link {
        aspect-ratio: 16/10 !important;
    }
    
    /* Centrage mobile pour images */
    .product-image-responsive {
        height: 300px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    .product-image-responsive img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }
    
    /* Centrage mobile pour boutons */
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .add_to_cart_button,
    li.product .button,
    li.product .add_to_cart_button,
    .add-to-cart {
        margin: 12px auto 16px !important;
        width: calc(100% - 28px) !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Conteneur actions mobile */
    .product-actions-responsive {
        width: 100% !important;
        text-align: center !important;
    }
}

@media (min-width: 421px) and (max-width: 767px) {
    .woocommerce ul.products,
    .products-grid-responsive {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        padding: 0 12px !important;
    }
    
    /* Centrage tablet pour images */
    .product-image-responsive {
        height: 350px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Centrage tablet pour boutons */
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .add_to_cart_button,
    li.product .button,
    li.product .add_to_cart_button,
    .add-to-cart {
        margin: 12px auto 16px !important;
        width: calc(100% - 28px) !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Fin du fichier d'override */

/* ========================================================================
   CARTES PRODUITS FRONT-PAGE (product-card-responsive)
   ======================================================================== */

.product-card-responsive {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.product-image-responsive {
    position: relative !important;
    height: 400px !important;
    overflow: hidden !important;
    background: #f8f9fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.product-image-responsive img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

/* Responsive adjustments for product images */
@media (max-width: 768px) {
    .product-image-responsive {
        height: 350px !important;
    }
}

@media (max-width: 480px) {
    .product-image-responsive {
        height: 300px !important;
    }
}

/* ========================================================================
   GRILLE RESPONSIVE POUR products-grid-responsive
   ======================================================================== */

/* Responsive pour la grille - Identique front-page */
@media (max-width: 1024px) and (min-width: 769px) {
    .products-grid-responsive {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 18px !important;
    }
}

@media (max-width: 768px) {
    .products-grid-responsive {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

@media (max-width: 480px) {
    .products-grid-responsive {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* Forcer le style des images dans la grille */
.products-grid-responsive .product-image-responsive {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8f9fa !important;
}

.products-grid-responsive .product-image-responsive img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    pointer-events: none !important;
}

/* Supprimer les styles WooCommerce par défaut dans products-grid-responsive */
.products-grid-responsive.woocommerce ul.products,
.products-grid-responsive {
    display: grid !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.products-grid-responsive .woocommerce ul.products li.product,
.products-grid-responsive li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
}