/*
Theme Name: Shoptimizer Child
Template: shoptimizer
Version: 1.0.0
*/

/* ==========================================================================
   VARIABLES DE COULEUR (palette bleu clair de la maquette)
   ========================================================================== */
:root{
    --cx-blue: #4a90d9;
    --cx-blue-dark: #2f6fb8;
    --cx-blue-bg: #eaf3fc;
    --cx-blue-bg-light: #f3f9fe;
    --cx-text-dark: #1b2b3a;
    --cx-gold: #f4b942;
    --cx-red: #e2557a;
    --cx-green: #3ec27c;
    --cx-radius: 16px;
}

/* ==========================================================================
   RIBBON "BESTSELLER"
   ========================================================================== */
.cx-bestseller-ribbon{
    display:inline-block;
    background:var(--cx-blue-bg);
    color:var(--cx-blue-dark);
    font-weight:700;
    font-size:14px;
    padding:8px 18px;
    border-radius:999px;
    margin-bottom:12px;
}

/* Fond blanc sur toute la page produit (demande explicite) */
body.single-product,
.woocommerce div.product{
    background:#ffffff;
}
.woocommerce div.product div.images{
    background:#ffffff;
    border-radius:var(--cx-radius);
    padding:20px;
}

/* ==========================================================================
   COLONNE ICONES BENEFICES (3 box à droite)
   ========================================================================== */
.cx-benefits-col{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:16px 0;
}
.cx-benefit-box{
    background:var(--cx-blue-bg-light);
    border-radius:14px;
    padding:14px 10px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}
.cx-benefit-icon{
    width:26px;
    height:26px;
    color:var(--cx-text-dark);
}
.cx-benefit-icon svg{ width:100%; height:100%; }
.cx-benefit-label{
    font-size:12px;
    font-weight:600;
    color:var(--cx-text-dark);
    line-height:1.2;
}

/* Sur desktop : galerie + colonne icônes côte à côte */
@media (min-width: 768px){
    .woocommerce div.product .images{
        display:flex;
        gap:16px;
        align-items:flex-start;
    }
    .cx-benefits-col{
        flex-direction:column;
        width:120px;
        flex-shrink:0;
        margin:0;
    }
}

/* ==========================================================================
   RATING + BADGE "HAPPY CUSTOMERS"
   ========================================================================== */
.woocommerce div.product .woocommerce-product-rating{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}
.woocommerce div.product p.stars a{ color:var(--cx-gold); }
.cx-happy-customers{
    background:var(--cx-blue-bg);
    color:var(--cx-blue-dark);
    font-size:12px;
    font-weight:600;
    padding:5px 12px;
    border-radius:999px;
    white-space:nowrap;
}

/* ==========================================================================
   TITRE PRODUIT
   ========================================================================== */
.woocommerce div.product .product_title{
    font-size:30px;
    font-weight:800;
    color:var(--cx-blue-dark);
    margin:6px 0 10px;
}

/* ==========================================================================
   BADGE AWARD
   ========================================================================== */
.cx-award-badge{
    display:inline-block;
    background:#fdf3d9;
    color:#8a6d1f;
    font-weight:700;
    font-size:13px;
    padding:8px 16px;
    border-radius:999px;
    margin-bottom:14px;
}

/* ==========================================================================
   PRIX + BADGE SAVE
   ========================================================================== */
.woocommerce div.product p.price,
.woocommerce div.product span.price{
    font-size:28px;
    font-weight:800;
    color:var(--cx-blue-dark);
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.woocommerce div.product p.price del{
    color:#9aa7b2;
    font-size:18px;
    font-weight:500;
    opacity:1;
}
.woocommerce div.product p.price ins{
    text-decoration:none;
}
.cx-save-badge{
    background:#fde3ea;
    color:var(--cx-red);
    font-size:13px;
    font-weight:700;
    padding:5px 12px;
    border-radius:999px;
}

/* ==========================================================================
   CHECKLIST REASSURANCE (grille 2 colonnes)
   ========================================================================== */
.cx-checklist-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:18px 0;
}
.cx-checklist-item{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--cx-blue-bg-light);
    border-radius:12px;
    padding:10px 12px;
    font-size:13px;
    font-weight:600;
    color:var(--cx-text-dark);
}
.cx-check-icon{
    width:20px;
    height:20px;
    flex-shrink:0;
    color:#fff;
    background:var(--cx-blue);
    border-radius:50%;
    padding:4px;
}
.cx-check-icon svg{ width:100%; height:100%; }

/* ==========================================================================
   STOCK + LIVRAISON
   ========================================================================== */
.cx-stock-delivery{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:var(--cx-text-dark);
    margin:14px 0 20px;
}
.cx-stock-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--cx-green);
    display:inline-block;
    flex-shrink:0;
}

/* ==========================================================================
   PACKS (variations) - style cartes avec ruban "Most popular" / "Best value"
   S'appuie sur la structure standard woocommerce .variations
   Pour un rendu identique à la maquette (3 cartes cliquables), remplace
   le select par des swatches radio (plugin gratuit "Variation Swatches for
   WooCommerce" recommandé) puis ce CSS s'appliquera à .cx-pack-option
   ========================================================================== */
.cx-pack-options{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin:20px 0;
}
.cx-pack-option{
    position:relative;
    border:2px solid var(--cx-blue-bg);
    border-radius:14px;
    overflow:hidden;
    text-align:center;
    cursor:pointer;
    background:#fff;
    transition:border-color .15s ease;
}
.cx-pack-option.selected,
.cx-pack-option:hover{
    border-color:var(--cx-blue);
}
.cx-pack-badge{
    position:absolute;
    top:0; left:0; right:0;
    background:var(--cx-blue-dark);
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding:4px 0;
}
.cx-pack-label{
    font-weight:700;
    font-size:14px;
    margin:26px 0 6px;
    color:var(--cx-text-dark);
}
.cx-pack-price{
    font-weight:800;
    font-size:15px;
    color:var(--cx-blue-dark);
    margin-bottom:6px;
}
.cx-pack-save{
    background:var(--cx-blue);
    color:#fff;
    font-size:12px;
    font-weight:700;
    padding:6px 0;
}

/* Masque le select WooCommerce d'origine une fois les cartes construites par
   cx-pack-selector.js (le select reste dans le DOM et fonctionnel, juste caché) */
form.variations_form.cx-packs-active .variations{
    display:none;
}
/* petit espace ajouté par WooCommerce sous le prix quand une variation est
   sélectionnée (single_variation_wrap) : on garde propre */
form.variations_form.cx-packs-active .woocommerce-variation-add-to-cart{
    margin-top:6px;
}

/* ==========================================================================
   BOUTON ADD TO CART (principal)
   ========================================================================== */
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit.single_add_to_cart_button{
    background:var(--cx-blue);
    border-color:var(--cx-blue);
    color:#fff;
    font-weight:800;
    font-size:16px;
    border-radius:999px;
    padding:16px 20px;
    width:100%;
    text-transform:none;
    letter-spacing:.3px;
}
.woocommerce div.product form.cart .button:hover{
    background:var(--cx-blue-dark);
    border-color:var(--cx-blue-dark);
}

/* ==========================================================================
   STICKY ADD TO CART (mobile)
   ========================================================================== */
.cx-sticky-cta{
    display:none;
    position:fixed;
    left:0; right:0; bottom:0;
    background:#fff;
    box-shadow:0 -4px 16px rgba(0,0,0,.08);
    padding:12px 16px;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    z-index:9999;
}
.cx-sticky-price{
    font-weight:800;
    font-size:16px;
    color:var(--cx-blue-dark);
}
.cx-sticky-btn{
    background:var(--cx-blue);
    color:#fff;
    border:none;
    border-radius:999px;
    padding:12px 26px;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
}
@media (max-width: 767px){
    body.single-product .cx-sticky-cta{ display:flex; }
    /* évite que le contenu soit masqué par la barre sticky */
    body.single-product{ padding-bottom:70px; }
}

/* ==========================================================================
   PROFIL ELECTRONIQUE - tableau de caracteristiques
   ========================================================================== */
.cx-specs-table{
    margin:18px 0;
    border-radius:var(--cx-radius);
    overflow:hidden;
    border:1px solid var(--cx-blue-bg);
}
.cx-specs-table table{
    width:100%;
    border-collapse:collapse;
}
.cx-specs-table tr:nth-child(even){
    background:var(--cx-blue-bg-light);
}
.cx-specs-table th,
.cx-specs-table td{
    text-align:left;
    padding:10px 14px;
    font-size:13px;
}
.cx-specs-table th{
    color:var(--cx-text-dark);
    font-weight:700;
    width:40%;
}
.cx-specs-table td{
    color:#4a5a68;
}

/* ==========================================================================
   PROFIL ELECTRONIQUE - badges rassurance technique
   ========================================================================== */
.cx-electro-badges{
    display:flex;
    gap:10px;
    margin:14px 0 20px;
    flex-wrap:wrap;
}
.cx-electro-badge{
    display:flex;
    align-items:center;
    gap:6px;
    background:var(--cx-blue-bg-light);
    border-radius:999px;
    padding:8px 14px;
    font-size:12px;
    font-weight:600;
    color:var(--cx-text-dark);
}
.cx-electro-badge-icon{
    width:16px;
    height:16px;
    color:var(--cx-blue-dark);
    flex-shrink:0;
}
.cx-electro-badge-icon svg{ width:100%; height:100%; }

/* ==========================================================================
   PROFIL MAISON - fiche materiaux / dimensions
   ========================================================================== */
.cx-maison-specs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:18px 0;
}
.cx-maison-spec-item{
    background:var(--cx-blue-bg-light);
    border-radius:12px;
    padding:10px 12px;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.cx-maison-spec-label{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
    color:var(--cx-blue-dark);
}
.cx-maison-spec-value{
    font-size:13px;
    font-weight:600;
    color:var(--cx-text-dark);
}
.cx-maison-note{
    background:#fdf3d9;
    color:#8a6d1f;
    font-size:13px;
    font-weight:600;
    padding:10px 16px;
    border-radius:12px;
    margin:14px 0 20px;
}

/* ==========================================================================
   PROFIL ELECTRONIQUE - comparatif des packs/variantes
   ========================================================================== */
.cx-compare-table{
    margin:18px 0;
    border-radius:var(--cx-radius);
    overflow-x:auto;
    border:1px solid var(--cx-blue-bg);
}
.cx-compare-table table{
    width:100%;
    border-collapse:collapse;
    min-width:420px;
}
.cx-compare-table caption{
    text-align:left;
    font-weight:700;
    font-size:14px;
    color:var(--cx-text-dark);
    padding:12px 14px 4px;
}
.cx-compare-table th,
.cx-compare-table td{
    text-align:center;
    padding:10px 12px;
    font-size:13px;
    border-bottom:1px solid var(--cx-blue-bg);
}
.cx-compare-table th:first-child,
.cx-compare-table td:first-child{
    text-align:left;
    font-weight:600;
    color:var(--cx-text-dark);
}
.cx-compare-table thead th{
    background:var(--cx-blue-bg-light);
    font-weight:700;
    color:var(--cx-blue-dark);
}
.cx-compare-table td.cx-compare-yes{ color:var(--cx-green); font-weight:700; }

/* ==========================================================================
   PROFIL ELECTRONIQUE - FAQ technique (accordeon natif <details>)
   ========================================================================== */
.cx-faq-technique{
    margin:20px 0;
}
.cx-faq-technique h3{
    font-size:16px;
    font-weight:800;
    color:var(--cx-text-dark);
    margin-bottom:10px;
}
.cx-faq-item{
    border:1px solid var(--cx-blue-bg);
    border-radius:12px;
    padding:2px 16px;
    margin-bottom:8px;
}
.cx-faq-item summary{
    cursor:pointer;
    font-weight:600;
    font-size:14px;
    color:var(--cx-text-dark);
    padding:12px 0;
    list-style:none;
}
.cx-faq-item summary::-webkit-details-marker{ display:none; }
.cx-faq-item summary::after{
    content:'+';
    float:right;
    font-weight:700;
    color:var(--cx-blue-dark);
}
.cx-faq-item[open] summary::after{ content:'−'; }
.cx-faq-item p{
    font-size:13px;
    color:#4a5a68;
    padding-bottom:12px;
    margin:0;
}

/* ==========================================================================
   GRILLE DE CATEGORIES (page d'accueil, esprit Ozon)
   ========================================================================== */
.cx-category-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:16px;
    max-width:1291px;
    margin:0 auto;
    padding:32px 20px;
}
.cx-category-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--cx-text-dark);
    transition:transform .15s ease;
}
.cx-category-card:hover{
    transform:translateY(-4px);
    color:var(--cx-blue-dark);
}
.cx-category-card-image{
    width:100%;
    aspect-ratio:1/1;
    border-radius:50%;
    overflow:hidden;
    background:var(--cx-blue-bg-light);
    display:flex;
    align-items:center;
    justify-content:center;
}
.cx-category-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.cx-category-card-label{
    font-size:13px;
    font-weight:700;
    text-align:center;
    line-height:1.2;
}
@media (max-width: 900px){
    .cx-category-grid{
        grid-template-columns:repeat(3, 1fr);
        gap:20px 12px;
    }
}
@media (max-width: 480px){
    .cx-category-grid{
        grid-template-columns:repeat(3, 1fr);
        gap:16px 8px;
        padding:20px 12px;
    }
    .cx-category-card-label{ font-size:11px; }
}

/* ==========================================================================
   PAGE BOUTIQUE / CATALOGUE (grille + sidebar filtres)
   ========================================================================== */
body.woocommerce-page:not(.single-product){
    background:#ffffff;
}

/* Grille produits */
ul.products{
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap:20px !important;
}
@media (max-width: 900px){
    ul.products{ grid-template-columns:repeat(2, 1fr) !important; }
}
ul.products li.product{
    background:#fff;
    border:1px solid var(--cx-blue-bg);
    border-radius:var(--cx-radius);
    padding:14px !important;
    margin:0 !important;
    text-align:left !important;
    position:relative;
    transition:box-shadow .15s ease, transform .15s ease;
}
ul.products li.product:hover{
    box-shadow:0 8px 24px rgba(47,111,184,.12);
    transform:translateY(-3px);
}
ul.products li.product img{
    border-radius:12px;
    margin-bottom:10px !important;
}
ul.products li.product .woocommerce-loop-product__title{
    font-size:14px;
    font-weight:700;
    color:var(--cx-text-dark);
    margin:6px 0 4px;
}
ul.products li.product .price{
    font-size:16px;
    font-weight:800;
    color:var(--cx-blue-dark);
}
ul.products li.product .button{
    background:var(--cx-blue);
    border-radius:999px;
    color:#fff;
    font-weight:700;
    font-size:13px;
    padding:8px 16px;
}
ul.products li.product .button:hover{
    background:var(--cx-blue-dark);
}

/* Boutons wishlist / compare / quick-view (YITH) repositionnes en haut a droite de la carte */
ul.products li.product .yith-wcwl-add-to-wishlist,
ul.products li.product .yith-compare-button,
ul.products li.product a.yith-wcqv-button{
    position:absolute;
    top:14px;
    right:14px;
    z-index:5;
}

/* Sidebar filtres */
#secondary .widget,
.widget-area .widget{
    background:var(--cx-blue-bg-light);
    border-radius:var(--cx-radius);
    padding:18px;
    margin-bottom:16px;
}
#secondary .widget-title,
.widget-area .widget-title{
    color:var(--cx-blue-dark);
    font-size:15px;
    font-weight:800;
    margin-bottom:12px;
}
.woocommerce-widget-price-filter .price_slider_amount .button{
    background:var(--cx-blue);
    border-radius:999px;
    color:#fff;
    font-weight:700;
}
.woocommerce-widget-price-filter .ui-slider .ui-slider-range{
    background:var(--cx-blue);
}
.woocommerce-widget-price-filter .ui-slider .ui-slider-handle{
    background:var(--cx-blue-dark);
    border-color:var(--cx-blue-dark);
}
ul.product-categories a{
    color:var(--cx-text-dark);
    font-weight:600;
    font-size:13px;
}
ul.product-categories a:hover{
    color:var(--cx-blue-dark);
}

/* ==========================================================================
   MEGA MENU (Max Mega Menu) - habillage aux couleurs du site
   ========================================================================== */
#mega-menu-wrap-primary{
    background:#ffffff;
    border-top:1px solid var(--cx-blue-bg);
    border-bottom:1px solid var(--cx-blue-bg);
}
.mega-menu.max-mega-menu > li.mega-menu-item > a.mega-menu-link{
    color:var(--cx-text-dark) !important;
    font-weight:700 !important;
    font-size:14px !important;
    padding:14px 18px !important;
    transition:color .15s ease;
}
.mega-menu.max-mega-menu > li.mega-menu-item:hover > a.mega-menu-link,
.mega-menu.max-mega-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{
    color:var(--cx-blue-dark) !important;
    background:var(--cx-blue-bg-light) !important;
}
.mega-menu.max-mega-menu .mega-sub-menu{
    background:#ffffff !important;
    border-radius:0 0 var(--cx-radius) var(--cx-radius) !important;
    box-shadow:0 12px 32px rgba(20,40,70,.14) !important;
    border:1px solid var(--cx-blue-bg) !important;
}
.mega-menu.max-mega-menu .mega-menu-column .mega-menu-row .mega-menu-item > a.mega-menu-link{
    color:var(--cx-text-dark) !important;
    font-weight:600 !important;
    font-size:13px !important;
}
.mega-menu.max-mega-menu .mega-menu-column .mega-menu-row .mega-menu-item > a.mega-menu-link:hover{
    color:var(--cx-blue-dark) !important;
}