/*
Theme Name: Cabrio Electro Shop
Theme URI: https://cabrio-informatique.com/
Author: Cyrille Bernard
Description: Conversion of the Electro template for WooCommerce.
Version: 1.0.0
Text Domain: cab-electro
Domain Path: /languages
*/

/* Fix rapide pour la barre d'admin WP avec Bootstrap */
#wpadminbar { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; }
body.admin-bar .navbar.fixed-top { top: 32px !important; }

.custom-logo-link img {
    max-height: 5rem;
    width: auto;
    height: auto;
    max-width: 20rem;
}
@media screen and (max-width: 1280px) {
    .custom-logo-link img {
        max-width: 15rem;
    }
  
}

/* Bouton our products : Bouton blanc quand il n'est pas actif */
.tab-class .nav-link.btn-primary {
    background-color: #ffffff !important;
    color: var(--bs-primary) !important; /* Texte de la couleur du thème */
    border: 1px solid var(--bs-primary) !important;
    transition: all 0.3s ease;
}
.tab-class .nav-link.btn-primary:hover {
    background-color: var(--bs-secondary) !important; /* Devient plein */
    color: #ffffff !important; /* Texte blanc */
    border-color: var(--bs-primary) !important;
}
.tab-class .nav-link.btn-primary.active{
    /*color: #ffffff !important;  Texte blanc */
    border-color: var(--bs-primary) !important;
}

/* Animation personnalisée pour les produits */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* Autorise le débordement vers le bas pour voir l'animation 'Add to cart' */
.productList-carousel .owl-stage-outer {
    padding-bottom: 4.8rem; /* Ajuste cette valeur selon la hauteur de ta div cachée */
}

/* CORRECTIFS PRODUCT-LIST */
.container.products-mini.py-5 {
    padding-bottom: 4.8rem !important;
}

/* CORRECTIFS BESTSELLERS */
/* Correctif pour le zoom de l'image dans les angles arrondis */
.products-mini-img {
    overflow: hidden; /* Force l'image à être coupée par le parent */
    border-top-left-radius: 10px; /* Ajuste selon l'arrondi de ton thème */
    
    position: relative;
}

.products-mini-img img {
    transition: transform 0.5s ease;
    display: block;
}

/* Optionnel : si le zoom n'est pas déjà géré par ton main.css */
.products-mini-item:hover .products-mini-img img {
    transform: scale(1.1);
}



.product-cat {
    padding: 1rem 1.7rem 1rem 1rem !important;
}

.footer-item .product_list_widget li a:hover {
    color: var(--bs-primary) !important;
}

/* 3. ON CACHE LES PRIX (et les avis éventuels) */
.footer-item .product_list_widget li .amount,
.footer-item .product_list_widget li del,
.footer-item .product_list_widget li ins,
.footer-item .product_list_widget li .star-rating,
.footer-item .product_list_widget li .reviewer {
    display: none !important;
}

/* PAGE MON COMPTE */
/* Style du formulaire Mon Compte */
.woocommerce-account .woocommerce-MyAccount-content {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 15px;
}

/* On aligne Connexion et Inscription en deux colonnes sur Desktop */
@media (min-width: 768px) {
    .u-columns.col2-set {
        display: flex;
        gap: 30px;
    }
    .u-column1, .u-column2 {
        flex: 1;
        padding: 20px;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 15px;
    }
}



@media (max-width: 768px) {
    .variation-featured-image {
        float: none !important;
        width: 100% !important;
        margin: 0 1.5rem 1.5rem 0 !important;
    }
}

/* Force l'état des boutons pendant l'animation */
.related-carousel .owl-nav .owl-prev,
.related-carousel .owl-nav .owl-next {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 10px;
    font-size: 1rem;
}

.cab-title-reply {
    margin-bottom: 0rem !important;
}

/* desactivation lightbox */
/* Cache le bouton de la lightbox native */
.wp-lightbox-container button.lightbox-trigger,
.wp-lightbox-container .wp-block-image__overlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* On s'assure que le conteneur ne bloque pas le clic vers Fancybox */
.wp-lightbox-container {
    display: block !important;
    pointer-events: auto !important;
}

/* On neutralise les styles d'agrandissement natifs au survol */
.wp-lightbox-container:hover {
    cursor: zoom-in !important;
}

/* SIDEBAR */
/* Espacement des listes dans la sidebar */
/* On cible les blocs de widgets Gutenberg dans la sidebar */
.sidebar .wp-block-group, 
.sidebar .widget,
.sidebar aside > div {
    background: var(--bs-light) !important; /* Ton gris clair */
    border-radius: 10px !important;       /* Arrondis */
    padding: 25px !important;             /* Espacement interne */
    margin-bottom: 25px !important;        /* Espace entre les blocs */
}

/* On stylise les titres des blocs (H2 ou H4) */
.sidebar h2, .sidebar h4 {
    color: var(--bs-primary);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bs-primary);
    display: inline-block;
}

/* On force le bouton de recherche à ressembler au thème */
.sidebar .wp-block-search__button {
    background: var(--bs-light) !important;
    color: white !important;
    border-radius: 0 50px 50px 0 !important;
    border: none !important;
    padding: 10px 20px !important;
}

.sidebar .wp-block-search__input {
    border-radius: 50px 0 0 50px !important;
    border: 1px solid #ddd !important;
}

.sidebar .widget ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.sidebar .widget ul li {
    padding: 10px 0;
    border-bottom: 1px dashed #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar .widget ul li:last-child {
    border-bottom: none;
}

.sidebar .widget ul li a {
    color: #45595b; /* Couleur sombre du thème */
    transition: 0.3s;
    text-decoration: none;
}

.sidebar .widget ul li a:hover {
    color: var(--bs-primary);
    padding-left: 5px;
}

/* On s'assure que chaque widget est un bloc propre */
.sidebar .widget {
    background: var(--bs-light) !important; /* bg-light */
    border-radius: 10px !important;       /* rounded */
    padding: 1.5rem !important;           /* p-4 */
    margin-bottom: 2rem !important;        /* mb-4 */
    overflow: hidden;
}

/* Style des liens dans les widgets */
.sidebar .widget a {
    color: #45595b;
    text-decoration: none;
    transition: 0.3s;
}

.sidebar .widget a:hover {
    color: var(--bs-primary);
    padding-left: 5px;
}

/* Badge de nombre (ex: catégories (5)) */
.sidebar .widget li {
    font-size: 0.95rem;
}

/* Masquer le lien "Voir le panier" automatique de WooCommerce */
.added_to_cart.wc-forward {
    display: none !important;
}

/* Supprime les soulignements par défaut de WooCommerce */
#main-product-price ins {
    text-decoration: none !important;
}

/* #main-product-price del {
    color: #6c757d !important; 
    text-decoration: line-through !important;
    font-weight: normal;
} */

/* #main-product-price del {
    color: #f92400 !important;
} */

#amount {
    font-weight: bold;
    color: var(--bs-primary);
    font-size: 1.1rem;
}
.price input[type="range"]::-webkit-slider-thumb {
    background: var(--bs-primary);
}

/* H1 H2 */
.span-h4, .span-h3, .span-h2, .span-h1 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    line-height: 1.2;
    color: #484848;
}
@media (min-width: 1200px) {
    .span-h4 {
        font-size: 1.5rem;
    }
}


/* Arrondir le côté gauche de l'input de recherche */
.woocommerce-product-search .input-group .form-control {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

/* Arrondir le côté droit du bouton de recherche */
.woocommerce-product-search .input-group .input-group-text {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-left: none;      /* Supprime la double bordure au milieu */
}

/* Optionnel : enlever le contour bleu au clic sur l'input */
.woocommerce-product-search .form-control:focus {
    box-shadow: none;
    border-color: #ced4da;
}

.woocommerce span.onsale {
  top: 3.0em;
  left: 1.5em;
}
.woocommerce span.product-sale.onsale {
  background-color: var(--bs-secondary) !important;
}
.woocommerce span.product-new.onsale {
  background-color: var(--bs-primary) !important;
}

/** HEADER */
.navbar-brand {
  margin-right: 0rem;
}
.px-5 {
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}

/** PAGE SINGLE PRODUCT */

/* On neutralise la classe .small héritée du thème dans le bloc meta */
.product_meta.small {
    font-size: inherit !important; 
    /* 'inherit' dit : prends la taille du texte normal de mon thème */
}

/* Style pour le prix barré (Promotion) */
.single-product h5.fw-bold del {
    color: var(--bs-secondary);
    font-size: 0.8em;
    opacity: 0.8;
    margin-right: 8px;
    font-weight: normal;
}

/* Style pour le prix actuel (Promotion) */
.single-product h5.fw-bold ins {
    text-decoration: none;
    color: #484848; 
}



/* Force le design en ligne pour les variations */
/* On s'assure que le container parent n'empêche pas le flex */
.variations .bg-light {
    display: flex !important;
    width: 100%;
}

/* On stylise le select pour qu'il prenne toute la place de ses 60% */
#logo {
    font-weight: 500;
    padding-left: 10px;
    outline: none;
    box-shadow: none;
}

/* Masquer le lien "Clear" par défaut et ne l'afficher que quand une option est choisie */
/* WooCommerce ajoute la classe .reset_variations quand c'est cliquable */
.reset_variations {
    visibility: hidden;
    font-size: 1.2rem;
    transition: all 0.2s;
}

/* WooCommerce affiche le bouton via display: inline quand une variation est sélectionnée */
.variations_form.variation_resettable .reset_variations {
    visibility: visible !important;
    display: inline-block !important;
}

/* Ajustement spécifique pour le tableau des produits groupés */
.woocommerce-grouped-product-list-item__quantity {
    width: 120px; /* On laisse un peu plus de place pour le groupe de boutons */
    padding-right: 15px !important;
}

.woocommerce-grouped-product-list-item__quantity .quantity {
    margin-bottom: 0 !important; /* On retire ton mb-5 pour l'alignement en ligne */
}