/* Font */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat-bold';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Montserrat', sans-serif;
}
strong{
    font-family: 'Montserrat-bold', sans-serif;
}
/* icomoon */
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?57ran5');
    src:  url('../fonts/icomoon.eot?57ran5#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?57ran5') format('truetype'),
    url('../fonts/icomoon.woff?57ran5') format('woff'),
    url('../fonts/icomoon.svg?57ran5#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="ico-"], [class*=" ico-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ico-cart:before {
    content: "\e900";
}
.ico-user:before {
    content: "\e901";
}
.ico-search:before {
    content: "\e902";
}
.ico-car:before {
    content: "\e903";
}
.ico-engagements:before {
    content: "\e904";
}
.ico-truck:before {
    content: "\e905";
}
.ico-moto:before {
    content: "\e906";
}
.ico-services:before {
    content: "\e907";
}
.ico-livraison:before {
    content: "\e908";
}
.ico-paiements:before {
    content: "\e909";
}
.ico-light:before {
    content: "\e90a";
}
.ico-prise:before {
    content: "\e90b";
}
.ico-garantie:before {
    content: "\e90c";
}
.ico-chrono:before {
    content: "\e90d";
}
.ico-ampoule:before {
    content: "\e90e";
}
.ico-temp:before {
    content: "\e90f";
}
.ico-calendrier:before {
    content: "\e910";
}
.ico-chrono-24:before {
    content: "\e911";
}
.ico-cb:before {
    content: "\e912";
}
.ico-camion-livraison:before {
    content: "\e913";
}
.ico-360:before {
    content: "\e914";
}
.ico-power:before {
    content: "\e915";
}
.ico-filters:before {
    content: "\e916";
}
.ico-close:before {
    content: "\e917";
}
.ico-bars:before {
    content: "\e918";
}
.ico-in-stock:before {
    content: "\e919";
}

/* General */
a{
    color: var(--body-color);
}
.bg-dark {
    background-color: #1b3d70 !important;
}
.btn-custom{
    color:var(--primary);
    font-size:14px;
    text-transform:uppercase;
    border-radius:3px;
    background:#fff;
    border:1px solid var(--primary);
    padding:8px 15px;
    text-align:center;
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.btn-custom:hover{
    background-color:var(--primary);
    color:#fff;
}

.btn-custom::before{
    /* content:''; */
    width:14px;
    height:1px;
    background:var(--primary);
    display:block;
    transition:width .3s ease, background-color .3s ease;
}

.btn-custom:hover::before{
    background:#fff;
    width:24px;
}

/* FX Slider Block */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fx-slider-wrapper {
    overflow: hidden;
    position: relative;
}

.fx-slider {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    transition: transform 0.5s ease;
}

.fx-slide {
    float: left;
    position: relative;
}

.fx-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.fx-slide-overlay {
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    position: absolute;
    background: linear-gradient(267deg,  rgba(0, 0, 0, 0) 15%,  var(--primary) 100%);
}

.fx-slide-container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}

.fx-slide-content {
    text-align: left;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    max-width: 600px;
}

.fx-slide-title {
    color: #fff;
    font-size: 22px;
    line-height: 28px;
    font-weight: bold;
    margin: 25px 0;
    margin-top: 0;
    display: inline-block;
}

.fx-slide-text {
    font-size: 0.8125rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

.fx-slide-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.fx-slider-prev,
.fx-slider-next {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    z-index: 9;
    background: var(--primary);
    border-radius: 100%;
    text-indent: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 24px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.fx-slider-prev {
    left: 20px;
}

.fx-slider-next {
    right: 20px;
}

.fx-slider-prev:hover,
.fx-slider-next:hover {
    background: #f37586;
}

.fx-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.fx-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #fff;
    opacity: 0.4;
    cursor: pointer;
    text-indent: -9999px;
    display: block;
    margin: 0 5px;
    outline: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.fx-slider-dot:hover,
.fx-slider-dot:focus,
.fx-slider-dot.active {
    background: #fff;
    opacity: 1;
}
.fx-slide-links .btn-custom{
    border-color: #ffffff;
    color: #ffffff;
    background: transparent;
    margin-bottom: 1rem;
}
.fx-slide-links .btn-custom:before{
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background: #ffffff;
    transition: width 0.3s ease;
}
.fx-slide-links .btn-custom:hover{
    background-color: var(--accent);
    border-color: var(--accent);
}
.fx-slide-links .btn-custom:hover:before{
    width: 24px;
}

/* FX Brands Block */
#homebrands {
    text-align: center;
    width: 100%;
    /* margin: 40px auto; */
    position: relative;
}

#homebrands:before {
    height: 1px;
    position: absolute;
    left: 0;
    top: 26px;
    width: 100%;
    content: '';
    background: var(--primary);
}

#homebrands .brands-selector {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 45px;
    background: #fff;
    position: relative;
    padding: 0 45px;
}

#homebrands .brands-selector i {
    font-size: 60px;
    cursor: pointer;
    color: #dad7d8;
    padding-right: 10px;
    margin-right: 10px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#homebrands .brands-selector i.current,#homebrands .brands-selector i:hover {
    color: var(--accent);
    border-color: var(--accent);
}

[class^="ico-"],
[class*=" ico-"] {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

#homebrands ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#homebrands ul li {
    flex: 0 0 9%;
    max-width: 9%;
    list-style: none;
    height: 120px;
    text-align: center;
    padding: 0 5px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

#homebrands ul li a {
    display: block;
    height: 100%;
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#homebrands ul li a:hover {
    opacity: 0.8;
}

#homebrands ul li img {
    max-width: 100%;
    height: auto;
    max-height: 60px;
    object-fit: contain;
}

#homebrands ul li span {
    display: inline-block;
    font-size: 11px;
    margin-top: 6px;
    color: var(--body-color);
    height: 55px;
}
#homebrands ul li:hover span { color:var(--accent);}

#homebrands .bottom-link {
    list-style: none;
    margin: 30px 0 0 0;
    padding: 0;
    text-align: center;
    width: 100%;
    float: left;
}

#homebrands .homebrands_display {
    display: inline-block;
    cursor: pointer;
    margin: 0 auto;
}

@media (max-width: 1200px) {

body  .mm_menu_content_title { padding:0px;  }
body .mm_tabs_li .mm_columns_contents_ul { margin-left:0;}
body  .mm_menu_content_title,.ets_mm_megamenu a { text-align: left;}
body .ets_mm_categories.addimg .mm_cat_item {   flex: 0;    max-width: 100%;    width: 100%;}
body .ets_mm_categories.addimg .mm_cat_link,body .ets_mm_categories,body .brands-layout-wrapper { gap:0; flex-direction:column;align-items: baseline;}
body .brands-sidebar,body .brands-grid-container {   width: 100%;}
body .ets_mm_categories.addimg .mm_cat_link { padding:10px 0;}

    #homebrands ul li {
        flex: 0 0 11%;
        max-width: 11%;
    }
}

@media (max-width: 992px) {
    #homebrands ul li {
        flex: 0 0 14.5%;
        max-width: 14.5%;
    }
}

@media (max-width: 768px) {
    #homebrands ul li {
        flex: 0 0 33.333%;
        max-width: 33.333%;
        height: 100px;
        padding: 0 8px;
    }

    #homebrands .brands-selector i {
        font-size: 50px;
        margin: 0 5px;
    }
}

@media (max-width: 480px) {
    #homebrands ul li {
        flex: 0 0 33.333%;
        max-width: 33.333%;
        height: 95px;
        padding: 0 5px;
    }
}

/* h1 home */
#index h1{
    font-size: 2rem;
    text-align: center;
    font-weight: 600;
}

/* Bouton voir toutes les marques */
#homebrands ul #cars_homebrands_display {
    cursor: pointer;
    color: #1c3e70 !important;
    height: auto;
    padding: 8px 15px !important;
    border-radius: 3px;
    text-align: center;
    background: #fff !important;
    border: 1px solid #1c3e70 !important;
    margin: 0 auto !important;
    width: auto !important;
    display: inline-block !important;
    float: none !important;
    -webkit-transition: color 0.3s ease, background-color 0.3s ease !important;
    -moz-transition: color 0.3s ease, background-color 0.3s ease !important;
    -o-transition: color 0.3s ease, background-color 0.3s ease !important;
    transition: color 0.3s ease, background-color 0.3s ease !important;
}

#homebrands ul #cars_homebrands_display:hover,
#homebrands .homebrands_display:hover,
#homebrands .homebrands_display span:hover {
    background-color: #1c3e70 !important;
    color: #fff !important;
}

#homebrands .bottom-link {
    border-top: 1px solid #1c3e70 !important;
    padding-top: 35px !important;
    margin-top: 35px !important;
}

/* FX Awards Block */
.bloc-awards {
    color: #fff;
    position: relative;
    text-align: left;
}

.bloc-awards:before {
    content: '';
    background: var(--primary);
    display: block;
    width: 85%;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.bloc-awards:after {
    content: '';
    background-image: var(--bg-image);
    background-position: 40% 100%;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.bloc-awards-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.bloc-awards-logo {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.bloc-awards-logo img {
    width: 287px;
    max-width: 100%;
}

.bloc-awards-content {
    position: relative;
    z-index: 1;
    padding: 0 45px 0 25px;
    flex: 1;
    p{

        color: white !important;
    }
}

.bloc-awards-content p {
    display: block;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.bloc-awards-content p strong {
    font-weight: bold;
}

.bloc-awards .btn-custom.bloc-awards-btn {
    display: inline-block;
    border-radius: 3px;
    text-transform: uppercase;
    border:none;
    color: var(--primary);
    padding: 8px 15px;
    margin-top: 10px;
    font-size: 14px;
    background: #fff;
    transition: all 0.3s ease;
}

.bloc-awards .btn-custom.bloc-awards-btn:hover {
    background: var(--accent);
    color:#fff;
   
}

.bloc-awards-video {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.bloc-awards .youtube-player {
    position: relative;
    width: 480px;
    height: 250px;
    overflow: hidden;
    max-width: 100%;
    cursor: pointer;
    margin-bottom: 8px;
}

.bloc-awards .youtube-player-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.bloc-awards .youtube-player img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bloc-awards .youtube-player .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background:var(--accent);
    border-radius: 12px;
    transition: background-color 0.3s ease;
}

.bloc-awards .youtube-player .play:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-left: 20px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.bloc-awards .youtube-player:hover .play {
    background-color: #f00;
}

.bloc-awards .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bloc-awards-wrapper{
    display: flex;
    justify-content: center;
    height: 325px;
    padding-top: 45px;
}
.bloc-awards-bottom {
    display: none;
    background: url(../img/bottom-awards.svg) no-repeat center center;
    background-size: cover;
    height: 40px;
    margin: 0 auto;
    z-index: 0;
    margin-top: -60px;
    position: relative;
}
@media (max-width: 991px) {
    .bloc-awards-wrapper{
        height: unset;
    }
    .bloc-awards-inner {
        flex-direction: column;
        text-align: center;
        padding-bottom: 100px;
    }
    
    .bloc-awards-logo img {
        margin-left: 0;
        margin-top: -15px;
    }
    
    .bloc-awards-content {
        padding: 20px;
        max-width: 85%;
    }
    
    .bloc-awards .youtube-player {
        max-width: 100%;
        width: 100%;
    }
    .bloc-awards-bottom {
        display: block;
    }
}

/* FX Product Tabs Block */
.home-tab-cont {
    margin: 45px auto;
    position: relative;
    text-align: center;
}

.home-tab-cont:before {
    height: 1px;
    position: absolute;
    left: 0;
    width: 100%;
    content: '';
    top: 16px;
    background: var(--primary);
    z-index: 0;
}

.home-tab-cont #home-page-tabs {
    border: none;
    margin-bottom: 45px;
    position: relative;
    z-index: 1;
    display: inline-flex;
    background: #fff;
    padding: 0 30px;
}

.home-tab-cont #home-page-tabs li {
    float: none;
    margin: 0 10px;
}

.home-tab-cont #home-page-tabs li a {
    border: none;
    background: transparent;
    color: var(--primary);
    opacity: 0.5;

    font-size: 21px;
    text-transform: uppercase;
    padding: 10px;
    border-radius: 0;
    transition: all 0.3s ease;
}

.home-tab-cont #home-page-tabs li.active a,
.home-tab-cont #home-page-tabs li a:hover {
    background: transparent;
    opacity: 1;
    border: none;
    font-weight: 700;
}

.home-tab-cont .tab-content {
    margin-top: 30px;
}

.home-tab-cont .tab-pane {
    display: none;
}

.home-tab-cont .tab-pane.active {
    display: block;
}
.mm_menus_li.hover:hover .mm_columns_ul.mm_columns_ul_tab{
    background: #fff!important;
    overflow-x: hidden;
}

@media (min-width: 991px) {
    .mm_menus_li.hover:hover .mm_columns_ul.mm_columns_ul_tab{
        min-height: 400px;
    }
}
.mm_tab_li_content{
    width: 250px !important;
}
.mm_tabs_li .mm_columns_contents_ul{
    margin-left: 20px;
}
.mm_menus_li.mm_has_sub:hover .mm_columns_ul{
    max-height: calc(100vh - 150px);
    overflow-x: hidden;
    overflow-y: auto;
}
.ets-dir-ltr .mm_menus_li .mm_tabs_li .mm_columns_contents_ul{
    min-height: 400px!important;
}
@media (max-width: 768px) {
    .home-tab-cont #home-page-tabs {
        flex-direction: column;
        padding: 10px 20px;
    }
    
    .home-tab-cont #home-page-tabs li {
        margin: 5px 0;
    }
}

/* FX Content Blocks */
.home-content-blocks {
    margin: 45px auto;
    margin-bottom: 0;
}

.content-block-item {
    margin-bottom: 30px;
}

.content-block-inner {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    min-height: 250px;
}

.content-block-image {
    position: relative;
    padding: 0;
}

.content-block-image-wrapper {
    position: relative;
    background: url('../img/fond-icone-fx.png') no-repeat;
    background-size: contain;
    background-position: calc(5% + 10px) center;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content-block-image img {
    width: 90%;
}
.content-block-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-block-content h3 {
    color: var(--body-color);
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.content-block-content p {
    color: var(--body-color);
    margin-bottom: 12px;
    font-size: 14px;
}

.content-block-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.content-block-links .btn-custom {
    align-self: flex-start;
    border-color: var(--primary);
    color: var(--primary);
    background: #fff;
    margin-bottom: 1rem;
}
.content-block-links .btn-custom:before{
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background: var(--primary);
    transition: width 0.3s ease, background-color 0.3s ease;
}
.content-block-links .btn-custom:hover{
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.content-block-links .btn-custom:hover:before{
    width: 24px;
    background: #fff;
}

.content-block-full .content-block-inner {
    min-height: 300px;
}

.content-block-full .content-block-image-wrapper {
    min-height: 300px;
}

@media (max-width: 991px) {
    .content-block-image,
    .content-block-content {
        width: 100% !important;
    }
    
    .content-block-image-wrapper {
        min-height: 200px;
    }
    
    .content-block-full .content-block-image-wrapper {
        min-height: 200px;
    }
}

/* FX Quality Question Block */
.blocs-qualite-question {
    margin: 65px auto;
}

.quality-question-link {
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.quality-question-link:hover {
    opacity: 0.9;
}

.quality-question-col {
    margin-bottom: 65px;
}

.quality-question-inner {
    background: #fff;
    padding: 0;
    min-height: 300px;
    display: flex;
    position: relative;
    border-radius: 5px;
    justify-content: center;
}
.delivery-option.border-bottom:hover{
    border-bottom-color:var(--primary)!important;
    border-bottom: 2px solid!important;
}
.quality-question-col .quality-question-inner {
    border: 1px solid var(--quote-color);
}
.quality-question-image {
    flex-shrink: 0;
    width: 200px;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.quality-question-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

.quality-question-text {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.quality-question-text p {
    font-size: 24px;
    display: block;
}

.quality-question-col .quality-question-text,
.quality-question-col .quality-question-text p,
.quality-question-col .quality-question-text strong {
    color: var(--quote-color) !important;
}

.quality-question-col:before {
    content: '\201C';
    position: absolute;
    left: 25px;
    top: -50px;
    font-size: 150px;
    line-height: 1;
    font-family: Georgia, serif;
    font-weight: bold;
    color: var(--quote-color);
    z-index: 1;
}

@media (max-width: 991px) {
    .quality-question-inner {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .quote-blue .quality-question-inner {
        flex-direction: column-reverse;
    }
    
    .quality-question-image {
        width: 150px;
        align-self: center;
    }
    
    .quality-question-text p:before {
        left: 50%;
        transform: translateX(-50%);
        top: -60px;
    }
}
.home-content-blocks:before {
    content: '';
    background: var(--bg-color, #f5f7f9);
    display: block;
    width: 100%;
    height: 15%;
    position: absolute;
    left: 0;
    margin-top: 45px;
}
.quality-question-text p{
    margin-bottom: 0;
    line-height: 1.2;
}
.ql-size-small{
    font-size: 1rem;
}

/* FX Reassurance Block */
.fx-reassurance-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 20px 0;
}

.fx-reassurance-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.fx-reassurance-item {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.fx-reassurance-icon {
    margin-bottom: 0;
}

.fx-reassurance-icon i {
    font-size: 40px;
    color: #ffffff;
}

.fx-reassurance-title {
    font-size: 1rem;
    text-transform: uppercase;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 0;
    font-family: "Montserrat-bold", sans-serif;
}

.fx-reassurance-text {
    color: #ffffff;
    margin-top: 0;
    white-space: pre-line;
}

@media (max-width: 768px) {
    .fx-reassurance-inner {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .fx-reassurance-item {
        flex: 0 0 calc(50% - 15px);
        margin-bottom: 0px;
    }
}
/* FOOTER */

#footer .widget-title { text-transform:uppercase;}
.widget-light .widget-list-link, .block-contact, .footer-copyright{
   color:var(--body-color);
    opacity: unset;
}
.widget-light .widget-list-link:hover,body .widget-list-link:hover { color:var(--accent);}
.footer-logo img{
    max-width: 80%;
}
footer h4.widget-title{
    text-transform: uppercase;
    font-size: 18px;
    font-family: "Montserrat-bold", sans-serif;
    color: var(--primary);
    margin-bottom: 13px;
}
.footer-payments{
    max-width: 70%;
    margin-top: 20px;
}
.footer-email{
    font-family: "Montserrat-bold", sans-serif;
}
#block_contact_infos {
    padding: 0;
}
#block_contact_infos .logo-fx-footer {
    max-width: 200px;
    margin-bottom: 20px;
}
#block_contact_infos ul {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
}
#block_contact_infos ul li {
    color: var(--primary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
}
#block_contact_infos ul li a {
    color: var(--primary);
    font-family: "Montserrat-bold", sans-serif;
    text-decoration: none;
}
#block_contact_infos ul li a:hover {
    text-decoration: underline;
}

/* FX THREE ITEMS BLOCK */
.fx-three-items-wrapper {
    border-top: 1px solid var(--primary);
    border-bottom: 1px solid var(--primary);
    padding: 1rem 0;
    margin: 1rem 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.fx-three-items-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.fx-three-items-item {
    flex: 1;
}

.fx-three-items-link {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.fx-three-items-link:hover {
    opacity: 0.8;
}

.fx-three-items-image {
    flex-shrink: 0;
    width: auto;
    height: 120px;
}

.fx-three-items-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fx-three-items-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-line;
    color: var(--body-color);
}
.fx-three-items-text p{
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .fx-three-items-inner {
        gap: 20px;
    }
    
    .fx-three-items-wrapper {
        padding: 1rem 0;
        margin: 1rem 0;
        width: 100%;
        position: relative;
        left: 0;
        right: 0;
    }
}
.btn-scroll-top{
    background-color: var(--primary);
}
.btn-scroll-top:hover { background:var(--accent);}
.awards-automoto, .awards-autoplus{
    position: absolute;
    top: 10px;
    z-index: 10000;
    width: 113px;
}
@media (max-width: 991px) {
    .awards-automoto{
        left: 10px;
        top: 200px;
    }
    .awards-autoplus{
        right: 10px;
        top: 200px;
    }
}

@media (max-width: 767px) {
    .fx-three-items-inner {  flex-direction: column;}
}

.awards-automoto{
    left: 10px;
}
.awards-autoplus{
    right: 10px;
}

/* Slider miniatures produit */
.product-miniatures-slider {
    position: relative;
    margin-top: 1rem;
}

.product-miniatures-slider .tns-outer {
    position: relative;
}

.product-miniatures-slider .tns-ovh {
    overflow: hidden;
}

.product-miniatures-slider .cz-thumblist-item {
    display: block;
    margin-bottom: 0;
}

.product-miniatures-slider > div {
    padding: 0 5px;
}

.product-miniatures-slider .tns-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
}

#product .cz-thumblist .tns-controls button {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    cursor: pointer;
    position: absolute;
    pointer-events: all;
    top: 50%;
    background:var(--primary);
    border-radius:100%;
        z-index: 1;
}
#product .cz-thumblist .tns-controls button[data-controls="prev"] {
    left: -10px;
}
#product .cz-thumblist .tns-controls button[data-controls="next"] {
    right: -20px;
}
#product .cz-thumblist .tns-controls button i {
    font-family: "FontAwesome" !important;
    font-size: 20px !important;
    line-height: 22px !important;
    color: #fff !important;
}

#product .cz-thumblist .tns-controls button i.czi-arrow-left:before {
    content: '\f104' !important;
    padding-right: 2px;
}

#product .cz-thumblist .tns-controls button i.czi-arrow-right:before {
    content: '\f105' !important;
    padding-left: 2px;
}

#product .cz-thumblist .tns-controls button:hover i:before {
    color: #f37586 !important;
}

.product-miniatures-slider .tns-controls button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.product-miniatures-slider .tns-controls button:disabled:hover {
    transform: scale(1);
}
.cz-thumblist{
    position: relative;
    max-width: 394px;
}

.cz-thumblist:has(.product-miniatures-slider) {
    max-width: 100%;
}
@media (max-width: 768px) {
    .product-miniatures-slider .tns-controls button[data-controls="prev"] {
        left: 0;
    }
    
    .product-miniatures-slider .tns-controls button[data-controls="next"] {
        right: 0;
    }
}
#product #displayZoom{
    position: absolute;
    top: 0;
    z-index: 10;
    background-color: var(--primary);
    height: 5rem;
    width: 5rem;
    margin: 0.5rem;
}
#product #displayZoom .cz-thumblist-item-text{
    color: #ffffff;
}
.cz-preview{
    margin-left: 0;
    margin-top: 0;
}
.cz-thumblist-item{
    width: 100%;
    height: auto;
    margin: 0;
}
.product-details{
    color: var(--primary);
}
.product-reference{
    font-size: 11px;
    margin-bottom: 6px;
}
#product .price-display, #product .tax-label{
    color: #13bb32;
    font-family: "Montserrat-bold", sans-serif;
}
#product .tax-label{
    font-size: 17px;
    margin-right: 25px;
}
#product .price-display{
    font-size: 30px;
    line-height: 32px;
    font-weight: 600;
}
#product .your-price{
    font-family: "Montserrat-bold", sans-serif;
}
#availability_statut {
    padding: 5px 10px 5px 25px;
    border: 1px solid #d6d4d4;
    position: relative;
    margin-bottom: 0;
}
#availability_value, #last_quantities{
    font-family: "Montserrat-bold", sans-serif;
    display: inline-block;
}
#availability_statut, #pQuantityAvailable {
    display: inline-block;
    border-radius: 3px;
}
.reduction_percent_display{
    margin-right: 10px;
    padding: 0px 7px;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    line-height: 23px;
    color: #fff;
    background: #f3515c;

}
#availability_statut #availability_value.label-success{
    padding: 0;
    margin: 0;
    background: #fff;
    color: #027217;
    text-transform: uppercase;
    border: none;
}
#availability_statut #availability_value.label-danger{
    padding: 0;
    margin: 0;
    background: #fff;
    color: #f13340;
    text-transform: uppercase;
    border: none;
}
#availability_statut #availability_value.label-warning{
    padding: 0;
    margin: 0;
    background: #fff;
    color: #f37586;
    text-transform: uppercase;
    border: none;
}
#availability_statut #availability_value.label-danger .icon  { color: #f13340; }
#availability_statut #availability_value.label-warning .icon { color: #f37586; }
#availability_statut .icon {
    color: #13bb32;
    font-size: 22px;
    display: block;
    position: absolute;
    left: 7px;
    top: 10px;
}

.icon, [class^="icon-"] {
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
#availability_statut small{

    border: none;
    background: #fff;
    font-weight: bold;
    display: block;
    &.label-success{
        color: #027217;
    }
    &.label-danger{
        color: #f13340;
    }
    &.label-warning{
        color: #f37586;
    }
}




.icon-circle:before {
    content: "\0025CF";
}
#quantity_wanted_p .quantity-right-product {
    border: 1px solid var(--primary);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    float: right;
}
#quantity_wanted_p .btn {
    float: left;
    margin-left: 0;
    border: none;
    text-shadow: none;
    font-size: 24px;
    color: var(--primary);
}
#quantity_wanted_p input {
    width: 78px;
    height: 27px;
    padding: 0 6px;
    float: left;
    text-align: center;
    border: none !important;
    color: var(--primary);
    line-height: 27px;
    font-weight: bold;
    font-size: 15px;
}
#product .product-add-to-cart, #product #quantity_wanted_p{
    padding: 19px 19px 17px 0;
}
.product-quantity .ico-cart{
    font-size: 28px;
    margin-right: 12px;
}
/* Corner ribbon box: flush to the image top-right corner (no longer pokes out
   past the rounded corner), clips the ribbon ends, doesn't block image clicks. */
.product-flag-image{
    position: absolute;
    top: 0;
    right: 0;
    width: 115px;
    height: 115px;
    overflow: hidden;
    z-index: 5002;
    pointer-events: none;
    text-align: center;
}
/* Diagonal ribbon: wide enough (>= box diagonal ~163px) so its ends are clipped
   into a clean corner, single line, a little breathing room + soft shadow. */
.sale-label {
    color: #fff;
    background: #f13340;
    text-transform: uppercase;
    padding: 5px 0 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .3px;
    width: 170px;
    text-align: center;
    white-space: nowrap;
    display: block;
    position: absolute;
    right: -42px;
    top: 28px;
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.22);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.btn.add-to-cart{
    background: var(--primary);
    background-image: linear-gradient(135deg, transparent, rgba(255,255,255,0.15));
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 6px;
    text-transform: none;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    border: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 12px #d2d2d2;
    transition: all 0.25s ease;
}
.btn.add-to-cart:hover {
    background: var(--accent);
  
    
    transform: translateY(-1px);
    color: #fff;
}
.btn.add-to-cart:active {
    transform: translateY(0);
    
}
.btn.button-plus, .btn.button-minus {
    font-size: 18px;
    line-height: 14px;
    color: var(--primary);
    box-shadow: none;
    background: none;
    padding: 0;
    border: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.product-additional-info{
    margin-top: 2rem;
}
.share-btn  i {
    color: #9ba8ba !important;
    font-size: 18px;
}
.icon-facebook-f:before,
.icon-facebook:before {
    content: ""; }
.icon-pinterest:before {
    content: ""; }
.icon-twitter-square:before, .icon-twitter-sign:before {
    content: ""; }
.icon-pinterest-square:before, .icon-pinterest-sign:before {
    content: ""; }
.share-btn {
     display: inline-block;
     padding: 0.25rem 0.625rem;
     transition: color 0.25s
     ease-in-out, background-color 0.25s
     ease-in-out;
     border-radius: 0.1875rem;
     font-size: 0.875rem;
     text-decoration: none !important;
     vertical-align: middle;
 }
.share-btn svg {
    width: 17px;
    height: 17px;
    fill: #9ba8ba;
}
.btn-twitter:hover {
    color: white;
    background: none;
}
.btn-facebook:hover i {
    color: #435f9f !important;
}
.btn-twitter:hover svg {
    fill: #333;
}
.btn-pinterest:hover i {
    color: #ce1f21 !important;
}
.nav-tabs .nav-link.active::before {
    background-color: unset;
}
#more_info_tabs {
    position: relative;
}

#more_info_tabs .nav {
    justify-content: center;
    position: relative;
    z-index: 1;
}
#more_info_tabs .nav-link {
    background: #fff;
    color: var(--primary);
    font-size: 20px;
    font-family: "Montserrat-bold", sans-serif;
    padding: 16px 25px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
#more_info_tabs .nav-link.active,#more_info_tabs .nav-link:hover {
    color: var(--accent);

}
.separator-subcat .icon {
    font-size: 25px;
    font-weight: 100;
    border: 1px solid;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #fff;
}
.icon-angle-down:before {
    content: "";
}
.separator-subcat .sep-content {
    width: 250px;
    margin: 0 auto 25px;
    background: #fff;
    z-index: 1;
    position: relative;
}
.separator-subcat {
    text-align: center;
    position: relative;
    margin-top: 0px;
    margin-bottom: 20px;
    clear: both;
}
.intro-sub-products {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 18px;
    position: relative;
    margin-top: 10px;
}
.intro-sub-products span {
    display: block;
    text-align: center;
}
.separator-subcat:before {
    content: '';
    width: 100%;
    height: 1px;
    display: inline-block;
    position: absolute;
    background: var(--primary);
    left: 0%;
    top: 30px;
}
.product-miniature .card-img-top {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-miniature .card-img-top img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-miniature .product-title {
    min-height: 6em;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-miniature h2 a, .product-miniature h3 a, .product-miniature .product-price{
    color: var(--primary);
    font-family: "Montserrat-bold", sans-serif;
}
.product-miniature h2 a, .product-miniature h3 a{
    font-size: 13px;
}
.product-miniature .product-price{
    font-size: 15px;
}
.product-miniature .availability span{
    font-family: "Montserrat-bold", sans-serif;
    text-transform: uppercase;
    font-size: 11px;
}
.product-miniature .availability span.label-danger i:before {
    color: #f13340;
}
.product-miniature .availability span.label-success {
    color: #4ea244;
}
#category-description-wrapper {
    position: relative;
}

#category-description {
    overflow: hidden !important;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

#category-description.category-desc-collapsed {
    height: 60px;
    max-height: 60px;
}

#category-description.category-desc-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

#category-description.category-desc-expanded::after {
    opacity: 0;
}

#toggle-category-desc {
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: var(--primary);
    transition: color 0.2s ease;
    border: none;
    background: none;
    cursor: pointer;
}

#toggle-category-desc:hover {
    color: #f55266;
    text-decoration: none;
}

#toggle-category-desc i {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}
#toggle-category-desc .show-more, #toggle-category-desc .show-less{
    font-family: "Montserrat-bold", sans-serif;
    text-decoration: underline;
}
#toggle-category-desc.expanded .show-more i {
    transform: rotate(180deg);
}
#product {
    
    h2{
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }
    h3{
        font-size: 1.25rem;
        line-height: 1.4;
        margin-bottom: 0.875rem;
        
        font-family: "Montserrat-bold", sans-serif;
    }
    h4{
        font-size: 1.1rem;
        line-height: 1.4;
        margin-bottom: 0.75rem;
        color: var(--primary);
        font-family: "Montserrat-bold", sans-serif;
    }
    #documentation {
        .text-dark{
            color: var(--primary) !important;
        }
    }
    #product-details{
        .text-muted, h3, .text-dark{
            color: var(--primary) !important;
            font-family: "Montserrat-bold", sans-serif;
        }
        a{
            color: var(--primary);
        }
    }
}

/* Product tables - General styling */
#product table,
#product .product-description-details table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    overflow: hidden;
}

#product table thead tr,
#product .product-description-details table thead tr {
    background: var(--primary);
    color: #fff;
}

#product table thead th,
#product .product-description-details table thead th {
    padding: 1rem 0.875rem;
    text-align: left;
    font-family: "Montserrat-bold", sans-serif;
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

#product table thead th:last-child,
#product .product-description-details table thead th:last-child {
    border-right: none;
}

#product table tbody tr,
#product .product-description-details table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease;
}

#product table tbody tr:hover,
#product .product-description-details table tbody tr:hover {
    background-color: #f9fafb;
}

#product table tbody tr:last-child,
#product .product-description-details table tbody tr:last-child {
    border-bottom: none;
}

#product table tbody td,
#product .product-description-details table tbody td {
    padding: 0.875rem;
    color: var(--primary);
    font-size: 0.9rem;
    vertical-align: middle;
    border-right: 1px solid #e5e7eb;
}

#product table tbody td:last-child,
#product .product-description-details table tbody td:last-child {
    border-right: none;
}

/* Style for second row (units row like W, V, K, etc) */
#product table tbody tr:first-child td,
#product .product-description-details table tbody tr:first-child td {
    background-color: #f3f4f6;
    font-weight: 600;
    font-family: "Montserrat-bold", sans-serif;
    color: #6b7280;
    font-size: 0.8125rem;
}

.sub-cat .sub-cat-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sub-cat .sub-cat-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    display: block;
}
.sub-cat .card {
    height: 100%;
}
.sub-cat p.h6 {
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sub-cat{
    .sub-cat-img{
        padding: 9px;
        border: 1px solid #d9e2e9;
        border-radius: 3px;

    }
    p.h6{
        font-weight: 700;
        color: var(--primary);
    }
    p.h6,.sub-cat-img {
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    a:hover{
        .sub-cat-img{
            border-color: #f37586;
        }
        p.h6{
            color: #f37586;
        }
    }
}
#product #pictos-product-features{
    margin: 1.5rem 0;
    .pictos-hover{
        justify-content: start;
    }
    .one-picto{
        margin-right: 1.5rem;
    }
}
#pictos-product-features{
    margin: 1rem 0;
    margin-top: 0;
    .pictos-hover{
            flex-wrap: wrap;
    justify-content: center;
    }

}
.pictos-hover{
    .ico:before {
        font-size: 25px;
        color: var(--accent);
    }
    small{
        /*font-family: "Montserrat-bold", sans-serif;*/
        color:var(--accent);
        font-size:11px;
    }
    .one-picto{
        line-height: 1;
        width: 25%;
        margin-bottom:7px;
        text-align: center;
    }
}

#product #pictos-product-features .pictos-hover small { font-size:14px;}
#product #pictos-product-features .pictos-hover .one-picto { width:auto;}

@media (max-width: 768px) {
    #pictos-product-features .pictos-hover,
    #product #pictos-product-features .pictos-hover {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .pictos-hover .one-picto,
    #product #pictos-product-features .one-picto,
    #pictos-product-features .one-picto {
        flex: 0 0 calc(33.333% - 1rem);
        max-width: calc(33.333% - 1rem);
        margin-right: 0.5rem;
        margin-bottom: 1rem;
    }

    .pictos-hover .one-picto:nth-child(3n),
    #product #pictos-product-features .one-picto:nth-child(3n),
    #pictos-product-features .one-picto:nth-child(3n) {
        margin-right: 0;
    }

    /* Product prices - Availability status on new line in mobile */
    .product-prices .d-flex.align-items-center {
        flex-direction: column;
        align-items: flex-start !important;
    }

    #availability_statut {
        margin-top: 0;
        width: 100%;
        font-size: 13px;
    }
    #product .price-display { font-size:20px;}
    #availability_statut small { display:inline-block;}
    #availability_statut .icon { top:2px;}
    #product .tax-label {    font-size: 10px;   margin-left: 3px !important;}

    /* Product add to cart - Quantity and button on separate lines in mobile */
    .product-quantity .d-flex.align-items-center {
        flex-direction: column;
        align-items: stretch !important;
    }

    #quantity_wanted_p {
        width: 100%;
        margin-bottom: 1rem;
    }

    #quantity_wanted_p .quantity-right-product {
        width: 100%;
        justify-content: center;
    }

    .product-quantity .add {
        width: 100% !important;
    }

    .btn.add-to-cart {
        width: 100%;
    }

    /* Product page - Adjust titles for mobile */
    #product h2 {
        font-size: 1.1rem;
        line-height: 1.4;
        margin-bottom: 0.75rem;
    }

    #product h3 {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 0.625rem;
    }

    #product h4 {
        font-size: 0.95rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
    }

    #product .section h2,
    #product .featureArea h2 {
        font-size: 1.2rem;
        padding: 0.5rem 0;
    }

    #product .section h3,
    #product .featureArea h3 {
        font-size: 1rem;
        padding: 0.4rem 0;
    }

    /* Product description tables - Create scrollable wrapper */
    #product .product-description-details table,
    #product .tab-pane table,
    #product table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 1rem 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    #product table thead,
    #product .product-description-details table thead,
    #product .tab-pane table thead {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    #product table tbody,
    #product .product-description-details table tbody,
    #product .tab-pane table tbody {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    #product table thead tr,
    #product table tbody tr,
    #product .product-description-details table thead tr,
    #product .product-description-details table tbody tr,
    #product .tab-pane table thead tr,
    #product .tab-pane table tbody tr {
        display: table-row;
    }

    #product table th,
    #product table td,
    #product .product-description-details table th,
    #product .product-description-details table td,
    #product .tab-pane table th,
    #product .tab-pane table td {
        display: table-cell;
        padding: 0.75rem 0.625rem;
        white-space: nowrap;
        min-width: 80px;
    }

    #product table thead th,
    #product .product-description-details table thead th,
    #product .tab-pane table thead th {
        font-size: 0.75rem;
        padding: 0.875rem 0.625rem;
        min-width: 80px;
    }

    #product table tbody td,
    #product .product-description-details table tbody td,
    #product .tab-pane table tbody td {
        font-size: 0.8125rem;
        min-width: 80px;
    }

    /* First row (units) styling */
    #product table tbody tr:first-child td,
    #product .product-description-details table tbody tr:first-child td,
    #product .tab-pane table tbody tr:first-child td {
        font-size: 0.75rem;
        padding: 0.625rem 0.5rem;
    }

    /* Hide displayZoom on mobile */
    #product #displayZoom {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .awards-automoto, .awards-autoplus{
        display: none;
    }
    .blocks-footer{
        text-align: center;
    }
    .blocks-footer .widget-links{
        margin-top: 45px;
        margin-bottom: 0 !important;
    }
    #footer .blocks-footer .widget-list {  margin-top: 15px;}

    .fx-three-items-wrapper{
        width: unset;
        left: unset;
        right: unset;
        border-top: 0;
    }
    .fx-three-items-inner{
        align-items: center;
    }

    /* Masquer header-nav en mobile */
    .header-nav.topbar.topbar-dark.header-bg {
        display: none !important;
    }

    /* Logo mobile */
    .navbar-brand img {
        width: 180px !important;
        height: auto !important;
    }

    /* Alignement sélecteur de langue mobile */
    .ets_mm_megamenu_content .container-xxl {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .ets_mm_megamenu_content_content {
        flex: 0 0 auto;
    }

    #_mobile_choose_lang {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 0;
        padding: 0;
        position: absolute;
        right: 15px;
        top: 5px;
    }

    #_mobile_choose_lang .topbar-text {
        margin: 0;
        align-items: center;
        align-content: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        display: flex;
        background: #f3f5f9 !important;
    }
     #_mobile_choose_lang .topbar-text:hover { background:var(--primary)!important;}

    #_mobile_choose_lang .topbar-link {
        color: var(--primary);
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0;
    }

    .ybc-menu-toggle {
        margin: 0;
        color: var(--body-color);
        background-color: var(--fx-gray-100);
        border: none;
        padding: 8px 12px;
        width: 100%;
    }
}
@media (min-width: 992px) {
    .product-details {
        max-width: 100%;
    }
    #more_info_tabs::before {
        content: '';
        width: 100%;
        height: 1px;
        background: var(--primary);
        position: absolute;
        top: 30px;
        display: block;
    }
}

.ets_mm_megamenu .mm_menus_ul .close_menu { background:var(--primary);}
.ets_mm_megamenu .mm_menus_ul .close_menu .pull-right {    font-size: 14px;}

li.mm_menus_li, 
ul.mm_columns_ul li,
.ets_mm_megamenu > *{
    list-style: none;
}



.container-xxl {
    max-width: 1490px;
    margin: 0 auto;
}

/* Bouton recherche mobile */
#trigger_search_mobile {
    border: none;
    background: transparent;
    padding: 0;
}

#trigger_search_mobile .navbar-tool-icon-box {
    border: none;
}
#trigger_search_mobile .navbar-tool-icon-box:hover,.navbar-light .header-account .navbar-tool-icon-box.bg-secondary:hover { background:var(--accent) !important; color:#fff;}


.scroll_text p {
    margin-bottom: 0;
}


.bg-primary{
    background-color: var(--primary) !important;
}


.text-white {
    color: white !important;
}

.widget-title.h3 {
    font-weight: 700;
    color: var(--primary)
}


.mm_menus_ul li.mm_menus_li{
    width: 130px;
    /*width: 165px;*/
    border:none;
    text-align: center;
    line-height: 13px;
    > a, > span {

        color: var(--primary);
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
    }
}
.layout_layout1 .mm_menus_li:nth-child(2) { border:none;}

/* Brands Menu Layout with Sidebar */
.brands-menu-layout {
    width: 100%;
}

.brands-layout-wrapper {
    display: flex;
    gap: 0;
    background: #fff;
}

.brands-sidebar {
    width: 200px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid #e0e0e0;
}

.brands-category-item {
    padding: 15px 20px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.brands-category-item:hover {
    background-color: #e9ecef;
}

.brands-category-item.active {
    background-color: #fff;
    border-right: 3px solid var(--primary, #007bff);
}

.brands-category-item span {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.brands-category-item .chevron-right {
    font-size: 18px;
    color: #999;
    font-style: normal;
}

.brands-grid-container {
    flex: 1;
    padding: 15px;
    overflow: hidden;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    max-width: 100%;
}

.brand-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px 10px;
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    
}

.brand-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.brand-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

.brand-item .brand-logo {
    max-width: 60px;
    max-height: 45px;
    object-fit: contain;
    margin-bottom: 4px;
}

.brand-item .brand-name {
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 2px;
    line-height: 1.2;
    font-weight: 700;
}

.layout_layout1 .ets_mm_block_content ul.ets_mm_categories li a::before{
    content:"";
}

/* Conteneur général : on neutralise la grille */
.ets_mm_categories {
    display: flex !important;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
/* Chaque colonne (item) */
.ets_mm_categories.addimg .mm_cat_item {
    flex: 0 0 20%;          /* 5 colonnes par ligne */
    max-width: 20%;
    box-sizing: border-box;
    border-bottom: 1px solid #e7e7e7;  /* la fameuse ligne */
    list-style: none;
}

/* Lien = ligne icône + texte, centré verticalement */
.ets_mm_categories.addimg .mm_cat_link {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 15px 10px;
    text-align: left;
    width: 100%;
}

/* Icône à gauche */
.ets_mm_categories.addimg .mm_cat_img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image */
.ets_mm_categories.addimg .mm_cat_img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Titre à droite */
.ets_mm_categories.addimg .mm_cat_title {
    font-size: 13px;
    line-height: 1.3;
    color: #000;
}


/* Hover (optionnel, comme la 1ère capture) */
.ets_mm_categories .mm_cat_link:hover .mm_cat_title {
    color:var(--accent);
}

/* ============================================
   Old Menu (iqitmegamenu) Design Adaptation
   Ported to ets_megamenu (layout_layout1)
   ============================================ */

/* Submenu dropdown: box-shadow + border (old: .cbp-hrsub-inner) */
.layout_layout1 .mm_columns_ul {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--fx-gray-300);
    background-color: var(--fx-white);
}

/* Submenu column/block titles: bold + navy underline (old: .cbp-column-title) */
.layout_layout1 .ets_mm_block > .h4,
.layout_layout1 .ets_mm_block > .h4 a {
    font-size: 13px;
    line-height: 17px;
    color: var(--body-color);
    font-weight: bold;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--primary);
    margin-bottom: 8px;
}
.layout_layout1 .ets_mm_block > .h4 a:hover {
    color: var(--fx-gray-500);
}

/* Submenu text + links: gray palette (old: .cbp-hrsub-inner) */
.layout_layout1 .ets_mm_block_content {
    font-size: 12px;
    line-height: 16px;
    color: var(--fx-gray-500);
}
.layout_layout1 .ets_mm_block_content a {
    color: var(--fx-gray-500);
}
.layout_layout1 .ets_mm_block_content a:hover {
    color: var(--fx-gray-800);
}

/* Tab names (left sidebar in tab submenus): old .cbp-tabs-names style */
.layout_layout1 .mm_tab_li_content {
    background-color: var(--fx-gray-50);
    color: var(--fx-gray-500);
    border-bottom: 1px solid var(--fx-gray-300);
}
.layout_layout1 .mm_tabs_li:hover .mm_tab_li_content,
.layout_layout1 .mm_tabs_li.active .mm_tab_li_content {
    background-color: var(--fx-white);
    color: var(--fx-gray-800);
}

/* Tab content pane: left border separator (old: .cbp-tab-pane) */
.layout_layout1 .mm_tabs_li .mm_columns_contents_ul {
    border-left: 1px solid var(--fx-gray-300);
}

/* Hover state on desktop: accent color (old: .cbp-hropen > a) */
@media (min-width: 768px) {
    .layout_layout1:not(.click_open_submenu) .mm_menus_li.mm_has_sub:hover > a .mm_menu_content_title {
        color: var(--accent);
    }
}

/* Bubble/badge text: red like old .cbp-legend */
.mm_menus_li .mm_bubble_text {
    font-size: 10px;
    padding: 2px 6px;
    text-transform: none;
    font-weight: normal;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Mobile menu adaptation (old iqitmegamenu full-width style) */
@media (max-width: 767px) {

    /* Force full-width panel instead of 280px floating sidebar */
    .transition_floating .mm_menus_ul {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Close button: primary bg like old menu */
    .ets_mm_megamenu .mm_menus_ul .close_menu {
        background: var(--primary) !important;
        color: var(--fx-white);
        font-size: 16px;
        text-transform: uppercase;
        font-weight: bold;
    }
    .close_menu .icon-bar {
        background-color: var(--fx-white) !important;
    }

    /* Menu: full width, no padding from fix17.css */
    .ets_mm_megamenu.hook-default {
        padding: 0 !important;
        margin-top: 0 !important;
    }
    .ets_mm_megamenu .container {
        padding: 0 !important;
        background-color: var(--fx-white) !important;
    }
    .ets_mm_megamenu .mm_menus_ul {
        background-color: var(--fx-white) !important;
    }

    /* ---- Top-level menu items ---- */
    .ets_mm_megamenu .mm_menus_li {
        border-top: 1px solid var(--fx-gray-200) !important;
        background-color: var(--fx-white);
        position: relative;
    }
    .ets_mm_megamenu .mm_menu_content_title {
        min-height: 0 !important;
        padding: 0 !important;
    }
    .ets_mm_megamenu .mm_menus_ul li.mm_menus_li > a {
        color: var(--body-color);
        text-align: left;
        font-size: 14px;
        padding: 12px 15px;
        padding-right: 44px;
        font-weight: 500;
        text-transform: none;
        line-height: 1.4;
    }
    .ets_mm_megamenu .mm_menus_ul li.mm_menus_li > a:hover {
        color: var(--body-color);
        background-color: var(--fx-gray-50);
    }

    /* ---- Submenu columns panel (non-tab menus) ---- */
    .ets_mm_megamenu .mm_columns_ul {
        background-color: var(--fx-white) !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
    }

    /* ---- TAB-based submenus (.mm_tabs_li) ---- */

    /* Tab items (Kit Xénon 25W, 35W, etc.): full-width clean list */
    .ets_mm_megamenu .mm_tabs_li {
        width: 100% !important;
        overflow: visible;
    }
    .ets_mm_megamenu .mm_tabs_li .mm_tab_li_content {
        width: 100% !important;
        padding: 12px 15px !important;
        padding-right: 44px;
        border-bottom: 1px solid var(--fx-gray-100);
        background: var(--fx-white) !important;
        color: var(--body-color);
        font-size: 14px;
        box-sizing: border-box;
        position: relative;
    }
    .ets_mm_megamenu .mm_tabs_li .mm_tab_li_content .mm_tab_toggle_title,
    .ets_mm_megamenu .mm_tabs_li .mm_tab_li_content .mm_tab_toggle_title a {
        color: var(--body-color);
        font-size: 14px;
        font-weight: 500;
    }
    .ets_mm_megamenu .mm_tabs_li.open .mm_tab_li_content,
    .ets_mm_megamenu .mm_tabs_li.active .mm_tab_li_content {
        background: var(--primary) !important;
        color: var(--fx-white) !important;
    }
    .ets_mm_megamenu .mm_tabs_li.open .mm_tab_li_content .mm_tab_toggle_title,
    .ets_mm_megamenu .mm_tabs_li.open .mm_tab_li_content .mm_tab_toggle_title a,
    .ets_mm_megamenu .mm_tabs_li.active .mm_tab_li_content .mm_tab_toggle_title,
    .ets_mm_megamenu .mm_tabs_li.active .mm_tab_li_content .mm_tab_toggle_title a {
        color: var(--fx-white) !important;
    }

    /* Tab content panel: full width, no indent */
    .ets_mm_megamenu .mm_tabs_li .mm_columns_contents_ul {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: var(--fx-white) !important;
        min-height: 0 !important;
    }

    /* Chevron on tab items */
    .mm_tabs_li .mm_tab_has_child::after {
        border-color: var(--fx-gray-400) !important;
    }
    .mm_tabs_li.open .mm_tab_has_child::after,
    .mm_tabs_li.active .mm_tab_has_child::after {
        border-color: var(--fx-white) !important;
    }

    /* ---- Content inside tabs/columns: links + categories ---- */
    .ets_mm_megamenu .ets_mm_block_content a {
        color: var(--body-color);
        font-size: 14px;
        padding: 10px 15px;
        display: block;
        border-bottom: 1px solid var(--fx-gray-100);
    }
    .ets_mm_megamenu .ets_mm_block_content a:hover {
        background-color: var(--fx-gray-50);
    }

    /* Category items inside blocks */
    .ets_mm_block_content ul.ets_mm_categories li .ets_mm_url {
        padding: 12px 15px;
        border-bottom: 1px solid var(--fx-gray-100);
    }
    .ets_mm_block_content ul.ets_mm_categories li.has-sub ul.ets_mm_categories {
        padding: 0 !important;
        width: 100% !important;
        margin: 0;
    }

    /* Category items with images: compact horizontal layout (icon left + text right) */
    body .ets_mm_categories.addimg .mm_cat_link {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 15px !important;
    }
    body .ets_mm_categories.addimg .mm_cat_item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        border-bottom: 1px solid var(--fx-gray-100);
    }
    body .ets_mm_categories.addimg .mm_cat_img {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0;
    }
    body .ets_mm_categories.addimg .mm_cat_img img {
        max-width: 36px !important;
        max-height: 36px !important;
        width: auto !important;
        object-fit: contain;
    }
    body .ets_mm_categories.addimg .mm_cat_title {
        font-size: 13px;
        line-height: 1.3;
    }

    /* Arrow/chevron indicators: aligned right, vertically centered */
    .ets_mm_megamenu .arrow {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        line-height: 44px;
    }
    .mm_menus_ul .arrow::before {
        border-color: var(--fx-gray-400) !important;
    }
    .mm_menus_ul .arrow::after {
        border-color: var(--fx-gray-400) !important;
    }

    /* Block titles in mobile */
    .ets_mm_block > .h4 {
        padding: 12px 15px;
        margin: 0;
        border-bottom: 1px solid var(--fx-gray-200);
        font-size: 14px;
        font-weight: 600;
    }

    /* Columns inside tabs: full width */
    .ets_mm_megamenu .mm_columns_contents_ul .mm_columns_li {
        width: 100% !important;
        padding: 0;
    }
    .ets_mm_megamenu .mm_blocks_ul {
        padding: 0;
        margin: 0;
    }
    .ets_mm_megamenu .mm_blocks_li {
        padding: 0;
    }

    /* Z-index: ensure menu panel above ALL page content (sliders, etc.) */
    .transition_floating .ybc-menu-toggle.opened:before {
        z-index: 10001 !important;
    }
    .transition_floating .mm_menus_ul {
        z-index: 10002 !important;
    }
}

/* Tablet: same full-width override */
@media (max-width: 1199px) and (min-width: 768px) {
    .changestatus.transition_floating .mm_menus_ul {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ============================================ */

.cz-cart-item {
  margin-bottom: 20px;
}

.cz-stock-badge {
  display: inline-block;
  background: #e6f7e6;
  color: #1f7a1f;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.cz-reassurance-block {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 30px 0 10px;
  padding-top: 20px;
  border-top: 1px solid #e6e6e6;
}

.cz-reassurance-item {
  flex: 1;
  text-align: center;
  font-size: 13px;
}

.cz-reassurance-item strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.cz-checkout-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d6dbe1;
  margin-bottom: 25px;
  padding-bottom: 10px;
}

.cz-step {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b5bcc6;
  font-size: 14px;
  white-space: nowrap;
}

.cz-step-number {
  font-weight: 600;
}

.cz-step-active {
  color: #0a3d66;
}

.cz-step-active .cz-step-number,
.cz-step-active .cz-step-label {
  font-weight: 600;
}
.cz-free-shipping-wide {
  background: #f1f3f5;
  padding: 14px 18px;
  margin: 20px 0;
  font-size: 14px;
}

.cz-free-shipping-wide strong {
  display: block;
  font-weight: 600;
  text-transform: uppercase;
  color: #2b2b2b;
}

.cz-free-shipping-remaining {
  margin-top: 4px;
  color: #4a4a4a;
}
.cz-free-shipping-wide {
  margin-bottom: 25px;
}
.cz-sidebar-static .btn-primary {
  background-color: #1fbf1f;
  border-color: #1fbf1f;
}

.cart-assurances .icon {
  display: inline-block;
  font-size: 40px;
  margin-right: 10px;
  margin-top: -2px;
  color: rgb(19, 187, 50);
}

.cart-assurances .icon::before {
  box-sizing: border-box;
}
.ico-in-stock::before {
  content: "✓";
}
.ico-delivery-fast::before {
  content: "⏱";
}
.ico-payment-secure::before {
  content: "⛨";
}
.ico-free-shipping::before {
  content: "✈";
}

.cart-assurances > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
}

.cart-assurances .content {
  text-align: left;
}

.cart-assurances strong {
  font-weight: 600;
  text-transform: uppercase;
}

.cz-cart-group {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
}

.cz-cart-group > * + * {
  margin-top: 25px;
}

.cz-cart-actions {
  display: flex;
  justify-content: flex-start;
}
/* ===== CHECKOUT HEADER ===== */

.cz-checkout-header {
  background: #0f3c66; /* même bleu que panier */
  padding: 32px 24px 16px;
  color: #fff;
}

.cz-checkout-title {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* Barre étapes */
.cz-checkout-steps-bar {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.3);
}

.cz-checkout-steps-bar .cz-step {
  color: rgba(255,255,255,.6);
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
}

.cz-checkout-steps-bar .cz-step span {
  font-weight: 700;
  margin-right: 4px;
}

.cz-checkout-steps-bar .cz-step.is-active {
  color: #fff;
}

.cz-checkout-steps-bar .cz-step.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #fff;
}

/* Alignement parfait col-lg-8 / col-lg-4 sur la page panier */
#cart .col-lg-4.pt-4.pt-lg-0 {
  padding-top: 0 !important;
}

#cart .col-lg-8 {
  padding-top: 0;
}
.cz-cart-fullwidth {
  background: #fff;
  padding: 25px;
  border-radius: 6px;
}

.cz-cart-fullwidth > * + * {
  margin-top: 25px;
}

.cz-cart-totals-full {
  background: #fff;
  border-radius: 6px;
  padding: 20px;
  max-width: 420px;
  margin-left: auto;
}

.cz-cart-line-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.cz-cart-image img {
  max-width: 70px;
}

.cz-cart-col {
  display: flex;
  align-items: center;
}

/* HEADER TITRE DU PANIER */
.cz-checkout-title {
  background: #ffffff;
  padding: 20px 0 10px;
  border-bottom: 1px solid #d8e0ea;
}

.cz-checkout-title h1 {
  color: #0f3c66;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

.cz-checkout-steps {
  padding: 12px 0;
}

.cz-step {
  color: #b8cde3;
}

.cz-step-active {
  color: #ffffff;
  font-weight: 600;
}

.cz-step-number {
  color: #ffffff;
}

/* Ligne produit – ajustements fins */
.cz-cart-line-inner {
  gap: 20px;
}

.cz-cart-price {
  min-width: 90px;
  text-align: right;
  color: #0f3c66;
}

.cz-cart-qty {
  min-width: 120px;
  justify-content: center;
}

.cz-cart-remove {
  min-width: 40px;
  justify-content: center;
}

.cz-cart-total {
  min-width: 90px;
  text-align: right;
  font-weight: 700;
  font-size: 15px;
}

.cz-cart-stock-inline {
  margin-top: 4px;
  font-size: 13px;
  color: #2e9f5b;
  line-height: 1.2;
}

/* =========================
   TABLET ≤ 991px
========================= */
@media (max-width: 991px) {

  .cz-cart-line-inner {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .cz-cart-image {
    width: 80px;
    flex: 0 0 80px;
  }

  .cz-cart-info {
    flex: 1;
    margin-bottom: 8px;
  }

  .cz-cart-price,
  .cz-cart-qty,
  .cz-cart-total,
  .cz-cart-remove {
    margin-top: 8px;
  }

}

/* =========================
   MOBILE ≤ 767px
========================= */
@media (max-width: 767px) {

  .cz-cart-line-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Ligne haute : image + infos */
  .cz-cart-image {
    align-self: flex-start;
  }

  .cz-cart-info {
    width: 100%;
  }

  /* Prix unitaire */
  .cz-cart-price {
    font-size: 15px;
    font-weight: 600;
  }

  /* Ligne actions */
  .cz-cart-qty,
  .cz-cart-total,
  .cz-cart-remove {
    width: 100%;
    justify-content: space-between;
  }

  .cz-cart-qty {
    order: 1;
  }

  .cz-cart-total {
    order: 2;
    font-size: 16px;
    font-weight: 700;
  }

  .cz-cart-remove {
    order: 3;
    justify-content: flex-end;
  }

}

.cz-cart-info {
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.cz-cart-stock {
  min-width: 170px;
}

.cz-cart-price,
.cz-cart-total {
  min-width: 80px;
  text-align: right;
  font-weight: 600;
}

.cz-cart-qty {
  min-width: 110px;
}

.qty-box {
  display: flex;
  align-items: center;
}

.qty-box input {
  width: 45px;
  text-align: center;
}

.btn-touchspin {
  border: 1px solid #ccc;
  background: #fff;
  width: 30px;
  height: 30px;
}

.cz-cart-remove {
  min-width: 40px;
  text-align: center;
}

.cz-stock-badge {
  display: inline-block;
  background: #e6f6ea;
  color: #1f8b4c;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
/* Stock sous le titre */
.cz-cart-stock-inline {
  margin-top: 6px;
  font-size: 13px;
  color: #1f8b4c;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cz-stock-dot {
  color: #1f8b4c;
  font-size: 14px;
}

/* Icône supprimer propre */
.cz-cart-remove-link {
  color: #e5533d;
  font-size: 18px;
}

.cz-cart-remove-link:hover {
  color: #b93a28;
}

/* Total bien aligné à droite */
.cz-cart-total {
  min-width: 90px;
  text-align: right;
  font-weight: 600;
}

@media (max-width: 991px) {
  .cz-cart-totals-full {
    max-width: 100%;
    margin-left: 0;
  }
}



/* Responsive adjustments */
@media (max-width: 1200px) {
    ul.ets_mm_categories > li.mm_cat_item {
        width: 25%;   /* 4 par ligne */
    }
}

@media (max-width: 992px) {
    ul.ets_mm_categories > li.mm_cat_item {
        width: 33.333%; /* tablette */
    }
}

@media (max-width: 576px) {
    ul.ets_mm_categories > li.mm_cat_item {
        width: 100%; /* mobile */
        max-width: 100% !important;
    }
    .ets_mm_categories.addimg .mm_cat_img{
        display: flex;
        float: none;
    }
    .ets_mm_categories{
        display: flex !important;
        flex-wrap: wrap;
    }
    .mm_menus_li > a{
        text-align: left;
        line-height: 1.5em;
        padding-right: 30px !important;
    }
}

@media (max-width: 1200px) {
    .brands-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
}

@media (max-width: 768px) {
    .brands-layout-wrapper {
        flex-direction: column;
    }
    
    .brands-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
       
        overflow-x: auto;
    }
    
    .brands-category-item {
        border-bottom: none;
        border-right: 1px solid #e0e0e0;
        white-space: nowrap;
    }
    
    .brands-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 10px;
    }
    
    .brands-grid-container {
        padding: 15px;
    }
}

/* FX */ 
/**
 * FX One Page Checkout - Étapes Horizontales Premium
 */



* { box-sizing: border-box; }

.fx-opc-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==================== BOUTON RETOUR ==================== */
.fx-opc-back-wrapper {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.fx-opc-back-wrapper .navbar-brand { padding:0;}

.fx-opc-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    color: #4b566b;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: "Montserrat", sans-serif;
}

.fx-opc-back-btn:hover {
    background: #f8f9fa;
    border-color: var(--primary);
    color: var(--primary);
    transform: translateX(-4px);
}

.fx-opc-back-btn svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.fx-opc-back-btn:hover svg {
    transform: translateX(-2px);
}

@media (max-width: 768px) {
    .fx-opc-back-btn {
        font-size: 13px;
        padding: 8px 16px;
        gap: 6px;
    }

    .fx-opc-back-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ==================== STEPS HORIZONTAUX ==================== */
body .fx-opc-steps-wrapper {
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-light) 100%);
    border-radius: var(--fx-radius-lg);
    padding: 30px 40px;
    margin-bottom: 40px;
    box-shadow: var(--fx-shadow-lg);
}

.fx-opc-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.fx-opc-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.fx-opc-step:hover {
    background: rgba(255,255,255,0.2);
}

.fx-opc-step .step-number {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    transition: all 0.3s ease;
}

.fx-opc-step .step-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.fx-opc-step.active .step-number,
.fx-opc-step.completed .step-number {
    background: var(--fx-white);
    color: var(--primary);
}

.fx-opc-step.active .step-title,
.fx-opc-step.completed .step-title {
    color: var(--fx-white);
}

.fx-opc-step.completed .step-number::after {
    /*content: '✓';*/
    position: absolute;
    font-size: 12px;
}

.fx-opc-step-connector {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.3);
    margin: 0 5px;
}

.fx-opc-step.completed + .fx-opc-step-connector {
    background: var(--primary);
}

/* ==================== SECTIONS / STEPS CONTENT ==================== */
.fx-opc-section {
    background: var(--fx-white);
    border-radius: var(--fx-radius-lg);
    box-shadow: var(--fx-shadow-lg);
    padding: 35px;
    display: none;
    animation: fadeIn 0.4s ease;
    
}

#checkout-personal-information-step a { text-decoration: underline;}

.fx-opc-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fx-opc-section-title {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 22px;
    font-weight: 700;
    color: var(--fx-gray-800);
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--fx-gray-100);
}

.section-icon {
    font-size: 28px;
}

/* ==================== CART ITEMS ==================== */
.fx-opc-cart-item {
    display: grid;
    grid-template-columns: 90px 1fr 100px 130px 100px 40px;
    gap: 20px;
    align-items: center;
    padding: 20px;
    background: var(--fx-gray-50);
    border-radius: var(--fx-radius);
    margin-bottom: 15px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.fx-opc-cart-item:hover {
    border-color: var(--primary);
    box-shadow: var(--fx-shadow);
}

.cart-item-image img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--fx-white);
    padding: 5px;
}

.cart-item-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 5px 0;
    color: var(--fx-gray-800);
}

.cart-item-attributes {
    font-size: 12px;
    color: var(--fx-gray-500);
    background: var(--fx-gray-200);
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    margin: 5px 0;
}

.cart-item-reference {
    font-size: 11px;
    color: var(--fx-gray-400);
    margin: 0;
}

.cart-item-price .price {
    font-weight: 600;
    color: var(--fx-gray-700);
}

.cart-item-total .total {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary);
}

/* Quantity Controls */
.qty-controls {
    display: inline-flex;
    align-items: center;
    background: var(--fx-white);
    border: 2px solid var(--fx-gray-200);
    border-radius: 30px;
    overflow: hidden;
}

.qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 18px;
    font-weight: 600;
    color: var(--fx-gray-500);
    cursor: pointer;
    transition: all 0.2s;
}

.qty-btn:hover {
    background: var(--primary);
    color: var(--fx-white);
}

.qty-input {
    width: 45px;
    height: 36px;
    border: none;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
}

.btn-remove {
    width: 36px;
    height: 36px;
    border: none;
    background: #fee2e2;
    color: var(--fx-danger);
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.btn-remove:hover {
    background: var(--fx-danger);
    color: var(--fx-white);
}

/* ==================== COUPON ==================== */
.fx-opc-coupon {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 2px dashed var(--fx-gray-200);
}

.coupon-input-group {
    display: flex;
    gap: 12px;
    max-width: 400px;
}

.coupon-input-group input {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid var(--fx-gray-200);
    border-radius: 30px;
    font-size: 14px;
}

.coupon-input-group input:focus {
    outline: none;
    border-color: var(--fx-secondary);
}

/* ==================== AUTH TABS ==================== */
.fx-opc-auth-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    padding: 5px;
    background: var(--fx-gray-100);
    border-radius: 30px;
    width: fit-content;
}

.auth-tab {
    padding: 12px 24px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--fx-gray-500);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s;
}

.auth-tab.active {
    background: var(--fx-white);
    color: var(--primary);
    box-shadow: var(--fx-shadow);
}

.fx-opc-auth-form {
    max-width: 500px;
}

.fx-opc-auth-form.hidden {
    display: none;
}

/* Logged In User */
.fx-opc-logged-in {
    padding: 25px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: var(--fx-radius);
}

.logged-user-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-avatar {
    width: 60px;
    height: 60px;
    background: var(--fx-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.user-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--fx-gray-800);
}

.user-email {
    font-size: 14px;
    color: var(--fx-gray-600);
    margin: 5px 0 0 0;
}

.badge-connected {
    margin-left: auto;
    background: var(--fx-success);
    color: var(--fx-white);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* ==================== FORMS ==================== */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--fx-gray-700);
    font-size: 14px;
}

.form-control {
    width: 100%;
    /* padding: 14px 18px; */
    border: 1px solid var(--fx-gray-300);
    border-radius: 10px;
    font-size: 15px;
    background-color: #fff;
    transition: all 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(26, 58, 92, 0.1);
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-row .form-group {
    flex: 1;
}

.forgot-password {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--primary);
}

.guest-info {
    color: var(--fx-gray-600);
    margin-bottom: 20px;
}

/* ==================== ADDRESS CARDS ==================== */
.address-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.address-card {
    padding: 20px;
    border: 2px solid var(--fx-gray-200);
    border-radius: var(--fx-radius);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    background: var(--fx-white);
}

.address-card:hover {
    border-color: var(--primary);
}

.address-card.selected {
    border-color: var(--primary);
    background: rgba(26, 58, 92, 0.05);
}

.address-card .address-check {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 28px;
    height: 28px;
    background: var(--fx-success);
    color: var(--fx-white);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.address-card.selected .address-check {
    display: flex;
}

.address-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--fx-gray-600);
}

.address-content strong {
    display: block;
    font-size: 16px;
    color: var(--primary);
    margin-bottom: 10px;
}

.address-content p {
    margin: 3px 0;
}

.btn-new-address {
    width: 100%;
    padding: 18px;
    border: 2px dashed var(--fx-gray-300);
    background: transparent;
    border-radius: var(--fx-radius);
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    transition: all 0.3s;
}

.btn-new-address:hover {
    border-color: var(--primary);
    background: rgba(26, 58, 92, 0.05);
}

.fx-opc-address-form-container {
    margin-top: 25px;
    padding: 25px;
    background: var(--fx-gray-50);
    border-radius: var(--fx-radius);
}

.fx-opc-address-form-container.hidden {
    display: none;
}

.form-actions-inline {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

/* ==================== CARRIERS ==================== */
.carrier-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.carrier-option {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 25px;
    border: 2px solid var(--fx-gray-200);
    border-radius: var(--fx-radius);
    cursor: pointer;
    transition: all 0.3s;
    background: var(--fx-white);
}

.carrier-option:hover {
    border-color: var(--primary);
}

.carrier-option.selected {
    border-color: var(--primary);
    background: rgba(26, 58, 92, 0.05);
}

.carrier-radio input {
    width: 22px;
    height: 22px;
    accent-color: var(--primary);
}

.carrier-info {
    flex: 1;
}

.carrier-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--fx-gray-800);
    cursor: pointer;
    display: block;
    margin-bottom: 4px;
}

.carrier-delay {
    font-size: 13px;
    color: var(--fx-gray-500);
}

.carrier-price .price {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary);
}

.no-carriers {
    text-align: center;
    padding: 40px;
    color: var(--fx-gray-500);
}

/* ==================== PAYMENT ==================== */
.fx-opc-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.payment-option {
    display: block;
    align-items: center;
    gap: 20px;
    /* padding: 20px 25px; */
    /* border: 2px solid var(--fx-gray-200); */
    /* border-radius: var(--fx-radius); */
    cursor: pointer;
    transition: all 0.3s;
    background: var(--fx-white);
    position: relative;
    margin: 10px 0;
}

.payment-option:hover {
    border-color: var(--primary);
}

.payment-option.selected {
    border-color: var(--primary);
    background: rgba(26, 58, 92, 0.05);
}

.payment-radio input {
    width: 22px;
    height: 22px;
    accent-color: var(--primary);
}

.payment-logo img {
    height: 35px;
    width: auto;
}

.payment-name {
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.payment-check {
    position: absolute;
    right: 20px;
    width: 28px;
    height: 28px;
    background: var(--fx-success);
    color: var(--fx-white);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.payment-option.selected .payment-check {
    display: flex;
}

/* ==================== TERMS ==================== */
.fx-opc-terms {
    padding: 20px;
    background: var(--fx-gray-50);
    border-radius: var(--fx-radius);
    margin-bottom: 25px;
}

.terms-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
}

.terms-checkbox input {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

.terms-checkbox a {
    color: var(--primary);
    font-weight: 600;
}

/* ==================== NAVIGATION ==================== */
.fx-opc-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 2px solid var(--fx-gray-100);
}

.fx-opc-navigation.fx-opc-final {
    background: linear-gradient(135deg, var(--fx-gray-50) 0%, var(--fx-gray-100) 100%);
    margin: 35px -35px -35px;
    padding: 25px 35px;
    border-radius: 0 0 var(--fx-radius-lg) var(--fx-radius-lg);
}

/* ==================== BUTTONS ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}



.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 58, 92, 0.4);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: var(--fx-secondary);
    color: var(--fx-gray-800);
}

.btn-outline-secondary {
    background: transparent;
    border: 2px solid var(--fx-gray-300);
    color: var(--fx-gray-600);
}

.btn-outline-secondary:hover {
    border-color: var(--fx-gray-400);
    background: var(--fx-gray-50);
}

.btn-outline-primary {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-outline-primary:hover {
    background: var(--primary);
    color: var(--fx-white);
}

.btn-block {
    width: 100%;
}

.btn-lg {
    padding: 18px 40px;
    font-size: 17px;
}

/* ==================== SIDEBAR ==================== */
.fx-opc-sidebar {
    position: sticky;
    top: 30px;
}

.summary-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--fx-gray-100);
}

.summary-products {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.summary-product {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fx-gray-100);
}

.summary-product:last-child {
    border-bottom: none;
}

.summary-product .product-image {
    width: 55px;
    height: 55px;
    position: relative;
    flex-shrink: 0;
}

.summary-product .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    background: var(--fx-gray-50);
}

.summary-product .qty-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: var(--primary);
    color: var(--fx-white);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-product .product-info {
    flex: 1;
    min-width: 0;
}

.summary-product .product-name {
    font-size: 13px;
    font-weight: 600;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-product .product-price {
    font-weight: 700;
    color: var(--primary);
}

.summary-totals {
    border-top: 2px solid var(--fx-gray-100);
    padding-top: 20px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
}

.summary-line.total {
    font-size: 20px;
    font-weight: 700;
    padding-top: 15px;
    margin-top: 10px;
    border-top: 2px solid var(--primary);
    color: var(--primary);
}

.trust-badges {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed var(--fx-gray-200);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--fx-gray-600);
}

/* ==================== LOADER ==================== */
.fx-opc-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.fx-opc-loader.hidden { display: none; }

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--fx-gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ==================== MESSAGES ==================== */
.fx-opc-messages {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9998;
}

.fx-opc-message {
    padding: 16px 24px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-weight: 500;
    animation: slideIn 0.3s ease;
}

.fx-opc-message.success { background: var(--fx-success); color: white; }
.fx-opc-message.error { background: var(--fx-danger); color: white; }
.opc-row {
    display: flex;
    width: 100%;
}

.opc-col-full {
    width: 100%;
}

.opc-row-bottom {
    gap: 30px;
}

.opc-col-left {
    /*width: 65%;*/
}

.opc-col-right {
    /*width: 35%;*/
}
/* ===== BLOC CODE PROMO ===== */
.opc-promo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    margin-bottom: 20px;

    background: linear-gradient(180deg, #f9fafb, #ffffff);
    border: 1px solid #e3e6ea;
    border-radius: 10px;

    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.opc-promo input {
    flex: 1;
    height: 44px;
    padding: 0 14px;

    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;

    transition: border-color .2s, box-shadow .2s;
}

.opc-promo input:focus {
    outline: none;
    border-color: #28a745;
    box-shadow: 0 0 0 3px rgba(40,167,69,.15);
}

.opc-promo button {
    height: 44px;
    padding: 0 20px;

    background: linear-gradient(135deg, #28a745, #34c759);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 8px;

    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}

.opc-promo button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(40,167,69,.35);
}

@media (max-width: 992px) {
    .opc-row-bottom {
        flex-direction: column;
    }

    .opc-col-left,
    .opc-col-right {
        width: 100%;
    }
}

.opc-wrapper { max-width: 1200px; margin: 0 auto; padding: 20px 15px; }

.opc-col-main { flex: 0 0 65%; max-width: 65%; padding: 0 15px; box-sizing: border-box; }
.opc-col-side { flex: 0 0 35%; max-width: 35%; padding: 0 15px; box-sizing: border-box; }

.opc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
.opc-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.opc-cart-count {
    font-size: 15px;
    color: #6b7280;
}
.opc-cart-count .text-success { color: #28a745; font-weight: 600; }

.opc-steps-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    width: 100%;
    margin: 25px 0 35px;
    border-bottom: 2px solid #e5e7eb;
}

.opc-step {
    /*width: 20%;*/
    text-align: center;

    font-size: 14px;
    font-weight: 600;
    color: #9ca3af;

    padding-bottom: 12px;
    position: relative;
}

.opc-step.active {
    color: #1f2937;
    font-weight: 700;
}
.opc-step.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;

    width: 100%;
    height: 3px;
    background-color: #1f3a8a;
    border-radius: 3px;
    display:none;
}

.opc-products-table {
    width: 100%;
    min-width: 680px; /* IMPORTANT */
    border-collapse: collapse;
}

.opc-products-table th {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

.opc-products-table td {
    padding: 18px 10px;
    vertical-align: middle;
}

.opc-prod-name a {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.opc-prod-ref {
    font-size: 13px;
    color: #9ca3af;
}

.opc-price {
    font-size: 15px;
    font-weight: 600;
}

.opc-products-table tr:last-child td { border-bottom: none; }
.opc-products-table .col-img { width: 70px; }
.opc-products-table .col-stock { width: 120px; }
.opc-products-table .col-price { width: 80px; text-align: right; }
.opc-products-table .col-qty { width: 80px; text-align: center; }
.opc-products-table .col-del { width: 40px; text-align: center; }
.opc-products-table .col-total { width: 90px; text-align: right; }

.opc-prod-img img { width: 55px; height: 55px; object-fit: contain; border: 1px solid #e0e0e0; border-radius: 4px; }
.opc-prod-name { font-size: 12px; font-weight: 600; color: #1a3760; margin: 0 0 2px 0; }
.opc-prod-name a { color: inherit; text-decoration: none; }
.opc-prod-name a:hover { text-decoration: underline; }
.opc-prod-ref { font-size: 10px; color: #888; margin: 0; }

.stock-badge { display: inline-block; padding: 4px 8px; border-radius: 3px; font-size: 9px; font-weight: 500; }
.stock-badge.in-stock { background: #e8f5e9; color: #2e7d32; }
.stock-badge.out-stock { background: #ffebee; color: #c62828; }

.opc-qty-wrapper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
}
.opc-qty-btn {
    width: 32px;
    height: 34px;
    border: none;
    background: #f3f4f6;
    color: #1a3760;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.opc-qty-btn:hover { background: #e5e7eb; }
.opc-qty-input {
    width: 50px;
    height: 34px;
    text-align: center;
    border: none;
    border-left: 1px solid #d1d5db;
    border-right: 1px solid #d1d5db;
    font-size: 14px;
    font-weight: 600;
    color: #1a3760;
    padding: 0;
    -moz-appearance: textfield;
}
.opc-qty-input::-webkit-outer-spin-button,
.opc-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.opc-btn-delete { color: #dc3545; text-decoration: none; font-size: 16px; opacity: 0.7; }
.opc-btn-delete:hover { opacity: 1; }
.opc-price { font-weight: 600; color: #1a3760; white-space: nowrap; }

.opc-reassurance {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 30px 0;
}

.reassurance-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reassurance-item strong {
    font-size: 14px;
    font-weight: 700;
    display: block;
}

.reassurance-item span {
    font-size: 13px;
    color: #6b7280;
}

.reassurance-item .icon {
    width: 26px;
    height: 26px;
}


.opc-free-shipping { margin-bottom: 15px; padding: 12px 15px; border-radius: 6px; background: linear-gradient(90deg, #d4edda, #c3e6cb); }
.opc-free-shipping strong { font-size: 12px; color: #28a745; }
.opc-free-shipping p { margin: 5px 0 8px; font-size: 11px; color: #666; }
.progress-bar { height: 6px; background: rgba(255,255,255,0.5); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: #28a745; border-radius: 3px; }

.opc-continue { margin-bottom: 15px; }
.opc-continue a { display: inline-block; padding: 8px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: #666; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; }
.opc-continue a:hover { background: #f5f5f5; }

.opc-loyalty { display: flex; align-items: center; gap: 10px; padding: 12px; background: #f8f9fa; border-radius: 6px; font-size: 12px; color: #666; }

.opc-sidebar { background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 15px; position: sticky; top: 20px; }
.opc-promo-form { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #e0e0e0; }
.opc-promo-form .input-group { display: flex; gap: 8px; }
.opc-promo-form input[type="text"] { flex: 1; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 11px; }
.opc-promo-form button { padding: 8px 15px; background: #1a3760; color: #fff; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; }
.vouchers-list { list-style: none; padding: 0; margin: 10px 0 0; }
.vouchers-list li { display: flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 0; }
.vouchers-list .remove { color: #dc3545; text-decoration: none; }
.vouchers-list .value { margin-left: auto; font-weight: 600; color: #28a745; }

.opc-totals {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    padding: 18px;
}

.opc-totals .total-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
}

.opc-totals .grand-total {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid #eee;

    font-size: 18px;
    font-weight: 700;
}

.total-line .value { font-weight: 600; color: #1a3760; }
.total-line.grand-total .value { font-size: 20px; color: #28a745; }
.total-line.tax-info { font-size: 10px; color: #999; }

.btn-commander { display: block; width: 100%; text-align: center;  }

.opc-products-table-wrapper{width: 100%;}

@media (max-width: 991px) {
    .opc-col-main, .opc-col-side { flex: 0 0 100%; max-width: 100%; }
    .opc-col-side { margin-top: 20px; }
    .opc-products-table { font-size: 11px; }
    .opc-products-table th, .opc-products-table td { padding: 8px 5px; }
}
@media (max-width: 767px) {
    #checkout-steps button.continue, #checkout-steps button[type="submit"]{
        text-wrap:auto
    }
    .fx-opc-main{display:block!important;}
    .opc-products-table .col-price,
    .opc-products-table .col-qty,
    .opc-products-table .col-total{
        width:100%;
        text-align:center;
    }
    .opc-products-table .col-stock{
        width:100%;
        padding: 0;
    }
    .stock-badge{
        font-size: 14px;
    }
    .page-content.bg-light.box-shadow-lg.p-4{
        padding:0!important;
        padding: 15px !important;
    }
    .opc-promo {
        flex-wrap: wrap;      /* CLÉ */
        width: 100%;
        box-sizing: border-box;
    }

    .opc-promo * {
        box-sizing: border-box;
    }
    .opc-promo input {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }
    .opc-products-table .col-img{
        width:100%
    }
    .opc-title {
        font-size: 20px;
    }
    .opc-reassurance {
        display: grid;                     /* IMPORTANT */
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin: 20px 0;
    }

    .reassurance-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 45%;
        padding: 10px;
        border-radius: 10px;
        background: #f9fafb;
    }

    .reassurance-item .icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .reassurance-item strong {
        font-size: 13px;
        font-weight: 700;
    }

    .reassurance-item span {
        font-size: 12px;
        color: #6b7280;
        display: block;
    }
    .opc-reassurance {
    }
    .opc-steps-bar {
        display: none;
    }

    /* ===== COMPACT CART ITEMS MOBILE ===== */
    .opc-products-table-wrapper {
        overflow: visible;
    }
    .opc-products-table {
        display: block;
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    .opc-products-table thead {
        display: none;
    }
    .opc-products-table tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Each row = compact card with CSS grid */
    .opc-products-table tr.cart-item {
        display: grid;
        grid-template-columns: 70px 1fr;
        grid-template-rows: auto auto auto;
        gap: 0 10px;
        background: #fff;
        border-radius: 10px;
        padding: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
        position: relative;
        align-items: start;
    }

    .opc-products-table td {
        display: block;
        padding: 0;
        text-align: left;
        border: none;
    }

    /* Image: row 1-3, col 1 */
    .opc-products-table .col-img {
        grid-row: 1 / 4;
        grid-column: 1;
    }
    .opc-products-table .col-img img {
        width: 65px;
        height: 65px;
        object-fit: contain;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
    }

    /* Info (name+ref): row 1, col 2 */
    .opc-products-table .col-info {
        grid-row: 1;
        grid-column: 2;
    }
    .opc-prod-name { margin: 0 25px 2px 0; }
    .opc-prod-name a {
        font-size: 13px;
        font-weight: 600;
        color: #0f2a44;
        line-height: 1.3;
    }
    .opc-prod-ref {
        font-size: 11px;
        color: #9ca3af;
    }

    /* Hide stock on mobile to save space */
    .opc-products-table .col-stock {
        display: none;
    }

    /* Price + Qty + Total: row 2, col 2 — inline */
    .opc-products-table .col-price,
    .opc-products-table .col-qty,
    .opc-products-table .col-total {
        grid-row: 2;
        grid-column: 2;
        display: inline-flex;
        align-items: center;
        width: auto;
        vertical-align: middle;
        font-size: 13px;
    }

    /* Make price/qty/total share row 2 using a wrapper trick with grid */
    .opc-products-table .col-price { grid-column: 2; grid-row: 2; }
    .opc-products-table .col-qty { grid-column: 2; grid-row: 3; }
    .opc-products-table .col-total { display: none; }

    /* Remove ::before labels */
    .col-price::before,
    .col-qty::before,
    .col-total::before {
        display: none;
    }

    .opc-products-table .col-price .opc-price {
        font-size: 15px;
        font-weight: 700;
        color: #1a3760;
    }

    /* Qty wrapper with +/- */
    .opc-qty-wrapper {
        display: inline-flex;
        align-items: center;
        gap: 0;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        overflow: hidden;
        margin-top: 6px;
    }
    .opc-qty-btn {
        width: 30px;
        height: 30px;
        border: none;
        background: #f3f4f6;
        color: #1a3760;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
    .opc-qty-btn:active { background: #e5e7eb; }
    .opc-qty-input {
        width: 36px;
        height: 30px;
        text-align: center;
        border: none;
        border-left: 1px solid #d1d5db;
        border-right: 1px solid #d1d5db;
        font-size: 13px;
        font-weight: 600;
        color: #1a3760;
        padding: 0;
        margin: 0;
        -moz-appearance: textfield;
    }
    .opc-qty-input::-webkit-outer-spin-button,
    .opc-qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Delete: top-right corner */
    .opc-products-table .col-del {
        position: absolute;
        top: 48px;
        right: -20px;
        z-index: 2;
    }
    .opc-products-table .col-del .opc-btn-delete {
        width: 22px;
        height: 22px;
        font-size: 12px;
        background: #fee2e2;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #dc3545;
        text-decoration: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    }

    /* ===== MOBILE CART REORDER ===== */
    .opc-wrapper {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        overflow: hidden;
        padding: 12px 10px 80px;
    }
    .opc-header { order: 1; margin-bottom: 10px; }
    .opc-steps-bar { order: 10; } /* already display:none, but in case shown */
    .opc-row-products { order: 2; }
    .opc-row-bottom { order: 3; }
    .opc-empty-cart { order: 2; }

    /* Sidebar (totals+CTA) comes BEFORE reassurance on mobile */
    .opc-col-right { order: 1; width: 100%; max-width: 100%; box-sizing: border-box;}
    .opc-col-left { order: 2; width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 0px; }
    .opc-row-bottom { width: 100%; max-width: 100%;  }

    /* Condense header */
    .opc-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 0;
    }
    .opc-title {
        font-size: 16px;
        letter-spacing: 0;
    }
    .opc-cart-count {
        font-size: 13px;
    }

    /* Compact reassurance: single row scrollable */
    .opc-reassurance {
        display: flex !important;
        flex-wrap: wrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        padding-bottom: 6px;
        margin: 12px 0;
    }
    .reassurance-item {
        flex: 0 0 auto;
        min-width: 140px;
        padding: 8px 10px;
        font-size: 11px;
    }
    .reassurance-item strong { font-size: 11px; }
    .reassurance-item span { font-size: 10px; }
    .reassurance-item .icon { width: 18px; height: 18px; }

    /* Hide free shipping, continue, loyalty on mobile to save space */
    .opc-free-shipping,
    .opc-continue,
    .opc-loyalty { display: none; }

    /* Sidebar compact on mobile */
    .opc-sidebar {
        border: none;
        padding: 0;
        position: static;
    }
    body .opc-totals {
        border: none;
        padding: 0;
        margin-bottom:0;
    }
    .opc-totals .total-line { font-size: 13px; margin-bottom: 6px; }
    .opc-totals .total-line.grand-total { font-size: 16px;     margin-bottom: 0;    padding-bottom: 0; }

    /* CTA button more prominent */
    .btn-commander {
        font-size: 16px;
        padding: 16px;
        border-radius: 8px;
        background: linear-gradient(135deg, #28a745, #34c759);
        margin-top: 10px;
    }

    /* Promo compact */
    .opc-promo {
        padding: 10px;
        margin-bottom: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .opc-promo-form {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .opc-promo input[type="text"] {
        min-width: 0;
        width: 100%;
    }

    /* Space for sticky bar */
    .opc-wrapper { padding-bottom: 80px; }
}

/* ===== STICKY CART BAR MOBILE ===== */
#sticky-cart-bar {
    position: fixed;
    bottom: -100%;
    left: 0; right: 0;
    z-index: 1040;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
    transition: bottom 0.3s ease;
    padding: 10px 16px;
    display: none;
}
#sticky-cart-bar.visible { bottom: 0; }
@media (max-width: 767px) {
    #sticky-cart-bar { display: flex; align-items: center; justify-content: space-between; }
}
.sticky-cart-total {
    font-size: 18px;
    font-weight: 700;
    color: #1a3760;
}
.sticky-cart-btn {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, #28a745, #34c759);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
}

:root {
    
   
    --fx-success: #10b981;
    --fx-danger: #ef4444;
    --fx-white: #ffffff;
    --fx-gray-50: #f9fafb;
    --fx-gray-100: #f3f4f6;
    --fx-gray-200: #e5e7eb;
    --fx-gray-300: #d1d5db;
    --fx-gray-400: #9ca3af;
    --fx-gray-500: #6b7280;
    --fx-gray-600: #4b5563;
    --fx-gray-800: #1f2937;
    --fx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --fx-radius: 12px;
    --fx-radius-lg: 16px;
}

* { box-sizing: border-box; }

.fx-opc-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* ===== STEPS BAR ===== */
.fx-opc-steps-wrapper {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: var(--fx-radius-lg);
    padding: 25px 30px;
    margin-bottom: 35px;
    box-shadow: var(--fx-shadow-lg);
}

.fx-opc-steps {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fx-opc-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.1);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    color: inherit;
}

.fx-opc-step:hover {
    background: rgba(255,255,255,0.2);
    text-decoration: none;
}

.fx-opc-step.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.fx-opc-step .step-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    transition: all 0.3s;
}

.fx-opc-step .step-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.fx-opc-step.active .step-number,
.fx-opc-step.completed .step-number {
    background: var(--fx-white);
    color: var(--primary);
}

.fx-opc-step.active .step-title,
.fx-opc-step.completed .step-title {
    color: var(--fx-white);
}

.fx-opc-step-connector {
    width: 35px;
    height: 2px;
    background: rgba(255,255,255,0.3);
    margin: 0 5px;
    transition: all 0.3s;
}

.fx-opc-step-connector.completed {
    background: var(--fx-white);
}

/* ===== LAYOUT ===== */
.fx-opc-main {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 35px;
    align-items: start;
}

/* ===== SECTIONS ===== */
.fx-opc-section {
    background: var(--fx-white);
    border-radius: var(--fx-radius-lg);
    box-shadow: var(--fx-shadow-lg);
    padding: 30px;
    
    display: none;
}

.fx-opc-section.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.fx-opc-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--fx-gray-800);
    margin: 0 0 25px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--fx-gray-100);
    text-transform: uppercase;
}

/* ===== AUTH GRID ===== */
.fx-opc-auth-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.fx-opc-auth-box {
    background: var(--fx-gray-50);
    border-radius: var(--fx-radius);
    padding: 25px;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.fx-opc-auth-box:hover {
    border-color: var(--primary);
}

.fx-opc-auth-box h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

.fx-opc-auth-box p {
    font-size: 13px;
    color: var(--fx-gray-600);
    margin: 0 0 15px 0;
    line-height: 1.5;
}

/* ===== FORMS ===== */
.fx-form-group {
    margin-bottom: 15px;
}

.fx-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--fx-gray-600);
    margin-bottom: 6px;
}

.fx-form-control {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--fx-gray-200);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.fx-form-control:focus {
    outline: none;
    border-color: var(--primary);
}

.fx-link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: underline;
}

/* ===== BUTTONS ===== */
.fx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    text-transform: uppercase;
}

body .fx-btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 100%);
    color: var(--fx-white);
    box-shadow: 0 4px 15px rgba(26, 58, 92, 0.3);
}

.fx-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 58, 92, 0.4);
    color: var(--fx-white);
    text-decoration: none;
}

.fx-btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.fx-btn-outline:hover {
    background: var(--primary);
    color: var(--fx-white);
}

.fx-btn-block { width: 100%; }

/* ===== LOGGED USER ===== */
.fx-logged-user {
    padding: 20px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: var(--fx-radius);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fx-logged-user p { margin: 0; font-size: 15px; color: var(--fx-gray-800); }

.fx-badge-connected {
    background: var(--fx-success);
    color: var(--fx-white);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* ===== CHECKOUT STEPS CONTENT - Style natif caché/modifié ===== */
#checkout-steps-content .card,
#checkout-steps-content .checkout-step {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#checkout-steps-content .card-header,
#checkout-steps-content .step-heading,
#checkout-steps-content h2.accordion-heading {
    display: none !important;
}

#checkout-steps-content .collapse,
#checkout-steps-content .card-body {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    padding: 0 !important;
}

/* Style pour le contenu des étapes */
#checkout-steps-content .delivery-options,
#checkout-steps-content .payment-options {
    margin-bottom: 20px;
}

#checkout-steps-content .delivery-option,
#checkout-steps-content .carrier-option {
    padding: 15px 20px;
    border: 2px solid var(--fx-gray-200);
    border-radius: var(--fx-radius);
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

#checkout-steps-content .delivery-option:hover,
#checkout-steps-content .carrier-option:hover {
    border-color: var(--primary);
}

#checkout-steps-content .delivery-option.selected,
#checkout-steps-content .carrier-option.selected {
    border-color: var(--fx-success);
    background: rgba(16, 185, 129, 0.05);
}

/* ===== SIDEBAR ===== */
.fx-opc-summary {
    background: var(--fx-white);
    border-radius: var(--fx-radius-lg);
    box-shadow: var(--fx-shadow-lg);
    padding: 25px;
    border: 2px solid var(--fx-gray-100);
}

.fx-summary-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--fx-gray-100);
    color: var(--fx-gray-800);
}

.fx-summary-products {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--fx-gray-100);
}

.fx-summary-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--fx-gray-50);
}

.fx-summary-product:last-child { border-bottom: none; }

.fx-summary-product .product-image {
    width: 50px;
    height: 50px;
    position: relative;
    flex-shrink: 0;
}

.fx-summary-product .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    background: var(--fx-gray-50);
}

.fx-summary-product .qty-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: var(--primary);
    color: var(--fx-white);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fx-summary-product .product-info { flex: 1; min-width: 0; }

.fx-summary-product .product-name {
    font-size: 12px;
    font-weight: 600;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--fx-gray-800);
}

.fx-summary-product .product-price {
    font-weight: 700;
    color: var(--primary);
    font-size: 13px;
}

/* Promo */
.fx-promo {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--fx-gray-100);
}

.fx-promo-input {
    display: flex;
    gap: 8px;
}

.fx-promo-input input {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--fx-gray-200);
    border-radius: 25px;
    font-size: 12px;
}

.fx-promo-input button {
    padding: 10px 18px;
    background: var(--primary);
    color: var(--fx-white);
    border: none;
    border-radius: 25px;
    font-weight: 700;
    cursor: pointer;
}

/* Totals */
.fx-totals .line {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: var(--fx-gray-600);
}

.fx-totals .line .val { font-weight: 600; color: var(--fx-gray-800); }

.fx-totals .line.total {
    padding-top: 15px;
    margin-top: 10px;
    border-top: 2px solid var(--primary);
    font-size: 18px;
    font-weight: 700;
}

.fx-totals .line.total .val { font-size: 22px; color: var(--fx-success); }

/* Trust badges */
.fx-trust-badges {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--fx-gray-200);
}

.fx-trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 12px;
    color: var(--fx-gray-600);
}

.fx-trust-badge svg { width: 18px; height: 18px; color: var(--fx-success); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .fx-opc-main { grid-template-columns: 1fr; }
    .fx-opc-sidebar { order: -1; position: static; margin-bottom: 25px; }
    .fx-opc-auth-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .fx-opc-steps-wrapper { padding: 15px; }
    .fx-opc-step { padding: 8px 12px; }
    .fx-opc-step .step-title { display: none; }
    .fx-opc-step-connector { width: 15px; }
    .fx-opc-section { padding: 20px; }
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

.hidden { display: none !important; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
    .fx-opc-main { grid-template-columns: 1fr; }
    .fx-opc-sidebar { order: -1; position: static; margin-bottom: 30px; }
}

@media (max-width: 768px) {
    .fx-opc-steps-wrapper { padding: 20px; }
    .fx-opc-step { padding: 8px 12px; }
    .fx-opc-step .step-title { display: none; }
    .fx-opc-step-connector { width: 20px; }
    .fx-opc-section { padding: 20px; }
    .fx-opc-cart-item {
        grid-template-columns: 70px 1fr;
        gap: 15px;
    }
    .cart-item-price, .cart-item-quantity, .cart-item-total { grid-column: 2; }
    .cart-item-remove { position: absolute; top: 10px; right: 10px; }
    .fx-opc-cart-item { position: relative; }
    .form-row { flex-direction: column; gap: 0; }
    .address-cards { grid-template-columns: 1fr; }
    .fx-opc-navigation { flex-direction: column; gap: 15px; }
    .fx-opc-navigation .btn { width: 100%; }
}


/*update*/
:root {
   
    --fx-success: #10b981;
    --fx-danger: #ef4444;
    --fx-white: #ffffff;
    --fx-gray-50: #f9fafb;
    --fx-gray-100: #f3f4f6;
    --fx-gray-200: #e5e7eb;
    --fx-gray-400: #9ca3af;
    --fx-gray-500: #6b7280;
    --fx-gray-600: #4b5563;
    --fx-gray-800: #1f2937;
    --fx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --fx-radius: 12px;
    --fx-radius-lg: 16px;
}

* { box-sizing: border-box; }

.fx-opc-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* ===== STEPS BAR ===== */
body .fx-opc-steps-wrapper {
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-light) 100%);
    border-radius: var(--fx-radius-lg);
    padding: 25px 30px;
    margin-bottom: 35px;
    box-shadow: var(--fx-shadow-lg);
}

.fx-opc-steps {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fx-opc-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.1);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    color: inherit;
}

.fx-opc-step:hover {
    background: rgba(255,255,255,0.2);
    text-decoration: none;
}

.fx-opc-step.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.fx-opc-step .step-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    transition: all 0.3s;
}

.fx-opc-step .step-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.fx-opc-step.active .step-number,
.fx-opc-step.completed .step-number {
    background: var(--primary);
    color: #fff;
}
.fx-opc-step.active .step-number,.fx-opc-step.completed:hover .step-number { background:var(--accent);}

.fx-opc-step.active .step-title,
.fx-opc-step.completed .step-title {
    color: var(--primary);
}
.fx-opc-step.active .step-title,.fx-opc-step.completed:hover .step-title { color:var(--accent);}

.fx-opc-step-connector {
    width: 35px;
    height: 2px;
    background: rgba(255,255,255,0.3);
    margin: 0 5px;
    transition: all 0.3s;
}

.fx-opc-step-connector.completed {
    background: var(--fx-white);
}

/* ===== SECTIONS ===== */
.fx-opc-section {
    background: var(--fx-white);
    border-radius: var(--fx-radius-lg);
    box-shadow: var(--fx-shadow-lg);
    padding: 30px;
    margin-bottom: 25px;
    display: none;
}

.fx-opc-section.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.fx-opc-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--fx-gray-800);
    margin: 0 0 25px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--fx-gray-100);
    text-transform: uppercase;
}

/* ===== AUTH GRID - 2 colonnes maintenant ===== */
.fx-opc-auth-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.fx-opc-auth-box {
    background: var(--fx-gray-50);
    border-radius: var(--fx-radius);
    padding: 25px;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.fx-opc-auth-box:hover {
    border-color: var(--primary);
}

.fx-opc-auth-box h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

.fx-opc-auth-box p {
    font-size: 13px;
    color: var(--fx-gray-600);
    margin: 0 0 15px 0;
    line-height: 1.5;
}

/* ===== FORMS ===== */
.fx-form-group {
    margin-bottom: 15px;
}

.fx-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--fx-gray-600);
    margin-bottom: 6px;
}

.fx-form-control {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--fx-gray-200);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.fx-form-control:focus {
    outline: none;
    border-color: var(--primary);
}

.fx-link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: underline;
}

/* ===== BUTTONS ===== */
.fx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    text-transform: uppercase;
}

.fx-btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--fx-white);
    box-shadow: 0 4px 15px rgba(26, 58, 92, 0.3);
}

.fx-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 58, 92, 0.4);
    color: var(--fx-white);
    text-decoration: none;
}

.fx-btn-block { width: 100%; }

/* ===== LOGGED USER ===== */
.fx-logged-user {
    padding: 20px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: var(--fx-radius);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fx-logged-user p { margin: 0; font-size: 15px; color: var(--fx-gray-800); }

.fx-badge-connected {
    background: var(--fx-success);
    color: var(--fx-white);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* ===== CHECKOUT NATIF PRESTASHOP - Masquer les headers d'accordéon ===== */
#checkout-steps .card {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}

#checkout-steps .card-header,
#checkout-steps h2.accordion-heading,
#checkout-steps .step-heading {
    display: none !important;
}

#checkout-steps .collapse {
    display: block !important;
    height: auto !important;
}

#checkout-steps .card-body {
    padding: 0 !important;
}

/* Masquer toutes les étapes par défaut */
#checkout-steps .checkout-step {
    display: none !important;
}

/* Afficher uniquement l'étape courante */
#checkout-steps .checkout-step.-current,
#checkout-steps .checkout-step.js-current-step,
#checkout-steps .checkout-step.fx-visible {
    display: block !important;
}

/* Style des options de livraison */
#checkout-steps .delivery-option {
    padding: 15px 20px;
    border: 2px solid var(--fx-gray-200);
    border-radius: var(--fx-radius);
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

#checkout-steps .delivery-option:hover {
    border-color: var(--primary);
}

/* Masquer les étapes NON actives */
#checkout-steps .checkout-step:not(.-current):not(.js-current-step) {
    display: none !important;
}

/* Afficher l'étape active */
#checkout-steps .checkout-step.-current,
#checkout-steps .checkout-step.js-current-step {
    display: block !important;
}

/* Préserver le layout flexbox des options de livraison */
#checkout-steps .delivery-option {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border: 2px solid var(--fx-gray-200);
    border-radius: var(--fx-radius);
    margin-bottom: 10px;
}

#checkout-steps .delivery-option label {
    display: flex !important;
    align-items: center;
    width: 100%;
}

#checkout-steps .delivery-option .d-flex {
    display: flex !important;
}

#checkout-steps .delivery-option .flex-column {
    flex-direction: column !important;
}

/* Contenu extra transporteur (Mondial Relay, DPD, Colissimo, etc.) */
.carrier-extra-content {
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: var(--fx-radius, 8px);
    margin-top: -2px; /* Fusionner visuellement avec delivery-option */
}

.carrier-extra-content:empty {
    display: none !important;
}

/* ============================================================
   MONDIAL RELAY - Widget de sélection de Point Relais
   ============================================================ */

/* Conteneur principal du widget */
#mondialrelay_content {
    width: 100%;
    margin: 0;
    padding: 0;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    overflow: hidden;
}

/* État caché (géré par JavaScript) */
#mondialrelay_content[style*="display: none"] {
    opacity: 0;
    max-height: 0;
}

/* Zone du widget interactif (carte + liste) */
#mondialrelay_widget {
    min-height: 400px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(19, 72, 121, 0.08);
    margin-bottom: 1rem;
}

/* Container du widget Mondial Relay (iframe interne) */
#mondialrelay_widget iframe,
#mondialrelay_widget .pr-widget-map-canvas,
#mondialrelay_widget #Widget_PR {
    max-width: 100%;
    width: 100% !important;
    border: none;
    border-radius: 8px;
}

/* Zone d'erreurs */
#mondialrelay_errors {
    padding: 12px 16px;
    background: #fee;
    border-left: 4px solid #f13340;
    border-radius: 6px;
    color: #c30;
    font-size: 14px;
    margin-bottom: 1rem;
    display: none;
}

#mondialrelay_errors:not(:empty) {
    display: block;
}

/* Résumé du Point Relais sélectionné */
#mondialrelay_summary {
    padding: 16px 20px;
    background: #f0f7ff;
    border: 2px solid var(--primary);
    border-radius: 8px;
    margin-top: 1rem;
    display: none;
    margin-bottom: 25px;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

#mondialrelay_summary:not(:empty) {
    display: block;
}

#mondialrelay_summary .mr-relay-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
    font-family: "Montserrat-bold", sans-serif;
}

#mondialrelay_summary .mr-relay-address {
    font-size: 14px;
    color: #4b566b;
    line-height: 1.5;
    margin-bottom: 4px;
}

#mondialrelay_summary .mr-relay-hours {
    font-size: 13px;
    color: #6c757d;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #dde5ed;
}

/* Conteneur du bouton de validation */
#mondialrelay_save-container {
    margin-top: 1.25rem;
    text-align: center;
    padding: 0;
    float:none;
}
#mondialrelay_summary .pull-left { text-align: left;}
#mondialrelay_summary .col-md-12 { padding:0;}

#mondialrelay_save-container .btn,
#mondialrelay_save-container .mondialrelay_save-relay {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 100%);
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    font-family: "Montserrat-bold", sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(19, 72, 121, 0.2);
    position: relative;
    overflow: hidden;
    margin-bottom:25px;
}
#mondialrelay_change-relay { float:left; margin-top:15px;}

#mondialrelay_save-container .btn:hover,
#mondialrelay_save-container .mondialrelay_save-relay:hover {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 100%);
    box-shadow: 0 6px 16px rgba(19, 72, 121, 0.3);
    transform: translateY(-2px);
}

#mondialrelay_save-container .btn:active,
#mondialrelay_save-container .mondialrelay_save-relay:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(19, 72, 121, 0.2);
}

/* Input caché pour le relay sélectionné */
#mondialrelay_selected-relay {
    display: none;
}

/* Conteneur de résultat global */
#mondialrelay_result {
    margin-top: 1rem;
}

/* Visibilité du widget - géré par JavaScript */
.carrier-extra-content:has(#mondialrelay_content):not([style*="display: block"]) {
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* Responsive Mobile */
@media (max-width: 768px) {
    #mondialrelay_widget {
        min-height: 450px;
        border-radius: 6px;
    }

    #mondialrelay_summary {
        padding: 12px 14px;
        border-radius: 6px;
    }

    #mondialrelay_summary .mr-relay-name {
        font-size: 15px;
    }

    #mondialrelay_summary .mr-relay-address {
        font-size: 13px;
    }

    /* Boutons (save + change) — full width, texte qui peut wrapper,
       padding réduit pour ne pas déborder du cadre. */
    #mondialrelay_save-container,
    #mondialrelay_save-container .btn,
    #mondialrelay_save-container .mondialrelay_save-relay,
    #mondialrelay_change-relay,
    #mondialrelay_summary .btn {
        float: none !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 12px 16px;
        font-size: 13px;
        white-space: normal;
        word-break: break-word;
        line-height: 1.3;
        margin-left: 0;
        margin-right: 0;
    }

    #mondialrelay_change-relay {
        margin-top: 10px;
    }
}

/* Animation de chargement du widget */
#mondialrelay_widget.loading {
    position: relative;
    min-height: 400px;
}

#mondialrelay_widget.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #f3f4f6;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: mr-spin 0.8s linear infinite;
    z-index: 10;
}

#mondialrelay_widget.loading::after {
    content: 'Chargement de la carte...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 30px);
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

@keyframes mr-spin {
    to { transform: rotate(360deg); }
}

/* Override des styles inline du widget Mondial Relay */
#mondialrelay_widget .Widget_PR,
#mondialrelay_widget #Widget_PR {
    border: none !important;
    box-shadow: none !important;
}

/* Corrections des éléments internes du widget si accessibles */
#mondialrelay_widget .pr-widget-header {
    background: #134879 !important;
    color: #fff !important;
    padding: 12px 16px !important;
    border-radius: 8px 8px 0 0 !important;
}

#mondialrelay_widget .pr-widget-search-button {
    background: #134879 !important;
    border-color: #134879 !important;
}

#mondialrelay_widget .pr-widget-search-button:hover {
    background: #1a5a96 !important;
    border-color: #1a5a96 !important;
}

/* ============================================================
   DPD FRANCE - Widget Relais & Predict
   ============================================================ */

/* Conteneur du filtre gris (overlay modal) */
#dpdfrance_relais_filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
}

#dpdfrance_relais_filter.active {
    display: block;
}

/* Table des points relais DPD */
#dpdfrance_relais_point_table.dpdfrance_fo {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(19, 72, 121, 0.08);
    margin-top: 1rem;
    border-collapse: separate;
    border-spacing: 0;
}

#dpdfrance_relais_point_table thead {
    background: var(--primary);
    color: #fff;
}

#dpdfrance_relais_point_table thead th {
    padding: 14px 16px;
    text-align: left;
    font-family: "Montserrat-bold", sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: none;
}

#dpdfrance_relais_point_table thead th:first-child {
    border-radius: 8px 0 0 0;
}

#dpdfrance_relais_point_table thead th:last-child {
    border-radius: 0 8px 0 0;
}

/* Lignes du tableau */
#dpdfrance_relais_point_table tbody tr.dpdfrance_lignepr {
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

#dpdfrance_relais_point_table tbody tr.dpdfrance_lignepr:hover {
    background-color: #f0f7ff;
}

#dpdfrance_relais_point_table tbody tr.dpdfrance_lignepr.selected {
    background-color: #e0f0ff;
    border-left: 4px solid var(--primary);
}

#dpdfrance_relais_point_table tbody tr.dpdfrance_lignepr:last-child {
    border-bottom: none;
}

#dpdfrance_relais_point_table tbody td {
    padding: 14px 16px;
    color: #4b566b;
    font-size: 14px;
    vertical-align: middle;
}

#dpdfrance_relais_point_table tbody td strong {
    color: var(--primary);
    font-family: "Montserrat-bold", sans-serif;
}

/* Bouton "Plus d'infos" */
#dpdfrance_relais_point_table .dpdfrance_infoplus {
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
    transition: color 0.2s ease;
}

#dpdfrance_relais_point_table .dpdfrance_infoplus:hover {
    color: #1a5a96;
}

/* Input radio pour la sélection */
#dpdfrance_relais_point_table input[type="radio"][name="dpdfrance_relay_id"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

/* Modal détails du relais */
.dpdfrance_modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.dpdfrance_modal h3 {
    color: var(--primary);
    font-family: "Montserrat-bold", sans-serif;
    font-size: 20px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary);
}

.dpdfrance_modal .close {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 28px;
    font-weight: 300;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

.dpdfrance_modal .close:hover {
    color: #f13340;
}

/* Bloc DPD Predict */
#div_dpdfrance_predict_block.dpdfrance_fo {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    margin-top: 1rem;
    box-shadow: 0 2px 8px rgba(19, 72, 121, 0.08);
}

#div_dpdfrance_predict_header {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    font-family: "Montserrat-bold", sans-serif;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

/* Logo DPD Predict */
#div_dpdfrance_predict_block .dpdfrance_predict_logo {
    margin: 16px 0;
    text-align: center;
}

#div_dpdfrance_predict_block .dpdfrance_predict_logo img {
    max-width: 200px;
    height: auto;
}

/* Texte informatif */
#div_dpdfrance_predict_block .dpdfrance_predict_info {
    color: #4b566b;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

#div_dpdfrance_predict_block .dpdfrance_predict_info ul {
    list-style: none;
    padding-left: 0;
    margin: 12px 0;
}

#div_dpdfrance_predict_block .dpdfrance_predict_info ul li {
    padding: 8px 0 8px 28px;
    position: relative;
}

#div_dpdfrance_predict_block .dpdfrance_predict_info ul li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #13bb32;
    font-weight: 700;
    font-size: 16px;
}

/* Section GSM (numéro de téléphone) */
#div_dpdfrance_predict_gsm {
    margin-top: 24px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

#div_dpdfrance_predict_gsm label {
    display: block;
    font-weight: 600;
    color: var(--primary);
    font-family: "Montserrat-bold", sans-serif;
    margin-bottom: 8px;
    font-size: 14px;
}

#input_dpdfrance_predict_gsm_dest {
    width: calc(100% - 60px);
    padding: 12px 16px;
    border: 2px solid #d1d5db;
    border-radius: 6px 0 0 6px;
    font-size: 15px;
    transition: border-color 0.2s ease;
    display: inline-block;
}

#input_dpdfrance_predict_gsm_dest:focus {
    outline: none;
    border-color: var(--primary);
}

#dpdfrance_predict_gsm_button {
    width: 50px;
    height: 48px;
    background: linear-gradient(135deg, #134879 0%, #1a5a96 100%);
    color: #fff;
    border: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    transition: all 0.3s ease;
    display: inline-block;
    vertical-align: top;
    margin-left: -4px;
}

#dpdfrance_predict_gsm_button:hover {
    background: linear-gradient(135deg, #1a5a96 0%, #134879 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(19, 72, 121, 0.2);
}

#dpdfrance_predict_gsm_button:active {
    transform: translateY(0);
}

/* Message d'erreur Predict */
#dpdfrance_predict_error {
    margin-top: 12px;
    padding: 12px 16px;
    background: #fee;
    border-left: 4px solid #f13340;
    border-radius: 6px;
    color: #c30;
    font-size: 14px;
    display: none;
}

#dpdfrance_predict_error:not(:empty) {
    display: block;
}

/* Responsive Mobile */
@media (max-width: 768px) {
    #dpdfrance_relais_point_table thead th {
        font-size: 12px;
        padding: 10px 12px;
    }

    #dpdfrance_relais_point_table tbody td {
        font-size: 13px;
        padding: 10px 12px;
    }

    .dpdfrance_modal {
        width: 95%;
        padding: 20px;
        max-height: 90vh;
    }

    #div_dpdfrance_predict_block.dpdfrance_fo {
        padding: 16px;
    }

    #input_dpdfrance_predict_gsm_dest {
        width: calc(100% - 50px);
        font-size: 14px;
    }

    #dpdfrance_predict_gsm_button {
        width: 45px;
        height: 44px;
    }
}

/* Cache les éléments DPD quand ils ne sont pas utilisés */
.dpdfrance_fo {
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.dpdfrance_fo[style*="display: none"] {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

/* Style du bouton Continuer */
.btn-primary,.btn.add-to-cart,#checkout-steps button.continue,
#checkout-steps button[type="submit"],.btn-commander {
    /*background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;*/
    background: linear-gradient(135deg, #89e5bb 0%,var(--fx-success) 100%);
    color: var(--fx-white) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 12px #d2d2d2;
}
body .accordion > .card { overflow:visible;}

.fx-summary-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--fx-gray-100);
    color: var(--fx-gray-800);
}

.fx-summary-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--fx-gray-50);
}

.fx-summary-product:last-child { border-bottom: none; }

.fx-summary-product .product-image {
    width: 50px;
    height: 50px;
    position: relative;
    flex-shrink: 0;
}

.fx-summary-product .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    background: var(--fx-gray-50);
}

.fx-summary-product .qty-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: var(--primary);
    color: var(--fx-white);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fx-summary-product .product-info { flex: 1; min-width: 0; }

.fx-summary-product .product-name {
    font-size: 12px;
    font-weight: 600;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--fx-gray-800);
}

.fx-summary-product .product-price {
    font-weight: 700;
    color: var(--primary);
    font-size: 13px;
}

/* Promo */
.fx-promo {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--fx-gray-100);
}

.fx-promo-input {
    display: flex;
    gap: 8px;
}

.fx-promo-input input {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--fx-gray-200);
    border-radius: 25px;
    font-size: 12px;
}

.fx-promo-input button {
    padding: 10px 18px;
    background: var(--primary);
    color: var(--fx-white);
    border: none;
    border-radius: 25px;
    font-weight: 700;
    cursor: pointer;
}

/* Totals */
.fx-totals .line {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: var(--fx-gray-600);
}

.fx-totals .line .val { font-weight: 600; color: var(--fx-gray-800); }

.fx-totals .line.total {
    padding-top: 15px;
    margin-top: 10px;
    border-top: 2px solid var(--primary);
    font-size: 18px;
    font-weight: 700;
}

.fx-totals .line.total .val { font-size: 22px; color: var(--fx-success); }

/* Trust badges */
.fx-trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 12px;
    color: var(--fx-gray-600);
}

.fx-trust-badge svg { width: 18px; height: 18px; color: var(--fx-success); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .fx-opc-main { grid-template-columns: 1fr; }
    .fx-opc-auth-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .fx-opc-steps-wrapper { padding: 15px; }
    .fx-opc-step { padding: 8px 12px; }
    .fx-opc-step .step-title { display: none; }
    .fx-opc-step-connector { width: 15px; }
    .fx-opc-section { padding: 20px; }
}


/* cart */
:root {
    
    --opc-success: #10b981;
    --opc-danger: #ef4444;
    --opc-warning: #f59e0b;
    --opc-white: #ffffff;
    --opc-gray-50: #f9fafb;
    --opc-gray-100: #f3f4f6;
    --opc-gray-200: #e5e7eb;
    --opc-gray-300: #d1d5db;
    --opc-gray-500: #6b7280;
    --opc-gray-600: #4b5563;
    --opc-gray-800: #1f2937;
    --opc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --opc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --opc-radius: 12px;
}

* { box-sizing: border-box; }

.opc-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
.opc-header {
    text-align: center;
    margin-bottom: 10px;
}

.opc-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--opc-gray-800);
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

.opc-cart-count {
    font-size: 15px;
    color: var(--opc-gray-600);
    margin: 0;
}

.opc-cart-count .text-success {
    color: var(--opc-success);
    font-weight: 700;
}

/* Steps Bar */
.opc-steps-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-light) 100%);
    padding: 20px;
    border-radius: var(--opc-radius);
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.opc-step {
    padding: 10px 20px;
    background: #fff;
    border-radius: 30px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 25px;
}

.opc-step.active {
    background: var(--primary);
    color: #fff;
}

/* Empty Cart */
.opc-empty-cart {
    text-align: center;
    padding: 60px 20px;
    background: var(--opc-gray-50);
    border-radius: var(--opc-radius);
    margin-bottom: 30px;
}

.opc-empty-cart svg {
    width: 80px;
    height: 80px;
    color: var(--opc-gray-300);
    margin-bottom: 20px;
}

.opc-empty-cart h2 {
    font-size: 24px;
    color: var(--opc-gray-800);
    margin: 0 0 10px 0;
}

.opc-empty-cart p {
    color: var(--opc-gray-500);
    margin: 0 0 25px 0;
}

.opc-empty-cart .btn-continue {
    display: inline-block;
    padding: 14px 30px;
    background: var(--primary);
    color: var(--opc-white);
    text-decoration: none;
    border-radius: 30px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s;
}

.opc-empty-cart .btn-continue:hover {
    background: var(--opc-primary-light);
    transform: translateY(-2px);
}

/* Products Table */
.opc-products-table-wrapper {
    background: var(--opc-white);
    border-radius: var(--opc-radius);
    box-shadow: var(--opc-shadow-lg);

    margin-bottom: 30px;
}

.opc-products-table {
    width: 100%;
    border-collapse: collapse;
}

.opc-products-table thead {
    background: var(--opc-gray-50);
}

.opc-products-table th {
    padding: 15px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--opc-gray-600);
    text-transform: uppercase;
    border-bottom: 2px solid var(--opc-gray-200);
}
.opc-products-table tbody tr:hover {
    background: var(--opc-gray-50);
}
.opc-products-table .col-del { width: 50px; text-align: center; }

.opc-prod-img img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--opc-gray-50);
}

.opc-prod-name {
    margin: 0 0 5px 0;
}

.opc-prod-name a {
    color: var(--opc-gray-800);
    font-weight: 600;
    text-decoration: none;
}

.opc-prod-name a:hover {
    color: var(--primary);
}

.opc-prod-ref {
    font-size: 12px;
    color: var(--opc-gray-500);
    margin: 0;
}

.stock-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.stock-badge.in-stock {
    background: #d1fae5;
    color: #065f46;
}

.stock-badge.out-stock {
    background: #fee2e2;
    color: #991b1b;
}

.opc-price {
    font-weight: 700;
    color: var(--opc-gray-800);
}

/* Quantity Input */
.opc-qty-input {
    width: 60px;
    padding: 8px;
    text-align: center;
    border: 2px solid var(--opc-gray-200);
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
}

.opc-qty-input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Delete Button */
.opc-btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #fee2e2;
    color: var(--opc-danger);
    border-radius: 50%;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}

.opc-btn-delete:hover {
    background: var(--opc-danger);
    color: var(--opc-white);
}

/* Bottom Row */
.opc-row-bottom {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 30px;
}

/* Reassurance */
.opc-reassurance {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.reassurance-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: var(--opc-white);
    border-radius: var(--opc-radius);
    box-shadow: var(--opc-shadow);
}

.reassurance-item .icon {
    width: 28px;
    height: 28px;
    color: var(--opc-success);
    flex-shrink: 0;
}

.reassurance-item strong {
    display: block;
    font-size: 12px;
    color: var(--opc-gray-800);
    text-transform: uppercase;
}

.reassurance-item span {
    font-size: 11px;
    color: var(--opc-gray-500);
}

.opc-free-shipping {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 15px 20px;
    border-radius: var(--opc-radius);
    text-align: center;
    margin-bottom: 15px;
}

.opc-free-shipping strong {
    color: #92400e;
    font-size: 13px;
}

.opc-continue {
    margin-bottom: 15px;
}

.opc-continue a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.opc-continue a:hover {
    text-decoration: underline;
}

.opc-loyalty {
    font-size: 13px;
    color: var(--opc-gray-600);
    padding: 15px;
    background: var(--opc-gray-50);
    border-radius: var(--opc-radius);
}

/* Sidebar */
.opc-sidebar {
    background: var(--opc-white);
    border-radius: var(--opc-radius);
    box-shadow: var(--opc-shadow-lg);
    padding: 25px;
    position: sticky;
    top: 20px;
}

/* Promo Code */
.opc-promo {
    margin-bottom: 20px;
}

.opc-promo-form {
    display: flex;
    gap: 8px;
}

.opc-promo-form input[type="text"] {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid var(--opc-gray-200);
    border-radius: 25px;
    font-size: 13px;
}

.opc-promo-form input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
}

.opc-promo-form button {
    padding: 12px 20px;
    background: var(--primary);
    color: var(--opc-white);
    border: none;
    border-radius: 25px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.opc-promo-form button:hover {
    background: var(--accent);
}

.opc-promo-message {
    margin-top: 10px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
    display: none;
}

.opc-promo-message.success {
    display: block;
    background: #d1fae5;
    color: #065f46;
}

.opc-promo-message.error {
    display: block;
    background: #fee2e2;
    color: #991b1b;
}

/* Vouchers List */
.opc-vouchers {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--opc-gray-200);
}

.opc-voucher-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
}

.opc-voucher-item .voucher-name {
    color: var(--opc-gray-800);
}

.opc-voucher-item .voucher-value {
    color: var(--opc-success);
    font-weight: 700;
}

.opc-voucher-item .voucher-remove {
    color: var(--opc-danger);
    text-decoration: none;
    font-size: 16px;
    margin-left: 10px;
}

/* Totals */
.opc-totals {
    border-top: 2px solid var(--opc-gray-100);
    padding-top: 20px;
    margin-bottom: 20px;
}

.total-line {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    color: var(--opc-gray-600);
}

.total-line span:last-child {
    font-weight: 600;
    color: var(--opc-gray-800);
}

.total-line.grand-total {
    border-top: 2px solid var(--primary);
    margin-top: 10px;
    padding-top: 15px;
    font-size: 18px;
    font-weight: 700;
}

.total-line.grand-total span:last-child {
    font-size: 24px;
    color: var(--opc-success);
}

/* Commander Button */
/*
.btn-commander {
    display: block;
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--opc-primary) 0%, var(--opc-primary-light) 100%);
    color: var(--opc-white);
    text-align: center;
    text-decoration: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(26, 58, 92, 0.3);
    transition: all 0.3s;
}

.btn-commander:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 58, 92, 0.4);
    color: var(--opc-white);
}
*/

/* Loader overlay */
.opc-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.opc-loader.active {
    display: flex;
}

.opc-loader-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--opc-gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 1024px) {
    .opc-row-bottom {
        grid-template-columns: 1fr;
    }

    .opc-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .opc-steps-bar {
        gap: 5px;
        padding: 15px 10px;
        margin-top: 0;
    }

    .opc-step {
        padding: 8px 12px;
        font-size: 10px;
    }

    .opc-products-table-wrapper {
        overflow-x: inherit;
    }

    .opc-products-table {
        /*min-width: 600px;*/
    }

    .opc-reassurance {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    /* Override grid layout to flex column on mobile */
    .opc-row-bottom {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 0;
    }
    .opc-col-right {
        order: 1;
        width: 100% !important;
        max-width: 100% !important;
    }
    .opc-col-left {
        order: 2;
        width: 100% !important;
        max-width: 100% !important;
    }
    .opc-sidebar {
        position: static !important;
        box-shadow: none;
        padding: 0;
    }
    .opc-promo {
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 0;
    }
    .opc-promo-form {
        flex-wrap: wrap;
    }
    .opc-promo-form input[type="text"] {
        min-width: 0;
        flex: 1 1 0%;
    }
}

#checkout {
    /*display: flex;*/
    flex-direction: column;
    align-items: center;
    padding-top: 80px !important;

    & #header, & .page-title-overlap {
        display: none;
    }

}

.row {
    margin-left: 0;
    margin-right: 0;
}

.row .col {
    padding-left: 0;
    padding-right: 0;
}


html, body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
  }

/* SAV/Retour Accordion */
.sav-accordion {
    /* max-width: 900px; */
    margin: 0 auto;
}
.sav-category {
    border-bottom: 1px solid #d9e2e9;
}
.sav-category:last-child {
    border-bottom: none;
}
.sav-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--primary);
    text-align: left;
    font-family: 'Montserrat-bold', sans-serif;
    text-transform: uppercase;
    transition: color 0.2s ease;
}
.sav-toggle:hover {
    color: #f37586;
}
.sav-toggle:focus {
    outline: none;
}
.sav-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    flex-shrink: 0;
    position: relative;
}
.sav-toggle-icon::before,
.sav-toggle-icon::after {
    content: '';
    position: absolute;
    background: var(--primary);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.sav-toggle-icon::before {
    width: 14px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.sav-toggle-icon::after {
    width: 2px;
    height: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* When expanded: rotate vertical bar to form a minus */
.sav-toggle:not(.collapsed) .sav-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}
.sav-toggle:hover .sav-toggle-icon::before,
.sav-toggle:hover .sav-toggle-icon::after {
    background: #f37586;
}
.sav-category-body {
    padding: 0 0 15px 32px;
}
.sav-question {
    border-bottom: none;
}
.sav-toggle-sub {
    font-size: 14px;
    text-transform: none;
    font-family: 'Montserrat', sans-serif;
    color: #f37586;
    padding: 10px 0;
}
.sav-toggle-sub:hover {
    color: var(--primary);
}
.sav-toggle-sub .sav-toggle-icon::before,
.sav-toggle-sub .sav-toggle-icon::after {
    background: #f37586;
}
.sav-toggle-sub:hover .sav-toggle-icon::before,
.sav-toggle-sub:hover .sav-toggle-icon::after {
    background: var(--primary);
}
.sav-toggle-sub:not(.collapsed) .sav-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}
.sav-question-body {
    padding: 5px 0 15px 32px;
    color: var(--primary);
    font-size: 14px;
    line-height: 1.7;
}
.sav-contact-block {

    margin: 40px auto;
    text-align: center;
    padding: 30px;
    background: #f5f7f9;
    border-radius: 8px;
}
.sav-contact-block p {
    color: var(--primary);
    font-size: 15px;
    margin-bottom: 20px;
    line-height: 1.6;
}
.sav-contact-btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-family: 'Montserrat-bold', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    padding: 14px 40px;
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.3s ease;
}
.sav-contact-btn:hover {
    background: #f37586;
    color: #fff;
    text-decoration: none;
}

#search_widget .form-control { border-radius:5px; border-color:var(--primary);}
#search_widget .form-control::placeholder { color:var(--primary);}
#more_info_block .product-description p span, #more_info_block .product-description span {    font-size: 13px !important; }
#_mobile_search { display:none;}
#_mobile_search #search_widget {   margin-left: 12px;    margin-right: 12px;    margin-top: 7px !important;    margin-bottom: 7px !important;}
#trigger_search_mobile {display:none !important;}
.header_right_main .account-icon { display:none;}

#header .header-nav  .topbar-right { position: fixed;    z-index: 1000000;    right: 250px; top: 200px;  /*background:var(--bg-light); */   padding: 4px 20px;      border-radius: 3px;    padding: 10px;    color: #fff;    -webkit-transition: all 0.3s ease;    -moz-transition: all 0.3s ease;    -o-transition: all 0.3s ease;    transition: all 0.3s ease; }
.mm_menu_content_title { padding:0 10px;    font-size: 12px;    min-height: 50px;}
#_mobile_choose_lang .header-cart,#_mobile_choose_lang .header-account { display:none;}
#header .header-nav .navbar-tool-icon-box { background:var(--bg-light) !important; border:1px solid var(--primary); margin-bottom: 7px;-webkit-transition: all 0.3s ease;    -moz-transition: all 0.3s ease;    -o-transition: all 0.3s ease;    transition: all 0.3s ease;}
#header .header-nav .header-cart,#header .header-nav .header-account,#header .header-nav .header-lang { margin-left:0 !important;     margin-right: 0 !important;   padding-left: 0 !important;}
#header .header-nav .container { padding:0;    justify-content: center;}
#header .header-nav .header-lang .dropdown-toggle::after{ display:none !important;}
#header .header-nav .navbar-tool-icon-box:hover { background:var(--accent) !important; border-color:var(--accent);}
#header .header-nav .navbar-tool-icon-box:hover i { color:#fff!important;}
.navbar-light .navbar-tool:hover .navbar-tool-text { color:var(--fx-danger);}
#search_widget button:hover {  color:var(--fx-danger);}
.navbar-light .blockcart .navbar-tool-icon-box.bg-secondary { background:var(--bg-light) !important;}
.navbar-light .blockcart .navbar-tool-icon-box.bg-secondary:hover { background:var(--primary) !important; color:#fff; }
#header .header-nav .header-lang { margin-bottom:0;}
#js-product-list-top .btn.js-grid-display:not(.disabled),#js-product-list-top .btn.js-list-display:not(.disabled) {     opacity:0.6; background: #fff; color:var(--primary) !important;}
#category-description h3 { font-size:16px; }
#category-description p,#category-description ol, #category-description ul { font-size:14px;}
.ui-autocomplete .product { font-size:14px;    margin-left: 10px;}
.ui-autocomplete .ui-widget-content { background:none; border:none;}
.ui-autocomplete .ui-widget-content:hover { background:none;}
.ui-autocomplete.ui-menu .ui-menu-item a {display: flex;    gap: 10px;    align-items: center; background:#fff !important; cursor:pointer; }
.ui-autocomplete.ui-menu .ui-menu-item a:hover { border:none; color:var(--fx-danger); margin:0; }
.ui-autocomplete.ui-menu .ui-menu-item a img { width:40px; height:auto;}
.ui-widget-content {    border: none;    padding: 10px;    background:#fff;      box-shadow: 0 0.3rem 1.525rem -0.375rem rgba(0, 0, 0, 0.1);}
#search_widget button {padding-right: 20px;    padding-bottom: 10px;}
.header-lang .dropdown-item { line-height:normal;}
.header-lang .dropdown-item:hover { color:var(--fx-danger);}
main section#wrapper { margin-bottom:75px !important;}

.navbar-tool .navbar-tool-label { background:var(--header-background);}
.widget-categories h2.h3 { text-transform: uppercase; font-weight:bold; border-bottom:1px solid; color:var(--primary);margin-bottom: 35px !important;    margin-top: 45px;}
.tns-inner .product-miniatures-slider .tns-item { width:97px !important;}
body #header .layout_layout1:not(.ybc_vertical_menu) .mm_menus_li > a { color:var(--body-color);}
body #header .layout_layout1:not(.ybc_vertical_menu) .mm_menus_li > a:hover { color: var(--accent) !important;}
body .navbar-light .navbar-tool-text {color:var(--body-color); }
body .product-title > a {  color:var(--body-color);}
body .product-title > a:hover,.product-card:hover .product-title > a   { color:var(--accent);}
body .widget-list-link { color:var(--body-color); }
#js-product-list-top .form-control { border:none;}
body .page-title-overlap { background:var(--bg-light) !important;}
body .page-title-overlap .text-light,body .page-title-overlap .text-white,.breadcrumb-light .breadcrumb-item > a,.breadcrumb-light .breadcrumb-item::before,#js-product-list-top .text-white { color:var(--primary) !important;}

/* Breadcrumb long: wrap and truncate per-item with ellipsis (full text on hover via title=) */
.breadcrumb-wrap { row-gap: 0.25rem; }
.breadcrumb-wrap .breadcrumb-item { min-width: 0; }
.breadcrumb-wrap .breadcrumb-label {
    display: inline-block;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.breadcrumb-wrap .breadcrumb-label-active { max-width: 30ch; }
@media (max-width: 575px) {
    .breadcrumb-wrap .breadcrumb-label { max-width: 12ch; }
    .breadcrumb-wrap .breadcrumb-label-active { max-width: 18ch; }
}
body .header-nav i { color:var(--primary) !important;}
a.bg-light:hover, a.bg-light:focus, button.bg-light:hover, button.bg-light:focus { background:var(--accent) !important; color:#fff !important;}
.featured-products { border:none !important;}
.navbar-light .navbar-tool-icon-box.bg-secondary {background:var(--bg-light) !important;}
.page-title-overlap .py-lg-3 { padding-bottom:0 !important;}
#js-product-list-top .pt-2 { padding-top:0 !important;}
.header-top .navbar .container { padding-left:0; padding-right:0;}

@media (min-width: 768px) {
.ets_mm_megamenu.mm_menu_center ul.mm_menus_ul {    justify-content: space-between;}
body .layout_layout1 .ets_mm_megamenu_content { background:none;}
}

@media (max-width: 767.98px) {
    
    /* .ets_mm_megamenu_content .arrow {  margin-top: 15px;} */
    #category  #js-product-list-top .btn {     padding: 6px 12px; font-size:14px;}
    #category  #js-product-list-top .d-flex {   padding-top: 0 !important;margin-top: 30px;padding-bottom: 0 !important;} 
    #category .page-title-overlap .d-lg-flex {   padding-bottom: 0 !important;padding-top: 0 !important;}
    #category .page-title-overlap { padding-bottom: 1rem; padding-top: 1rem !important;}
    .page-title-overlap h1 { margin-bottom:0; font-size: 1.5rem;}
    #category .page-title-overlap .text-center { text-align: left !important;}  
    .page-title-overlap .mb-3 {margin-bottom: 0.5rem !important;}
    .navbar-light .navbar-brand { margin-right:0;}
    #header .navbar-tool {  padding-left: 0px !important;}
    #header .header-cart { margin-left:7px !important;}
    #header .navbar-tool.header-account { margin-left:7px !important;}
    .fx-reassurance-text { font-size:14px;}
    .ets_mm_megamenu .container  { background:none;}
    #header .navbar.navbar-expand-lg.navbar-light {        padding: 0.2rem 1rem;    }
}
@media (max-width: 991.98px) {
    #category #js-product-list-top { display:none;}
    #category .page-title-overlap + #notifications { margin-top:0;}
    .navbar-sticky.navbar-stuck {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        -webkit-animation: navbar-stuck 0.25s;
        animation: navbar-stuck 0.25s;
    }
    /*.navbar-sticky.navbar-stuck .nav-bar-bg {
        display: none;
    }
    */
}
@-webkit-keyframes navbar-stuck {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
@keyframes navbar-stuck {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@media (max-width: 1450px) {
    .awards-automoto, .awards-autoplus {
        display: none;
    }
}

@media (max-width: 1720px) {
    #header .header-nav .topbar-right {
        right: 15px;
    }
}

@media (max-width: 991px) {
    #category .page-title-overlap { padding-bottom: 10px;        padding-top: 15px !important;}
    #category section#wrapper { margin-bottom:75px !important;}
    .blocs-qualite-question { margin-top:0;}
    #tns2.product-miniatures-slider > .tns-item {   width: 100px;}
    body#cart  .page-title-overlap { padding-bottom: 0;}
    body#cart  .opc-title { display:none;}
    #fx-opc-checkout .fx-opc-steps-wrapper {     margin-bottom: 10px;}
    .fx-opc-container { padding-top: 15px;}
    #more_info_tabs .nav {    border-top: 1px solid var(--primary) !important;   border-bottom: 1px solid var(--primary) !important;padding-bottom: 7px;        padding-top: 7px;}
    #more_info_tabs .nav-link {  padding: 6px 25px;}
    .header_right_main .account-icon  { display:block;}
    .quality-question-text { width:stretch;}
    
}



/* ==========================================================================
   PRODUCT PAGE MOBILE OPTIMIZATION
   ========================================================================== */


/* --- Product page: hide blue header on mobile, show title below images --- */

@media (max-width: 767.98px) {
    #footer .blocks-footer > div { flex:auto;}
    .home-content-blocks:before { display:none;}
    #category .breadcrumb { justify-content: flex-start !important;}
    .cz-thumblist { padding-top:0 !important;} 
    #trigger_search_mobile { display:block !important;}   
    /*#product .product-actions .product-add-to-cart { position:fixed; left:0; bottom:0; width: 100%; padding:15px !important;}*/
    #js-product-list .col-md-4  { width:50%;  }
    #product .page-title-overlap.bg-primary {
        display: none !important;
    }

    /* Remove negative margin from next sibling when header is hidden */
    #product .page-title-overlap + * {
        margin-top: 0 !important;
    }

    /* Mobile product title container (swapped via _desktop_/_mobile_ pattern) */
    #product .mobile-product-title {
        margin-bottom: 0.5rem;
    }

    #product .mobile-product-title .page-title-overlap {
        display: block !important;
        background: none !important;
        padding: 0 !important;
    }

    #product .mobile-product-title .container {
        padding: 0;
    }

    #product .mobile-product-title .d-lg-flex {
        flex-direction: column;
        align-items: flex-start !important;
        padding: 0 !important;
    }

    /* Hide breadcrumb on mobile */
    #product .mobile-product-title .order-lg-2 {
        display: none !important;
    }

    #product .mobile-product-title .order-lg-1 {
        text-align: left !important;
        width: 100%;
    }

    #product .mobile-product-title h1,
    #product .mobile-product-title h1.text-light {
        font-size: 1rem;
        font-weight: bold;
        line-height: 1.3;
        margin: 0;
        text-align: left;
        color: var(--primary, #1c3e70) !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* --- Product container: reduce padding on mobile --- */
@media (max-width: 767.98px) {
    #product .product-container {
        padding: 0.75rem !important;
        border-radius: 0.5rem;
    }

    #product .product-container > .row {
        padding: 0 !important;
    }

    /* Reduce top margin on product details column */
    #product .product-details {
        padding-top: 0.5rem;
    }

    /* Reference: compact */
    #product .product-reference {
        font-size: 0.8rem;
        margin-bottom: 0.25rem;
    }

    /* Price: compact margin */
    #product .product-prices {
        margin-bottom: 0.5rem !important;
    }

    #product .product-add-to-cart {
        margin-bottom: 0.5rem;
    }

    /* Reduce delivery warning margin */
    #product .product-add-to-cart .alert {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        padding: 0.5rem;
        font-size: 0.85rem;
    }

    #product .product-quantity {
        margin-bottom: 0;
    }

    #product #quantity_wanted_p {
        padding: 0.5rem 0 !important;
    }

    #product .product-add-to-cart,
    #product #quantity_wanted_p {
        padding:  0 !important;
    }
}

/* --- Pictos: bordered frames on mobile --- */
@media (max-width: 767.98px) {
    #product #pictos-product-features {
        margin: 1rem 0;
    }

    #product #pictos-product-features .pictos-hover {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    #product #pictos-product-features .one-picto {
        flex: 0 0 calc(33.333% - 0.5rem);
        max-width: calc(33.333% - 0.5rem);
        margin-right: 0;
        margin-bottom: 0;
        padding: 0.5rem 0.25rem;
        border: 1px solid #dde1e6;
        border-radius: 0.5rem;
        background: #f8f9fa;
    }

    #product #pictos-product-features .one-picto i {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }

    #product #pictos-product-features .one-picto small {
        font-size: 0.7rem;
        line-height: 1.2;
    }
}

/* --- Sticky add-to-cart bar --- */
#sticky-add-to-cart {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    z-index: 1040;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    transition: bottom 0.3s ease;
    padding: 0.5rem 1rem;
}

#sticky-add-to-cart.visible {
    bottom: 0;
}

.sticky-atc-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
}

.sticky-atc-info {
    display: flex;
    flex-direction: column;
}

.sticky-atc-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary, #1c3e70);
}

.sticky-atc-stock {
    font-size: 0.75rem;
    color: #666;
}

.sticky-atc-stock .icon-circle {
    font-size: 0.5rem;
    vertical-align: middle;
}

.sticky-atc-btn {
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 0.375rem;
}

/* Add bottom padding to body so sticky bar doesn't cover content */
@media (max-width: 991.98px) {
    #product #wrapper {
        padding-bottom: 70px;
    }
    .cz-preview { max-width:100% !important;}
    .cz-preview-item > img {   width: 50%;    margin: 0 auto;}
    .fx-opc-step { padding: 10px 5px;}
}

/* Swap material-icons for cartzilla icons in module-rendered widgets
   (wishlist Vue button, cart-summary expand toggle, touchspin +/-)
   without touching compiled bundles. */
.wishlist-button-add .material-icons,
.cart-summary-products .material-icons,
.material-icons.touchspin-up,
.material-icons.touchspin-down {
    font-size: 0;             /* hide the ligature text label */
    line-height: 1;
}
.wishlist-button-add .material-icons::before,
.cart-summary-products .material-icons::before,
.material-icons.touchspin-up::before,
.material-icons.touchspin-down::before {
    font-family: "cartzilla-icons" !important;
    font-weight: normal;
    font-style: normal;
    font-size: 1.25rem;
    text-transform: none;
    display: inline-block;
    speak: never;
}
.wishlist-button-add .material-icons::before               { content: "\e944"; }  /* czi-heart  */
.cart-summary-products .material-icons::before             { content: "\e906"; }  /* czi-arrow-down */
.cart-summary-products .material-icons.expand-less::before { content: "\e90c"; }  /* czi-arrow-up   */
.material-icons.touchspin-up::before                       { content: "\e90c"; }  /* czi-arrow-up   */
.material-icons.touchspin-down::before                     { content: "\e906"; }  /* czi-arrow-down */

/* Checkout — delivery options: compact responsive layout */
.delivery-options .delivery-option .custom-control-label {
    padding-left: 0.25rem;
    cursor: pointer;
}
.delivery-options .carrier-logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
    flex-shrink: 0;
}
.delivery-options .carrier-info {
    flex: 1 1 auto;
    min-width: 0; /* allow text to truncate / wrap properly inside flex */
}
.delivery-options .carrier-name {
    font-size: 0.95rem;
    line-height: 1.3;
}
.delivery-options .carrier-delay {
    font-size: 0.8rem;
    line-height: 1.2;
    margin-top: 0.125rem;
}
.delivery-options .carrier-price {
    font-size: 1rem;
    padding-left: 0.5rem;
}
.delivery-options .carrier-extra-content {
    padding-left: 1.75rem; /* align with text under the radio */
}

@media (max-width: 575.98px) {
    .delivery-options .carrier-logo {
        width: 48px;
        height: 48px;
    }
    .delivery-options .carrier-name {
        font-size: 0.875rem;
    }
    .delivery-options .carrier-delay {
        font-size: 0.75rem;
    }
    .delivery-options .carrier-price {
        font-size: 0.95rem;
    }
    .delivery-options .delivery-option .custom-control-label {
        padding-right: 0.25rem;
    }
}

/* ===== Logo des moyens de paiement (checkout OPC) ===== */
.payment-options .payment-option .custom-control-label {
    cursor: pointer;
}
.payment-options .payment-option .payment-option-label {
    font-weight: 500;
}
.payment-options .payment-option-logo {
    height: 32px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    margin-left: auto;
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .payment-options .payment-option-logo {
        height: 26px;
        max-width: 90px;
    }
}

/* ===== Bouton COMMANDER (panier) — vert solide, pas de gradient pastel ===== */
/* Override la règle groupée desktop (custom.css:6590) + override mobile (custom.css:5041) */
.btn.btn-primary.btn-commander,
a.btn-commander,
.btn-commander {
    background: var(--fx-success) !important;
    background-image: none !important;
    color: var(--fx-white) !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn.btn-primary.btn-commander:hover,
a.btn-commander:hover,
.btn-commander:hover,
.btn.btn-primary.btn-commander:focus,
a.btn-commander:focus,
.btn-commander:focus {
    background: #0d9668 !important;
    background-image: none !important;
    color: var(--fx-white) !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35) !important;
    transform: translateY(-1px);
}
@media (max-width: 767px) {
    .btn-commander {
        background: var(--fx-success) !important;
        background-image: none !important;
    }
}

/* ===== Popup horaires Mondial Relay (Leaflet) — éviter overflow ===== */
/* Le widget MR pose .leaflet-popup-content à ~250px de large mais le tableau
 * horaires (3 colonnes: jour | matin | aprem) dépasse à droite. On élargit le
 * popup et on resserre le tableau pour qu'il reste dans le cadre. */
#mondialrelay_widget .MRW-Map .leaflet-popup-content-wrapper {
    max-width: 340px;
}
#mondialrelay_widget .MRW-Map .leaflet-popup-content {
    width: auto !important;
    max-width: 320px;
    margin: 12px 14px;
    overflow: hidden;
}
#mondialrelay_widget .MRW-Map .leaflet-popup-content table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 11px;
    line-height: 1.35;
}
#mondialrelay_widget .MRW-Map .leaflet-popup-content table td,
#mondialrelay_widget .MRW-Map .leaflet-popup-content table th {
    padding: 2px 6px;
    white-space: nowrap;
    vertical-align: middle;
}
#mondialrelay_widget .MRW-Map .leaflet-popup-content table td:first-child,
#mondialrelay_widget .MRW-Map .leaflet-popup-content table th:first-child {
    padding-left: 0;
    font-weight: 500;
}

/* ===== Boutons CONTINUER étapes checkout (Personal info / Adresse / Livraison / Paiement) =====
 * Vert solide, pas de gradient pastel. Override la règle groupée custom.css:6590
 * sans toucher à .btn.add-to-cart ni .btn-primary global.
 * Couvre: personal-information.tpl, customer-form.tpl, login-form.tpl, addresses.tpl,
 * address-form.tpl, shipping.tpl, payment.tpl — tout ce qui est dans #checkout-steps. */
#checkout-steps button.continue,
#checkout-steps button.continue.btn.btn-primary,
#checkout-steps button[type="submit"].btn-primary,
#checkout-steps button[type="submit"] {
    background: var(--fx-success) !important;
    background-image: none !important;
    color: var(--fx-white) !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#checkout-steps button.continue:hover,
#checkout-steps button.continue:focus,
#checkout-steps button[type="submit"].btn-primary:hover,
#checkout-steps button[type="submit"].btn-primary:focus,
#checkout-steps button[type="submit"]:hover,
#checkout-steps button[type="submit"]:focus {
    background: #0d9668 !important;
    background-image: none !important;
    color: var(--fx-white) !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35) !important;
    transform: translateY(-1px);
}
#checkout-steps button[type="submit"][disabled],
#checkout-steps button[type="submit"]:disabled {
    background: #9ca3af !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
}