/* =====================================================================
   GREENWAY — Page Boutique (archive produits)
   Fichier : electro-child02/assets/css/woocommerce/boutique.css
   ===================================================================== */

:root {
    --gw-green: #16a34a;
    --gw-green-dark: #15803d;
    --gw-green-light: #ecfdf3;
    --gw-dark: #111827;
    --gw-text: #374151;
    --gw-muted: #6b7280;
    --gw-border: #e8ecef;
    --gw-white: #ffffff;
    --gw-radius: 16px;
    --gw-radius-sm: 10px;
    --gw-shadow: 0 4px 24px rgba(17, 24, 39, .06);
    --gw-shadow-hover: 0 12px 32px rgba(17, 24, 39, .12);
    --gw-transition: all .25s ease;
}

/* =====================================================================
   1) EN-TÊTE DE PAGE & FIL D'ARIANE
   ===================================================================== */

.woocommerce-breadcrumb {
    color: var(--gw-muted);
    font-size: .85rem;
    font-weight: 500;
    margin-bottom: 1.75rem !important;
}

.woocommerce-breadcrumb a {
    color: var(--gw-muted);
    text-decoration: none;
    transition: var(--gw-transition);
}

.woocommerce-breadcrumb a:hover {
    color: var(--gw-green);
}

.archive .page-title,
.shop-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gw-dark);
}

/* =====================================================================
   2) BARRE D'OUTILS — compteur résultats + tri
   ===================================================================== */

.woocommerce-notices-wrapper+.woocommerce-result-count,
.woocommerce .woocommerce-result-count {
    color: var(--gw-muted);
    font-size: .9rem;
    padding-top: .6rem;
}

.woocommerce .woocommerce-ordering select {
    border: 1.5px solid var(--gw-border);
    border-radius: 50px;
    background: var(--gw-white);
    color: var(--gw-text);
    font-weight: 500;
    padding: .55rem 2.2rem .55rem 1.1rem;
    cursor: pointer;
    transition: var(--gw-transition);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 14px;
}

.woocommerce .woocommerce-ordering select:focus {
    outline: none;
    border-color: var(--gw-green);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}

/* =====================================================================
   3) GRILLE PRODUITS
   ===================================================================== */

.woocommerce ul.products li.product {
    background: var(--gw-white);
    border: none;
    border-radius: var(--gw-radius);
    box-shadow: var(--gw-shadow);
    overflow: hidden;
    padding: 0;
    transition: var(--gw-transition);
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--gw-shadow-hover);
}

/* Image produit */
.woocommerce ul.products li.product img {
    border-radius: var(--gw-radius) var(--gw-radius) 0 0;
    transition: transform .35s ease;
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.04);
}

/* Cadre interne de l'image (structure Electro) */
.woocommerce ul.products li.product .wp-post-image {
    overflow: hidden;
}

/* Titre produit */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--gw-dark);
    padding: 0 1rem;
    transition: var(--gw-transition);
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product:hover h2 {
    color: var(--gw-green-dark);
}

/* Étoiles / avis */
.woocommerce ul.products li.product .star-rating {
    margin: .4rem auto .4rem 1rem;
    color: #f59e0b;
    font-size: .85rem;
}

.woocommerce ul.products li.product .woocommerce-review-link {
    color: var(--gw-muted);
    font-size: .8rem;
}

/* Prix */
.woocommerce ul.products li.product .price {
    color: var(--gw-green-dark) !important;
    font-size: 1.1rem !important;
    font-weight: 700;
    padding: 0 1rem;
}

.woocommerce ul.products li.product .price del {
    color: var(--gw-muted) !important;
    font-weight: 400;
    font-size: .9rem !important;
    opacity: .8;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
}

/* =====================================================================
   4) BADGES — Promo, nouveauté, vendeur Dokan
   ===================================================================== */

.woocommerce span.onsale {
    background: linear-gradient(135deg, var(--gw-green), var(--gw-green-dark)) !important;
    color: #fff;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .45rem .9rem;
    border-radius: 50px !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, .35);
    z-index: 2;
}

/* Infos vendeur Dokan sous le produit (si activées) */
.woocommerce ul.products li.product .dokan-product-seller,
.woocommerce ul.products li.product .dokan-store-name {
    padding: 0 1rem;
    font-size: .8rem;
    color: var(--gw-muted);
}

.woocommerce ul.products li.product .dokan-product-seller a,
.woocommerce ul.products li.product .dokan-store-name a {
    color: var(--gw-green-dark);
    font-weight: 500;
    text-decoration: none;
}

/* =====================================================================
   5) BOUTONS "AJOUTER AU PANIER" + ACTIONS AU SURVOL
   ===================================================================== */

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
    color: var(--gw-green-dark) !important;
    border: 1.5px solid transparent !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: .9rem !important;
    padding: .65rem 1.4rem !important;
    transition: var(--gw-transition) !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {

    color: #fff !important;
    box-shadow: 0 6px 18px rgba(22, 163, 74, .35);
}

/* Produit déjà au panier */
.woocommerce ul.products li.product .added_to_cart {
    color: var(--gw-green-dark);
    font-weight: 600;
    font-size: .85rem;
}

/* Zone d'actions au survol Electro (favoris, comparaison, aperçu) */
.woocommerce ul.products li.product .hover-area,
.woocommerce ul.products li.product .product-loop-action {
    border-radius: 0 0 var(--gw-radius) var(--gw-radius);
}

.woocommerce ul.products li.product .product-loop-action a,
.woocommerce ul.products li.product .yith-wcwl-add-button a,
.woocommerce ul.products li.product .compare.button {
    color: var(--gw-muted);
    transition: var(--gw-transition);
}

.woocommerce ul.products li.product .product-loop-action a:hover,
.woocommerce ul.products li.product .yith-wcwl-add-button a:hover {
    color: var(--gw-green);
    transform: scale(1.15);
}

/* =====================================================================
   6) SIDEBAR — Widgets & filtres
   ===================================================================== */

.woocommerce .widget {
    background: var(--gw-white);
    border-radius: var(--gw-radius);
    box-shadow: var(--gw-shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.woocommerce .widget .widget-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gw-dark);
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 2px dashed var(--gw-border);
}

/* Liste catégories produit */
.woocommerce .widget_product_categories ul li a {
    color: var(--gw-text);
    font-weight: 500;
    text-decoration: none;
    transition: var(--gw-transition);
}

.woocommerce .widget_product_categories ul li a:hover {
    color: var(--gw-green);
    padding-left: .35rem;
}

/* Filtre de prix */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
    background: var(--gw-green-light);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
    background: var(--gw-green);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(22, 163, 74, .4);
}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
    background: var(--gw-border);
    border-radius: 50px;
}

.woocommerce .widget_price_filter .price_slider_amount .button {
    background: var(--gw-green) !important;
    color: #fff !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
}

/* Widgets avec boutons filtres */
.woocommerce .widget_layered_nav_filters ul li a,
.woocommerce .widget .chosen a {
    background: var(--gw-green-light);
    color: var(--gw-green-dark);
    border-radius: 50px;
    padding: .3rem .8rem;
    text-decoration: none;
}

/* =====================================================================
   7) PAGINATION
   ===================================================================== */

.woocommerce nav.woocommerce-pagination ul {
    border: none;
    gap: .4rem;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none;
    overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    background: var(--gw-white);
    border: 1.5px solid var(--gw-border) !important;
    border-radius: 12px !important;
    color: var(--gw-text);
    font-weight: 600;
    min-width: 42px;
    padding: .55rem .8rem;
    transition: var(--gw-transition);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--gw-green-light);
    border-color: var(--gw-green) !important;
    color: var(--gw-green-dark);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: linear-gradient(135deg, var(--gw-green), var(--gw-green-dark)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, .35);
}

/* =====================================================================
   8) FALLBACK — GRILLE EN BLOCS (wc-block-grid)
   ===================================================================== */

.wc-block-grid .wc-block-grid__product {
    background: var(--gw-white);
    border-radius: var(--gw-radius);
    box-shadow: var(--gw-shadow);
    overflow: hidden;
    transition: var(--gw-transition);
}

.wc-block-grid .wc-block-grid__product:hover {
    transform: translateY(-4px);
    box-shadow: var(--gw-shadow-hover);
}

.wc-block-grid .wc-block-grid__product-title {
    color: var(--gw-dark);
    font-weight: 600;
}

.wc-block-grid .wc-block-grid__product-price {
    color: var(--gw-green-dark) !important;
    font-weight: 700;
}

.wc-block-grid .wc-block-grid__product-onsale {
    background: linear-gradient(135deg, var(--gw-green), var(--gw-green-dark)) !important;
    color: #fff;
    border-radius: 50px !important;
    border: none !important;
    font-weight: 600;
}

.wc-block-grid .wc-block-grid__product-add-to-cart a,
.wc-block-grid .wc-block-grid__product-add-to-cart button {
    color: var(--gw-green-dark) !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
}

.wc-block-grid .wc-block-grid__product-add-to-cart a:hover,
.wc-block-grid .wc-block-grid__product-add-to-cart button:hover {
    color: #fff !important;
}

/* =====================================================================
   9) RESPONSIVE
   ===================================================================== */

@media (max-width: 768px) {

    .woocommerce ul.products li.product,
    .woocommerce ul.products.columns-3 li.product,
    .woocommerce ul.products.columns-4 li.product {
        width: 48%;
        margin: 0 1% 1.5rem;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2 {
        font-size: .9rem !important;
    }

    .woocommerce ul.products li.product .price {
        font-size: 1rem !important;
    }

    .woocommerce .widget {
        padding: 1.1rem;
    }
}

@media (max-width: 480px) {

    .woocommerce ul.products li.product,
    .woocommerce ul.products.columns-3 li.product,
    .woocommerce ul.products.columns-4 li.product {
        width: 100%;
        margin: 0 0 1.25rem;
    }
}


.owl-item>.product .add-to-cart-wrap .button::before,
.owl-item>.product .added_to_cart::before,
.products>.product .add-to-cart-wrap .button::before,
.products>.product .added_to_cart::before {
    color: #fff;
    color: green !important;
}