/* === FUSIONNÉ depuis evo-shop.css === */
/* ==========================================================================
   EVO-SPIRIT THEME — Shop
   Module: evospirit_theme
   Website ID: 4
   Prefix: --evo-
   
   Ce fichier est chargé UNIQUEMENT sur le site Evo-Spirit Theme
   via ir.asset avec website_id=4 (views/assets.xml)
   ========================================================================== */


/* Badge stock fiche produit */
.evo-stock-row {
    display: inline-flex;
    align-items: center;
}

.evo-badge-stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--evo-font-body);
    font-size: 16px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1.5px solid;
}

.evo-badge-stock.evo-avail-in_stock {
    color: var(--evo-success);
    border-color: var(--evo-success);
    background: var(--evo-success-light);
}

.evo-badge-stock.evo-avail-in_stock::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--evo-success);
    flex-shrink: 0;
}

.evo-badge-stock.evo-avail-out_of_stock {
    color: var(--evo-danger);
    border-color: var(--evo-danger);
    background: var(--evo-danger-light);
}

.evo-badge-stock.evo-avail-preorder {
    color: var(--evo-warning);
    border-color: var(--evo-warning);
    background: var(--evo-warning-light);
}

.evo-badge-stock.evo-avail-dropshipping {
    color: #2980b9;
    border-color: #2980b9;
    background: #eaf4fb;
}

/* ============================================================
   BOUTONS VARIANTES — style pills EvoSpirit (inspiré GL)
   ============================================================ */

/* Radio input caché */
.o_wsale_product_page_variants .form-check-input[type="radio"],
.form-check-input.js_variant_change {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none !important;
}

/* Pill de base */
.o_wsale_product_page_variants .radio_input_value,
.radio_input_value.form-check-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 2px solid var(--evo-border, #ddd);
    border-radius: 50px;
    background: var(--evo-white);
    color: var(--evo-dark, var(--evo-dark));
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 60px;
    min-height: 48px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Hover */
.o_wsale_product_page_variants .radio_input_value:hover,
.radio_input_value.form-check-label:hover {
    border-color: var(--evo-primary);
    color: var(--evo-primary);
    box-shadow: 0 4px 14px rgba(255,81,28, 0.2);
    transform: translateY(-2px);
}

/* Sélectionnée */
.o_wsale_product_page_variants .form-check-input:checked + .radio_input_value,
.form-check-input.js_variant_change:checked + .radio_input_value,
input[type="radio"]:checked + .radio_input_value {
    background: var(--evo-white);
    border-color: var(--evo-primary);
    color: var(--evo-primary);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--evo-primary);
}

/* Badge prix extra (surcoût variante) */
.js_attribute_value .badge.text-bg-primary,
.variant_price_extra,
.sign_badge_price_extra {
    display: none;
}

/* Indisponible */
.js_attribute_value:has(.form-check-input:disabled) .radio_input_value {
    opacity: 0.4;
    border-style: dashed !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================================
   VARIANTES HORS STOCK — barrée + grisée
   ============================================================ */
.radio_input_value.evo-out-of-stock {
    opacity: 0.75;
    text-decoration: line-through;
    border-color: var(--evo-border-medium, #ccc);
    border-style: dashed !important;
    color: #aaa;
    cursor: pointer;
    transform: none;
    box-shadow: none;
}
.radio_input_value.evo-out-of-stock:hover {
    opacity: 0.9;
    border-color: var(--evo-primary);
    color: var(--evo-primary);
    transform: none;
}

/* ============================================================
   BLOC ALERTE RETOUR EN STOCK
   ============================================================ */
/* Masquage custom — Odoo OWL ne connaît pas cette classe, ne la modifie jamais */
.evo-alert-hidden { display: none; }

.evo-stock-alert {
    margin-top: 12px;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: #fff8f5;
    border: 1.5px solid #ffcdb8;
    border-radius: 10px;
}
.evo-alert-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--evo-primary);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}
.evo-alert-header svg {
    flex-shrink: 0;
    stroke: var(--evo-primary);
}
.evo-alert-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.evo-alert-form .form-control {
    flex: 1;
    min-width: 180px;
    height: 40px;
    font-size: 14px; text-transform: none; font-weight: 600;
    border: 1.5px solid #e0d5d0;
    border-radius: 8px;
    padding: 0 12px;
}
.evo-alert-form .form-control:focus {
    border-color: var(--evo-primary);
    box-shadow: 0 0 0 3px rgba(255,81,28,0.12);
    outline: none;
}
.evo-alert-btn {
    height: 40px;
    padding: 0 20px;
    background: var(--evo-primary);
    color: var(--evo-white);
    border: none;
    border-radius: 8px;
    font-size: 14px; text-transform: none; font-weight: 600;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s;
}
.evo-alert-btn:hover { background: var(--evo-primary-dark); }
.evo-alert-btn:disabled { opacity: 0.7; cursor: default; }
.evo-alert-feedback {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
}

/* === Masquer Compare et Wishlist sur EVO === */
.o_add_compare_dyn,

/* ================================================================
   RÉASSURANCE MOBILE — grille 2×2, style cards avec icône centrée
   ================================================================ */
@media (max-width: 767px) {
    .ge-features-grid, .evo-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .ge-feature-card, .evo-feature-card {
        padding: 16px 8px;
        border-radius: 12px;
        border: 1px solid var(--evo-border);
        background: var(--evo-white);
        box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }
    .ge-feature-icon, .evo-feature-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
    }
    .ge-feature-icon svg, .evo-feature-icon svg {
        width: 32px;
        height: 32px;
    }
    .ge-feature-title, .evo-feature-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--evo-dark);
        margin-bottom: 2px;
    }
    .ge-feature-desc, .evo-feature-desc {
        font-size: 12px;
        color: var(--evo-text-light, #888);
    }
    /* Alma sur mobile : pleine largeur */
    .ge-alma-section, .evo-alma-section {
        margin-bottom: 10px;
    }
}

/* ================================================================
   HEADER TABLETTE — empêcher le drapeau de passer sous le menu
   ================================================================ */
.o_header_mobile .o_main_nav {
    flex-wrap: nowrap;
    align-items: center;
}
.o_header_mobile .o_header_language_selector {
    flex-shrink: 0;
}
/* Mobile hamburger: show flag emoji + language name in menu
   Specificity must match desktop rule: header .class .class > span (0,2,2)
   ================================================================ */
@media (max-width: 991px) {
    /* Override desktop font-size:0 — specificity 0,2,2 to match */
    header .o_header_language_selector .dropdown-toggle > span {
        display: inline;
        font-size: 14px;
        line-height: 1.4;
    }
    header .o_header_language_selector .dropdown-toggle::after {
        display: inline-block;
        margin-left: 4px;
    }
    /* Button: full-width menu-like item */
    header .o_header_language_selector .dropdown-toggle {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 10px 16px;
        gap: 6px;
        background: transparent;
        border: 1px solid var(--evo-border, var(--evo-border-light, #e0e0e0));
        border-radius: 8px;
    }
    /* Dropdown items: show flag + language name */
    header .o_header_language_selector .dropdown-item > span {
        font-size: 14px;
    }
    header .o_header_language_selector .dropdown-menu {
        width: 100%;
        border-radius: 8px;
    }
    /* Empêcher les boutons de la navbar mobile de déborder */
    .o_header_mobile_buttons_wrap {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
}

/* ================================================================
   TABLETTE PAYSAGE 992-1300px — navbar compacte pour iPad Pro
   ================================================================ */
@media (min-width: 992px) and (max-width: 1299px) {

    /* Empêcher la navbar de wrapper */
    .o_main_nav {
        flex-wrap: nowrap;
    }

    /* Réduire padding et taille des items menu */
    #top_menu > li > a,
    #top_menu > li > a.dropdown-toggle {
        font-size: 13px;
        padding: 8px 8px;
        letter-spacing: 0;
    }

    /* Logo plus petit */
    header .navbar-brand.logo img,
    #top .navbar-brand.logo img {
        width: 110px;
        max-width: 110px;
    }

    /* Drapeau : garder en absolute à côté du logo, ajuster left pour logo plus petit */
    header nav.d-none.d-lg-block .o_header_language_selector {
        left: 140px;
    }

    /* Icônes droite compactes */
    header .navbar-nav .o_navlink_background,
    header .navbar-nav a[data-bs-target="#o_search_modal"] {
        padding: 4px;
    }

    header .navbar-nav.align-items-center {
        gap: 4px;
        padding-left: 8px;
    }

    /* Logo sans marge excessive */
    header .navbar-brand.logo {
        margin-right: 4px;
    }
}


/* Description pleine largeur au-dessus de la grille */
/* Container description skate — pleine largeur, chaque section gère sa propre largeur */
.evo-skate-full-desc {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: visible;
}

/* Décaler la description sous le breadcrumb sticky */
#evo_skate_full_desc {
    margin-top: 0;
    padding-bottom: 0;
}

/* La section grille (images + détails) sous la description */
#product_detail {
    /* Pas de modification — la grille reste telle quelle */
}

/* Sur desktop : léger séparateur visuel */
@media (min-width: 992px) {
    .evo-skate-full-desc {
        padding: 0;
    }
}
/* ================================================================
   BREADCRUMB BAR — pleine largeur, avant #product_detail (EVO)
   ================================================================ */

/* Masquer le container natif Odoo breadcrumb (.py-3 uniquement) */
#product_detail .o_wsale_content_contained.py-3 {
    display: none;
}

/* Barre pleine largeur */
.evo-breadcrumb-bar {
    display: block;
    width: 100%;
    margin-top: 60px;
    background: var(--evo-white);
    border-top: 1px solid #e0dbd6;
    border-bottom: 1px solid #e0dbd6;
    padding: 8px 0;
}
.evo-breadcrumb-bar .container {
    display: flex;
    align-items: center;
}

/* Liste */
.evo-bc-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

/* Items */
.evo-bc-item {
    display: flex;
    align-items: center;
    font-size: 13px;
    white-space: nowrap;
    color: var(--evo-text-soft);
}
.evo-bc-item + .evo-bc-item::before {
    content: "›";
    margin: 0 8px;
    color: var(--evo-border-medium, #ccc);
    font-size: 15px;
}
.evo-bc-item a {
    color: var(--evo-text-tertiary);
    text-decoration: none;
}
.evo-bc-item a:hover {
    color: var(--evo-primary);
}
.evo-bc-active span {
    font-weight: 600;
    color: var(--evo-brown-dark);
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* Mobile : breadcrumb compact, no overflow */
@media (max-width: 767px) {
    .evo-bc-list {
        max-width: 100vw;
        overflow: hidden;
    }
    .evo-bc-item {
        font-size: 12px;
        min-width: 0;
        flex-shrink: 1;
    }
    /* Masquer les items intermédiaires sur mobile, garder premier et dernier */
    .evo-bc-item:not(:first-child):not(:last-child) {
        display: none;
    }
    /* Séparateur entre premier et dernier */
    .evo-bc-item:last-child::before {
        content: …;
        margin: 0 6px;
        color: var(--evo-border-medium, #ccc);
    }
    .evo-bc-active span {
        max-width: 55vw;
    }
}

/* ================================================================
   SKATE DESCRIPTION HERO — CSS fidèle au site PrestaShop
   ================================================================ */

/* Container hero */
.evo-hero-product {
    position: relative;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    margin-bottom: 0;
    height: calc(85vh - 110px);
    min-height: 420px;
    max-height: 780px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Image de fond */
/* Overlay dégradé bas */
/* Contenu centré */
/* Titre */
.evo-hero-title {
    font-family: var(--evo-font-heading);
    font-size: clamp(44px, 6vw, 72px);
    line-height: 1.1;
    margin: 0 0 30px;
    color: var(--evo-white);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 4px 30px rgba(0,0,0,0.4);
}
.evo-hero-h1 {
    display: inline;
    font-weight: 900;
}
.evo-hero-title br { display: none; }
.evo-hero-title strong {
    display: inline;

    font-weight: 900;
    color: var(--evo-primary);
    text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 4px 30px rgba(0,0,0,0.5);
}

/* Tagline */
.evo-hero-content p {
    font-size: clamp(20px, 2.5vw, 28px);
    line-height: 1.5;
    margin: 0 0 40px;
    color: var(--evo-white);
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 4px 25px rgba(0,0,0,0.5);
}
.evo-hero-content p strong {
    color: var(--evo-white);
    font-weight: 700;
}
/* Mobile */
@media (max-width: 767px) {
    .evo-hero-product {
        min-height: 50vh;
        height: 60vh;
    }
    .evo-hero-content {
        padding: 0 20px;
    }
    .evo-hero-title {
        font-size: 32px;
        margin-bottom: 16px;
    }
    .evo-hero-content p {
        font-size: 18px;
        margin-bottom: 24px;
    }
}

/* ================================================================
   CSS CLASSES EVO-* — porté depuis PrestaShop custom_evospirit.css
   Scopé website_id=4 via ir.asset
   ================================================================ */

/* ================================================================
   CLASSES UTILITAIRES — remplacent les styles inline PS
   ================================================================ */

/* Container contenu max 1200px */
.evo-section-container {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1rem;
}

/* Cartes avec fond */
.evo-card-soft {
    background: var(--evo-bg-cream);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid #EBE6E1;
}
.evo-card-beige {
    background: #EBE6E1;
    padding: 2rem;
    border-radius: 16px;
}

/* Titres orange dans la description (remplace style=color:var(--evo-primary)) */
/* Grille auto-fit */
.evo-content-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: stretch;
}

/* Image pleine largeur avec border-radius */
.evo-img-full {
    width: 100%;
    height: 100%;
    max-height: 580px;
    border-radius: 16px;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Section brief — fond blanc cassé + padding */
.evo-brief-section {
    padding: 3rem 1.5rem;
}
.evo-brief-section .evo-content-grid-auto {
    max-width: 1200px;
    margin: 0 auto;
}

/* Texte corps : strong en orange */
.evo-body-text strong {
    color: var(--evo-primary-text);  /* WCAG AA */
    font-weight: 600;
}

/* Titres h2 orange dans la description */
.evo-title-section {
    color: var(--evo-primary-text);  /* WCAG AA */
    font-size: 1.4rem;
    margin: 0 0 1.5rem;
}

/* Titres h3 orange dans la description */
.evo-title-sub {
    color: var(--evo-primary-text);  /* WCAG AA */
    margin: 0 0 1rem;
    font-size: 1.2rem;
}

/* Texte corps */
.evo-body-text {
    line-height: 1.9;
    font-size: 15px;
    color: var(--evo-brown-dark);
}

/* Bouton roue caché par défaut, affiché par JS */
.evo-wheel-detail-btn {
    display: none;
    margin-top: 15px;
    padding: 10px 20px;
    background: var(--evo-primary);
    color: var(--evo-white);
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px; text-transform: none; font-weight: 600;
}
.evo-wheel-detail-btn:hover {
    background: var(--evo-primary-dark, #d94015);
    color: var(--evo-white);
    text-decoration: none;
}
.evo-container { width: 100%;
  max-width: 1200px; margin: 0 auto; padding: 0 24px; }

@media (max-width: 768px) {
  .evo-hero { min-height: 65vh; }
  .evo-hero .evo-title-xl {
    font-size: clamp(28px, 7vw, 38px);
  }
  .evo-hero-tagline {
    font-size: 14px; text-transform: none; font-weight: 600;
    max-width: 100%;
    color: var(--evo-white);
  }
  .evo-hero-label {
    font-size: 12px;
    color: var(--evo-white);
  }
  .evo-products-grid { grid-template-columns: 1fr; gap: 24px; }
  .evo-product-card img { height: 220px; }
  .evo-product-featured .evo-product-card img { height: 260px; }
  .evo-sav-image img { min-height: 250px; }
  .evo-sav-cards, .evo-riders-cards { gap: 12px; }
  .evo-card { padding: 20px 16px; border-radius: 20px; }
  .evo-card-icon { width: 40px; height: 40px; }
  .evo-card-title { font-size: 13px; }
  .evo-card-text { font-size: 12px; }
  .evo-riders-image img { min-height: 960px; }
  .evo-carousel-item { flex: 0 0 200px; }
  .evo-carousel-item img { height: 240px; }
  .evo-container { padding: 0 16px; }
  .evo-btn { padding: 12px 20px; font-size: 12px; }
  .evo-btn-small { padding: 8px 16px; font-size: 12px; }
  .evo-sav, .evo-riders, .evo-community { padding: 50px 0; }
  .evo-cta-inner { padding: 40px 24px; }
  .evo-intro { padding: 40px 0 30px; }
  .evo-products { padding: 20px 0 40px; }
}




/* Checklist */


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .evo-hero-full {
    height: calc(100vh - 110px);
    min-height: 450px;
  }
  
  .evo-flow-block {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  
  .evo-flow-left .evo-flow-media,
  .evo-flow-right .evo-flow-media {
    order: -1;
  }
  
  .evo-flow-content {
    max-width: 100%;
    text-align: center;
  }
  
  .evo-stats {
    justify-content: center;
  }
  
  .evo-card-featured {
    grid-template-columns: 1fr;
  }
  
  .evo-card-featured .evo-card-info {
    padding: 35px;
  }
  
  .evo-card-featured h3 {
    font-size: 30px;
  }
  
  .evo-video-wrapper,
  .evo-video-left {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .evo-video-left .evo-video-frame {
    order: -1;
  }
  
  .evo-video-text {
    text-align: center;
    max-width: 100%;
  }
  
  .evo-advantages {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .evo-testimonials-hp {
    grid-template-columns: 1fr;
    max-width: 550px;
  }
  
  .evo-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 160px);
  }
  
  .evo-faq-hp {
    grid-template-columns: 1fr;
  }
}


/* LABELS */

/* CHECKLIST */


/* RESPONSIVE - Ajustements mobile */
@media (max-width: 768px) {
  .evo-badge-light {
    font-size: 14px; text-transform: none; font-weight: 600;
    padding: 12px 22px;
  }
  
  .evo-trust-inner span {
    font-size: 15px;
  }
  
  .evo-flow-content > p {
    font-size: 18px;
  }
  
  .evo-stat span {
    font-size: 48px;
  }
  
  .evo-card-featured h3 {
    font-size: 32px;
  }
  
  .evo-card-featured p {
    font-size: 18px;
  }
  
  .evo-card-featured .evo-price strong {
    font-size: 30px;
  }
  
  .evo-card-product h3 {
    font-size: 26px;
  }
  
  .evo-testimonial-card p {
    font-size: 18px;
  }
  
  .evo-faq-item h3 {
    font-size: 18px;
  }
  
  .evo-faq-item p {
    font-size: 15px;
  }
  
  .evo-advantage-card h3 {
    font-size: 18px;
  }
  
  .evo-advantage-card p {
    font-size: 15px;
  }
}


/* RESPONSIVE - Sur tablette et mobile, 100% avec padding */

.evo-section-head {
  margin-bottom: 35px;
}

/* LABELS */

/* CHECKLIST */

/* LABELS */
.evo-label {
  font-size: 15px;
  margin-bottom: 18px;
}



/* SECTION HEAD */
.evo-section-head p {
  font-size: 19px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .evo-hero-content h1 {
    font-size: clamp(36px, 9vw, 52px);
  }
  
  .evo-hero-content > p {
    font-size: clamp(18px, 4.5vw, 22px);
  }
  
  .evo-badge-light {
    font-size: 14px; text-transform: none; font-weight: 600;
  }
  
  .evo-section-hp h2,
  .evo-video-section h2,
  .evo-flow-content h2 {
    font-size: clamp(30px, 7vw, 42px);
  }
  
  .evo-cta-hp h2 {
    font-size: clamp(34px, 8vw, 48px);
  }
  
  .evo-flow-content > p {
    font-size: 18px;
  }
  
  .evo-stat span {
    font-size: 44px;
  }
  
  .evo-card-featured h3 {
    font-size: 30px;
  }
  
  .evo-card-featured p {
    font-size: 18px;
  }
  
  .evo-card-product h3 {
    font-size: 24px;
  }
  
  .evo-testimonial-card p {
    font-size: 18px;
  }
  
}


*/
/* ============================================
   RESPONSIVE MOBILE
   ============================================ */
/* === MODAL VIDÉO === */



.evo-video-close {
  position: absolute;
  top: -50px;
  right: 0;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--evo-white);
  font-size: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.evo-video-close:hover {
  transform: scale(1.2);
}
/* === SECTION ROUES - NOUVEAU DESIGN === */

/* Reset des anciennes règles */
.evo-product-page .evo-wheels-grid,
/* === STATS SECTION - RESPONSIVE - 22 Jan 2026 === */

.evo-stats-grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.evo-stat-item img {
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
  filter: brightness(0);
}


.evo-stat-label {
  color: var(--evo-brown-dark);
  font-size: 14px; text-transform: none; font-weight: 600;
}

@media (max-width: 768px) {
  .evo-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .evo-stat-item img {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  .evo-stats-grid {
    gap: 1rem;
  }
  .evo-stat-item img {
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
  }
  .evo-stat-label {
    font-size: 12px;
  }
}
body:has(#evo_skate_full_desc) #product_detail {
    margin-top: 3rem;
}

/* ================================================================
   ROUES XPLORER V2 — CSS déplacé depuis le bloc style inline
   Cible les classes (pas les IDs)
   ================================================================ */
/* Alma — ligne 1er paiement sous le montant */
.ge-alma-detail {
    font-size: 12px;
    color: var(--evo-text-light, #888);
    margin-top: 2px;
}
.ge-alma-detail .ge-alma-first {
    font-weight: 600;
    color: var(--evo-text-soft);
}

/* ================================================================
   BLOC ACHAT — Coins arrondis
   Appliqué sur la div js_main_product (skate) et sur la fiche accessoire
   ================================================================ */

/* Skate : container du bloc achat */
.js_product.js_main_product.o_wsale_content_contained {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(38,17,4,0.07);
    padding: 24px;
}

/* Accessoires / produits standard (col détails) */
#o_wsale_product_details_content {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(38,17,4,0.07);
    padding: 24px;
    background: var(--evo-white);
}

/* Blocs masqués — à réactiver quand pertinent */
/* Avis custom description (on garde) : .evo-reviews-section visible */
/* #product-reviews-section: visible (module avis actif depuis 03/04/2026) */
/* Spécifications natif Odoo — masquer toute la section */
#product_full_spec { display: none; }

/* ================================================================
   PAGE CONTACT — Espacements et mise en page
   ================================================================ */

.evo-contact #wrap {
    padding-bottom: 0;
}

/* Section principale */
.evo-ct-main {
    padding: 60px 0 80px;
}

/* Cartes infos/formulaire */
.evo-ct-card {
    background: var(--evo-white);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 16px rgba(38,17,4,0.07);
}

.evo-ct-card:last-child {
    margin-bottom: 0;
}

.evo-ct-card h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--evo-primary);
    margin-bottom: 20px;
}

.evo-ct-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--evo-dark);
    margin-top: 20px;
    margin-bottom: 8px;
}

.evo-ct-card h3:first-child {
    margin-top: 0;
}

.evo-ct-card p {
    color: var(--evo-text-soft);
    font-size: 14px; text-transform: none; font-weight: 600;
    line-height: 1.7;
    margin-bottom: 0;
}

/* Note encadrée */
.evo-ct-note {
    background: var(--evo-bg-light, var(--evo-bg-cream));
    border-left: 3px solid var(--evo-primary);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 13px;
    color: var(--evo-text-soft);
    line-height: 1.6;
    margin-top: 16px;
}

/* Items contact (adresse, email, tél) */
.evo-ct-item:last-child {
    margin-bottom: 0;
}

.evo-ct-item a {
    color: var(--evo-primary);
    font-weight: 600;
    text-decoration: none;
}

.evo-ct-item a:hover {
    text-decoration: underline;
}

.evo-ct-item > div,
.evo-ct-item > a {
    font-size: 14px; text-transform: none; font-weight: 600;
    line-height: 1.5;
    color: var(--evo-text-dark, #444);
}

/* Colonne droite (formulaire) */
.evo-ct-right {
    background: var(--evo-white);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 16px rgba(38,17,4,0.07);
}

.evo-ct-right h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--evo-primary);
    margin-bottom: 24px;
}

/* Wrapper du formulaire natif Odoo */
.evo-ct-form-wrap {
    margin-top: 0;
}

/* Iframe Google Maps */
/* Espacement colonne gauche */
.evo-ct-info {
    padding-right: 20px;
}

/* Bouton Calendly RDV */
.evo-ct-card .evo-btn,
.evo-ct-right .evo-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 24px;
    font-size: 14px; text-transform: none; font-weight: 600;
    font-weight: 700;
    border-radius: 50px;
    background: var(--evo-primary);
    color: var(--evo-white);
    text-decoration: none;
    transition: background 0.2s;
}

.evo-ct-card .evo-btn:hover,
.evo-ct-right .evo-btn:hover {
    background: var(--evo-primary-dark, var(--evo-orange-dark));
}

/* Mobile */
@media (max-width: 991px) {
    .evo-ct-main {
        padding: 40px 0 60px;
    }
    .evo-ct-info {
        padding-right: 0;
        margin-bottom: 24px;
    }
    .evo-ct-card {
        padding: 24px 20px;
    }
    .evo-ct-right {
        padding: 24px 20px;
    }
}


/* ================================================================
   NOTIFICATION AJOUT AU PANIER — Alignement sous l icone panier
   Le container Bootstrap centre la notif -> decalage avec l icone.
   On force l alignement a droite avec padding coherent avec header.
   ================================================================ */

.position-fixed.w-100.h-100.top-0.pe-none > div.container.align-items-end {
    max-width: 100%;
    padding-right: 20px;
    padding-left: 0;
}

.position-fixed.w-100.h-100.top-0.pe-none .toast.o_cc1 {
    left: auto;
    width: 300px;
    max-width: 90vw;
    margin-right: 0;
}

@media (max-width: 576px) {
    .position-fixed.w-100.h-100.top-0.pe-none .toast.o_cc1 {
        width: calc(100vw - 2.5rem);
    }
}


/* ================================================================
   PRODUCT CONFIGURATOR DIALOG — Style EVO
   Modal "Configurer" / "Choisir les options" depuis la page shop.
   Pills identiques au bloc achat.
   Structure OWL: <label class="form-check-label"> puis <input radio>
   => utiliser :has(input:checked) pour l état sélectionné.
   ================================================================ */

/* ── Input radio caché ── */

/* ── Wrapper form-check: inline ── */

/* ── Label = pill de base ── */

/* ── Hover ── */
.o_sale_product_configurator_dialog .form-check-label:not(.css_not_available):hover {
    border-color: var(--evo-primary);
    color: var(--evo-primary);
    box-shadow: 0 4px 14px rgba(255,81,28,0.2);
    transform: translateY(-1px);
}

/* ── Sélectionnée : input radio après label → :has() ── */
.o_sale_product_configurator_dialog .form-check:has(input[type="radio"]:checked) .form-check-label {
    border-color: var(--evo-primary);
    color: var(--evo-primary);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--evo-primary);
    background: var(--evo-white);
    transform: none;
}

/* ── Hors stock (css_not_available = ptav exclu/OOS) ── */

/* ── Flex wrap liste de pills ── */
.o_sale_product_configurator_dialog ul.d-flex.flex-column.flex-lg-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 8px;
    align-items: center;
}
.o_sale_product_configurator_dialog ul.d-flex.flex-column.flex-lg-row > li {
    margin-bottom: 0;
}

/* ── Titre attribut ── */
.o_sale_product_configurator_dialog .fw-bold.me-3 {
    font-size: 13px;
    color: var(--evo-dark);
    margin-bottom: 6px;
}

/* ── Bouton "Passer la commande" / Go to Checkout → outline orange ── */
.o_sale_product_configurator_dialog [name="website_sale_product_configurator_checkout_button"]:hover:not(:disabled) {
    background: var(--evo-primary);
    color: var(--evo-white);
    box-shadow: 0 4px 14px rgba(255,81,28,0.3);
}

/* ── Bouton "Ajouter au panier" dans le modal → style EVO ── */
.o_sale_product_configurator_dialog [name="website_sale_product_configurator_continue_button"]:hover:not(:disabled) {
    background: var(--evo-primary-dark, var(--evo-orange-dark));
    border-color: var(--evo-primary-dark, var(--evo-orange-dark));
}

/* ── Wrapper général ── */
.o_sale_product_configurator_dialog .form-check {
    padding-left: 0;
    display: inline-flex;
}

/* ── Input radio caché ── */
.o_sale_product_configurator_dialog .form-check-input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none !important;
}

/* ── Label = pill ── */
.o_sale_product_configurator_dialog .form-check-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 2px solid var(--evo-border, #ddd);
    border-radius: 50px;
    background: var(--evo-white);
    color: var(--evo-dark, var(--evo-dark));
    font-size: 14px; text-transform: none; font-weight: 600;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 56px;
    min-height: 44px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin: 0;
}

/* ── Hover ── */
.o_sale_product_configurator_dialog .form-check-label:hover {
    border-color: var(--evo-primary);
    color: var(--evo-primary);
    box-shadow: 0 4px 14px rgba(255,81,28,0.2);
    transform: translateY(-1px);
}

/* ── Sélectionnée (radio checked) ── */
.o_sale_product_configurator_dialog .form-check-input[type="radio"]:checked + .form-check-label,
.o_sale_product_configurator_dialog .form-check-input[type="radio"]:checked ~ .form-check-label {
    border-color: var(--evo-primary);
    color: var(--evo-primary);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--evo-primary);
    background: var(--evo-white);
}

/* ── Hors stock (css_not_available = ptav exclu/OOS) ── */
.o_sale_product_configurator_dialog .form-check-label.css_not_available {
    opacity: 0.55;
    text-decoration: line-through;
    border-color: var(--evo-border-medium, #ccc);
    border-style: dashed !important;
    color: #aaa;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.o_sale_product_configurator_dialog .form-check-label.css_not_available:hover {
    opacity: 0.7;
    border-color: var(--evo-primary);
    color: var(--evo-primary);
    text-decoration: line-through;
    transform: none;
}

/* ── Flex wrap pour la liste de pills ── */
.o_sale_product_configurator_dialog ul.list-unstyled.d-flex {
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 8px;
}
.o_sale_product_configurator_dialog ul.list-unstyled.d-flex > li {
    margin-bottom: 0;
}

/* ── Bouton "Passer la commande" / Go to Checkout → orange outline ── */
.o_sale_product_configurator_dialog [name="website_sale_product_configurator_checkout_button"] {
    border-color: var(--evo-primary);
    color: var(--evo-primary);
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.o_sale_product_configurator_dialog [name="website_sale_product_configurator_checkout_button"]:hover {
    background: var(--evo-primary);
    color: var(--evo-white);
    box-shadow: 0 4px 14px rgba(255,81,28,0.3);
}

/* ── Bouton "Ajouter au panier" dans le modal → style EVO ── */
.o_sale_product_configurator_dialog [name="website_sale_product_configurator_continue_button"] {
    background: var(--evo-primary);
    border-color: var(--evo-primary);
    border-radius: 50px;
    font-weight: 600;
}
.o_sale_product_configurator_dialog [name="website_sale_product_configurator_continue_button"]:hover {
    background: var(--evo-primary-dark, var(--evo-orange-dark));
    border-color: var(--evo-primary-dark, var(--evo-orange-dark));
}


/* ================================================================
   PAGE PANIER — Correction chevauchement header
   Le header EVO est fixed (height ~63px). La page panier n a pas
   de padding-top sur son container, le titre passe sous le header.
   ================================================================ */

.o_website_sale_checkout .o_website_sale_checkout_container {
    padding-top: 4rem;
}

/* Bouton checkout — style EVO */
.o_website_sale_checkout [name="website_sale_main_button"],
.o_website_sale_checkout a.btn.btn-primary.w-100[href*="checkout"] {
    background: var(--evo-primary);
    border-color: var(--evo-primary);
    border-radius: 50px;
    font-weight: 700;
    padding: 14px 24px;
    font-size: 15px;
    transition: background 0.2s ease;
}
.o_website_sale_checkout [name="website_sale_main_button"]:hover,
.o_website_sale_checkout a.btn.btn-primary.w-100[href*="checkout"]:hover {
    background: var(--evo-primary-dark, var(--evo-orange-dark));
    border-color: var(--evo-primary-dark, var(--evo-orange-dark));
}


/* Masquer "Commander à nouveau rapidement" dans le panier */
#quick_reorder_button,
#quick_reorder_sidebar {
    display: none;
}


/* ================================================================
   HEADER — Icone connexion : aligner la bulle sur panier/recherche
   fa-stack impose 2em (~32px) + padding p-1 (4px*2) = 40px min.
   Le SVG custom n a pas cette contrainte → bulle 30px.
   On force le div wrapper a 32px pour matcher fa-stack.
   ================================================================ */

.evo-header-user a.btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.evo-header-user a.btn > div {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ================================================================
   BLOG ARTICLES — Masquer le hero natif et la navigation suivant/précédent
   26/03/2026
   ================================================================ */
#o_wblog_post_top .blog_header {
  display: none;
}
#o_wblog_next_container {
  display: none;
}

/* ================================================================
   BLOG — Bouton retour vers le listing blog
   26/03/2026
   ================================================================ */
.evo-blog-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--evo-primary, var(--evo-primary));
  color: var(--evo-primary, var(--evo-primary));
  transition: background 0.2s, transform 0.2s;
  text-decoration: none;
}
.evo-blog-back-btn:hover {
  background: var(--evo-primary, var(--evo-primary));
  border-color: var(--evo-primary, var(--evo-primary));
  color: var(--evo-white);
  transform: scale(1.05);
}

/* ================================================================
   ICÔNES REASSURANCE — MASQUAGE PERMANENT EvoSpirit (30/03/2026)
   Masque UNIQUEMENT la ligne des 4 icônes (Fabricant/SAV/Livraison/Paiement)
   Ne JAMAIS supprimer ce bloc.
   ================================================================ */
.evo-rea-icons {
    display: none;
}

/* ================================================================
   BARRE TRIER PAR / FILTRES — suppression sticky sur mobile
   Sur mobile (<992px) : pas de sticky, reste sous le titre
   Fix 13/04/2026 : ajout !important + o_wsale_sticky_object
   ================================================================ */
@media (max-width: 991.98px) {
    .products_header.btn-toolbar,
    #o_wsale_products_header,
    #o_wsale_products_header .o_wsale_sticky_object,
    .o_wsale_sticky_object {
        position: static !important;
        top: unset !important;
        z-index: auto !important;
    }
}

/* ================================================================
   MOBILE NAVBAR — panier et icônes : même fond permanent que desktop
   o_navlink_background_hover n'a pas de fond au repos par défaut
   ================================================================ */
.o_header_mobile .o_navlink_background_hover {
    background: var(--NavLinkWithBackground-bg-color, rgba(0, 0, 0, 0.05));
}
.o_header_mobile .o_navlink_background_hover:hover {
    background: var(--NavLinkWithBackground-bg-color--hover, rgba(0, 0, 0, 0.1));
    color: var(--evo-orange);
    opacity: 1;
}


/* ================================================================
   SEARCH MODAL — Badge réduction : couleur charte EvoSpirit
   Override du badge global website_search_advanced (partagé 4 sites).
   Couleur primaire EVO (var(--evo-primary)) au lieu du jaune générique (#ffc501).
   ================================================================ */
#searchModal .badge-discount {
    background: var(--evo-primary);
    color: var(--evo-white);
}

/* ================================================================
   ROUES NEXUS PRO — Grilles centrees (#nexus-wheels-main / secondary)
   ================================================================ */
#nexus-wheels-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto 40px;
}
#nexus-wheels-secondary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    max-width: 700px;
    margin: 0 auto;
}
@media screen and (max-width: 1024px) {
    #nexus-wheels-main { grid-template-columns: repeat(3, 1fr); gap: 15px; }
    #nexus-wheels-secondary { grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 100%; }
}
@media screen and (max-width: 600px) {
    #nexus-wheels-main { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto 30px; }
    #nexus-wheels-secondary { grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 100%; }
}


/* ================================================================
   ROUES SECONDARY — Fix centrage auto-fit (01/04/2026)
   Remplace repeat(6,1fr) hardcode — centre quel que soit le nb items
   Fonctionne pour Nexus Classic (3), Nexus Pro (3), Axis Pro (3)
   ET Xplorer V2 Pro (6 roues) grâce à auto-fit
   ================================================================ */
@media (max-width: 768px) {
    .evo-product-page .evo-wheels-secondary {
        grid-template-columns: repeat(auto-fit, minmax(100px, 140px));
        justify-content: center;
    }
}

/* ================================================================
   WHEEL MODAL — Popup roues sélectionnables (Nexus Pro)
   ================================================================ */
.evo-wheel-modal {
    position: fixed;
    inset: 0;
    background: rgba(38,17,4,0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.evo-wheel-modal.evo-wheel-modal--visible {
    opacity: 1;
}
.evo-wheel-modal-content {
    background: var(--evo-white);
    border-radius: 20px;
    padding: 40px 32px 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 60px rgba(38,17,4,0.2);
    transform: translateY(20px);
    transition: transform 0.25s ease;
}
.evo-wheel-modal.evo-wheel-modal--visible .evo-wheel-modal-content {
    transform: translateY(0);
}
.evo-wheel-modal-content img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    margin: 0 auto 20px;
    display: block;
}
.evo-wheel-modal-content h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--evo-brown-dark);
    margin: 0 0 12px;
}
.evo-wheel-modal-content p {
    font-size: 15px;
    color: #5a3e2b;
    line-height: 1.7;
    margin: 0 0 24px;
}
.evo-wheel-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.2s;
}
.evo-wheel-modal-close:hover { color: var(--evo-primary); }


/* ================================================================
   EEAT SECTION — Bloc conseil : max-width + centrage + espacement (01/04/2026)
   ================================================================ */
.evo-eeat-section {
    max-width: 1200px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

/* ================================================================
   ROUES SECONDARY — Fix centrage auto-fit (01/04/2026)
   ================================================================ */
.evo-product-page .evo-wheels-secondary {
    grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
    justify-content: center;
    max-width: 900px;
}
@media (max-width: 768px) {
    .evo-product-page .evo-wheels-secondary {
        grid-template-columns: repeat(auto-fit, minmax(100px, 140px));
        justify-content: center;
    }
}

/* ================================================================
   ROUES AXIS PRO — Memes regles que Nexus Pro (centrage grilles)
   ================================================================ */
#axis-wheels-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto 40px;
}
#axis-wheels-secondary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 700px;
    margin: 0 auto;
}
@media screen and (max-width: 1024px) {
    #axis-wheels-main { grid-template-columns: repeat(3, 1fr); gap: 15px; }
    #axis-wheels-secondary { max-width: 100%; gap: 10px; }
}
@media screen and (max-width: 600px) {
    #axis-wheels-main { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto 30px; }
    #axis-wheels-secondary { gap: 8px; }
}

/* ================================================================
   SECONDARY WHEELS — Style carte identique a evo-wheel-card
   (nexus-wheels-secondary + axis-wheels-secondary)
   ================================================================ */
#nexus-wheels-secondary .evo-wheel-select,
#nexus-wheels-secondary .evo-wheel-select img,
#nexus-wheels-secondary .evo-wheel-select span,
#axis-wheels-secondary .evo-wheel-select span {
    font-size: 14px;
    font-weight: 600;
    color: var(--evo-brown-dark);
}
#nexus-wheels-secondary .evo-wheel-select:hover,
#axis-wheels-secondary .evo-wheel-select:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(38,17,4,0.12);
}
#nexus-wheels-secondary .evo-wheel-select.active,
#axis-wheels-secondary .evo-wheel-select.active {
    border-color: var(--evo-primary);
    box-shadow: 0 8px 30px rgba(255,81,28,0.15);
}

/* ================================================================
   SECONDARY WHEELS — Override : cartes rectangulaires (pas carrees)
   ================================================================ */
#nexus-wheels-secondary .evo-wheel-select,
#axis-wheels-secondary .evo-wheel-select {
    flex-direction: column;
    padding: 20px 16px 16px;
    min-width: 160px;
    max-width: 240px;
    min-height: unset;
    aspect-ratio: unset !important;
}
#nexus-wheels-secondary .evo-wheel-select img,
#axis-wheels-secondary .evo-wheel-select img {
    width: 110px;
    height: 80px;
    object-fit: contain;
}

/* ================================================================
   SEARCH MODAL — Charte EvoSpirit (02/04/2026)
   Cause : website_search_advanced utilise var(--o-color-1) partout.
   Fix : redefinir --o-color-1 dans le scope #searchModal.
   Couvre : input focus, pills hover, prix, pagination, spinner,
            blog labels, hover cartes, filtres sidebar.
   ================================================================ */

/* Token override — un seul regle TOUT */
#searchModal {
    --o-color-1: var(--evo-primary);
}

/* Icone loupe — orange au lieu de gris */
#searchModal .search-icon {
    color: var(--evo-primary);
}

/* Input focus ring — orange */
#searchModal .search-input:focus {
    border-color: var(--evo-primary);
    box-shadow: 0 0 0 3px rgba(255, 81, 28, 0.12);
}

/* Modal — arrondi bas + ombre chaude EvoSpirit */
#searchModal .search-modal-content {
    border-radius: 0 0 12px 12px;
    box-shadow: 0 20px 60px rgba(38, 17, 4, 0.18);
}

/* Prix — remplace le rouge #ab2422 natif par orange EVO */
#searchModal .price-current,
#searchModal .recent-product-price .price-current,
#searchModal .best-seller-price .price-current,
#searchModal .autocomplete-product-price .price-current,
#searchModal .product-price,
#searchModal .current-price {
    color: var(--evo-primary);
}

/* Hover cartes produits — border + ombre chaude */
#searchModal .best-seller-card:hover,
#searchModal .recent-product:hover,
#searchModal .product-card:hover {
    border-color: var(--evo-primary);
    box-shadow: 0 8px 24px rgba(38, 17, 4, 0.12);
}


/* Badge Blog */
#searchModal .blog-primary-label,
#searchModal .blog-label {
    background: var(--evo-primary);
}

/* ================================================================
   COOKIE BANNER — Background blanc
   o_cookies_discrete rend le modal-content transparent.
   ================================================================ */
#website_cookies_bar .modal-content {
    background: var(--evo-white);
    box-shadow: 0 -4px 20px rgba(38, 17, 4, 0.10);
}

/* ================================================================
   GLOBAL — Pas de soulignement sur tous les boutons (tous états)
   ================================================================ */
[class*="evo-btn"],
[class*="evo-btn"]:hover,
[class*="evo-btn"]:focus,
[class*="evo-badge"],
[class*="evo-badge"]:hover,
a.btn,
a.btn:hover,
a.btn:focus,
.btn,
.btn:hover,
.btn:focus {
    text-decoration: none;
}

/* ================================================================
   UI — ÉLÉMENTS ODOO NATIFS À RECHARTER : VIOLET → ORANGE EVO
   Charte Evo-Spirit (mémo #645) :
   Primary  : var(--evo-primary)  → var(--evo-primary)
   Hover    : var(--evo-primary-dark)  → var(--evo-primary-dark)
   Fond     : var(--evo-primary-light)  → var(--evo-primary-light)
   ================================================================ */

/* ── 1. PANIER VIDE — icône SVG ─────────────────────────────────── */
.o_wsale_cart_empty svg path { fill: var(--evo-primary) !important; }

/* ── 2. BADGE COMPTEUR panier / wishlist ─────────────────────────── */
.my_cart_quantity.badge.bg-primary,
.my_wish_quantity.badge.bg-primary { background-color: var(--evo-primary) !important; }

/* ── 3. DROPDOWN COMPTE (Mon compte / Déconnexion) ────────────────── */
/* Icônes à gauche des items */
header .dropdown-item .fa { color: var(--evo-primary); }

/* Hover item */
header .dropdown-item:hover,
header .dropdown-item:focus {
    background-color: var(--evo-primary-light, var(--evo-primary-light));
    color: var(--evo-primary);
}

/* Item actif/sélectionné — FIX 14/04/2026
   Précédente version (orange sur rose) était illisible. Maintenant: foncé sur rose clair.
   Spécificité élevée (#wrapwrap.o_header_overlay > header .navbar...) pour battre la règle Odoo
   #wrapwrap.o_header_overlay > header > .navbar .dropdown-menu .dropdown-item.active
   qui force var(--dropdown-link-active-color, #fff) en !important. */
#wrapwrap.o_header_overlay > header .navbar .dropdown-menu .dropdown-item.active,
#wrapwrap.o_header_overlay > header .navbar .dropdown-menu .dropdown-item:active,
#wrapwrap header .navbar .dropdown-menu .dropdown-item.active,
#wrapwrap header .navbar .dropdown-menu .dropdown-item:active {
    background-color: var(--evo-primary-light) !important;
    color: var(--evo-dark) !important;
    font-weight: 600 !important;
}

/* ── Blog listing sidebar ── sticky + align top (audit 02/04/2026) */
.website_blog #o_wblog_sidebar {
  position: sticky;
  top: 80px;
}
.website_blog #o_wblog_sidebar.w-100 {
  /* colonne parente : ne pas étirer sur toute la hauteur */
}
.website_blog .col-md-3:has(#o_wblog_sidebar) {
  align-self: flex-start !important;
}
/* ── Related Posts – "À lire aussi" block (blog articles) ─────────── */
.evo-related-posts {
  padding: 2.5rem 0 2rem;
  margin-top: 1.5rem;
  border-top: 1px solid #e5e5e5;
}

.evo-related-posts__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #3c3028;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.evo-related-posts__card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  background: var(--evo-white);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: box-shadow .2s, transform .2s;
  height: 100%;
}
.evo-related-posts__card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

/* Cover */
.evo-related-posts__cover {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  overflow: hidden;
}
.evo-related-posts__cover-inner {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
}

/* Body */
.evo-related-posts__body {
  padding: .75rem 1rem 1rem;
}

.evo-related-posts__tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--evo-primary, #E84E0F);
  margin-bottom: .35rem;
}

/* Mobile: cartes en colonne, plus compactes */
@media (max-width: 767.98px) {
  .evo-related-posts__card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  .evo-related-posts__cover {
    width: 120px;
    min-width: 120px;
    height: auto;
    padding-bottom: 0;
  }
  .evo-related-posts__cover-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
  }
  .evo-related-posts__body {
    padding: .5rem .75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .evo-related-posts__name {
    -webkit-line-clamp: 2;
  }
}

/* ================================================================
   FIX MOBILE v2 — Bouton "Ajouter au panier" tronque sur mobile
   Approche : empiler quantite + bouton verticalement sur mobile
   pour que le bouton ait toute la largeur disponible
   ================================================================ */
@media (max-width: 767.98px) {
  /* Supprimer le double padding du container interne */
  #product_details #o_wsale_product_details_content.container {
    padding-left: 0;
    padding-right: 0;
  }

  /* Empiler verticalement : quantite au-dessus, bouton en dessous */
  #add_to_cart_wrap {
    flex-direction: column;
    width: 100%;
  }

  /* Quantite : largeur auto, aligne a gauche */
  #add_to_cart_wrap .css_quantity {
    order: -1;
    align-self: flex-start;
  }

  /* Bouton : pleine largeur, texte visible en entier */
  #add_to_cart {
    width: 100%;
    text-align: center;
  }
}

/* (mobile fix merged into base rule) */

/* Blog mobile — full-width: strip ALL Odoo/Bootstrap container paddings,
   keep ONLY .evo-container for 12px lateral padding.
   !important needed to beat Bootstrap --bs-gutter-x and Odoo .o_container_small. */
@media (max-width: 767.98px) {
  /* 1. Section principale — override Bootstrap .container + regle :has() desktop */
  #o_wblog_post_main.container,
  #o_wblog_post_main:has(.evo-blog-article) {
    padding-left: 0;
    padding-right: 0;
  }

  /* 2. Containers Odoo imbriques — strip tout padding */
  #o_wblog_post_main .o_container_small,
  #o_wblog_post_main #o_wblog_post_content {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* 3. Seul .evo-container fournit le padding lateral (12px mobile) */
  .evo-blog-article .evo-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 4. Sections avec fond — pleine largeur bord a bord */
  .evo-blog-article .evo-section--small,
  .evo-blog-article .evo-section,
  .evo-blog-article .evo-section--compact {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 5. Sections avec bg-warm — overflow bord a bord */
  .evo-blog-article .evo-bg-warm,
  .evo-blog-article .evo-cta {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* === Consolidated from evo-overrides.css === */

/* ================================================================
   CATEGORY PAGES — Hero + Description SEO
   Classes: .evo-cat-hero, .evo-cat-breadcrumb, .evo-cat-title,
            .evo-cat-description, .evo-cat-desc-inner
   ================================================================ */

/* Le header Odoo standard est sticky (height ~62px).
   main a padding-top: 0 (evo-overrides). On ajoute de l'espace
   dans le hero pour ne pas coller au header. */

/* Fil d'Ariane */
.evo-cat-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--evo-text-tertiary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.evo-cat-breadcrumb a {
    color: var(--evo-text-tertiary);
    text-decoration: none;
    transition: color 0.15s;
}

.evo-cat-breadcrumb a:hover {
    color: var(--evo-primary);
}

.evo-cat-sep {
    color: var(--evo-border);
    font-size: 12px;
}

.evo-cat-current {
    color: var(--evo-dark);
    font-weight: 600;
}

/* Titre H1 */
.evo-cat-title {
    font-family: var(--evo-font-heading);
    font-size: 32px;
    font-weight: 500;
    color: var(--evo-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px;
    line-height: 1.1;
}

/* Ligne décorative orange sous le titre */
.evo-cat-hero .container::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--evo-primary);
    margin-top: 14px;
    border-radius: 2px;
}

@media (max-width: 767px) {
    .evo-cat-hero {
        padding: 32px 0 20px;
    }
    .evo-cat-title {
        font-size: 24px;
    }
}

/* Description SEO en bas de page catégorie */

.evo-cat-desc-inner {
    max-width: 860px;
}

.evo-cat-desc-inner h3 {
    font-family: var(--evo-font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--evo-dark);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.evo-cat-desc-inner p {
    font-size: 14px; text-transform: none; font-weight: 600;
    color: var(--evo-text-soft);
    line-height: 1.7;
    margin-bottom: 10px;
}

.evo-cat-desc-inner strong {
    color: var(--evo-dark);
    font-weight: 600;
}

@media (max-width: 767px) {
    .evo-cat-description {
        padding: 24px 0;
        margin-top: 20px;
    }
}

/* ================================================================
   SHOP CATEGORY — Corrections design (16/03/2026)
   ================================================================ */

/* 1. Masquer filtre Marques (mono-marque EvoSpirit) */
#shop_custom_filters .filter-section:has(#filter_brands_list) {
    display: none;
}

/* 2. Sidebar fixed : décaler vers le bas quand hero catégorie présent
   Sélecteur CSS adjacent : hero avant #wrap → on cible #shop_custom_filters */
.evo-cat-hero + #wrap #shop_custom_filters {
    top: 280px;
    max-height: calc(100vh - 300px);
}

/* 3. Harmoniser les couleurs bandes côté + fond shop
   La sidebar et le fond principal doivent être cohérents */
#products_grid_before,

/* Fond shop pleine largeur — le container Odoo est limité en largeur,
   on applique le fond sur le wrap parent pour couvrir toute la page */
.o_wsale_products_page {
    background: var(--evo-bg-cream);
}

/* Variables --gl-* → --evo-* pour le module shop_filters_v2 sur EVO */
#shop_custom_filters {
    --gl-white: var(--evo-white);
    --gl-border: var(--evo-border);
    --gl-surface-alt: var(--evo-bg-light);
    --gl-text-muted: var(--evo-text-tertiary);
    --gl-dark: var(--evo-dark);
    --gl-primary: var(--evo-primary);
    background: var(--evo-white);
    border-right: 1px solid var(--evo-border);
}

/* Titres filtres en style EVO */
#shop_custom_filters .fw-bold {
    font-family: var(--evo-font-heading);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--evo-dark);
}

/* 4. Description catégorie bas : même fond que le hero */
.evo-cat-description {
    background: var(--evo-bg-soft);
    border-top: 1px solid var(--evo-border);
    margin-top: 0;
}

/* Hero : nuance légère, plus claire que --evo-bg-warm */
.evo-cat-hero {
    background: var(--evo-bg-soft);
    border-bottom: 1px solid var(--evo-border);
}

/* Sidebar catégories — même fond que le shop */
#products_grid_before,
.o_wsale_products_grid_before_rail {
    background: var(--evo-bg-cream);
}

/* ================================================================
   SIDEBAR CATÉGORIES — Toujours visible sur desktop
   Masquer le bouton accordion, forcer la liste ouverte.
   ================================================================ */

@media (min-width: 992px) {
    /* Masquer le bouton toggle accordion */
    .o_categories_collapse_title {
        display: none;
    }
    /* Masquer le wrapper accordion-item qui englobe le titre */
    .accordion-item:has(.o_categories_collapse_title) > h6 {
        display: none;
    }
    /* Forcer la liste toujours ouverte */
    #o_wsale_categories {
        display: block;
        height: auto;
        overflow: visible;
    }
    /* Titre sobre à la place */
    .accordion-item:has(.o_categories_collapse_title)::before {
        content: "Catégories";
        display: block;
        font-family: var(--evo-font-heading);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--evo-text-tertiary);
        padding: 0 0 8px 0;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--evo-border);
    }
}

/* ================================================================
   SHOP FILTERS V2 — Catégories toujours ouvertes sur desktop
   #filter_categories_list est un collapse Bootstrap.
   On force display:block + on retire le chevron.
   ================================================================ */

@media (min-width: 992px) {
    #filter_categories_list {
        display: block;
        height: auto;
    }
    /* Retirer le chevron (inutile si toujours ouvert) */
    #shop_custom_filters a[href="#filter_categories_list"] .fa-chevron-down {
        display: none;
    }
    /* Curseur normal sur le header (non cliquable visuellement) */
    #shop_custom_filters a[href="#filter_categories_list"] {
        pointer-events: none;
        cursor: default;
    }
}

/* ================================================================
   ARBRE CATÉGORIES — Afficher uniquement la branche active
   Le tree natif Odoo affiche TOUTES les sous-listes (.nav-hierarchy)
   en même temps. On ne veut voir QUE la sous-liste de la branche dont
   un élément est actif (= <a class="text-decoration-underline">).
   Scope : html[data-website-id="4"] uniquement.
   ================================================================ */

html[data-website-id="4"] .wsale_products_categories_list .nav-hierarchy {
    display: none;
}

/* Cas 1 : la cat parente elle-même est active → afficher ses enfants
   (ex : /shop/category/pieces-detachees-50) */
html[data-website-id="4"] .wsale_products_categories_list li.nav-item:has(> a.text-decoration-underline) > .nav-hierarchy,
/* Cas 2 : une cat enfant est active → afficher la sous-liste qui la contient
   (ex : /shop/category/fixations-61) */
html[data-website-id="4"] .wsale_products_categories_list .nav-hierarchy:has(> li.nav-item > a.text-decoration-underline) {
    display: block;
}

/* ================================================================
   FILMSTRIP SOUS-CATÉGORIES — Sans scroll, affichage complet
   Le conteneur a overflow:hidden + le wrapper overflow:auto.
   Les li ont white-space:nowrap implicite via d-flex.
   ================================================================ */

@media (min-width: 992px) {
    .o_wsale_filmstrip_default {
        overflow: visible;
        height: auto;
        min-height: 0;
    }
    .o_wsale_filmstrip_wrapper {
        overflow: visible;
        height: auto;
        width: 100%;
        position: static;
    }
    .o_wsale_filmstrip {
        flex-wrap: wrap;
        overflow: visible;
        height: auto;
        width: 100%;
        white-space: normal;
    }
    .o_wsale_filmstrip > li {
        flex-shrink: 0;
        width: auto;
    }
    .o_wsale_filmstrip_link {
        width: auto;
        white-space: nowrap;
    }
}

/* ================================================================
   SHOP — Remplacer le violet Odoo (#714B67) par couleurs EVO
   ================================================================ */

#o_wsale_container {
    /* Filmstrip barre du haut :
       active = bordure orange douce + texte foncé (lisible)
       hover  = orange doux sans fond plein */
    --o-wsale-filmstrip-item-border-color-active: var(--evo-primary);
    --o-wsale-filmstrip-item-color-active: var(--evo-dark);
    --o-wsale-filmstrip-item-bg-active: var(--evo-bg-cream);
    --o-wsale-filmstrip-item-border-color-hover: var(--evo-primary-light, #FFD4C2);
    --o-wsale-filmstrip-item-color-hover: var(--evo-primary);
    --o-wsale-filmstrip-item-box-shadow-hover: inset 0 -2px 0 var(--evo-primary);
    --o-wsale-filmstrip-item-bg-hover: var(--evo-bg-cream);
}

/* Liens actifs dans la sidebar catégories */
#products_grid_before .nav a.active,
#products_grid_before .nav a:hover {
    color: var(--evo-primary);
}

/* Checkbox/radio sidebar — couleur accent */
#products_grid_before .form-check-input:checked,
#shop_custom_filters .form-check-input:checked {
    background-color: var(--evo-primary);
    border-color: var(--evo-primary);
}

#products_grid_before .form-check-input:focus,
#shop_custom_filters .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 81, 28, 0.25);
}

/* Carousel produit — indicateur actif : bordure orange seule, pas de fond */
#o-carousel-product .carousel-indicators li.active,
#o-carousel-product .o_carousel_product_indicators .carousel-indicators li.active {
    border-color: var(--evo-primary);
    background-color: transparent;
}
/* ================================================================
   SHOP FILTERS V2 — Neutraliser la hauteur 100vh sur la sidebar
   Le rail a vh-100 (Bootstrap = height:100vh !important) ET
   shop_filters_v2 impose min-height: calc(100vh - 160px).
   Ces deux règles empêchent la description SEO d'être visible.
   ================================================================ */

@media (min-width: 992px) {
    #products_grid_before {
        min-height: 0;
        height: auto;
    }
    .o_wsale_products_grid_before_rail {
        height: auto;
        min-height: 0;
        max-height: none;
    }
    /* Forcer le wrap à ne pas être contraint en hauteur */
    #wrap.o_wsale_products_page {
        height: auto;
        min-height: 0;
        overflow: visible;
    }
}


/* ================================================================
   CARTES PRODUIT SHOP — Design amélioré EvoSpirit
   ================================================================ */

/* Masquer le bouton wishlist (coeur) */
.o_add_wishlist,
.o_add_wishlist_dyn {
    display: none;
}

/* Carte : coins arrondis, ombre légère, hover élégant */
.o_wsale_product_grid_wrapper {
    border-radius: var(--evo-radius);
    overflow: hidden;
    border: 1px solid var(--evo-border);
    background: var(--evo-white);
    transition: box-shadow 0.2s, transform 0.2s;
}

.o_wsale_product_grid_wrapper:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
    transform: translateY(-2px);
}

/* Zone image : fond blanc + forcer affichage sans lazy loading */
.oe_product_image,
.oe_product_image_img_wrapper {
    background: var(--evo-white);
}
/* Masquer badge-discount (module promo/declinaison) — a revoir avec le fix prix */
.badge-discount {
    display: none !important;
}

/* --- Fix hover image secondaire (13/04/2026, memo #1025) ---
   Primaire : opacity + position + z-index gardes pour visibilite.
   Secondary : display:none retire, remplace par opacity:0 + z-index:0.
   Hover desktop : cross-fade via opacity + z-index swap.
   ROLLBACK : evo-shop.css.bak-20260413 */
.oe_product_image_img {
    opacity: 1;
    z-index: 1;
    transition: opacity 0.4s ease-in-out;
    /* position: absolute heritee du natif Odoo (product_tile.scss L116) */
}
.oe_product_image_img_secondary {
    opacity: 0;
    z-index: 0;
    transition: opacity 0.4s ease-in-out;
    /* position: absolute heritee du natif Odoo */
}
/* Desktop : forcer display:block (le core met opacity pour le hover).
   Mobile : NE PAS forcer — le natif Odoo gere le swipe horizontal
   via le wrapper display:var() et scroll-snap. */
@media (min-width: 992px) {
    .oe_product_image_img_secondary {
        display: block !important;
    }
}

/* Mobile : secondary visible (le natif Odoo gere le swipe horizontal
   via flex-row + scroll-snap sur le link parent, IMG reste en position:absolute) */
@media (max-width: 991.98px) {
    .oe_product_image_img_secondary {
        opacity: 1 !important;
    }
}

/* Desktop hover : cross-fade primaire -> secondaire (uniquement si secondary existe) */
@media (min-width: 992px) {
    .oe_product_image_link_has_secondary:hover .oe_product_image_img {
        opacity: 0 !important;
        z-index: 0 !important;
    }
    .oe_product_image_link_has_secondary:hover .oe_product_image_img_secondary {
        opacity: 1 !important;
        z-index: 2 !important;
    }
}

/* Padding zone info cards produit (fix 13/04/2026) */
.o_wsale_product_information {
    padding: 10px 12px 6px 12px !important;
}
.o_wsale_product_sub {
    padding: 0 12px 10px 12px !important;
}
.o_wsale_product_btn .btn {
    font-size: 13px !important;
    padding: 6px 16px !important;
}

/* Mobile <768px : prix + bouton VOIR cote a cote, bouton compact colle a droite (15/04/2026) */
@media (max-width: 767.98px) {
    #wrapwrap .o_wsale_product_sub {
        padding-right: 0 !important;
        align-items: center;
        flex-wrap: nowrap;
    }
    #wrapwrap .o_wsale_product_btn {
        flex: 0 0 auto;
        gap: 4px;
        justify-content: flex-end !important;
        padding: 0 !important;
    }
    #wrapwrap .o_wsale_product_btn .o_wsale_product_action_row.w-100 {
        width: auto !important;
        flex: 0 0 auto;
    }
    #wrapwrap .o_wsale_product_btn .btn.btn-primary.w-100 {
        width: auto !important;
        padding: 3px 10px !important;
        font-size: 10px !important;
        min-height: 22px;
        line-height: 1.2;
    }
}

/* Alignement cards produit (fix 13/04/2026) */
.oe_product_cart {
    display: flex !important;
    flex-direction: column !important;
}
.o_wsale_product_information {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}
.o_wsale_product_sub {
    margin-top: auto !important;
}
.o_wsale_products_item_title {
    min-height: 0 !important;
}
.o_wsale_attribute_previewer {
    display: none !important;
}
@media (min-width: 992px) {
    .oe_product_image {
        min-height: 0 !important;
    }
    .oe_product_image:has(.oe_product_image_link_has_secondary)::before,
    .oe_product_image:has(.oe_product_image_link_has_secondary)::after {
        display: none !important;
    }
}

/* Fix CLS + Safari iOS overflow (15/04/2026)
   - aspect-ratio retire (deja set par natif Odoo via --o-wsale-card-thumb-aspect-ratio)
   - min-height retire (cassait le ratio mobile 160x200 != 1:1, declenchait bug WebKit iOS)
   - aspect-ratio retire du wrapper (duplication inutile + amplifie bug WebKit iOS #225709)
   - position absolute heritee du natif Odoo sur l'IMG (NE PAS surcharger en relative)
   - contain:style garde (fix Safari iOS du 12/04/2026)
   ROLLBACK : evo-shop.css.bak_ios_overflow_20260415_1745 */
.oe_product_image {
    overflow: hidden;
    contain: style !important;
    flex-shrink: 0;
}
.oe_product_image_img_wrapper {
    width: 100%;
    overflow: hidden;
}
.oe_product_image_img,
.oe_product_image_img_secondary {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.o_wsale_filmstip_container {
    min-height: 50px;
}

/* Titre produit — police heading + orange
   Odoo a color:inherit !important sur a → on surspécifie */
#o_wsale_container .o_wsale_products_item_title,
.o_wsale_products_opt_layout_catalog .o_wsale_products_item_title {
    font-family: var(--evo-font-heading);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
}

#o_wsale_container .o_wsale_products_item_title a,
.o_wsale_products_opt_layout_catalog .o_wsale_products_item_title a,
.o_wsale_products_opt_name_color_regular .o_wsale_products_item_title a {
    color: var(--evo-dark);
    text-decoration: none;
}

#o_wsale_container .o_wsale_products_item_title a:hover {
    opacity: 0.8;
}

/* Description courte */
.oe_subdescription {
    font-size: 12px;
    color: var(--evo-text-tertiary);
    line-height: 1.5;
}

/* Zone info produit */
.o_wsale_product_information {
    padding: 12px 14px 14px;
}

/* Prix + bouton : colonne (bouton en dessous du prix) */
.o_wsale_product_sub {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 10px;
}

/* Prix normal */
#o_wsale_container .product_price .fw-bold,
#o_wsale_container .product_price .mb-0 {
    font-family: var(--evo-font-heading);
    font-size: 14px; text-transform: none; font-weight: 600;
    font-weight: 700;
    color: var(--evo-primary);
}

/* Prix barré (promo) — fin et discret */
#o_wsale_container .product_price del {
    font-family: var(--evo-font-body);
    font-size: 12px;
    font-weight: 400;
    color: var(--evo-text-tertiary);
    opacity: 0.65;
    margin-right: 6px;
    letter-spacing: 0.2px;
}

/* Prix réduit en orange quand promo */
#o_wsale_container .product_price del ~ span,
#o_wsale_container .product_price del + span {
    color: var(--evo-primary);
}

/* Zone bouton pleine largeur */
.o_wsale_product_btn {
    width: 100%;
    flex: unset;
}

.o_wsale_product_action_row {
    width: 100%;
}

/* Fix bouton card produit — texte tronque sur cards etroites */
.o_wsale_product_btn .btn {
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px 16px;
    font-size: 12px;
    letter-spacing: 0.3px;
}

/* (duplicate removed) */

/* Bouton carte produit — outline orange, uppercase, centré */
.evo-card-btn {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    background: transparent;
    color: var(--evo-primary);
    border: 2px solid var(--evo-primary);
    border-radius: 50px;
    font-family: var(--evo-font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evo-card-btn:hover {
    background: var(--evo-primary);
    color: var(--evo-white);
}

/* (duplicate removed) */

/* (duplicate removed) */

/* Exception : .evo-card-btn annule le fond dégradé de .o_wsale_product_btn .a-submit */
.o_wsale_product_btn .a-submit.evo-card-btn,

.o_wsale_product_btn .a-submit.evo-card-btn:hover {
    background: var(--evo-primary);
    color: var(--evo-white);
}

/* Bouton carte produit — ajustement mobile */
@media (max-width: 576px) {
    .evo-card-btn,
    .o_wsale_product_btn .btn {
        font-size: 12px;
        letter-spacing: 0.3px;
        padding: 10px 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* Masquer les étiquettes de déclinaisons sur les cards produit */
.o_product_variant_preview,
.o_wsale_product_ptav_pill,
.o_wsale_attribute_previewer {
    display: none;
}

/* Description courte masquée sur les cartes listing */
.oe_subdescription_wrapper {
    display: none;
}

/* Titre produit — hauteur min 2 lignes pour alignement uniforme des cartes */
#o_wsale_container .o_wsale_products_item_title {
    min-height: calc(14px * 1.35 * 2);
    display: -webkit-box;
    display: flex;
    align-items: flex-start;
}

/* Swatches Couleur — petits cercles */
[data-attribute-name="Couleur"] .ge-swatch-img,
[data-attribute-name="Color"] .ge-swatch-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

[data-attribute-name="Couleur"] .ge-swatch-item,
[data-attribute-name="Color"] .ge-swatch-item {
    max-width: 44px;
    margin-right: 4px;
    margin-bottom: 4px;
}

/* Swatches image autres attributs (roues, batterie...) — cartes style evo-wheel-card */
.ge-swatch-img {
    width: 130px;
    height: 140px;
    border-radius: 4px;
    background-size: contain !important;
    background-position: center 50%;
    background-color: var(--evo-white);
    box-shadow: 0 4px 20px rgba(38,17,4,0.08);
    border: 2px solid transparent;
}

.ge-swatch-img:has(input:checked) {
    border-color: var(--evo-primary);
    box-shadow: 0 0 0 2px var(--evo-primary), 0 4px 20px rgba(38,17,4,0.1);
}

.ge-swatch-img:hover {
    box-shadow: 0 8px 32px rgba(255,81,28,0.18);
    transform: translateY(-3px);
}

.ge-swatch-item {
    max-width: 140px;
    margin-right: 12px;
    margin-bottom: 12px;
}

.ge-swatch-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--evo-dark, var(--evo-brown-dark));
    max-width: 130px;
    margin-top: 8px;
}

/* ge-feature-card icônes — taille fixe (SVG sans dimensions natif) */
.ge-feature-icon, .evo-feature-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ge-feature-icon svg, .evo-feature-icon svg {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
}

/* Popover fermeture — taille correcte */
.ge-popover-close, .evo-popover-close {
    width: auto;
    height: auto;
}

/* Titre produit fiche — orange */
#product_detail h1[itemprop="name"],
#product_detail [itemprop="name"].h1 {
    color: var(--evo-primary);
}

/* Masquer bloc prix natif Odoo — remplacé par evo-price-block custom */
.o_wsale_product_details_content_section_price,
#product_details .o_wsale_product_details_content_section_price,
#o_wsale_product_details_content .o_wsale_product_details_content_section_price {
    display: none;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}


/* ===== BADGE LIGHT ===== */
.evo-product-page .evo-badge-light {
  display: inline-block;
  padding: 8px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.2);
}

/* === Fix boutons grille shop (post-suppression COW 4726) === */
.oe_website_sale .o_wsale_product_action_row .btn-primary {
  background-color: var(--evo-primary) !important;
  border-color: var(--evo-primary) !important;
  color: var(--evo-white) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--evo-radius);
}
.oe_website_sale .o_wsale_product_action_row .btn-primary:hover {
  background-color: var(--evo-primary-dark) !important;
  border-color: var(--evo-primary-dark) !important;
}

/* === Fix shop grid layout après suppression COW (match DEV) === */
/* Masquer descriptions produit dans la grille */
.oe_website_sale .o_wsale_products_grid_table_wrapper .o_wsale_product_information .oe_subdescription,
.oe_website_sale .o_wsale_products_grid_table_wrapper .o_wsale_product_information p:not(.o_wsale_product_information_text) {
  display: none;
}

/* Titres produit : taille compacte */
.oe_website_sale .o_wsale_products_grid_table_wrapper .o_wsale_products_item_title a {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--evo-dark);
}

/* Masquer les filtres sidebar supplémentaires (garder seulement Price Range) */
/* Note: laissé pour l'instant car les filtres supplémentaires viennent du template base */

/* === Evo Shop: hide attribute filters, keep only Price Range + Categories === */
/* Match DEV layout which only shows Price Range in sidebar */
.oe_website_sale .js_attributes .accordion-item {
  display: none;
}
/* Price Range uses a different parent - it stays visible */


/* ====================================================================
   Alignement bloc prix + bouton VOIR sur tuiles produits /shop
   MAJ 2026-04-13 : harmonise tuiles avec/sans promo
   - "A partir de" en petit gris au-dessus du prix
   - Prix principal puis prix barre dessous (en colonne)
   - Bloc prix centre verticalement avec le bouton VOIR
   - Bouton VOIR descendu de 8px
   ==================================================================== */
.oe_product_cart .product_price span.text-muted.lh-1 {
    display: inline !important;
    font-size: 0.65rem !important;
    font-weight: normal;
    margin-right: 4px;
    width: 100%;
}
.oe_product_cart .product_price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    align-self: center !important;
}
.oe_product_cart .product_price del {
    font-size: 0.8rem;
    opacity: 0.7;
}
.oe_product_cart .o_wsale_product_sub {
    align-items: center !important;
}
.oe_product_cart .o_wsale_product_btn,
.oe_product_cart .o_wsale_product_sub a.btn,
.oe_product_cart a.btn-primary {
    margin-top: 8px !important;
}


/* ====================================================================
   Tailles texte prix + alignement strikethrough + responsive mobile
   MAJ 2026-04-13 (suite alignement bloc prix)
   ==================================================================== */
.oe_product_cart .product_price span.text-muted.lh-1 {
    font-size: 0.8rem !important;
}
.oe_product_cart .product_price .h6,
.oe_product_cart .product_price .fw-bold,
.oe_product_cart .product_price b,
.oe_product_cart .product_price > span:not(.text-muted) {
    font-size: 1.25rem !important;
}
.oe_product_cart .product_price del {
    font-size: 1.05rem !important;
    text-decoration: none !important;
    position: relative;
    display: inline-block;
}
.oe_product_cart .product_price del::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: currentColor;
}
.oe_product_cart .product_price {
    align-items: center !important;
    text-align: center !important;
}

/* Mobile : reduit tailles + force ligne unique prix/bouton */
@media (max-width: 768px) {
    .oe_product_cart .product_price .h6,
    .oe_product_cart .product_price .fw-bold,
    .oe_product_cart .product_price b,
    .oe_product_cart .product_price > span:not(.text-muted) {
        font-size: 1rem !important;
    }
    .oe_product_cart .product_price del {
        font-size: 0.85rem !important;
    }
    .oe_product_cart .product_price span.text-muted.lh-1 {
        font-size: 0.7rem !important;
    }
    .oe_product_cart .o_wsale_product_btn,
    .oe_product_cart .o_wsale_product_sub a.btn,
    .oe_product_cart a.btn-primary {
        padding: 0.35rem 0.7rem !important;
        font-size: 0.8rem !important;
    }
    .oe_product_cart .o_wsale_product_sub {
        flex-wrap: nowrap !important;
    }
    .oe_product_cart .product_price {
        flex-shrink: 1;
        min-width: 0;
    }
    .oe_product_cart .o_wsale_product_btn,
    .oe_product_cart .o_wsale_product_sub a.btn,
    .oe_product_cart a.btn-primary {
        flex-shrink: 0;
        white-space: nowrap;
    }
}


/* ============================================
   FIX 13/04/2026 : Style attribute selectors page produit
   - Pills (radio) et select harmonisés visuellement (radius 16px, font Satoshi 17/500)
   - Pills natives utilisent GeneralSans_bold → on force Satoshi_Complete pour cohérence
   - Select carré conservé pour attributs nombreux (ex: Compatibilité 11 valeurs)
   - Masquage des attributs à 1 seule valeur (un dropdown/pill à 1 choix est inutile)
   - Note R1: hex #D93C12 hardcodé dans data-URL SVG (limitation format, var() impossible)
   ============================================ */
.o_wsale_product_page_variants {
  gap: 16px;
}
.o_wsale_product_page_variants > li {
  margin: 0;
}
.o_wsale_product_page_variants .attribute_name {
  font-size: 15px;
  font-weight: 600;
  text-transform: none !important; /* override Bootstrap .text-uppercase */
  letter-spacing: 0;
  color: var(--evo-dark);
  margin-bottom: 10px;
}
/* Override font intrinsèquement bold (GeneralSans_bold) sur les pills natives Odoo */
.radio_input_value,
.radio_input_value span {
  font-family: Satoshi_Complete, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 17px;
}
/* Select stylé pour matcher visuellement les pills (radius 16px, font 17/500) — sélecteur spécifique pour battre .form-select */
select.o_wsale_product_attribute.css_attribute_select {
  width: 100%;
  height: auto;
  padding: 14px 42px 14px 18px;
  border: 2px solid var(--evo-border);
  border-radius: 16px;
  background-color: var(--evo-white);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27 fill=%27none%27><path d=%27M1 1.5L6 6.5L11 1.5%27 stroke=%27%23D93C12%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
  font-size: 17px;
  font-weight: 500;
  color: var(--evo-dark);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
  -webkit-appearance: none;
}
select.o_wsale_product_attribute.css_attribute_select option {
  color: var(--evo-dark);
}
select.o_wsale_product_attribute.css_attribute_select:hover {
  border-color: var(--evo-primary);
}
select.o_wsale_product_attribute.css_attribute_select:focus {
  outline: none;
  border-color: var(--evo-primary);
  box-shadow: 0 0 0 3px rgba(217, 60, 18, 0.12);
}
/* Masquer les attributs avec 1 seule valeur : un dropdown/pill à 1 choix n'a pas de sens
   - select: une option unique
   - radio (pills): un seul wrapper .js_attribute_value */
li.variant_attribute:has(> ul.o_wsale_product_attribute > .js_attribute_value:only-child):not(:has(.variant_custom_value)),
li.variant_attribute:has(> select option:only-child):not(:has(.variant_custom_value)) {
  display: none;
}

/* FIX 15/04/2026 : wheels-secondary mobile — la règle ligne ~1722 (#nexus-wheels-secondary .evo-wheel-select) impose min-width:160px sans mediaquery, débordement viewport sur mobile car spécificité ID écrase le min-width:100px de evo-product.css. Ajout du pendant mobile. */
@media (max-width: 768px) {
  #nexus-wheels-secondary .evo-wheel-select,
  #axis-wheels-secondary .evo-wheel-select {
    min-width: 100px;
    max-width: 140px;
    padding: 12px 8px;
  }
  #nexus-wheels-secondary .evo-wheel-select img,
  #axis-wheels-secondary .evo-wheel-select img {
    width: 70px;
    height: 50px;
  }
}


/* FIX 15/04/2026 : touch targets a11y WCAG 2.5.5 (recettage NEXUS I3)
   - evo-wheel-detail-close : croix de fermeture trop petite (32x41 -> 44x44)
   - evo-ft-btn-sub "S'abonner" : hauteur insuffisante (41 -> 44) */
.evo-product-page .evo-wheel-detail-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.evo-ft-btn-sub.js_subscribe_btn {
  min-height: 44px;
}


/* FIX 15/04/2026 : CLS prevention sticky bar produit (recettage NEXUS C4)
   L'image carousel produit Odoo n'a pas de dimensions reservees -> shift au load.
   Aspect-ratio 1:1 reserve l'espace avant le chargement de l'image. */
.o_product_detail_img_wrapper {
  aspect-ratio: 1/1;
  min-height: 0;
}


/* FIX 15/04/2026 : skip-to-content a11y standard (recettage NEXUS I10)
   Lien WCAG 2.4.1 — caché visuellement, visible et utilisable au focus clavier.
   Pattern Bootstrap visually-hidden-focusable. */
.o_skip_to_content {
  position: absolute;
  top: -100px;
  left: 0;
  width: auto;
  height: auto;
  padding: 12px 20px;
  background: var(--evo-brown-dark, #261104);
  color: #fff;
  z-index: 99999;
  clip: auto;
  overflow: visible;
  transition: top 0.15s ease-out;
  text-decoration: underline;
  border-radius: 0 0 8px 0;
}
.o_skip_to_content:focus,
.o_skip_to_content:focus-visible {
  top: 0;
  outline: 2px solid var(--evo-primary, #FF511C);
  outline-offset: -2px;
}