/*
 * Styles CSS personnalisés pour la page de boutique WooCommerce
 * Ce code permet de corriger la mise en page lorsque les styles du thème
 * par défaut entrent en conflit avec des styles externes comme Tailwind CSS.
 */

/* Conteneur principal des produits */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 0 auto;
    max-width: 1200px;
}

/* Annulation des styles du thème par défaut qui entrent en conflit */
.site-main ul.products.columns-3 li.product,
.page-template-template-fullwidth-php .site-main ul.products.columns-3 li.product,
.page-template-template-fullwidth-php .header-widget-region ul.products.columns-3 li.product,
.page-template-template-homepage-php .site-main ul.products.columns-3 li.product,
.page-template-template-homepage-php .header-widget-region ul.products.columns-3 li.product,
.storefront-full-width-content .site-main ul.products.columns-3 li.product,
.storefront-full-width-content .header-widget-region ul.products.columns-3 li.product,
.site-main ul.products.columns-3 li.product {
    width: auto !important;
    float: none !important;
    margin-right: 0 !important;
}

/* Supprime les pseudo-éléments de dégagement de flottement */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none;
    display: block;
}

/* Style de chaque produit */
.woocommerce ul.products li.product {
    text-align: center;
    background-color: #ffffff; /* blanc */
    padding: 1rem;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-8px);
}

/* Image du produit */
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
    border-radius: 0.5rem; /* rounded-lg */
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 1rem;
}

/* Titre du produit */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-900 */
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Prix du produit */
.woocommerce ul.products li.product .price {
    font-size: 1.125rem; /* text-lg */
    font-weight: 700; /* font-bold */
    color: #10b981; /* green-500 */
    margin-bottom: 1rem;
    display: block;
}

/* Bouton "Ajouter au panier" */
.woocommerce ul.products li.product .button {
    background-color: #10b981; /* green-500 */
    color: #ffffff;
    font-weight: 600; /* font-semibold */
    padding: 0.75rem 1.5rem;
    border-radius: 9999px; /* rounded-full */
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    border: none;
    text-transform: uppercase;
}

.woocommerce ul.products li.product .button:hover {
    background-color: #0d9488; /* green-600 */
}