/** Shopify CDN: Minification failed

Line 4094:9 Cannot use type selector "--success" directly after nesting selector "&"
Line 4095:9 Cannot use type selector "--error" directly after nesting selector "&"

**/
*, :before, *:after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Default for `--enky-header-height` — JS (`enky-header.js`) overrides this
   with the real measured height on load / resize. Setting a sensible default
   on `:root` avoids the FOUC on the product page : without it the var is
   undefined until JS runs, every `calc(... var(--enky-header-height) ...)`
   becomes invalid, and elements sized via that calc (notably `.main-product
   .left .imgs`) re-layout from "natural size" → "broken" → "correct" once
   JS finally publishes the variable. 184px matches the typical rendered
   header height ; the exact value is corrected by JS within the first frame. */
:root {
    --enky-header-height: 184px;
}

body:not(.show-quotes-link) .quotes-link{ display: none !important; }

input[type="number"]{

    -moz-appearance:textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}


body{
    font-family: 'ES Build', Arial;
    --red: #E64F1E;
    --body-sec: #86959F;
    background-color: #F7F7F6;
}

[hidden]{ display: none !important; }

.btn--loader{

    .loader{
        position: absolute;
        opacity: 0;
        height: 100%;
    }

    &.loading{

        span, .span{ opacity: 0; }
        .loader{ opacity: 1; }
    }
}

.btn--svg{
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    font-weight: 800;
    height: auto;
    border-radius: 0;
    
    svg{
        width: 1em;
        height: 1em;
    }

    &::before, &::after{ content: none !important; }

    &:hover{
        background-color: unset !important;
        color: inherit !important;
        border: 0 !important;
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-thickness: 1.5px;
    }
}

button, input, textarea, select{
    font-family: inherit;
}

.sealsubs-target-element{ display: none !important; }

.wei-300{ font-weight: 300; }
.wei-400{ font-weight: 400; }
.wei-500{ font-weight: 500; }
.wei-600{ font-weight: 600; }
.wei-700{ font-weight: 700; }
.wei-800{ font-weight: 800; }

.fs-18{ font-size: 1.8rem; }
.fs-14{ font-size: 1.4rem; }

@media(max-width: 1023.98px){
    :root{
        --font-h5-size: 1.6rem;
        --font-h6-size: 1.6rem;
    }
}

collapsible-text{
    display: block;
    overflow: hidden;

    .collapsible--header{
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;

        span{ flex: 1; }
    }

    .collapsible--wrapper{
        overflow: hidden;
        height: 0;
        transition: height 0.25s ease;

        .collapsible--content{
            padding-top: 12px;
        }
    }

    &[open]{

        .collapsible--wrapper{
            height: unset;
        }

        .toggle-plus{
            .plus-barre{ display: none; }
        }

        .toggle-arrow{
            transform: rotate(180deg);
        }
    }
}

.vendor{
    color: var(--body-sec);
    font-size: 1.4rem;
    display: block;
}

[slider] {
    position: relative;
  
    [slider-container] {
        display: flex;
        will-change: transform;
    
        [slider-slide] {
            flex: 0 0 auto;
            width: 100%;
        }
    }
    
    [slider-arrows],
    [slider-dots] {
        pointer-events: none;

        &.hidden{ display: none !important; }
    }

    [slider-arrow-prev],
    [slider-arrow-next],
    [slider-dot] {
        pointer-events: all;
        cursor: pointer;

        &.hidden{ display: none !important; }
    }
}

.main-product{
    position: relative;
    display: flex;
    gap: 48px;
    padding-block-end: 48px;

    .left{
        flex: 1;
        min-width: 0;
        align-self: flex-start;
        position: sticky;
        top: calc(var(--enky-header-height, 100px));
    }

    .right{
        --gap: 40px;
        width: 450px;
        color: #063647;
        display: flex;
        flex-direction: column;
        gap: var(--gap);

        #enky-configurator{

            > .actions{
                display: block;

                .price{
                    display: block;
                    margin-bottom: 16px;
                }

                /* Second-hand stock badge — surfaced only when the picked SH
                   variant exposes a positive `qtyAvailable`. Sits just after
                   the main `.price`, before the buy-group row. */
                .qty-available{
                    display: block;
                    font-size: 16px;
                    color: inherit;
                    margin-bottom: 12px;
                }

                .buy-group{
                    display: flex;
                    gap: 8px;

                    .quotes-selector{
                        background-color: transparent;
                        border: 1px solid rgb(var(--color-border));
                        border-radius: var(--inputs-radius);
                        /* No padding-right : the native <select> already reserves space
                           for its dropdown chevron. Adding extra padding-right would
                           cut the ellipsis ~12px earlier than necessary. */
                        padding: 0 0 0 12px;
                        max-width: 120px;
                        font-size: inherit;
                        /* Ellipsis on the closed select label when the quote name overflows.
                           Native <select>s honor these on the rendered selected-option text
                           (browser-level), but not on the open dropdown options themselves. */
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;

                        &:focus-within{
                            outline: 0;
                            border: 1px solid currentColor;
                        }
                    }

                    .quantity{
                        background-color: rgb(var(--color-secondary-background));
                        width: 100px;
                    }

                    #main-atc-button{
                        text-transform: unset;
                        padding-inline: 4px;
                        flex: 1;
                        white-space: unset;
                        line-height: 1;
                    }
                }

                .quote-formula-warning{
                    margin-top: 8px;
                    padding: 12px;
                    border-radius: 8px;
                    background-color: #FFF3E0;
                    font-size: 1.3rem;
                    line-height: 1.5;
                    color: #5D4037;

                    a{
                        font-weight: 700;
                        text-decoration: underline;
                    }
                }
            }
        }


        .condition{

            .collapsible-text{
                padding: 12px;
                border-radius: 8px;
                background-color: #5E8C661A;

                .collapsible--header{
                    font-size: 1.4rem;
                }

                .collapsible--content{ font-size: 1.2rem; }
            }
        }

        .condition, .formula-picker{
            padding-bottom: var(--gap);
            border-bottom: 1px solid rgb(var(--color-border));
        }

        .additional-informations{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px 12px;

            .information{
                display: flex;
                flex-direction: column;
                gap: 12px;

                span{ line-height: 1; }
            }
        }

        .collapsibles{

            collapsible-text{
                padding: 24px 0;
                border-bottom: 1px solid rgb(var(--color-border));

                .collapsible--header{
                    font-size: 1.8rem;
                    font-weight: 800;
                }

                &.file{

                    .collapsible--content{
                        display: flex;
                        flex-direction: column;
                        gap: 8px;

                        .file{
                            display: flex;
                            align-items: center;
                            gap: 8px;

                            span{ flex: 1; }

                            a{
                                text-decoration: underline;
                                font-size: 1.4rem;
                            }
                        }
                    }
                }
            }
        }
    }

    &.loading{ pointer-events: none; }
}

.main-product .left{
    display: flex;
    flex-direction: column;
    gap: 12px;

    img{
        pointer-events: none;
    }

    .imgs{
        flex: 1;

        .container{
            overflow: hidden;
            border-radius: 12px;
            background-color: rgb(var(--color-secondary-background));
            position: relative;

            .inner{

                .img{
                    aspect-ratio: 4 / 3;

                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;

                        &.contain{ object-fit: contain; }
                    }
                }
            }

            .arrow--prev,
            .arrow--next{
                width: 32px;
                height: 32px;
                border-radius: 40px;
                background-color: #fffb;
                /* Fond opaque + ombre douce → flèche discrète et détachée. */
                box-shadow: 0 2px 8px rgba(6, 54, 71, 0.16);
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0;
                position: absolute;
                top: 50%;
                /* État masqué : 10px plus haut → glisse vers le bas jusqu'à sa
                   position finale (translateY(-50%)) au reveal. */
                transform: translateY(calc(-50% - 10px)) scale(.85);
                border: 0;
                /* Masquées par défaut : révélées au survol des images (voir la
                   media query `hover: hover` plus bas). Sur tactile, où il n'y a
                   pas de vrai survol, elles restent masquées — les dots suffisent
                   à indiquer qu'on peut faire défiler. */
                opacity: 0;
                visibility: hidden;
                transition: opacity .2s ease, visibility .2s ease, transform .2s ease;

                &.arrow--prev{ left: 48px; }
                &.arrow--next{ right: 48px; }
            }

            .dots{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 32px;
                display: flex;
                align-items: center;
                gap: 8px;

                .dot{
                    display: block;
                    width: 8px;
                    height: 8px;
                    border-radius: 4px;
                    background-color: rgb(var(--color-border));

                    &.active{
                        background-color: var(--red);
                    }
                }
            }

            /* Flèches révélées au survol des images — uniquement sur les
               devices avec un vrai hover (souris fine). Sur tactile
               (`hover: none`), la règle ne s'applique jamais → flèches masquées,
               les dots suffisent. Légère animation (fade + scale). */
            @media (hover: hover) and (pointer: fine){
                &:hover{
                    .arrow--prev,
                    .arrow--next{
                        opacity: 1;
                        visibility: visible;
                        transform: translateY(-50%) scale(1);
                    }
                }
            }
        }
    }

    .thumbs{
        --gap: 12px;
        min-width: 0;

        .container{
            overflow: hidden;

            .inner{
                padding: 2px;
                gap: var(--gap);

                .thumb{
                    aspect-ratio: 4 / 3;
                    width: 8vw;
                    flex: 0 0 auto;
                    border-radius: 12px;
                    background-color: rgb(var(--color-secondary-background));
                    overflow: hidden;
                    border: 2px solid var(--color-background);
                    cursor: pointer;

                    &.active{ border: 2px solid var(--red); }

                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;

                        &.contain{ object-fit: contain; }
                    }
                }
            }
        }
    }
}

@media(max-width: 1023.98px){

    .main-product{
        flex-direction: column;
        gap: 32px;

        .left{
            position: static;
            margin: 0 calc(var(--page-padding) * -1);
            width: calc(100% + 2 * var(--page-padding));

            .imgs{

                .container{
                    border-radius: 0;
                    width: 100%;

                    .img{
                        width: 100%;
                    }
                }
            }

            .thumbs{
                display: none;
            }
        }

        .right{
            width: 100%;
        }
    }

}

@media(min-width: 1024px){

    .main-product{
        justify-content: center;
    }

    .main-product .left{
        max-height: calc(100vh - 24px - var(--enky-header-height));
        flex: unset;

        /* 4:3 landscape image. We constrain the HEIGHT (fills the available
           vertical space like before) ; the WIDTH auto-computes from the
           aspect ratio (height × 4/3 → wider than the old square, which is
           what we want on large screens where the square felt too narrow). */
        .imgs{
            height: calc(100vh - 24px - var(--enky-header-height));
            aspect-ratio: 4 / 3;

            .container{
                aspect-ratio: 4 / 3;
                height: 100%;
            }

            .img{

                img{
                    object-fit: cover;
                }
            }
        }

        .thumbs{

            .thumb{
                width: 107px !important; /* 80 × 4/3 to match the image ratio */
                height: 80px;
            }
        }
    }

    .main-product .right{
        flex-shrink: 0;
    }

    .main-product.has-thumb .left{
        /* The image is 4:3 (landscape), sized by its HEIGHT (the limiting
           vertical dimension). Width = height × 4/3 → we expose THAT as a
           custom property so the thumbs row underneath can match the image
           width exactly. */
        --enky-main-image-height: calc(100vh - 24px - var(--enky-header-height) - 96px);
        --enky-main-image-width: calc(var(--enky-main-image-height) * 4 / 3);

        .imgs{ height: var(--enky-main-image-height); }

        .thumbs{
            width: var(--enky-main-image-width);
            max-width: 100%;
        }
    }
}

.product-heading{
    display: flex;
    flex-direction: column;

    .tags{
        display: flex;
        margin-bottom: 24px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .tag{
            background-color: #F7B024;
            border-radius: 6px;
            padding: 6px 8px;
            font-size: 1.2rem;
            font-weight: 800;
            line-height: 1;
        }
    }

    .vendor{ margin-bottom: 16px; }

    .subtitle{
        margin-top: 12px;

        /* Promo heading — "Dès [barré/mois] [remisé]/mois -X%" sur une ligne. */
        &.subtitle--promo{
            display: inline-flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 6px;
        }
        .subtitle-compare{
            text-decoration: line-through;
            opacity: .55;
            font-weight: 400;
            white-space: nowrap;
        }
        /* Prix remisé mis en avant (orange, un peu plus gros) dans le sous-titre. */
        .price-now{
            color: var(--red);
            font-weight: 800;
            font-size: 2rem;
        }
    }
}

/* ---- Promo / soldes : prix barré (compare-at) + badge -X% ----
   Rendu partout où le configurateur affiche un prix (cartes formule + recap,
   page produit ET quick-view). Inerte hors promo : les éléments ne sont rendus
   que si `formattedCompareAtPrice` / `isOnSale` sont vrais. */

/* Cartes formule : prix barré (petit, grisé) EMPILÉ au-dessus du prix remisé,
   aligné à droite. Le recap principal reste en ligne (baseline). */
.price-wrap{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.2;
}
.price-recap{
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.price-compare{
    text-decoration: line-through;
    opacity: .55;
    font-weight: 400;
    font-size: 1.4rem;
    white-space: nowrap;
}

/* En promo, le prix remisé passe en orange + un peu plus gros pour le mettre en avant. */
.price-wrap.on-sale .price{
    color: var(--red);
    font-size: 2rem;
}

/* "Vous économisez X €" sous le prix d'achat remisé — en vert. */
.promo-savings{
    color: #2e7d32;
    font-size: 1.3rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Badge -X% (fond orange). Centrage : `inline-flex` + `line-height: 1` + padding
   symétrique — la font ES Build a des métriques verticales asymétriques, un
   `inline-block` classique fait paraître le texte décentré. Le `translateY`
   compense le décalage résiduel de baseline propre à cette font. */
.promo-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px 4px;
    border-radius: 6px;
    background-color: var(--red, #E4572E);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

/* Badge sur la carte subscription : poussé à droite du header. */
.plan--label-subscription .plan-header .promo-badge{
    margin-left: auto;
}

/* Badge PROMO overlay sur l'image produit (carousel PDP + QV).
   Layout : "PROMO" en blanc + une pastille blanche opaque autour du taux. */
.imgs .container{ position: relative; }
.promo-image-badge{
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    border-radius: 8px;
    background-color: var(--red, #E4572E);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
}
.promo-image-badge__label{ transform: translateY(0.5px); }
/* Pastille blanche translucide autour du nombre (screen client). */
.promo-image-badge__pct{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px 3px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    line-height: 1;
}

/* Badge « En stock » overlay sur l'image produit (carousel PDP + QV).
   Bas-gauche : le badge PROMO occupe déjà le haut-gauche. Mêmes couleurs que la
   pastille des cartes collection (`.product-card__stock-badge`), mais à l'échelle
   PDP (1.3rem / 16px) comme `.promo-image-badge`. */
.product-image-stock-badge{
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 5px;
    border-radius: 8px;
    background-color: #fff;
    color: #1a1a1a;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    white-space: nowrap;
    pointer-events: none;
}
.product-image-stock-badge__dot{
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #1f9d55;
}

#enky-configurator,
.enky-configurator-qv .infos{
    display: flex;
    flex-direction: column;
    gap: 40px;

    .group{
        display: flex;
        flex-direction: column;
        gap: 16px;

        .option_name, .suboption_name{ line-height: 1; }

        [open-option-information]{ cursor: pointer; }

        .inputs{
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .inputs.direction-y{
            flex-direction: column;
        }

        .inputs.direction-x label{
            flex: 1;
            justify-content: center;
            text-align: center;
        }

        .inputs.swatches{
            margin: 0;
            margin-top: -4px;
            flex-wrap: wrap;

            label{
                width: 32px;
                height: 32px;
                padding: 0;
                border-radius: 50px;
                background-color: transparent;
                background: var(--bg);
                border: 2px solid #fff;
                outline: 1px solid transparent;
                position: relative;
            }

            .swatch-popup{
                position: absolute;
                bottom: calc(100% + 8px);
                left: 50%;
                transform: translateX(-50%);
                border-radius: 12px;
                padding: 8px;
                width: 240px;
                max-width: calc(100vw - 32px);
                z-index: 100;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.2s ease;
                font-size: 1.6rem;
                font-weight: 400;

                &::before{
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 0;
                    border-left: 8px solid transparent;
                    border-right: 8px solid transparent;
                    transition: left 0.2s ease;
                }

                /* Zone invisible pour faciliter le survol */
                &::after{
                    content: '';
                    position: absolute;
                    top: 100%;
                    left: 0;
                    width: 100%;
                    height: 8px;
                    background: transparent;
                }

                /* Flèche par défaut (popup au-dessus) */
                &::before{
                    top: 100%;
                    left: var(--arrow-position, 50%);
                    transform: translateX(-50%);
                    border-top: 8px solid rgb(var(--color-background));
                    border-bottom: none;
                }

                /* Flèche inversée (popup en dessous) */
                &[data-position="bottom"]::before{
                    top: auto;
                    bottom: 100%;
                    border-top: none;
                    border-bottom: 8px solid rgb(var(--color-background));
                }

                /* Zone invisible en bas quand popup en dessous */
                &[data-position="bottom"]::after{
                    top: auto;
                    bottom: 100%;
                }

                /* Flèche à droite (popup à gauche) */
                &[data-position="left"]::before{
                    top: 50%;
                    left: 100%;
                    transform: translateY(-50%);
                    border-top: 8px solid transparent;
                    border-bottom: 8px solid transparent;
                    border-left: 8px solid rgb(var(--color-background));
                    border-right: none;
                }

                /* Zone invisible à droite quand popup à gauche */
                &[data-position="left"]::after{
                    top: 0;
                    left: 100%;
                    width: 8px;
                    height: 100%;
                }

                /* Flèche à gauche (popup à droite) */
                &[data-position="right"]::before{
                    top: 50%;
                    right: 100%;
                    left: auto;
                    transform: translateY(-50%);
                    border-top: 8px solid transparent;
                    border-bottom: 8px solid transparent;
                    border-right: 8px solid rgb(var(--color-background));
                    border-left: none;
                }

                /* Zone invisible à gauche quand popup à droite */
                &[data-position="right"]::after{
                    top: 0;
                    right: 100%;
                    left: auto;
                    width: 8px;
                    height: 100%;
                }

                /* Masquer triangle et zone invisible quand popup en overlay */
                &[data-position="overlay"]::before,
                &[data-position="overlay"]::after{
                    display: none;
                }

                /* Popup repositionné par JS */
                &[data-positioned="true"]{
                    position: fixed;
                    bottom: auto;
                    left: auto;
                    transform: none;
                }

                .img{
                    aspect-ratio: 1 / 1;
                    width: 100%;

                    img{
                        object-fit: cover;
                        width: 100%;
                        height: 100%;
                        border-radius: 6px;
                    }
                }

                .title{
                    margin-top: 16px;
                    display: inline-block;
                }

                .description{
                    margin-top: 8px;

                    p, ul{ margin: .8rem 0; }

                    [open-option-information]{
                        display: inline-block;
                        margin-top: 1.6rem;
                        text-decoration: underline;
                        cursor: pointer;
                    }
                }
            }

            /* Afficher le popup au hover uniquement sur les appareils avec souris */
            @media (pointer: fine) {
                label:hover .swatch-popup{
                    opacity: 1;
                    pointer-events: all;
                }

                /* Masquer le popup pendant le scroll */
                &.scrolling label:hover .swatch-popup{
                    opacity: 0;
                    pointer-events: none;
                }
            }
        }

        label{
            padding: 24px 16px;
            border-radius: 8px;
            border: 1px solid rgb(var(--color-border));
            background-color: rgb(var(--color-secondary-background));
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 1.8rem;
            font-weight: 500;
            line-height: 1;

            &[unavailable]{
                opacity: .4;
            }

            .difference{
                flex: 1;
                text-align: right;
                font-size: 1.6rem;
                font-weight: 400;
            }
        }

        input:checked + label,
        label.active{
            border-color: var(--red);
            background-color: #FEFAF8;
        }

        /* Legacy swatch-label rule removed — the new card-style swatches own
           their layout in `enky-configurator.css` (rectangular cards with image
           on top, label/price stacked below). Pulling them up by -12px and
           flex-ending the content here was for the old round-swatch design. */
    }
}

@media(max-width: 1023.98px){

    #enky-configurator,
    .enky-configurator-qv .infos{

        .group{

            .option_name{ font-size: 1.8rem; }
        }
    }

}

.formula-picker{
    display: block;

    .container{
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;

        .plan--label-purchase,
        .plan--label-subscription{
            padding: 24px 16px;
            line-height: 1;
            border: 1px solid rgb(var(--color-border));
            border-radius: 8px;
            cursor: pointer;
            background-color: rgb(var(--color-secondary-background));
        }

        .plan--label-purchase.active,
        .plan--label-subscription.active{
            border-color: var(--red);
            background-color: #FEFAF8;
        }

        .plan--label-purchase{
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            font-weight: 600;

            .name{ font-size: 1.8rem; font-weight: 500; }

            .price{ font-weight: 800; }
        }

        .plan--label-subscription{
            display: flex;
            flex-direction: column;
            gap: 24px;

            .name{
                font-size: 1.8rem;
                font-weight: 500;
                line-height: 1.4;
            }
        }

        /* Shared header + info-button + tooltip styles — applied to BOTH the
           subscription card and the circular-purchase card. Anchor
           (`position: relative`) on `.plan-header` so the tooltip can position
           itself relative to the icon row. */
        .plan--label-subscription .plan-header,
        .plan--label-purchase .plan-header{
            display: flex;
            align-items: center;
            gap: 4px;
            position: relative;
        }

        .plan--label-subscription .plan-info-btn,
        .plan--label-purchase .plan-info-btn{
            width: 20px;
            height: 20px;
            padding: 2px;
            border: 0;
            background: transparent;
            color: #063647;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-bottom: .3em;
        }

        .plan--label-subscription .plan-info-icon,
        .plan--label-purchase .plan-info-icon{
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            color: #063647;
            pointer-events: none; /* clicks go to the button, not the SVG */
        }

        /* Formula info tooltip — pops below the "i" icon. One tooltip per card
           (subscription or purchase), single paragraph each, no title. Triggered
           on hover (with a small hide-delay) AND on click (sticky until click
           outside) — see `toggleFormulaInfo` / `showFormulaInfoFor` in JS. */
        .plan--label-subscription .formula-info-tooltip,
        .plan--label-purchase .formula-info-tooltip{
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            z-index: 10;
            width: min(320px, calc(100vw - 32px));
            padding: 16px 36px 16px 20px; /* right padding leaves room for the close button */
            background: #FFFFFF;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(13, 43, 64, 0.12);
            border: 1px solid #E7EAEC;
            color: #063647;
            font-weight: 400;
            cursor: default;
        }

        .plan--label-subscription .formula-info-tooltip__close,
        .plan--label-purchase .formula-info-tooltip__close{
            position: absolute;
            top: 8px;
            right: 8px;
            width: 24px;
            height: 24px;
            border: 0;
            padding: 0;
            background: transparent;
            color: #063647;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .plan--label-subscription .formula-info-tooltip__description,
        .plan--label-purchase .formula-info-tooltip__description{
            margin: 0;
            font-size: 1.3rem;
            font-weight: 400;
            line-height: 1.4;
            color: #063647;
        }

        .plan--label-subscription{

            /* Body (hidden until card is .active) — duration label, actions row,
               estimated delivery pill, then bullet benefits */
            .bottom{
                display: none;
                flex-direction: column;
                gap: 11px;

                .duration-label{
                    font-size: 1.6rem;
                    line-height: 1;
                    color: #063647;
                }

                .actions{
                    display: flex;
                    gap: 8px;
                    align-items: center;

                    select{
                        padding: 0 8px;
                        height: 48px;
                        background-color: #fff;
                        border-radius: 8px;
                        border: 1px solid #E7EAEC;
                        font-size: 1em;
                        line-height: 1;
                        color: inherit;
                        font-family: inherit;

                        &:focus-visible{ outline: 0; box-shadow: none; }
                    }

                    .plan--label-loa{
                        flex: 1;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        font-size: 1.4rem;

                        .toggle{
                            width: 32px;
                            height: 18px;
                            padding: 2px;
                            background-color: #E7EAEC;
                            border-radius: 50px;
                            display: flex;
                            justify-content: flex-start;

                            &:after{
                                content:'';
                                display: block;
                                height: 100%;
                                aspect-ratio: 1 / 1;
                                border-radius: 50%;
                                background-color: #fff;
                            }
                        }

                        span{ flex: 1; }
                    }

                    .plan--label-loa.active{

                        .toggle{
                            justify-content: flex-end;
                            background-color: var(--red);

                            &:after{
                                background-color: #fff;
                            }
                        }
                    }

                    .price{
                        font-weight: 800;
                    }
                }

                /* "Livraison estimée en X" pill — white bg, centered, with box icon */
                .delivery-estimate{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 4px;
                    padding: 8px 12px;
                    background-color: #fff;
                    border-radius: 8px;
                    font-size: 1.4rem;
                    line-height: 1.3;
                    color: #063647;

                    span{ margin-top: .2em; }

                    .delivery-icon{
                        width: 16px;
                        height: 16px;
                        flex-shrink: 0;
                    }

                    strong{ font-weight: 800; }
                }

                /* Residual value box — label gauche (avec info tooltip) + amount
                   droite. Même chrome blanc que `.delivery-estimate`, on ajoute
                   juste un layout `space-between`. */
                .residual-value{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 12px;
                    padding: 12px 16px;
                    background-color: #fff;
                    border-radius: 8px;
                    font-size: 1.4rem;
                    line-height: 1.3;
                    color: #063647;

                    .residual-value__label{
                        position: relative;
                        display: inline-flex;
                        align-items: center;
                        gap: 6px;
                    }

                    .residual-value__info-btn{
                        background: transparent;
                        border: 0;
                        padding: 0;
                        color: #063647;
                        cursor: pointer;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;

                        &:focus-visible{ outline: 0; box-shadow: none; }
                    }

                    /* Tooltip — même chrome que `.formula-info-tooltip` (popup
                       blanc, ombre douce, close en haut à droite). */
                    .residual-value__tooltip{
                        position: absolute;
                        top: 100%;
                        left: 0;
                        z-index: 10;
                        width: min(320px, calc(100vw - 32px));
                        padding: 16px 36px 16px 20px;
                        background: #FFFFFF;
                        border-radius: 12px;
                        box-shadow: 0 8px 24px rgba(13, 43, 64, 0.12);
                        border: 1px solid #E7EAEC;
                        color: #063647;
                        font-weight: 400;
                        cursor: default;
                    }

                    .residual-value__tooltip-close{
                        position: absolute;
                        top: 8px;
                        right: 8px;
                        width: 24px;
                        height: 24px;
                        border: 0;
                        padding: 0;
                        background: transparent;
                        color: #063647;
                        cursor: pointer;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .residual-value__tooltip-description{
                        margin: 0;
                        font-size: 1.3rem;
                        font-weight: 400;
                        line-height: 1.4;
                        color: #063647;
                    }

                    .residual-value__amount{
                        font-weight: 800;
                        flex-shrink: 0;
                    }
                }

                /* Benefits — checkmark + text, no bullets */
                .benefits{
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    li{
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        font-size: 1.6rem;
                        line-height: 1.3;
                        color: #063647;

                        .benefit-check{
                            width: 16px;
                            height: 16px;
                            flex-shrink: 0;
                            color: #063647;
                        }
                    }
                }
            }
        }

        .plan--label-subscription.active{

            .bottom{ display: flex; }
        }
    }
}

sticky-bar{
    padding: 24px 0;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 21;
    background-color: rgb(var(--color-background));
    display: flex;
    align-items: center;
    box-shadow: 0 4px 18px rgba(var(--color-foreground), 0.1);
    opacity: 0;
    transform: translateY(-50px);
    pointer-events: none;
    transition: opacity .3s, transform .3s;

    .txt{
        max-width: 500px;

        *{ line-height: 1; }

        .vendor{ margin-bottom: 8px; }
    }

    .right-group{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 32px;

        .prices{
            line-height: 1;
        }

        .buy-group{
            display: flex;
            gap: 8px;
        }
    }

    &.active{
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
    }
}

body.sticky-bar-active .custom--header{
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition: opacity .3s, transform .3s;
}

@media(max-width: 1023.98px){
    /* Mobile sticky-bar — 2-column layout :
         col 1, stacked  : vendor + title + price
         col 2, centered : the ATC button (spans both rows)
       `.right-group` uses `display: contents` so its children (`.price` and the
       `<button>`) participate directly in the parent grid. */
    sticky-bar{
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 12px;
        row-gap: 4px;
        align-items: center;

        .txt{
            flex: unset;
            width: auto;
            grid-column: 1;
            grid-row: 1;

            .vendor{
                margin-bottom: 4px;
            }
        }

        .right-group{
            display: contents;

            .price{
                grid-column: 1;
                grid-row: 2;
            }

            button{
                grid-column: 2;
                grid-row: 1 / span 2;
                align-self: flex-start;
                white-space: nowrap;
            }
        }
    }
}

.enky-configurator-qv[v-cloak]{ display: none !important; }

.popup{
    pointer-events: none;

    .bg{
        background-color: #000000;
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: opacity .5s;
        z-index: 999999998;
    }

    > .inner{
        position: fixed;
        right: 0;
        top: 0;
        width: 440px;
        max-width: 90%;
        height: 100vh;
        opacity: 0;
        transform: translateX(30px);
        transition: opacity .5s, transform .5s;
        z-index: 999999999;

        display: flex;
        flex-direction: column;

        .close{
            z-index: 1;
            position: absolute;
            right: 24px;
            top: 24px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            background-color: rgb(var(--color-secondary-background));
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    }

    &.active{
        pointer-events: all;

        .bg{ opacity: .2; }
        .inner{
            transform: translateX(0);
            opacity: 1;
        }
    }
}

.popup.quick-view{

    > .inner{

        .content{
            display: flex;
            flex-direction: column;
            padding: 24px 0 0;
            gap: 12px;
            height: 100%;

            > .title{
                height: 40px;
                margin: 0 calc(24px + 40px + 12px) 0 24px;
                display: flex;
                align-items: center;
            }

            .details{
                flex: 1;
                overflow-y: scroll;
                overflow-x: visible;

                .imgs{
                    width: 100%;
                    margin-bottom: 24px;

                    .container{
                        background-color: rgb(var(--color-secondary-background));
                        overflow: hidden;
                        position: relative;

                        .inner{

                            .img{
                                aspect-ratio: 4 / 3;

                                img{
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }

                                &:first-of-type img{ object-fit: contain; } 
                            }
                        }

                        .arrow--next, .arrow--prev{
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 40px;
                            background: rgba(13, 43, 64, 0.30);
                            backdrop-filter: blur(3px);
                            color: #fff;
                            padding: 0;
                            width: 32px;
                            height: 32px;
                            border: 0;

                            *{ stroke: #fff; }

                            &.arrow--prev{ left: 24px; }
                            &.arrow--next{ right: 24px; }
                        }

                        .dots{
                            position: absolute;
                            left: 50%;
                            bottom: 24px;
                            transform: translateX(-50%);
                            display: flex;
                            gap: 8px;

                            .dot{
                                display: block;
                                width: 8px;
                                height: 8px;
                                border-radius: 4px;
                                background-color: rgb(var(--color-border));

                                &.active{
                                    background-color: var(--red);
                                }
                            }
                        }
                    }
                }

                .infos{
                    /* zoom: .8; */
                    padding: 0 24px;
                    display: flex;
                    flex-direction: column;
                    --gap: 32px;
                    gap: var(--gap);

                    .product-heading{

                        h1{
                            font-size: var(--font-h2-size);
                        }
                    }

                    .additional-informations{
                        padding-top: var(--gap);
                        border-top: 1px solid rgb(var(--color-border));
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 24px 12px;

                        .information{
                            display: flex;
                            flex-direction: column;
                            gap: 12px;

                            span{ line-height: 1; }
                        }
                    }
                }
            }

            .recap{
                border-top: 1px solid rgb(var(--color-border));
                padding: 12px 24px;

                .price{
                    display: flex;
                    align-items: flex-start;

                    .h3{
                        font-size: 2rem;
                    }
                }

                .buy-group .inner{
                    margin-top: 4px;
                    display: flex;
                    gap: 8px;

                    button{
                        flex: 1;
                        white-space: unset;
                        line-height: 1;
                    }

                    &.with-quotes{
                        display: grid;
                        grid-template-columns: 1fr auto;

                        button{
                            grid-column: span 2;
                        }                        
                    }
                }
            }
        }
    }
}

@media(min-width: 1024px){
    .popup.quick-view{

        > .inner{

            .content{

                .details{

                    .imgs{
                        margin-bottom: 0;
                        position: fixed;
                        left: 0;
                        top: 32px;
                        width: 600px;
                        max-width: calc(100vw - 440px - 32px - 32px);
                        transform: translateX(calc((100% + 32px) * -1));
                        border-radius: 16px;
                        overflow: hidden;
                    }
                }
            }
        }
    }
}

.product-card.custom{
    cursor: pointer;
    display: block;
    /* Fix overflow horizontal sur grilles serrées (iPhone 12, etc.).
       Par défaut un item de grid/flex a `min-width: auto` → il refuse de
       rétrécir sous la largeur de son contenu intrinsèque. Avec un titre
       long ou un vendor non-breakable, la colonne reste trop large et
       les autres cartes débordent vers la droite. `min-width: 0` autorise
       le rétrécissement, et `overflow-wrap: anywhere` casse les mots
       trop longs (handles, dimensions type `2x1.5`, etc.) au lieu de
       laisser le mot pousser la largeur. */
    min-width: 0;
    overflow-wrap: anywhere;

    .img{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        aspect-ratio: 1 / 1;
        background-color: rgb(var(--color-secondary-background));
        border-radius: 16px;
        margin-bottom: 16px;
        overflow: hidden;
        position: relative;

        .product-card__condition-badge{
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 0;
            display: inline-flex;
            align-items: center;
            padding: 4px 6px 2px;
            background-color: #5e8c66;
            color: #fff;
            font-size: 12px;
            line-height: 1;
            font-weight: 400;
            border-radius: 6px;
            pointer-events: none;
        }

        .product-card__stock-badge{
            position: absolute;
            bottom: 12px;
            left: 12px;
            z-index: 0;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 6px 2px;
            background-color: #fff;
            color: #1a1a1a;
            font-size: 12px;
            line-height: 1;
            font-weight: 400;
            border-radius: 6px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
            pointer-events: none;
        }

        .product-card__stock-dot{
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: #1f9d55;
        }

        /* Badge promo — en haut à droite (les badges condition/stock sont à
           gauche), pastille orange compacte "-X%". */
        .product-card__promo-badge{
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 6px 2px;
            background-color: var(--red, #E4572E);
            color: #fff;
            font-size: 12px;
            line-height: 1;
            font-weight: 400;
            border-radius: 6px;
            pointer-events: none;
        }

        > img{
            width: var(--card-img-width, 100%);
            height: var(--card-img-width, 100%);
            object-fit: contain;
            opacity: 1;
            transition: opacity .3s;
        }

        .sec-img{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity .3s;

            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        &:has(.sec-img):hover{
            > img{ opacity: 0; }
            .sec-img{ opacity: 1; }
        }
    }

    /* ─── Scaling de la 1ère image par sub_category ─────────────────────────
       Pour modifier la taille d'une sub_category, change la valeur de la ligne correspondante.
       La valeur est appliquée à `--card-img-width` (% de la largeur du wrapper). */
    &[data-sub-category="poufs"]              { --card-img-width: 70%; }  /* ← Poufs */
    &[data-sub-category="interior-lightning"] { --card-img-width: 70%; }  /* ← Interior Lightning */
    &[data-sub-category="coffee-side-tables"] { --card-img-width: 70%; }  /* ← Coffee & Side Tables */

    .heading{
        /* Fix overflow horizontal interne (iPhone 12 Safari) : sans `min-width: 0`
           sur ces flex children, un titre long ou un prix non-breakable refuse
           de rétrécir et pousse la card au-delà de sa colonne. Complément du
           `min-width: 0` posé sur `.product-card.custom` (qui ne couvre que la
           grid externe — pas les flex internes). */
        min-width: 0;

        *{ line-height: 1.3; }

        .vendor{
            margin-bottom: 8px;
            display: inline-block;
            max-width: 100%;
        }

        .title{
            min-width: 0;
            max-width: 100%;
        }
    }

    .buying-grp{
        margin-top: 12px;
        display: flex;
        align-items: flex-end;
        gap: 8px;
        min-width: 0;

        .prices{
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            line-height: 1;
            gap: 8px;

            &:has(.on-request){ align-self: center; }

            /* Promo — ligne prix en soldes : "Dès [barré grisé] [remisé orange]".
               Inline avec wrap pour les cartes étroites (mobile 2 col). */
            .subscription.on-sale,
            .purchase.on-sale{
                display: flex;
                flex-wrap: wrap;
                align-items: baseline;
                gap: 2px 6px;
            }
            .price-now{
                color: var(--red);
                font-weight: 800;
            }

            /* `.on-request` is now an `<a>` (clickable to open the quick-view),
               so we reset the default link styles to keep the previous visual
               and add a subtle hover affordance. */
            .on-request{
                font-size: 1.8rem;
                color: inherit;
                text-decoration: none;
                cursor: pointer;
                width: auto;
                height: auto;
            }

            .on-request:hover{ text-decoration: underline; }
        }

        .quick-view{
            width: 40px;
            height: 40px;
            border-radius: 20px;
            padding: 0;
        }
    }
}

.product-details{
    padding-bottom: 48px;

    .product-details__grid{
        display: flex;
        flex-direction: column;
    }

    .product-details__left,
    .product-details__right{
        display: flex;
        flex-direction: column;
        gap: 0;

        &:not(:has(*)){ display: none; }
    }
}

product-details-block{
    display: block;

    .product-details__header{
        padding: 12px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        cursor: pointer;

        .product-details__title{
            margin: 0;
            line-height: 1;
        }

        .product-details__toggle{
            width: 32px;
            height: 32px;
            padding: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            .toggle-arrow{
                transition: transform 0.3s ease;
            }
        }
    }

    .product-details__wrapper{
        overflow: hidden;
        height: 0;
        transition: height 0.3s ease;
    }

    .product-details__content{
        padding: 16px;
        background-color: rgb(var(--color-secondary-background));
        border-radius: 12px;
        line-height: 1.6;

        > *:first-child{ margin-top: 0; }
        > *:last-child{ margin-bottom: 0; }
    }

    &.open{

        .product-details__wrapper{
            height: auto;
        }

        .product-details__toggle .toggle-arrow{
            transform: rotate(180deg);
        }
    }

    &.downloads{
        
        .grp{
            display: flex;
            flex-direction: column;
            gap: 16px;
            line-height: 1;
            padding: 24px 0;
            border-top: 1px solid rgb(var(--color-border));

            &:first-child{ border-top: none; padding-top: 0; }
            &:last-child{ padding-bottom: 0; }

            .file{
                display: flex;
                align-items: center;
                gap: 8px;

                span{ flex: 1; }
                a{ text-decoration: underline; }
            }
        }
    }

    &.technical-sheet{

        .product-details__content{
            *{ margin: 0; padding: 0; }

            *:first-child{
                margin-top: 0;
                padding-top: 0;
                border-top: 0;
            }

            *:last-child{
                margin-bottom: 0;
                padding-bottom: 0;
                border-bottom: 0;
            }
        
            h4{
                font-size: var(--font-h5-size);
                padding-top: 16px;
                margin: 16px 0;
                border-top: 1px solid rgb(var(--color-border));
            }

            h5{
                font-size: var(--font-h6-size);
                margin: 16px 0 12px;
            }

            ul{
                list-style:inside;
                padding-left: .3em;

                li{ margin: .3em 0; }
            }

            .sides{
                display: flex;
                align-items: center;
                margin: .5em 0;
                
                span{
                    flex: 1;

                    &:last-child{
                        text-align: right;
                        font-weight: 800;
                    }
                }
            }
        }
    }
}

@media(min-width: 1024px){

    .product-details{
        padding-bottom: 80px;

        .product-details__grid{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;

            .product-details__right{
                display: flex;
                flex-direction: column;
                gap: 24px;
            }
        }
    }

    product-details-block{
        border-bottom: none;

        .product-details__header{
            padding: 0 0 12px 0;
            cursor: default;

            .product-details__toggle{
                display: none;
            }
        }

        .product-details__wrapper{
            height: auto;
        }

        .product-details__content{
            padding: 32px;
        }
    }
}

.testimonial--custom{
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border-radius: 16px;
    overflow: hidden;

    > .img{
        margin: -24px -24px 0;

        img{
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 4 / 3;
            object-fit: cover;
        }
    }

    .author{

        span:last-child{
            margin-left: 8px;
            padding: 4px 8px;
            background-color: rgb(var(--color-border));
            border-radius: 30px;
            line-height: 1;
            font-size: 1.2rem;
            vertical-align: middle;
        }
    }

    .content{
        font-size: 1.4rem;
    }

    .product{
        padding-top: 24px;
        border-top: 1px solid rgb(var(--color-border));
        display: flex;
        align-items: center;

        .infos{
            flex: 1;
        }

        .img{
            width: 48px;
            height: 48px;
            padding: 5px;
            background-color: #fff;
            background-color: rgb(var(--color-secondary-background));
            border-radius: 12px;
        }
    }
}

.section--custom-faq{
    display: flex;
    align-items: flex-start;
    gap: 48px;

    .left--content{
        flex: 1;
        position: sticky;
        top: calc(var(--enky-header-height));
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;

        *{ line-height: 1; }
        > .content *{ line-height: 1.3; }
        > a{ margin-top: 16px; }
    }

    .right--content{
        flex: 1;

        collapsible-text.faq-item{
            padding: 24px 0;
            border-bottom: 1px solid rgb(var(--color-border));

            &:first-child{
                padding-top: 0;
            }

            .collapsible--header{
                font-size: 1.6rem;
                font-weight: 600;
                line-height: 1.3;

                svg{
                    width: 40px;
                    height: 40px;
                    padding: 12px;
                    background-color: rgb(var(--color-secondary-background));
                    border-radius: 40px;
                    flex-shrink: 0;
                    transition: transform 0.25s ease;
                }
            }

            .collapsible--content{
                padding-top: 16px;
                line-height: 1.6;
                color: var(--body-sec);
                font-weight: 400;
                font-size: 1.4rem;

                p{ margin: 0.8em 0; }
                p:first-child{ margin-top: 0; }
                p:last-child{ margin-bottom: 0; }
            }

            &[open]{
                .toggle-arrow{
                    transform: rotate(180deg);
                }
            }
        }
    }
}

@media(max-width: 1023.98px){

    .section--custom-faq{
        flex-direction: column;

        .left--content{
            flex: unset;
            position: static;
        }

        .right--content{
            flex: unset;
        }
    }

}

.locale-selector{
    padding-block: 16px;
    position: relative;

    .page-width{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;

        .left{
            max-width: 400px;
        }

        form{
            display: flex;
            align-items: center;
            gap: 8px 24px;

            .select--wrapper{
                background-color: rgb(var(--color-foreground));
                color: rgb(var(--color-background));
                height: 48px;
                border-radius: 8px;
                padding-inline: 16px;
                padding-top: .2em;
                width: 215px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .label{
                    font-size: 1.2rem;
                    color: var(--body-sec);
                }

                .select{
                    display: flex;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    position: relative;

                    img{
                        margin-top: -.3em;
                        pointer-events: none;
                        position: absolute;
                        left: 0;
                    }

                    select{
                        flex: 1;
                        background: transparent;
                        border: 0;
                        padding: 0;
                        margin: 0;
                        color: inherit;
                        font: inherit;
                        outline: none;
                        appearance: none;
                        -webkit-appearance: none;
                        cursor: pointer;
                        padding-right: 24px;
                        width: unset;
                        min-width: unset;
                        max-width: unset;
                    }

                    svg{
                        pointer-events: none;
                        position: absolute;
                        right: 0;
                        top: 50%;
                        translate: 0 -50%;
                    }

                    &:has(img) select{ padding-left: 32px; }
                }
            }

            .select--wrapper:nth-of-type(2){
                margin-left: -16px;
            }

            .submit{
                all: unset;
                font-weight: 800;
                cursor: pointer;
                margin-top: .5em;

                &:hover{
                    text-decoration: underline;
                }
            }

            .close{
                padding: 16px;
            }
        }
    }
}

@media(max-width: 1023.98px){
    body:has(.custom--header--wrapper.menu-open) .locale-selector{ display: none; }
}

@media(max-width: 999px){

    .locale-selector{

        .page-width{
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;

            .left{
                max-width: calc(100% - 60px);
            }

            form{

                .close{
                    position: absolute;
                    top: 12px;
                    right: var(--page-padding);
                }
            }
        }
    }
}

@media(max-width: 620px){

    .locale-selector{

        .page-width{

            form{
                width: 100%;
                flex-wrap: wrap;

                .select--wrapper{
                    width: unset;
                    flex: 1;

                    select{ min-width: unset; }
                }
            }
        }
    }
}

.custom-header{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;

    custom-header { display: block; }
}

.custom--header--wrapper{
    padding-block: 24px;

    /* Flatten the header's bottom corners only when a mega menu (or the
       mobile nav) is open. When only the search panel is open, keep the
       rounded bottom corners — the panel sits in front of level-2 and
       has its own rounded bottom, so the header can stay rounded. */
    &.menu-open:not(:has(.custom--search-panel.active)){
        .custom--header{ border-radius: 16px 16px 0 0; }
    }

    .custom--header{
        padding: 0 24px;
        border-radius: 16px 16px 16px 16px;
        position: relative;
        z-index: 103;
        background-color: rgb(var(--color-secondary-background));

        .custom--header--level-1{
            padding: 12px 0;

            .custom--header--level-1--content{
                display: grid;
                grid-template-columns: auto 1fr auto;
                align-items: center;
                gap: 8px;
            }
        }

        .custom--header--hamburger{
            display: none;
            padding: 0;
            background: none;
            border: none;
            cursor: pointer;
            color: rgb(var(--color-foreground));
            width: 40px;
            height: 40px;
            align-items: center;
            justify-content: center;

            svg{
                width: 24px;
                height: 24px;
            }
        }

        .custom--header--logo{
            display: flex;
            align-items: center;
            margin-right: 24px;

            .custom--header--logo-link{
                display: block;
                line-height: 0;

                img{
                    display: block;
                    max-width: var(--logo-width);
                    height: auto;
                }
            }

            .custom--header--logo-text{
                font-size: 2.4rem;
                font-weight: 700;
                color: rgb(var(--color-foreground));
                text-decoration: none;
            }
        }

        .custom--header--search{
            flex: 1;

            .custom--header--search-form{
                width: 100%;
                margin: 0;
            }

            .custom--header--search-trigger{
                width: 100%;
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 12px 16px;
                background-color: rgb(var(--color-background));
                border: 0;
                border-radius: 50px;
                cursor: pointer;

                svg{
                    flex-shrink: 0;
                    width: 24px;
                    height: 24px;
                    color: rgba(var(--color-foreground), 0.6);
                }

                .custom--header--search-input{
                    flex: 1;
                    background: none;
                    border: none;
                    outline: none;
                    color: var(--body-sec);
                    cursor: pointer;
                    font-size: inherit;
                }
            }
        }

        .custom--header--icons{
            display: flex;
            align-items: center;
            gap: 12px;

            .custom--header--icon-link{
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: rgb(var(--color-foreground));
                text-decoration: none;
                transition: opacity 0.2s ease;
                position: relative;
                width: 48px;
                height: 48px;
                border: 1px solid rgb(var(--color-border));
                border-radius: 48px;
                transition: background-color .3s;

                &:hover{
                    background-color: rgb(var(--color-border));
                }

                &.hidden{
                    display: none;
                }
            }

            .custom--header--cart{
                cart-count,
                .custom--header--cart-count{
                    position: absolute;
                    top: -4px;
                    right: -4px;
                    background-color: var(--red, rgb(var(--color-button)));
                    color: #fff;
                    font-size: 1rem;
                    font-weight: 700;
                    min-width: 18px;
                    height: 18px;
                    border-radius: 9px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0 4px;
                    line-height: 1;
                    padding-top: .2em;

                    span{
                        display: block;
                        line-height: 1;
                    }
                }
            }
        }

        .custom--header--level-2{
            padding: 20px 0;
            position: relative;

            .custom--header--nav{

                .custom--header--menu{
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    display: flex;
                    align-items: center;
                    gap: 24px;

                    .custom--header--menu-item{
                        position: relative;

                        .custom--header--menu-link{
                            display: flex;
                            align-items: center;
                            gap: 6px;
                            font-weight: 600;
                            color: rgb(var(--color-foreground));
                            text-decoration: none;
                            background: none;
                            border: none;
                            cursor: pointer;
                            white-space: nowrap;
                            padding: 0;
                            line-height: 1;
                            height: 1em;
                            font-weight: 600;

                            &.highlight{ color: var(--red, rgb(var(--color-button))); }
                            &:hover, &[aria-expanded="true"]{ text-decoration: underline; }
                        }
                    }
                }
            }
        }
    }

    .custom--header--overlay{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 101;
        display: block !important;

        &.active{
            opacity: 1;
            pointer-events: all;
        }
    }

    .custom--mega-menu{
        position: absolute;
        top: calc(100% - 25px);
        left: var(--page-padding);
        width: calc(100% - 2 * var(--page-padding));
        background-color: rgb(var(--color-secondary-background));
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
        z-index: 102;
        border-radius: 0 0 16px 16px;
        max-height: calc(100dvh - var(--enky-header-height) - 24px);
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        border-top: 1px solid rgb(var(--color-border));
        container-type: inline-size;

        &::-webkit-scrollbar {
            display: none;
        }

        &.active{
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
        }

        &.mega-global{
            display: flex;
            align-items: stretch;
            
            .left{
                display: block;
                flex: 10;
                min-width: 800px;
                max-width: 1000px;
                column-count: 4;
                column-gap: 32px;
                column-rule: 1px solid rgb(var(--color-border));

                .menu{
                    break-inside: avoid;
                    padding: 24px 24px;
                    
                    .title{
                        font-weight: 800;
                    }

                    .links{
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 12px;
                        margin-top: 24px;

                        .item:hover, .see-all:hover{ text-decoration: underline; }

                        .see-all{
                            font-size: 1.4rem;
                            font-weight: 800;
                            display: flex;
                            align-items: center;
                            gap: 4px;
                            
                            svg{ margin-top: -3px; }
                        }
                    }
                }
            }

            .right{
                flex: 3 1 0%;
                min-width: 0;

                a{
                    display: block;
                    height: 100%;

                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }

            @container (width < 1000px){
                .right{
                    display: none;
                }
            }
        }

        &.mega-simple{
            display: grid;
            grid-template-columns: auto 1fr;

            .left{
                padding: 24px 32px;

                .links{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 12px;

                    .item:hover{ text-decoration: underline; }
                }
            }

            .right{
                display: flex;
                gap: 12px;
                justify-content: flex-end;
                align-self: stretch;
                min-height: 300px;

                .mega-simple-card{
                    flex: 0 0 calc((100% - 24px) / 3);
                    overflow: hidden;

                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                    }
                }
            }

            @container (width < 600px){
                .right{
                    display: none;
                }
            }
        }

        &.mega-environment{
            display: flex;
            align-items: stretch;
            
            .left{
                flex: 10;
                min-width: 800px;
                max-width: 1000px;
                column-count: 4;
                column-gap: 32px;
                column-rule: 1px solid rgb(var(--color-border));

                .menu{
                    break-inside: avoid;
                    padding: 24px 24px;
                    
                    .title{
                        font-weight: 800;
                    }

                    .links{
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 12px;
                        margin-top: 24px;

                        .item:hover, .see-all:hover{ text-decoration: underline; }

                        .see-all{
                            font-size: 1.4rem;
                            font-weight: 800;
                            display: flex;
                            align-items: center;
                            gap: 4px;
                            
                            svg{ margin-top: -3px; }
                        }
                    }
                }
            }

            .right{
                padding: 24px;
                flex: 3 1 0%;
                min-width: 0;
                display: flex;
                flex-direction: column;
                gap: 24px;

                .actuality{

                    .content{
                        margin-top: 24px;
                        aspect-ratio: 16 / 9;
                        border-radius: 16px;
                        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 48.74%, rgba(0, 0, 0, 0.50) 100%), var(--bg);;
                        padding: 20px;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        gap: 8px;

                        *{
                            color: #fff;
                            margin: 0;
                            line-height: 1;
                        }
                    }
                }

                .brands{

                    .content{
                        margin-top: 24px;
                        display: grid;
                        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
                        gap: 12px;

                        .el{
                            border-radius: 50%;
                            aspect-ratio: 1 / 1;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            img{
                                width: 100%;
                                height: auto;
                            }

                            span{
                                margin: 0 10px;
                                text-align: center;
                                font-weight: 600;
                            }
                        }
                    }
                }
            }

            @container (width < 1000px){
                .right{
                    display: none;
                }
            }
        }

        &.mega-brand{
            padding: 24px;

            .container{
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
                gap: 24px;
                margin-top: 32px;

                .el{
                    flex: 1;
                    aspect-ratio: 1 / 1;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img{
                        width: 70%;
                        height: 70%;
                        object-fit: contain;
                    }

                    span{
                        margin: 0 10px;
                        text-align: center;
                        font-weight: 600;
                    }
                }
            }
        }

        .title-grp{
            display: flex;
            justify-content: space-between;
            font-weight: 800;

            a{
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 1.4rem;

                svg{ margin-top: -3px; }

                &:hover{ text-decoration: underline; }
            }
        }
    }

    .custom--search-panel{
        position: absolute;
        /* Anchor the panel to the top of level-2 so it overlays it. The
           positioning context is the section (.custom-header, sticky),
           whose height = wrapper padding-block (24+24) + .custom--header.
           --header-level-2-height is measured by custom-header JS. */
        top: calc(100% - var(--header-level-2-height, 60px) - 24px);
        left: var(--page-padding);
        width: calc(100% - 2 * var(--page-padding));
        /* Cover level-2 + the wrapper's 24px padding-block bottom that
           sits below .custom--header — otherwise either of those shows
           through as a white strip below the panel.
           60px fallback = Figma's level-2 height (py-20 + one line). */
        min-height: calc(var(--header-level-2-height, 60px) + 24px);
        background-color: rgb(var(--color-secondary-background));
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
        /* Must be above .custom--header (z-index: 103). The panel is a
           sibling of .custom--header inside .custom--header--wrapper, so
           its z-index competes directly with the header's, not with
           level-2's z-index inside the header. */
        z-index: 104;
        border-radius: 0 0 16px 16px;
        max-height: calc(100dvh - var(--enky-header-height) - 24px);
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        &.active{
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
        }

        .custom--search-panel--content{
            padding: 24px 0;

            [data-search-default]{

                .custom--search-panel--grid{
                    display: flex;
                    align-items: flex-start;

                    .custom--search-panel--menus{
                        column-count: var(--search-menus-columns, 2);
                        column-gap: 48px;

                        .custom--search-menu{
                            break-inside: avoid;
                            margin-bottom: 32px;
                            padding: 0 0;
                            width: 300px;
                            padding: 0 24px;

                            .custom--search-menu--list{
                                margin-top: 24px;
                                list-style: none;
                                display: flex;
                                flex-direction: column;
                                gap: 12px;

                                li{
                                    margin: 0;

                                    a:hover{ text-decoration: underline; }
                                }
                            }

                            .custom--search-menu-see_all{
                                margin-top: 24px;
                                display: block;
                                font-weight: 800;
                                font-size: 1.4rem;
                                display: flex;
                                align-items: center;
                                gap: 4px;

                                svg{
                                    margin-top: -3px;
                                }

                                &:hover{
                                    text-decoration: underline;
                                }
                            }
                        }
                    }

                    .custom--search-panel--products{
                        flex: 1;
                        padding: 0 24px;
                        display: flex;
                        flex-direction: column;
                        gap: 24px;

                        .custom--search-product-group--title{
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            a{
                                font-size: 1.4rem;
                                display: flex;
                                align-items: center;
                                gap: 4px;

                                svg{
                                    margin-top: -3px;
                                }

                                &:hover{
                                    text-decoration: underline;
                                }
                            }
                        }

                        .custom--search-product-list{
                            margin-top: 24px;
                            display: grid;
                            grid-template-columns: repeat(2, minmax(0, 1fr));
                            gap: 16px;

                            @media(max-width: 1023.98px){
                                grid-template-columns: minmax(0, 1fr);
                            }

                            .custom--search-product-item{
                                display: flex;
                                align-items: center;
                                gap: 24px;
                                min-width: 0;

                                .custom--search-product-item--image{
                                    width: 56px;
                                    height: 56px;
                                    border-radius: 8px;
                                    overflow: hidden;
                                    background-color: rgb(var(--color-background));

                                    img{
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                    }
                                }

                                .custom--search-product-item--info{
                                    flex: 1;
                                    display: flex;
                                    flex-direction: column;
                                    gap: 4px;
                                }

                                .custom--search-product-item--vendor{
                                    font-size: 1.2rem;
                                    color: rgba(var(--color-foreground), 0.6);
                                    text-transform: uppercase;
                                    letter-spacing: 0.5px;
                                }

                                .custom--search-product-item--title{
                                    font-size: 1.4rem;
                                    line-height: 1.4;
                                }
                            }
                        }
                    }
                }
            }

            [data-search-results]{

                .custom--search-panel--grid{
                    display: flex;
                    align-items: stretch;

                    .custom--search-suggestions{
                        padding: 0 24px;
                        width: 300px;
                        border-right: 1px solid rgb(var(--color-border));
                        height: 100%;

                        .custom--search-suggestions--list{
                            display: flex;
                            flex-direction: column;
                            gap: 8px;
                            margin-top: 12px;

                            .custom--search-suggestion-item{
                                all: unset;
                                cursor: pointer;

                                mark{
                                    background-color: transparent;
                                    color: inherit;
                                }

                                &:hover{
                                    text-decoration: underline;
                                }
                            }
                        }
                    }

                    .custom--search-panel--right{
                        padding: 0 24px;
                        flex: 1;

                        .custom--search-right-title{
                            padding-bottom: 20px;
                        }

                        .custom--search-products-results{
                            border-top: 1px solid rgb(var(--color-border));
                            padding: 20px 0;
                            
                            .custom--search-section--title{
                                margin-bottom: 20px;
                            }

                            .custom--search-products--list{
                                display: grid;
                                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                                align-items: center;
                                gap: 12px;

                                .custom--search-product-item{
                                    flex: 1;
                                    width: fit-content;
                                    display: flex;
                                    align-items: center;
                                    gap: 12px;

                                    .custom--search-product-item--image{
                                        width: 56px;
                                        height: 56px;
                                        border-radius: 8px;
                                        overflow: hidden;
                                        background-color: rgb(var(--color-secondary-background));

                                        img{
                                            width: 100%;
                                            height: 100%;
                                            object-fit: cover;
                                        }
                                    }

                                    .custom--search-product-item--info{
                                        flex: 1;
                                        display: flex;
                                        flex-direction: column;
                                    }

                                    .custom--search-product-item--vendor{
                                        font-size: 1.2rem;
                                        color: var(--body-sec);
                                    }

                                    .custom--search-product-item--title{
                                        font-weight: 800;
                                    }
                                }
                            }
                        }

                        .custom--search-collections{
                            border-top: 1px solid rgb(var(--color-border));
                            padding: 20px 0;

                            .custom--search-section--title{
                                margin-bottom: 20px;
                            }

                            .custom--search-collections--list{
                                display: flex;
                                align-items: center;
                                flex-wrap: wrap;
                                gap: 12px 24px;

                                .custom--search-collection-item{
                                    display: flex;
                                    align-items: center;
                                    gap: 16px;

                                    .custom--search-collection-item--image{
                                        width: 56px;
                                        height: 56px;
                                        flex-shrink: 0;
                                        border-radius: 4px;
                                        overflow: hidden;
                                        background-color: rgba(var(--color-foreground), 0.05);

                                        img{
                                            width: 100%;
                                            height: 100%;
                                            object-fit: cover;
                                        }
                                    }

                                    .custom--search-collection-item--title{
                                        font-size: 1.4rem;
                                        color: rgb(var(--color-foreground));
                                        font-weight: 500;
                                    }
                                }
                            }
                        }

                        .custom--search-vendors{
                            padding: 20px 0;
                            border-top: 1px solid rgb(var(--color-border));

                            .custom--search-section--title{
                                margin-bottom: 20px;
                            }

                            .custom--search-vendors--list{
                                display: grid;
                                grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
                                gap: 16px;

                                .custom--search-vendor-item{

                                    .custom--search-vendor-item--block{
                                        width: 100%;
                                        aspect-ratio: 1 / 1;
                                        position: relative;
                                        border-radius: 50%;
                                        overflow: hidden;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        background-color: rgb(var(--color-background));

                                        .custom--search-vendor-item--background{
                                            position: absolute;
                                            top: 0;
                                            left: 10%;
                                            width: 80%;
                                            height: 100%;
                                            background-size: contain;
                                            background-position: center;
                                            background-repeat: no-repeat;
                                            display: block;
                                        }

                                        .custom--search-vendor-item--logo{
                                            position: relative;
                                            z-index: 1;
                                            width: 70px;
                                            height: auto;
                                            object-fit: contain;
                                        }

                                        .custom--search-vendor-item--name{
                                            margin: 0 12px;
                                            text-align: center;
                                            font-weight: 600;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    
                    .custom--search-section--title{
                        width: 100%;
                        font-size: 1.6rem;
                        font-weight: 800;
                        display: flex;
                        justify-content: space-between;

                        h3{
                            font-size: 1.6rem;
                            font-weight: 800;
                        }

                        a{
                            font-size: 1.4rem;
                            display: flex;
                            gap: 4px;
                            align-items: center;

                            svg{
                                margin-top: -3px;
                            }
                        }
                    }
                }
            }
        }

        .custom--search-empty{
            font-size: 1.4rem;
            color: rgba(var(--color-foreground), 0.6);
            font-style: italic;
            margin: 0;
        }
    }

    @media(max-width: 1023.98px){
        padding-block-start: 12px;

        .custom--header{
            padding-inline: 12px;

            .custom--header--level-1{
                padding-block: 16px 4px;

                .custom--header--level-1--content{
                    display: flex;
                    gap: 12px;

                    .custom--header--logo{
                        margin-right: 0;
                    }

                    .custom--header--icons{
                        flex: 1;
                        justify-content: flex-end;
                    }
                }
            }

            .custom--header--hamburger{
                display: flex;
            }

            .custom--header--logo{
                .custom--header--logo-link img{
                    max-width: calc(var(--logo-width) * 0.8);
                }
            }

            /* Hide desktop search in level 1 */
            .custom--header--search-desktop{
                display: none !important;
            }

            /* Hide wishlist on mobile */
            .custom--header--wishlist-desktop{
                display: none !important;
            }

            /* Level 1.5: Mobile Mega Menu Navigation Header */
            .custom--header--level-1-5{
                display: none;
                align-items: center;
                gap: 12px;
                padding-block: 16px 4px;
                padding-inline: 12px;

                .custom--header--back-btn,
                .custom--header--close-btn{
                    background: none;
                    border: none;
                    padding: 8px;
                    margin: -8px;
                    cursor: pointer;
                    color: rgb(var(--color-foreground));
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    svg{
                        width: 16px;
                        height: 16px;
                    }
                }

                .custom--header--back-btn[hidden]{
                    display: none;
                }

                .custom--header--mega-title{
                    flex: 1;
                    font-weight: 600;
                    font-size: 1.6rem;
                    text-align: center;
                }
            }

            /* Level 2: Show search bar, hide navigation */
            .custom--header--level-2{
                padding-block: 4px 16px;

                /* Show mobile search */
                .custom--header--search-mobile{
                    display: block;
                    width: 100%;
                }

                /* Hide navigation */
                .custom--header--nav{
                    display: none;
                }
            }
        }

        .custom--mobile-nav{
            position: absolute;
            left: var(--page-padding);
            top: calc(100% - 24px);
            width: calc(100% - 2 * var(--page-padding));
            background-color: rgb(var(--color-secondary-background));
            opacity: 0;
            transform: translateY(-10px);
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease;
            z-index: 102;
            border-radius: 0 0 16px 16px;
            /* Use JS-calculated viewport height for reliable mobile support */
            height: calc(var(--app-height, 100vh) - var(--enky-header-height) - 24px);
            overflow: hidden;
            display: flex;
            flex-direction: column;

            &.active{
                opacity: 1;
                transform: translateY(0);
                pointer-events: all;
            }

            &:not(.active){
                *{ pointer-events: none !important; }
            }

            /* Levels Container */
            .mn-level{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                transform: translateX(100%);
                pointer-events: none;
                transition: transform 0.3s ease, opacity 0.3s ease;
                overflow-y: auto;
                -ms-overflow-style: none;
                scrollbar-width: none;

                &::-webkit-scrollbar {
                    display: none;
                }

                &.active{
                    opacity: 1;
                    transform: translateX(0);
                    pointer-events: all;
                }

                &.mn-level-0{
                    position: relative;
                    transform: translateX(0);
                    opacity: 1;
                    pointer-events: all;
                }

                .mn-content{
                    padding: 24px 16px;
                }
            }

            .mn-level-0{
                display: flex;
                flex-direction: column;

                .mn-content{
                    flex: 1;
                }
            }

            /* Links section */
            .mn-links{
                display: flex;
                flex-direction: column;
                gap: 8px;
                padding: 0 16px 16px;

                .link{
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    font-size: 1.4rem;
                    font-weight: 600;
                    padding: 8px;
                    border-radius: 8px;
                    background-color: rgb(var(--color-secondary-background));
                    cursor: pointer;

                    svg{
                        padding: 8px;
                        height: 40px;
                        width: 40px;
                    }
                }
            }

            /* Section Groups */
            .mn-section{
                padding: 24px 0;
                border-top: 1px solid rgb(var(--color-border));
            }

            /* Menu Styles */
            .mn-menu{
                display: flex;
                flex-direction: column;
                gap: 8px;

                .mn-item{

                    .mn-link{
                        all: unset;
                        padding: 12px 0;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;
                        cursor: pointer;
                        font-weight: 600;

                        &.highlight{
                            color: var(--red, rgb(var(--color-button)));
                        }

                        .chevron{
                            width: 16px;
                            height: 16px;
                            flex-shrink: 0;
                        }
                    }

                    .see-all{
                        display: none;
                    }
                }
            }

            .mn-level-1 .mn-menu{
                gap: 0;

                .mn-item{

                    .mn-link{
                        padding: 12px 0;
                        font-weight: 400;
                        justify-content: flex-start;
                        gap: 12px;

                        .img{
                            width: 40px;
                            height: 40px;
                            border-radius: 8px;
                            background-color: rgb(var(--color-secondary-background));
                            
                            img{
                                width: 100%;
                                height: 100%;
                                object-fit: contain;
                            }
                        }
                    }
                }
            }

            /* Brand Mega Menu Styles */
            .mn-mega-brand{

                .brands-grid{
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
                    gap: 8px 12px;

                    .brand-item{
                        aspect-ratio: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 50%;
                        background-color: rgb(var(--color-background));

                        img{
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }

                        span{
                            margin: 0 10px;
                            text-align: center;
                            font-weight: 600;
                        }
                    }
                }
            }

            .title-grp{
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 4px;
                flex-wrap: wrap;
                line-height: 1;
                font-weight: 800;
                margin-bottom: 24px;

                a{
                    font-size: 1.4rem;
                    display: flex;
                    align-items: center;
                    gap: 4px;

                    svg{
                        margin-top: -3px;
                    }
                }
            }

            .mn-content--secondary{
                padding: 24px 16px;
                display: flex;
                flex-direction: column;
                gap: 24px;

                .actuality{

                    .content{
                        aspect-ratio: 16 / 9;
                        border-radius: 16px;
                        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 48.74%, rgba(0, 0, 0, 0.50) 100%), var(--bg);
                        padding: 20px;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        gap: 8px;

                        *{
                            color: #fff;
                            margin: 0;
                            line-height: 1;
                        }
                    }
                }

                .brands{

                    .content{
                        display: grid;
                        grid-template-columns: repeat(4, 1fr);
                        gap: 12px;

                        .el{
                            border-radius: 50%;
                            aspect-ratio: 1;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            span{
                                margin: 0 0;
                                text-align: center;
                                font-weight: 600;
                            }
                        }
                    }
                }
            }
        }

        /* Mobile search styling */
        .custom--header--search-mobile{
            .custom--header--search-trigger{
                width: 100%;
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 12px 16px;
                background-color: rgb(var(--color-background));
                border: 1px solid rgba(var(--color-foreground), 0.2);
                border-radius: 8px;
                cursor: pointer;

                svg{
                    width: 20px;
                    height: 20px;
                    flex-shrink: 0;
                }

                .custom--header--search-input{
                    flex: 1;
                    background: transparent;
                    border: none;
                    outline: none;
                    font-size: 1.4rem;
                    color: rgb(var(--color-foreground));

                    &::placeholder{
                        color: rgba(var(--color-foreground), 0.6);
                    }
                }
            }
        }

        .custom--search-panel{

            .custom--search-panel--content{
                padding: 0;

                [data-search-default]{

                    .custom--search-panel--grid{
                        flex-direction: column;
                        gap: 0;

                        .custom--search-panel--menus{
                            padding: 0 16px;
                            display: flex;
                            flex-direction: column;
                            column-count: unset;
                            column-gap: 0;
                            width: 100%;

                            .custom--search-menu{
                                padding: 32px 0 0;
                                position: relative;
                                width: 100%;
                            
                                &::before{
                                    content: '';
                                    display: block;
                                    width: calc(100% + 32px);
                                    height: 1px;
                                    background-color: rgb(var(--color-border));
                                    position: absolute;
                                    left: -16px;
                                    top: 0;
                                }

                                .custom--search-menu--list{
                                    margin-top: 16px;
                                    gap: 8px;
                                }
                            }
                        }

                        .custom--search-panel--products{
                            padding: 32px 16px;
                            order: -1;
                            flex: unset;

                            .custom--search-product-list{

                                .custom--search-product-item{
                                    display: none;

                                    &:nth-child(1), &:nth-child(2){ display: flex; }
                                }
                            }
                        }
                    }
                }

                [data-search-results]{

                    .custom--search-panel--grid{
                        flex-direction: column;

                        .custom--search-suggestions{
                            padding: 32px 16px;
                            width: 100%;
                            border-right: 0;
                            height: unset;
                        }

                        .custom--search-panel--right{
                            padding: 0 16px;

                            .custom--search-right-title{
                                display: none !important;
                            }

                            .custom--search-products-results{
                                padding: 32px 0;
                            }

                            .custom--search-collections{
                                padding: 32px 0;
                            }

                            .custom--search-vendors{
                                padding: 32px 0;
                            }

                            .custom--search-no-results{
                                padding: 32px 0;
                                border-top: 1px solid rgb(var(--color-border));
                            }
                        }
                    }
                }
            }
        }

        &.menu-open{

            .custom--header--level-2::before{
                content:'';
                display: block;
                width: calc(100% + 24px);
                height: 1px;
                background-color: rgb(var(--color-border));
                position: absolute;
                left: -12px;
                bottom: 0;
            }
        }
    }

    /* When mobile nav has active level */
    &.has-level-active{
        @media(max-width: 1023.98px){
            .custom--header--level-1{
                display: none;
            }

            .custom--header--level-1-5{
                display: flex;
            }

            .custom--header--level-2{
                display: none;
            }

            .custom--mobile-nav{
                .mn-level.mn-level-0{
                    transform: translateX(-100%);
                    opacity: 0;
                    pointer-events: none;
                }
            }
        }
    }

    @media(min-width: 1024px){

        /* Level-2 stays in the layout (no display:none) so --header-height
           doesn't shrink when the search panel opens. The search panel's
           z-index (102) is higher than level-2's (1), so it paints above. */

        .custom--header--search-mobile{
            display: none;
        }

        &.menu-open{

            .custom--header--level-1::before{
                content:'';
                display: block;
                width: 100%;
                height: 1px;
                background-color: rgb(var(--color-border));
                position: absolute;
                left: 0;
                bottom: 0;
            }
        }

        .custom--mobile-nav, .custom--header--level-1-5{
            display: none;
        }
    }
}

.breadcrumbs{

    a, .breadcrumbs--sep{
        font-weight: 400;
        color: var(--body-sec);
    }

    .breadcrumbs--sep{
        margin: 0 4px;
        margin-top: -.2em;
    }

    .breadcrumbs--last{
        font-weight: 800;
    }
}

.account--page{
    
    .container{
        margin-top: 48px;
        display: flex;
        gap: 48px;
        align-items: flex-start;

        .menu{
            width: 250px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 6px;
            border-radius: 12px;
            border: 1px solid rgb(var(--color-border));

            .link{
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 10px 14px;
                font-weight: 800;
                opacity: .4;
                border-radius: 8px;

                svg{
                    width: 20px;
                    height: 20px;
                }

                span{
                    flex: 1;
                    margin-top: .3em;
                }

                &.active{
                    opacity: 1;
                    background-color: rgb(var(--color-secondary-background));

                    svg{ color: var(--red); }
                }

                &.logout{
                    position: relative;
                    padding-top: 16px;
                    margin-top: 6px;
                    border-radius: 0;
                    border-top: 1px solid rgb(var(--color-border));
                }
            }
        }

        .right{
            flex: 1;
        }
    }
}

@media(max-width: 1023.98px){

    .account--page{

        .container{
            flex-direction: column;

            .right{
                width: 100%;
            }
        }
    }
}

.section--account{

    .container{

        .right{

            .content{
                margin-top: 24px;
                display: flex;
                flex-direction: column;
                gap: 24px;

                .grp{
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    line-height: 1;

                    span:first-child{
                        opacity: .4;
                        font-size: 1.4rem;
                    }
                }
            }
        }
    }
}

.section--projects,
.section--quotes,
.section--wishlists {

    svg{
        width: 20px;
    }

    .loading-screen{
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: rgb(var(--color-background));
        z-index: 2;

        &.active{ display: block !important; }
    }

    .toast{
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        padding: 12px 24px;
        border-radius: 8px;
        color: #fff;
        font-size: 14px;
        z-index: 9999;
        opacity: 0;
        transition: opacity .3s, transform .3s;
        pointer-events: none;
        &.active{ opacity: 1; transform: translateX(-50%) translateY(0); }
        &--success{ background-color: #2e7d32; }
        &--error{ background-color: #c62828; }
    }

    .context-menu{
        position: relative;

        .context-menu__toggler{
            width: 48px;
            height: 48px;
            background-color: rgb(var(--color-secondary-background));
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 50%;
        }

        .context-menu__wrapper{
            position: absolute;
            right: 0;
            top: calc(100% + 12px);
            width: max-content;
            display: flex;
            flex-direction: column;
            gap: 2px;
            box-shadow: 0 19px 20px 0 rgba(13, 43, 64, 0.04);
            border: 1px solid rgb(var(--color-border));
            border-radius: 16px;
            padding: 8px;
            z-index: 1;
            background: rgb(var(--color-secondary-background));

            .context-menu__action{
                height: 48px;
                padding: 4px 16px;
                border-radius: 8px;
                display: flex;
                align-items: center;
                gap: 12px;
                cursor: pointer;

                span{ margin-top: .3em; }

                &:hover{
                    background-color: rgb(var(--color-background));
                }
            }
        }

        &:not(.active) .context-menu__wrapper{
            display: none;
        }
    }

    .navigation{
        margin-bottom: 32px;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        flex-wrap: wrap;

        .input{
            background-color: rgb(var(--color-secondary-background));
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 8px;
            max-width: 320px;
            width: 100%;
            height: 48px;
            padding: 4px 16px;

            input{
                all: unset;
                width: 100%;
                margin-top: .3em;
            }
        }
    }

    .content{
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .load-more{
        margin-top: 32px;
        display: flex;
        justify-content: center;
    }

    /* Shared card styles for project and quote items */
    .project,
    .quote{
        background-color: rgb(var(--color-secondary-background));
        padding: 24px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        line-height: 1;

        .left{
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
            cursor: pointer;
            text-decoration: none;
            color: inherit;

            .name{
                font-size: 1.8rem;
                font-weight: 800;
            }

            .date{
                font-size: 1.4rem;
                color: var(--body-sec);
            }
        }

        .context-menu .context-menu__toggler{
            background-color: rgb(var(--color-background));
        }
    }

    .project{

        .quotes{
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 120px;

            span:first-child{
                font-size: 1.4rem;
                color: var(--body-sec);
            }

            span:last-child{ font-weight: 600; }
        }
    }

    .quote{
        flex-wrap: wrap;

        .expiration-date,
        .articles,
        .total{
            padding: 0 24px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            font-size: 1.4rem;

            span:first-child{ color: var(--body-sec); }
            span:last-child{ font-weight: 600; }

            &.total span:last-child{ font-size: 1.8rem; }
        }
    }
}

@media(min-width: 750px){
    .section--projects,
    .section--quotes,
    .section--wishlists{

        .quote{

            .expiration-date,
            .articles,
            .total{
                width: 140px;

                span{
                    white-space: nowrap;
                }

                &.articles{ width: 100px; }
            }
        }
    }
}

.section--projects{

    .page-width:not(.current-project){
        .container{

            .right{

                .projects-header{
                    padding-bottom: 32px;
                    margin-bottom: 32px;
                    border-bottom: 1px solid rgb(var(--color-border));
                }
            }
        }
    }

    .page-width.current-project{
        max-width: 1080px;

        .heading{

            .back{
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;

                span{ margin-top: .3em; }
            }

            .title-grp{
                display: flex;
                align-items: flex-end;
                flex-wrap: wrap;
                gap: 12px;
                margin: 24px 0 32px;
                padding-bottom: 32px;
                border-bottom: 1px solid rgb(var(--color-border));

                .left{
                    flex: 1;

                    *{ white-space: nowrap; }

                    .date{
                        margin-top: 12px;
                        color: var(--body-sec);
                        font-size: 1.4rem;
                    }
                }

                .actions{
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 12px;

                    .action{
                        padding: 4px 16px;
                        display: flex;
                        align-items: center;
                        gap: 8px;
                    }
                }
            }
        }
    }
}

@media(max-width: 1023.98px){

    .section--projects,
    .section--quotes,
    .section--wishlists{

        .project{

            .quotes{
                min-width: unset;
            }
        }
    }
}

@media(max-width: 749.98px){

    .section--projects,
    .section--quotes,
    .section--wishlists{

        .content .quote{
            display: flex;
            justify-content: space-between;
            row-gap: 24px;

            .left{
                width: calc(100% - 60px);
                flex: unset;
            }

            .expiration-date,
            .articles,
            .total{
                order: 3;
                padding: 0;
            }

            .context-menu{
                order: 2;
            }
        }

    }

}

.section--quotes{

    .page-width:not(.current-quote){
        .container{

            .right{

                h2{
                    padding-bottom: 32px;
                    margin-bottom: 32px;
                    border-bottom: 1px solid rgb(var(--color-border));
                }
            }
        }
    }

    .page-width.current-quote{
        max-width: 1080px;

        .heading{

            .back{
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;

                span{ margin-top: .3em; }
            }

            .title-grp{
                display: flex;
                align-items: flex-end;
                flex-wrap: wrap;
                gap: 12px;
                margin: 24px 0 16px;
                padding-bottom: 32px;
                border-bottom: 1px solid rgb(var(--color-border));

                .left{
                    flex: 1;

                    *{ white-space: nowrap; }

                    .date{
                        margin-top: 12px;
                        color: var(--body-sec);
                        font-size: 1.4rem;
                    }
                }

                .actions{
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    flex-wrap: wrap;
                }

            }
        }

        .recap{
            margin-bottom: 48px;
            padding: 16px 0;
            border-bottom: 1px solid rgb(var(--color-border));
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 12px 48px;

            .el{
                line-height: 1;
                display: flex;
                flex-direction: column;
                gap: 8px;
                font-size: 1.4rem;

                span:first-child{ color: var(--body-sec); }
                span:last-child{ font-weight: 500; }
            }
        }

        .subscription-picker{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 48px;

            .label{
                display: flex;
                align-items: center;
                gap: 8px;

                span{
                    margin-top: .3em;
                }

                .info{
                    position: relative;
                    display: flex;
                    align-items: center;

                    svg{
                        cursor: pointer;
                    }   

                    .container{
                        margin: 0;
                        display: none;
                        position: absolute;
                        bottom: 100%;
                        left: calc(50% - 125px);
                        right: -50%;
                        width: 250px;
                        padding: 12px;
                        border-radius: 12px;
                        background-color: rgb(var(--color-secondary-background));
                        font-size: 1.4rem;
                        box-shadow: 0 19px 20px 0 rgba(13, 43, 64, 0.04);
                        border: 1px solid rgb(var(--color-border));
                    }

                    &:hover{

                        .container{ display: block; }
                    }
                }
            }

            .selects{
                border: 1px solid rgb(var(--color-border));
                height: 48px;
                display: flex;
                border-radius: 12px;
                overflow: hidden;

                .select{
                    background-color: rgb(var(--color-secondary-background));
                    position: relative;
                    width: unset;

                    &:nth-child(2){ border-left: 1px solid rgb(var(--color-border)); }

                    select{
                        all: unset;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        align-items: center;
                        height: 100%;
                        padding: 0 36px 0 16px;
                        width: 100%;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    svg{
                        pointer-events: none;
                        position: absolute;
                        right: 16px;
                        top: 50%;
                        translate: 0 -50%;
                    }
                }
            }
        }

        .navigation{

            .actions{
                display: flex;
                align-items: center;
                gap: 12px;
                flex-wrap: wrap;

                svg{ width: 16px; }
            }
        }

        .container{
            margin: 16px 0;
            background-color: rgb(var(--color-secondary-background));
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;

            .item{
                padding: 24px;
                border-top: 2px solid rgb(var(--color-background));
                display: flex;
                align-items: stretch;
                gap: 24px;
                position: relative;

                .img{
                    width: 88px;
                    height: 88px;
                    border-radius: 16px;
                    overflow: hidden;
                    background-color: rgb(var(--color-background));
                    display: block;

                    img, svg{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .infos{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    font-size: 1.4rem;
                    color: var(--body-sec);

                    .vendor{
                        font-size: 1.4rem;
                        font-weight: 400;
                        color: var(--body-sec);
                        text-decoration: none;

                        &:hover{ text-decoration: underline; }
                    }

                    .title{
                        color: rgb(var(--color-foreground));
                        font-size: 1.8rem;
                        margin: 8px 0 16px;
                        text-decoration: none;

                        &:hover{ text-decoration: underline; }
                    }
                }

                .actions{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    justify-content: space-between;
                    align-self: stretch;
                    gap: 24px;

                    .qtt-price{
                        display: flex;
                        align-items: stretch;
                        gap: 24px;

                        .qtt{
                            border: 1px solid rgb(var(--color-border));
                            border-radius: 8px;
                            height: 48px;
                            width: 100px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            font-size: 1.8rem;

                            &:has(button:disabled) {
                                cursor: not-allowed;
                            }

                            button{
                                all: unset;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                cursor: pointer;

                                &:disabled {
                                    opacity: 0.5;
                                    pointer-events: none;
                                }
                            }

                            input{
                                all: unset;
                                appearance: none;
                                -webkit-appearance: none;
                                margin: 0;
                                padding: 0;
                                width: 20px;
                                text-align: center;
                                outline: none;
                                padding-top: .3em;
                            }
                        }

                        /* Stack vertical aligné à droite : robuste quelle que soit
                           la taille du prix (plus de grille auto-auto fragile).
                           Ligne 1 = prix + /mo (.price__amount), puis durée, puis
                           valeur résiduelle, chacune sur sa propre ligne. */
                        .price{
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;
                            text-align: right;
                            font-size: 1.4rem;
                            gap: 2px;

                            .price__amount{
                                display: inline-flex;
                                align-items: baseline;
                                gap: 4px;
                                white-space: nowrap;
                                line-height: 1;
                            }

                            .price__per-month{
                                font-weight: 800;
                            }

                            .price__duration{
                                color: var(--body-sec);
                            }

                            .price__residual{
                                margin-top: 6px;
                                font-size: 1.2rem;
                                color: var(--body-sec);
                                white-space: nowrap;

                                strong{ font-weight: 700; color: var(--body); }
                            }

                            /* Promo : prix barré au-dessus (1ᵉ enfant), prix remisé
                               en orange + badge -X %. Reprend la DA des pages
                               produits (.price-compare / .promo-badge / var(--red)). */
                            .price-compare{
                                font-size: 1.2rem;
                                margin-bottom: 1px;
                            }

                            .promo-badge{
                                padding: 3px 6px 2px;
                                font-size: 1.1rem;
                                border-radius: 5px;
                            }

                            &.price--on-sale .price__amount .h4,
                            &.price--on-sale .price__amount .price__per-month{
                                color: var(--red);
                            }
                        }
                    }

                    .remove{
                        color: var(--body-sec);
                        font-size: 1.4rem;
                        text-decoration: underline;
                        text-underline-offset: 3px;
                        cursor: pointer;
                    }

                    /* Footer d'actions : [Déplacer] [Supprimer] alignés à droite. */
                    .item-actions-footer{
                        display: flex;
                        align-items: center;
                        gap: 16px;
                    }

                    /* « Déplacer » : lien texte (même DA que Supprimer) déclenchant
                       un menu déroulant de choix de catégorie (remplace le drag). */
                    .move-menu{ position: relative; }
                    .move-menu__toggler{
                        color: var(--body-sec);
                        font-size: 1.4rem;
                        text-decoration: underline;
                        text-underline-offset: 3px;
                        cursor: pointer;
                        white-space: nowrap;
                    }
                    /* Panneau ouvert vers le HAUT (le footer est en bas de l'item). */
                    .move-menu .context-menu__wrapper{
                        top: auto;
                        bottom: calc(100% + 8px);
                    }
                }

                .move{
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    background-color: rgb(var(--color-background));
                    width: 48px;
                    height: 48px;
                    border-radius: 48px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: grab;
                    transform: translate(-50%, 50%);
                    z-index: 1;
                }

                &:first-child{ border-top: 0; }
            }

            &:not(.uncategorized):empty{
                height: 100px;
            }
        }

        .category--title{
            margin-top: 32px;
            display: block;
        }

        /* Titre de section + menu contextuel (Supprimer) alignés sur une ligne. */
        .category--title-row{
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 32px;

            .category--title{ margin-top: 0; flex: 1; min-width: 0; }
            .category--menu .context-menu__toggler{ width: 40px; height: 40px; }
        }
    }

    .page-width.current-quote.dragging{
        cursor: grabbing !important;

        *{
            cursor: grabbing !important;
        }

        .items{

            .container{
                height: 100px;

                &.uncategorized:empty{
                    height: 100px;
                }

                .item{
                    opacity: 0;
                    height: 1px;
                }

                &.drag-over{
                    outline: 2px solid;
                }
            }
        }
    }
}

@media(max-width: 749.98px){

    .section--quotes{

        .page-width.current-quote{
         
            .heading{

                .title-grp{
                    position: relative;

                    .left{
                        flex: unset;
                        width: calc(100% - 60px);
                        min-height: 48px;
                        display: flex;
                        align-items: flex-end;

                        *{ white-space: unset; }
                    }

                    .actions{
                        width: 100%;

                        .context-menu{
                            position: absolute;
                            right: 0;
                            top: 0;
                        }
                    }
                }
            }

            .subscription-picker{
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;

                .selects{
                    width: 100%;
                }
            }

            .navigation{
                .input{
                    width: 100%;
                    max-width: unset;
                }

                .actions{
                    width: 100%;
                }
            }

            .items{

                .container{

                    .item{
                        position: relative;
                        display: grid;
                        grid-template-columns: 88px 1fr;
                        grid-template-rows: auto auto;
                        padding: 16px;

                        .img{
                            grid-column: 1 / span 1;
                            grid-row: 1 / span 1;
                        }

                        .infos{
                            grid-column: 2 / span 1;
                            grid-row: 1 / span 2;
                        }

                        .actions{
                            grid-column: 1 / span 1;
                            grid-row: 2 / span 1;

                            .qtt-price{
                                width: 100%;
                                flex-direction: column;
                                gap: 8px;
                                align-items: flex-start;

                                .qtt{
                                    width: 100%;
                                }

                                .price{
                                    gap: 4px 0;

                                    .h4{ font-size: inherit; }
                                    .price__per-month{ font-size: 70%; }
                                    .price__duration{ text-align: left; }
                                }
                            }

                            .remove{
                                position: absolute;
                                right: 16px;
                                bottom: 16px;
                            }
                        }

                        .move{
                            display: none;
                        }
                    }

                    &:empty{ height: 48px; }
                }
            }
        }
    }

}

.quotes-popup{

    .bg{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: .2;
        z-index: 20;
    }

    .inner{
        position: fixed;
        left: 50%;
        top: 50%;
        width: 90%;
        max-width: 500px;
        max-height: 90%;
        transform: translate(-50%, -50%);
        z-index: 21;
        border-radius: 16px;
        display: none;
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        .heading{
            padding: 24px 24px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgb(var(--color-border));

            h4{
                flex: 1;
            }

            .close{
                width: 48px;
                height: 48px;
                border-radius: 24px;
                background-color: rgb(var(--color-secondary-background));
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .form{
            padding: 24px 24px;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            border-bottom: 1px solid rgb(var(--color-border));

            > *{ width: 100%; }
            > .half{ width: calc(50% - 6px); }

            input{
                height: 48px;
                padding: 4px 16px;
                border: 1px solid rgb(var(--color-border));
                border-radius: 8px;
                
                &:focus-within{
                    border-color: currentColor;
                    outline: 1px solid currentColor;
                    outline-offset: 0;
                }
            }

            .country-select{
                position: relative;
                border: 1px solid rgb(var(--color-border));
                border-radius: 8px;
                height: 48px;
                padding: 0 16px;
                display: flex;
                align-items: center;

                img{
                    position: absolute;
                    left: 16px;
                    top: 50%;
                    translate: 0 -50%;
                    pointer-events: none;
                    border-radius: 4px;
                }

                select{
                    all: unset;
                    flex: 1;
                    margin-top: .3em;
                    padding-left: 36px;
                    line-height: 48px;
                }

                svg{
                    position: absolute;
                    right: 16px;
                    top: 50%;
                    translate: 0 -50%;
                    pointer-events: none;
                }

                &:has(select:focus-within){
                    border-color: currentColor;
                    outline: 1px solid currentColor;
                }

                &.disabled{
                    background-color: rgb(var(--color-border));
                    cursor: not-allowed;
                }
            }

            .checkbox--container{
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                margin-top: 8px;

                .checkbox{
                    display: flex;
                    width: 32px;
                    height: 18px;
                    justify-content: flex-start;
                    border: 2px solid rgb(var(--color-border));
                    padding: 1px;
                    border-radius: 50px;
                    position: relative;
                    flex-shrink: 0;

                    &::after{
                        content: '';
                        aspect-ratio: 1;
                        height: 100%;
                        background-color: rgb(var(--color-border));
                        border-radius: 50%;
                    }

                    &.active{
                        justify-content: flex-end;
                        background-color: var(--red);
                        border-color: var(--red);

                        &::after{
                            background-color: #fff;
                        }
                    }
                }

                span{ margin-top: .3em; }
            }

            .separator{
                margin: 12px 0;
                width: 100%;
                display: flex;
                align-items: center;
                gap: 16px;
                color: var(--body-sec);
                text-transform: capitalize;

                &::before, &::after{
                    content:'';
                    display: block;
                    flex: 1;
                    height: 1px;
                    background-color: rgb(var(--color-border));
                }
            }

            .label{
                margin-top: 12px;
                font-weight: 800;
            }

            .copy-link{

                .container{
                    margin-top: 0;
                    display: flex;
                    cursor: pointer;
                    gap: 8px;
                    background-color: rgb(var(--color-secondary-background));
                    padding: 16px;
                    gap: 8px;
                    border-radius: 8px;
                    flex-direction: row;

                    .url{
                        flex: 1;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }

            .input-btn{
                display: flex;
                gap: 8px;

                input{
                    flex: 1;
                }

                button{
                    padding: 0 16px;
                }
            }

            .shared-list{
                display: flex;
                flex-direction: column;
                gap: 16px;

                .shared-list__title{
                    color: var(--body-sec);
                    font-size: 1.4rem;
                margin-bottom: -8px;
                }

                .shared-list__item{
                    display: flex;
                    align-items: center;
                    gap: 16px;

                    .img{
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background-color: rgb(var(--color-foreground));
                        color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 2rem;
                        text-transform: uppercase;
                        padding-top: .3em;
                    }

                    .txt{
                        display: flex;
                        flex-direction: column;

                        span:nth-child(2){
                            font-size: 1.4rem;
                            color: var(--body-sec);
                        }
                    }
                }
            }
        }

        .actions{
            padding: 24px 24px;
            display: flex;
            align-items: center;
            gap: 12px;

            button{
                flex: 1;
            }
        }
    }

    &.active{
        .bg{ display: block !important; }
        .inner{
            display: block;
        }
    }
}

#toasts{
    position: fixed;
    bottom: 32px;
    right: var(--page-padding);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    max-width: min(calc(100% - 2 * var(--page-padding)), 400px);
    z-index: 9999999999;

    .toast{
        padding: 16px 16px;
        background-color: rgb(var(--color-background));
        border: 1px solid rgb(var(--color-border));
        box-shadow: 0 19px 20px #0d2b400a;
        border-radius: 8px;
        opacity: 0;
        transform: translateY(-20px);
        animation: toast 0.4s ease forwards;
        display: flex;
        align-items: center;
        gap: 8px;
        width: fit-content;

        span{
            margin-top: .2em;
            flex: 1;

            a{
                text-decoration: underline;
            }
        }

        &:before {
            content: "";
            width: 22px;
            height: 22px;
            display: block;
            background-position: center;
            background-size: 100% auto;
            background-repeat: no-repeat;
        }

        &.success:before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM17.2071 9.70711C17.5976 9.31658 17.5976 8.68342 17.2071 8.29289C16.8166 7.90237 16.1834 7.90237 15.7929 8.29289L10.5 13.5858L8.20711 11.2929C7.81658 10.9024 7.18342 10.9024 6.79289 11.2929C6.40237 11.6834 6.40237 12.3166 6.79289 12.7071L9.79289 15.7071C10.1834 16.0976 10.8166 16.0976 11.2071 15.7071L17.2071 9.70711Z' fill='%23079455'/%3E%3C/svg%3E");
        }

        &.error:before {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3Ecross-circle%3C/title%3E%3Cdesc%3ECreated with Sketch Beta.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' sketch:type='MSPage'%3E%3Cg id='Icon-Set-Filled' sketch:type='MSLayerGroup' transform='translate(-570.000000, -1089.000000)' fill='%23B91C1C'%3E%3Cpath d='M591.657,1109.24 C592.048,1109.63 592.048,1110.27 591.657,1110.66 C591.267,1111.05 590.633,1111.05 590.242,1110.66 L586.006,1106.42 L581.74,1110.69 C581.346,1111.08 580.708,1111.08 580.314,1110.69 C579.921,1110.29 579.921,1109.65 580.314,1109.26 L584.58,1104.99 L580.344,1100.76 C579.953,1100.37 579.953,1099.73 580.344,1099.34 C580.733,1098.95 581.367,1098.95 581.758,1099.34 L585.994,1103.58 L590.292,1099.28 C590.686,1098.89 591.323,1098.89 591.717,1099.28 C592.11,1099.68 592.11,1100.31 591.717,1100.71 L587.42,1105.01 L591.657,1109.24 L591.657,1109.24 Z M586,1089 C577.163,1089 570,1096.16 570,1105 C570,1113.84 577.163,1121 586,1121 C594.837,1121 602,1113.84 602,1105 C602,1096.16 594.837,1089 586,1089 L586,1089 Z' id='cross-circle' sketch:type='MSShapeGroup'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        &.warning:before {
            background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg id=%27SVGRepo_bgCarrier%27 stroke-width=%270%27%3E%3C/g%3E%3Cg id=%27SVGRepo_tracerCarrier%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3C/g%3E%3Cg id=%27SVGRepo_iconCarrier%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75ZM12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z%27 fill=%27%23e06f42%27%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
        }

        &.info:before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8.00016 14.6667C11.6821 14.6667 14.6668 11.6819 14.6668 8.00004C14.6668 4.31814 11.6821 1.33337 8.00016 1.33337C4.31826 1.33337 1.3335 4.31814 1.3335 8.00004C1.3335 11.6819 4.31826 14.6667 8.00016 14.6667Z' stroke='%2386959F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M8 10.6667V8' stroke='%2386959F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M8 5.33337H8.00667' stroke='%2386959F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
        }
    }
}

@keyframes toast {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-section{
    display: flex;
    gap: 24px;

    > *{ flex: 1; }
}

.lookbook--wrapper{
    align-self: center;
    display: flex;

    .lookbook--inner{
        position: relative;
        align-self: center;
        flex: 1;

        img{ border-radius: 16px; }

        .lookbook--item{
            position: absolute;
            left: var(--x);
            top: var(--y);
            transform: translate(calc(var(--x) * -1), calc(var(--y) * -1));
            z-index: 1;

            .pin{
                display: flex;
                align-items: center;
                justify-content: center;
                padding-top: .2em;
                border-radius: 50%;
                font-weight: 800;
                width: 40px;
                height: 40px;
                background-color: #fff;
                cursor: zoom-in;
            }

            .product--wrapper{
                position: absolute;
                left: 50%;
                bottom: calc(100% - 40px);
                transform: translateX(-50%);
                width: max-content;
                padding-bottom: 52px;
                padding-top: 0;
                display: none;

                .product--inner{
                    background-color: rgb(var(--color-background));
                    border-radius: 16px;
                    padding: 12px;
                    display: flex;
                    align-items: center;
                    gap: 16px;
                    border: 1px solid rgb(var(--color-border));

                    .buying-grp{
                        display: flex;
                        align-items: center;
                        gap: 16px;

                        .prices{
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;
                        }

                        button{
                            padding: 0;
                            aspect-ratio: 1;
                            flex-shrink: 0;
                        }
                    }
                }
            }

            /* Vertical flip: tooltip below the pin */
            &[data-tip-y="bottom"] .product--wrapper{
                bottom: auto;
                top: 100%;
                padding-bottom: 0;
                padding-top: 12px;
            }

            /* Horizontal flip: align tooltip to pin's left edge */
            &[data-tip-x="left"] .product--wrapper{
                left: 0;
                transform: none;
            }

            /* Horizontal flip: align tooltip to pin's right edge */
            &[data-tip-x="right"] .product--wrapper{
                left: auto;
                right: 0;
                transform: none;
            }

            /* Mobile: tooltip absolute (vertical = vs pin), horizontal = vs screen */
            @media (max-width: 767.98px){
                &[data-tip-screen] .product--wrapper{
                    max-width: calc(100vw - 16px);
                    width: max-content;
                    transform: none;

                    .product--inner{
                        padding: 8px;
                        gap: 10px;
                        border-radius: 12px;
                        font-size: 12px;

                        .img img{ width: 48px; height: 48px; }

                        .buying-grp{
                            gap: 10px;

                            button{
                                width: 36px;
                                height: 36px;
                            }
                        }
                    }
                }
                &[data-tip-screen="left"] .product--wrapper{
                    left: var(--tip-abs-left);
                    right: auto;
                }
                &[data-tip-screen="right"] .product--wrapper{
                    right: var(--tip-abs-right);
                    left: auto;
                }
            }

            &:hover{

                .product--wrapper{ display: block; }
            }
        }

        .text{
            margin-top: 12px;
        }
    }

    .lookbook--products{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 12px;

        > * { margin-inline: 64px; }

        .items{
            align-self: stretch;
            text-align: left;
            margin-block: 36px;
            display: flex;
            flex-direction: column;
            gap: 24px;

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

                .i{
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    border: 1px solid rgb(var(--color-border));
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding-top: .2em;
                    font-size: 1.4rem;
                    font-weight: 800;
                }

                .img{
                    background-color: rgb(var(--color-secondary-background));
                    border-radius: 8px;
                    width: 80px;
                    height: 80px;

                    img{
                        object-fit: cover;
                        width: 100%;
                        height: 100%;
                    }
                }

                .infos{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: 4px;

                    .title{ font-size: 1.8rem; }
                }

                .prices{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                }
            }
        }

        a{
            --color-secondary-button: 6, 54, 71;
            --color-secondary-button-border: 6, 54, 71;
            --color-secondary-button-text: 255, 255, 255;
        }
    }
}

.page-full > .lookbook--wrapper .lookbook--inner img{ border-radius: 0; }

.title-text{
    padding-block: 32px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 16px;

    > *{ margin-inline: 64px; }

    .txt{

        p:empty{
            display: block;
            height: 1.4em;
        }
    }
}

@media(max-width: 767.98px){
    .custom-section{
        flex-direction: column;

        > *{ flex: unset; }
    }

    .title-text{

        > * { margin-inline: 24px; }
    }
}

.products-grid{

    .products{
        margin-top: 32px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;

        .product-card:nth-child(7){ grid-column: span 2; }
    }
}

@media(max-width: 999px){
    .products-grid{

        .products{
            grid-template-columns: repeat(3, 1fr);

            .product-card:nth-child(7){ grid-column: span 1; }
            .product-card:nth-child(5){ grid-column: span 2; }
        }
    }
}

@media(max-width: 767.98px){
    .products-grid{

        .products{
            grid-template-columns: repeat(2, 1fr);
            gap: 24px 12px;

            .product-card:nth-child(5){ grid-column: span 1; }
            .product-card:nth-child(3n){ grid-column: span 2; }
        }
    }
}

.section--inspirations{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 8vw);
    gap: 24px;

    .inspirations--page{
        position: relative;
        
        img{
            object-fit: cover;
            width: 100%;
            height: 100%;
            border-radius: 16px;
        }

        &:nth-child(1){
            grid-column: 1 / span 1;
            grid-row: 1 / span 2;
        }

        &:nth-child(2){
            grid-column: 1 / span 1;
            grid-row: 3 / span 3;
        }

        &:nth-child(3){
            grid-column: 2 / span 1;
            grid-row: 1 / span 5;
        }

        &:nth-child(4){
            grid-column: 3 / span 1;
            grid-row: 4 / span 2;
        }

        &:nth-child(5){
            display: none;
        }

        .abs{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 48.74%, rgba(0, 0, 0, 0.50) 100%);
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 32px;
            gap: 8px;

            *{ color: #fff; }
        }
    }

    .inspirations--title_block{
        grid-column: 3 / span 1;
        grid-row: 1 / span 3;
        border: 1px solid rgb(var(--color-border));
        border-radius: 16px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 12px;

        a{
            --color-button: 6, 54, 71;
        }
    }
}

@media(max-width: 999px){
    .section--inspirations{

        .inspirations--page .abs, .inspirations--title_block{
            padding: 16px;
        }
    }
}

@media(max-width: 768px){

    .section--inspirations{
        display: flex;
        flex-direction: column;

        .inspirations--title_block{ order: 3; }

        .inspirations--page:nth-child(3){ order: 4; }
        .inspirations--page:nth-child(4){ order: 5; }
    }

}

.main-inspirations{
    box-sizing: border-box;
    /* Native CSS-columns masonry — distributes cards across columns and
       balances them automatically based on each card's height. Replaces
       the previous JS absolute-positioning approach. */
    column-count: 3;
    column-gap: 24px;

    @media(max-width: 1199px){
        column-count: 2;
    }
    @media(max-width: 749px){
        column-count: 1;
    }

    .inspirations--page{
        display: block;
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        box-sizing: border-box;
        margin-bottom: 24px;
        /* Keep each card in a single column */
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        width: 100%;

        img{
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Vary image aspect ratios so the masonry has visual rhythm
           (matches Figma node 7824:119823 — short / tall / medium). */
        &:nth-of-type(3n+1) img { aspect-ratio: 432 / 514; }
        &:nth-of-type(3n+2) img { aspect-ratio: 432 / 705; }
        &:nth-of-type(3n+3) img { aspect-ratio: 432 / 541; }

        .abs{
            position: absolute;
            width: calc(100% - 16px);
            left: 8px;
            bottom: 8px;
            padding: 24px;
            border-radius: 10px;
            background: rgba(13, 43, 64, 0.05);
            backdrop-filter: blur(25.75px);
            display: flex;
            flex-direction: column;
            gap: 16px;

            > .title, > .date{ color: #fff; }

            button{
                width: fit-content;
            }
        }
    }
}

.section-image-gallery{

    .f-column{

        .text{
            font-weight: 600;
            margin-top: 24px;
            display: block;
        }
    }
}

.section--brands-list{

    .container{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        grid-template-rows: repeat(3, auto);
        grid-auto-rows: 0;
        overflow: hidden;
        margin: -6px;

        .el{
            margin: 6px;
            border-radius: 8px;
            aspect-ratio: 1;
            border-radius: 50%;
            overflow: hidden;
            background-color: rgb(var(--color-secondary-background));
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            line-height: 1;
            transition: transform .3s, box-shadow .3s;

            .image{
                width: 70%;
                height: 70%;
                object-fit: cover;
            }

            .logo{
                width: 70%;
                height: 100%;
                object-fit: contain;
                object-position: center;
            }

            span{
                line-height: 1;
                margin-inline: 10px;
            }

            &:hover{
                transform: scale(1.05);
                box-shadow: 0 5px 10px 0 rgba(13, 43, 64, 0.1);
            }
        }
    }
}

.section--main-brands{

    .search-grp{
        grid-column: 1 / -1;
        background: rgb(var(--color-secondary-background));
        width: 100%;
        height: 48px;
        max-width: 350px;
        border-radius: 50px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        gap: 8px;

        .brands-search{
            margin-top: .3em;
            display: block;
            padding: 0;
            height: 100%;
            border-radius: 50px;
            font-size: inherit;
            background: transparent;
            color: inherit;
            outline: none;
            border: none;
            width: 100%;
        }
    }

    .brands-layout{
        display: flex;
        gap: 96px;
        align-items: flex-start;
    }

    .brands-nav{
        position: sticky;
        bottom: 16px;
        align-self: flex-end;
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex-shrink: 0;

        .brands-nav__letter{
            font-size: 1.8rem;
            font-weight: 500;
            line-height: 1;
            text-transform: uppercase;
            text-align: center;
            color: var(--body-sec);
            text-decoration: none;
            padding: 2px 4px;
            border-radius: 2px;
            text-underline-offset: 4px;

            &:hover{
                color: rgb(var(--color-foreground));
                text-decoration: underline;
            }
        }
    }

    .brands-grid{
        flex: 1;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 48px 64px;
        align-items: start;
    }

    .brands-group{
        display: contents;

        &[hidden]{ display: none; }
    }

    .brands-col{
        display: flex;
        flex-direction: column;
        gap: 8px;

        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        li{
            line-height: 1.4;

            a:hover{ text-decoration: underline; }
        }
    }

    .brands-letter{
        display: block;
        margin-bottom: 4px;
        height: 1em;
        line-height: 1em;
        scroll-margin-top: calc(var(--enky-header-height));
    }

    li[hidden]{ display: none; }

    &.is-filtering{

        .brands-grid{
            display: flex;
            flex-direction: column;
            gap: 24px;

            .brands-group{
                display: flex;
                flex-direction: column;
                gap: 0;

                .brands-letter{ display: none; }

                .brands-col:first-child .brands-letter{
                    display: block;
                }
            }
        }
    }
}

@media(max-width: 999.98px){

    .section--main-brands{

        .brands-grid{
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        }
    }

}

@media(max-width: 767.98px){

    .section--main-brands{

        .brands-layout{
            gap: 32px;
        }

        .brands-grid{
            gap: 24px;
            grid-template-columns: 1fr 1fr;
        }
    }

}

.section--quotes .item .price__per-month {
    font-size: 1.4rem;
}

.section--quotes .item .price__duration {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--body-sec);
}

/* (Style de .price__residual : géré dans la règle `.price` flex-column
   sous .page-width.current-quote — voir plus haut.) */

.quote-summary__btn-submit .loader {
    width: 40px;
}

.section--quotes .title-grp .left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: 12px;
}

.quote-status-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 8px 4px;
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 100%;
    white-space: nowrap;
    margin-bottom: .3em;
}

.quote-status-tag--sent {
    background: #EEF3EF;
    color: #5F8C66;
}
.quote-status-tag--expired {
    background: #F7F7F6;
    color: #063647;
}
.quote-status-tag--accepted {
    background: #598C67;
    color: #FFFFFF;
}
.quote-status-tag--draft {
    background: #FEB134;
    color: #FFFFFF;
}
/* "En cours d'approbation" — fond bleu doux + texte foncé, distingue clairement
   de "Envoyé" (vert clair) et "Brouillon" (orange). */
.quote-status-tag--pending-review {
    background: #DDE6EA;
    color: #063647;
}

.quote-status-tag--small {
    padding: 4px 6px 2px;
    font-size: 1rem;
    border-radius: 4px;
}

.name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quote-status-banner {
    margin: 0 0 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 16px;
    border-radius: 8px;
    background: rgba(94, 140, 102, 0.1);
    color: #063647;
}

.quote-status-banner__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quote-status-banner__title {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 130%;
}

.quote-status-banner__description {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 130%;
}

.quote-status-banner__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: #5E8C66;
    border-radius: 50%;
}

.quote-status-banner__icon svg {
    display: block;
}

/* Variante "En cours d'approbation" — palette bleue plutôt que verte
   (le devis n'est pas encore validé, juste en attente). */
.quote-status-banner--pending-review {
    background: rgba(6, 54, 71, 0.08);
}
.quote-status-banner--pending-review .quote-status-banner__icon {
    background: #063647;
    color: #FFFFFF;
}

.quote-addresses {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgb(var(--color-border));
}

.quote-addresses--empty {
    margin-top: 12px;
}

.quote-address {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.quote-address__label {
    font-size: 1.4rem;
    font-weight: 400;
    color: #86959F;
}

.quote-address__value {
    font-size: 1.4rem;
    font-weight: 500;
    color: #063647;
}

.section--quotes .item .see-more {
    text-decoration: underline;
    font-weight: 800;
    cursor: pointer;
    color: rgb(var(--color-foreground));
}

.edit-address-modal .form input,
.edit-address-modal .form select {
    font-size: 1.4rem;
}

.edit-address-modal__heading {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.edit-address-modal__heading-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.edit-address-modal__subtitle {
    font-size: 1.3rem;
    color: var(--body-sec);
    line-height: 1.4;
}
.edit-address-modal__heading .close {
    flex-shrink: 0;
}

/* Mobile : action principale (Confirmer) au-dessus du Cancel — column-reverse
   garde l'ordre DOM (cancel d'abord, submit ensuite) mais le submit s'affiche
   en haut, plus accessible au pouce. Cible la modal d'adresse de la page
   quotes (rendue dans .quotes-popup .actions). */
@media (max-width: 749.98px) {
    .edit-address-modal .actions {
        flex-direction: column-reverse;
    }
}

/* Edit-quote-info modal (sales/admin) — date d'expiration + délai de livraison */
.edit-quote-info-modal__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}
.edit-quote-info-modal__group:last-child {
    margin-bottom: 0;
}
.edit-quote-info-modal__label {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--body);
}
.edit-quote-info-modal__subtitle {
    font-size: 1.2rem;
    color: var(--body-sec);
    line-height: 1.4;
    margin: 0;
}
.edit-quote-info-modal__range {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* ─── Dual-range (slider double poignée) — délai de livraison min/max ──────────
   Deux <input type=range> superposés sur une même barre. Le corps des inputs est
   `pointer-events:none` (la barre custom track/fill est dessous), seules les
   poignées sont cliquables (`pointer-events:auto`) → les deux poignées restent
   saisissables indépendamment, même rapprochées. */
.enky-dual-range {
    position: relative;
    height: 28px;
    margin-top: 4px;
}
.enky-dual-range__track,
.enky-dual-range__fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    border-radius: 2px;
    pointer-events: none;
}
.enky-dual-range__track {
    left: 0;
    right: 0;
    background: rgb(var(--color-border));
}
.enky-dual-range__fill {
    background: var(--enky-blue, #063647);
}
/* Sélecteur haute spécificité (0,4,0) pour battre la règle imbriquée du thème
   `.quotes-popup .inner .form input` (0,3,1) qui sinon impose height:48px + border
   + border-radius + padding (la "boîte" + track masqué). On reset tout. */
.quotes-popup .inner .form .enky-dual-range__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none; /* seul le thumb est cliquable (voir ::thumb) */
}
.quotes-popup .inner .form .enky-dual-range__input:focus,
.quotes-popup .inner .form .enky-dual-range__input:focus-within {
    border: 0;
    outline: none;
}
/* Slider à UNE poignée (expiration) : tout l'input est interactif (clic sur la
   barre pour sauter, comme un range natif). Le dual garde pointer-events:none sur
   le corps pour que les DEUX poignées superposées restent saisissables. */
.quotes-popup .inner .form .enky-dual-range__input--single {
    pointer-events: auto;
}
/* Track natif rendu invisible (on dessine notre propre track/fill). */
.enky-dual-range__input::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
    border: 0;
}
.enky-dual-range__input::-moz-range-track {
    height: 4px;
    background: transparent;
    border: 0;
}
/* Poignées : cliquables, par-dessus le track. */
.enky-dual-range__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    margin-top: -7px; /* centre le thumb (18px) sur le track 4px */
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--enky-blue, #063647);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    cursor: pointer;
}
.enky-dual-range__input::-moz-range-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--enky-blue, #063647);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    cursor: pointer;
}
/* Valeurs sous le slider : min à gauche, max à droite (alignées aux poignées). */
.enky-dual-range__values {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 1.4rem;
    color: var(--body);
}
.edit-quote-info-modal__range input[type="range"] {
    width: 100%;
    accent-color: var(--enky-blue, #063647);
    cursor: pointer;
}
.edit-quote-info-modal__range-value {
    font-size: 1.4rem;
    color: var(--body);
}
.edit-quote-info-modal__range-value strong {
    font-weight: 800;
}

/* ─── Modal édition prix de livraison (mode shipping-price) ────────────────── */

/* Badge "Tarif personnalisé" affiché à côté du label quand un override existe. */
.edit-quote-info-modal__badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: rgba(255, 154, 60, 0.18);
    color: #b8650a;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: none;
    vertical-align: middle;
}

/* Rappel du tarif transporteur actuel. */
.edit-quote-info-modal__carrier {
    margin: 0;
    padding: 10px 12px;
    background-color: rgb(var(--color-secondary-background));
    border-radius: 8px;
    font-size: 1.3rem;
    color: var(--body);
}
.edit-quote-info-modal__carrier strong {
    font-weight: 700;
}

/* Input numérique avec suffix de devise (EUR/GBP) à droite. */
.edit-quote-info-modal__input-row {
    display: flex;
    gap: 12px;
}
.edit-quote-info-modal__amount-input {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    border: 1px solid rgb(var(--color-border));
    border-radius: 8px;
    background-color: #fff;
    transition: border-color .15s;
}
.edit-quote-info-modal__amount-input:focus-within {
    border-color: var(--body);
}
.edit-quote-info-modal__amount-input.is-disabled {
    background-color: rgb(var(--color-secondary-background));
    opacity: 0.6;
}
/* Spécificité bumpée à (0,4,1) pour battre `.quotes-popup .inner .form input`
   (0,3,1) défini plus haut, qui sinon réapplique sa propre border + radius sur
   l'input interne (double bordure visible dans le wrapper). */
.quotes-popup .inner .form .edit-quote-info-modal__amount-input input {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 4px 12px 4px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 1.4rem;
    color: var(--body);
    outline: none;
    /* Cache les arrows natives du type="number" sur les navigateurs supportés. */
    -moz-appearance: textfield;
}
.quotes-popup .inner .form .edit-quote-info-modal__amount-input input:focus-within,
.quotes-popup .inner .form .edit-quote-info-modal__amount-input input:focus {
    border: 0;
    outline: none;
}
.edit-quote-info-modal__amount-input input::-webkit-outer-spin-button,
.edit-quote-info-modal__amount-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.edit-quote-info-modal__amount-suffix {
    /* Plus de padding-right ici : le tax-mention prend le relais à droite. */
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--body-sec);
}
/* Mention fiscale (HT / excl. VAT) — affichée juste à droite de la devise.
   Style plus discret (poids normal, couleur secondaire) pour indiquer son
   rôle de complément à la devise. Un séparateur · visuellement aéré. */
.edit-quote-info-modal__amount-tax {
    padding: 0 16px 0 6px;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--body-sec);
    opacity: 0.85;
    position: relative;
}
.edit-quote-info-modal__amount-tax::before {
    content: "·";
    margin-right: 6px;
    color: var(--body-sec);
    opacity: 0.5;
}

/* Checkbox "Utiliser le tarif transporteur" — utilise le pattern thème
   .checkbox--container (cf. edit-quote / "Adresse de livraison identique").
   Le styling est déjà défini globalement, pas d'override nécessaire ici. */

/* ─── Delivery-recompute modal (sales-only) ──────────────────────────────
   Réutilise les groupes/inputs de edit-quote-info-modal ; styles propres pour
   le sous-titre, l'aperçu (table avant/après), les totaux et l'erreur. */
.delivery-recompute-modal__subtitle {
    font-size: 1.3rem;
    color: var(--body-sec);
    line-height: 1.4;
    margin-bottom: 20px;
}
.delivery-recompute-modal__notice {
    font-size: 1.3rem;
    color: var(--body-sec);
    line-height: 1.4;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    margin-top: 16px;
}
.delivery-recompute-modal__loading {
    font-size: 1.3rem;
    color: var(--body-sec);
    margin-top: 16px;
}
.delivery-recompute-modal__preview {
    margin-top: 20px;
}
.delivery-recompute-table__scroll {
    overflow-x: auto;
}
.delivery-recompute-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.3rem;
}
.delivery-recompute-table th,
.delivery-recompute-table td {
    text-align: right;
    padding: 8px 10px;
    white-space: nowrap;
    border-bottom: 1px solid rgb(var(--color-border));
}
.delivery-recompute-table th:first-child,
.delivery-recompute-table td:first-child {
    text-align: left;
    white-space: normal;
}
.delivery-recompute-table th {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--body-sec);
}
.delivery-recompute-table td.is-after {
    font-weight: 700;
    color: var(--body);
}
.delivery-recompute-modal__rate {
    font-size: 1.2rem;
    color: var(--body-sec);
    margin-top: 12px;
}
.delivery-recompute-modal__totals {
    margin-top: 16px;
    border-top: 1px solid rgb(var(--color-border));
    padding-top: 12px;
}
.delivery-recompute-modal__total-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--body);
}
.delivery-recompute-modal__total-row + .delivery-recompute-modal__total-row {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--body-sec);
}
.delivery-recompute-modal__error {
    margin-top: 16px;
    font-size: 1.3rem;
    color: var(--red);
    line-height: 1.4;
}

/* Toggle « remettre la livraison classique à 0 € » — case IMPORTANTE (pré-cochée) :
   mise en surbrillance (carte bordée + fond teinté rouge, renforcé à l'actif) pour
   attirer l'œil. DA de la pilule reprise du toggle configurateur, répliquée car
   celui-ci est scopé à la fiche produit.
   NB : la poignée `.toggle` est un div VIDE (le rond est un ::after) → la règle
   thème `div:empty{display:none}` la masquerait. On la contre en montant la
   spécificité via le préfixe `.delivery-recompute-modal` (bat `div:empty:not(...)`),
   sans avoir à ajouter `.no-empty` dans le template. */
.dr-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    background-color: rgba(230, 79, 30, 0.06);
    border: 1px solid rgba(230, 79, 30, 0.30);
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--body);
    transition: background-color .15s ease, border-color .15s ease;
}
.dr-toggle:hover {
    background-color: rgba(230, 79, 30, 0.10);
}
.dr-toggle.active {
    background-color: rgba(230, 79, 30, 0.10);
    border-color: var(--red);
}
.delivery-recompute-modal .dr-toggle .toggle {
    flex-shrink: 0;
    width: 32px;
    height: 18px;
    padding: 2px;
    background-color: #E7EAEC;
    border-radius: 50px;
    display: flex;
    justify-content: flex-start;
}
.dr-toggle .toggle::after {
    content: '';
    display: block;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #fff;
}
.delivery-recompute-modal .dr-toggle.active .toggle {
    justify-content: flex-end;
    background-color: var(--red);
}

.quote-summary {
    width: 100%;
    max-width: 540px;
    margin-left: auto;
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid rgb(var(--color-border));
}

.quote-summary__benefits {
    margin-bottom: 32px;
}

.quote-summary__benefits-title {
    color: var(--body-sec);
    font-size: 1.4rem;
    margin-bottom: 16px;
}

.quote-summary__benefits-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 32px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.quote-summary__benefits-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
    font-weight: 500;
}

.quote-summary__benefits-list li::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.3332 4L5.99984 11.3333L2.6665 8' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

.quote-summary__lines {
    display: flex;
    flex-direction: column;
}

.quote-summary__line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid rgb(var(--color-border));
}

.quote-summary__line-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quote-summary__line-label {
    font-size: 1.4rem;
    font-weight: 500;
}

.quote-summary__line-sub {
    font-size: 1.2rem;
    color: var(--body-sec);
}

.quote-summary__line-value {
    font-size: 1.4rem;
    font-weight: 500;
    flex-shrink: 0;
}

.quote-summary__line--total {
    border-top: none;
    border-bottom: none;
    padding-top: 8px;
    padding-bottom: 24px;
}

.quote-summary__line--before-total {
    border-bottom: none;
}

.quote-summary__line--total .quote-summary__line-label {
    font-size: 1.8rem;
    font-weight: 700;
}

.quote-summary__line--total .quote-summary__line-value {
    font-size: 1.8rem;
    font-weight: 700;
}

/* Sous-ligne "Dont TVA" — alignée sur .enky-cart__totals-row--vat-sub :
   plus petite, couleur secondaire, et collée au-dessus à la ligne Total
   (annule la padding-bottom du --total + neutralise la sienne). */
.quote-summary__line--total + .quote-summary__line--vat-sub {
    margin-top: -24px;
}
.quote-summary__line--vat-sub {
    border-bottom: none;
    padding-top: 0;
    padding-bottom: 16px;
}
.quote-summary__line--vat-sub .quote-summary__line-label,
.quote-summary__line--vat-sub .quote-summary__line-value {
    font-size: 1.4rem;
    color: var(--body-sec);
    font-weight: 400;
}

/* Économies promo : ligne informative verte, collée sous le Total TTC (qui a
   padding-bottom:24px sans bordure → on remonte). Même DA que .promo-savings
   des pages produits. */
.quote-summary__line--savings {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    margin-top: -16px;
}
.quote-summary__savings {
    color: #2e7d32;
    font-weight: 600;
}

.quote-summary__terms {
    padding-top: 8px !important;
    padding-bottom: 16px !important;
}
.quote-summary__terms .checkbox--container {
    align-items: flex-start;
    margin-top: 0;
    width: fit-content !important;
}
.quote-summary__terms-text {
    flex: 1;
    line-height: 1.4;
    font-size: 1.4rem;
}
.quote-summary__terms-text a {
    text-decoration: underline;
    color: inherit;
}
.quote-summary__terms .form__error {
    display: block;
    margin-top: 4px;
}

.quote-summary__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quote-summary__actions .btn {
    width: 100%;
    justify-content: center;
    border-radius: 999px;
    padding: 16px;
    font-size: 1.6rem;
    font-weight: 600;
}

.quote-summary__delivery {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px;
    border: 1px solid rgb(var(--color-border));
    border-radius: 12px;
    font-size: 1.4rem;
    color: var(--body-sec);
}

.quote-summary__delivery svg {
    flex-shrink: 0;
    color: rgb(var(--color-foreground));
}

.quote-summary__payment-methods {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.quote-summary__payment-methods img {
    height: 24px;
    width: auto;
}

.quote-summary__payment-label {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--body-sec);
}

.input--error {
    border-color: var(--color-error, #c00) !important;
}
.form__error {
    color: var(--color-error, #c00);
    font-size: 12px;
    margin-top: -4px;
}

/* Hint "Champs requis" affiché à l'ouverture sous chaque champ requis.
   Remplacé par .form__error (rouge) en cas de validation submit qui échoue.
   Même position que .form__error pour éviter le shift de layout au swap. */
.form__hint {
    color: var(--body-sec);
    font-size: 12px;
    margin-top: -4px;
}

.odoo-sale-order-name {
    display: block;
    width: 100%;
    flex-basis: 100%;
    font-size: 16px;
    font-weight: 400;
    color: var(--body-sec);
}
.odoo-sale-order-name--small {
    font-size: 14px;
}

.section--quotes .select:has(select:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}
.section--quotes .select select:disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.current-quote .items .item .infos .option > * + * {
    margin-left: 6px;
}
.current-quote .items .item .infos .option__swatch {
    width: 1em;
    height: 1em;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
    background-size: cover;
    background-position: center;
    background-color: #F7F7F6;
    margin-bottom: .15em;
}
/* ==========================================================================
   Header Custom V2 — Tab switcher
   ========================================================================== */

custom-header[data-active-tab] {
    display: block;
}

/* Tab bar (top row) */
.custom--header--tabs {
    display: flex;
    align-items: flex-start;
    padding: 12px 24px 0;
    background-color: #fff;
    border-radius: 16px 16px 0 0;
    gap: 0;
}

/* Full-width separator borders between header levels.
   .custom--header has padding: 0 24px, so we extend these rows with
   negative margins + compensating horizontal padding to reach the edges.
   Specificity bumped via custom-header[data-active-tab] .custom--header
   (0,3,1) to beat the original nested rule .custom--header--wrapper
   .custom--header .custom--header--level-1 (0,3,0).
   Padding values come directly from Figma (node 9497:47826). */
custom-header[data-active-tab] .custom--header .custom--header--tabs {
    margin-left: -24px;
    margin-right: -24px;
    padding: 12px 24px 0;
    border-bottom: 1px solid #E7EAEC;
}
custom-header[data-active-tab] .custom--header .custom--header--level-1 {
    margin-left: -24px;
    margin-right: -24px;
    /* Figma: pl-24 pr-12 py-12 */
    padding: 12px 12px 12px 24px;
    border-bottom: 1px solid #E7EAEC;
}
/* Lock the inner grid height so the header doesn't shrink when switching
   to the vitrine tab (icons/search get hidden). 48px matches the icon
   buttons height in Figma — keeps --header-height stable across tabs
   and prevents the hero from jumping. */
custom-header[data-active-tab] .custom--header .custom--header--level-1--content {
    min-height: 48px;
}
/* Level-2 keeps the base rule padding: 20px 0 (Figma: py-20) + parent
   .custom--header padding-inline 24px — already matches Figma, no override needed. */

.custom--header--tab {
    /* Reset theme button defaults */
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    border-radius: 0;
    height: auto;
    line-height: 1.3;
    padding: 6px 12px 12px;
    margin: 0;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;

    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    color: #063647;
    border-bottom: 2px solid transparent;
    transition: opacity 0.15s ease, border-color 0.15s ease;
    opacity: 0.4;
    outline: none;
}

.custom--header--tab:focus-visible {
    outline: 2px solid #E64F1E;
    outline-offset: 2px;
}

.custom--header--tab[aria-selected="true"] {
    border-bottom-color: #E64F1E;
    opacity: 1;
}

.custom--header--tab:hover {
    opacity: 1;
}

/* Hide menu of inactive tab (desktop nav) */
custom-header[data-active-tab="shop"] .custom--header--nav[data-tab-content="vitrine"],
custom-header[data-active-tab="vitrine"] .custom--header--nav[data-tab-content="shop"] {
    display: none;
}

/* Hide mobile menu of inactive tab */
custom-header[data-active-tab="shop"] .mn-menu[data-tab-content="vitrine"],
custom-header[data-active-tab="vitrine"] .mn-menu[data-tab-content="shop"] {
    display: none;
}

/* Hide shop-only elements when vitrine tab is active */
custom-header[data-active-tab="vitrine"] .shop-only {
    display: none !important;
}

/* Vitrine mode: in level-1, keep only the logo (+ mobile hamburger).
   Hide every <a> inside .custom--header--icons (wishlist, cart, login, etc).
   The hamburger is a <button>, so it stays visible for mobile nav access. */
custom-header[data-active-tab="vitrine"] .custom--header--icons > a {
    display: none !important;
}

/* Highlighted menu links (Promotions, Best sellers) - use the orange accent */
.custom--header--menu-link.highlight,
.mn-link.highlight {
    color: #E64F1E;
}

/* Vitrine mode: collapse search column so icons stay aligned right */
custom-header[data-active-tab="vitrine"] .custom--header--level-1--content {
    grid-template-columns: auto 1fr !important;
}
custom-header[data-active-tab="vitrine"] .custom--header--icons {
    justify-self: end;
}

/* Login pill button (desktop default: text label, no icon) */
.custom--header--login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 18px;
    background-color: #F7F7F6;
    color: #063647;
    border: none;
    border-radius: 80px;
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}
.custom--header--login-btn:hover {
    background-color: #E7EAEC;
}
.custom--header--login-icon {
    display: none;
}

/* ============================================================
   Mobile overrides for the v2 header (only when v2 is active)
   ============================================================ */
@media (max-width: 1023.98px) {

    /* All header levels share the same width: extend to .custom--header
       inner edges using -12px (mobile padding-inline) instead of the
       desktop -24px assumption. */
    custom-header[data-active-tab] .custom--header .custom--header--tabs,
    custom-header[data-active-tab] .custom--header .custom--header--level-1,
    custom-header[data-active-tab] .custom--header .custom--header--level-2 {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
    }
    /* Tabs container: no bottom padding (the tab buttons provide it) */
    custom-header[data-active-tab] .custom--header .custom--header--tabs {
        padding-top: 0;
        padding-bottom: 0;
    }
    /* Tab buttons: 4px top, 4px bottom */
    .custom--header--tab {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* Level-2: tighter bottom padding */
    custom-header[data-active-tab] .custom--header .custom--header--level-2 {
        padding-bottom: 4px;
    }

    /* Invest tab on mobile: level-2 only contains the mobile search
       (shop-only) and the nav (hidden on mobile), so it ends up empty.
       Hide the whole row to avoid a stray border under level-1. */
    custom-header[data-active-tab="vitrine"] .custom--header .custom--header--level-2 {
        display: none;
    }

    /* Mobile search trigger: 40px tall (8 + 24 svg + 8). Keep horizontal
       padding from the base rule (16px). Specificity bumped via the
       .custom--header--wrapper prefix to beat the nested base rule. */
    .custom--header--wrapper .custom--header .custom--header--search .custom--header--search-trigger {
        padding-block: 8px;
    }

    /* Login button collapses to a 48x48 icon-only square on mobile */
    .custom--header--login-btn {
        width: 48px;
        padding: 0;
        font-size: 0;
    }
    .custom--header--login-btn .custom--header--login-label {
        display: none;
    }
    .custom--header--login-icon {
        display: block;
    }

    /* Mobile: search panel keeps its default position (don't overlay
       level-2, which contains the search bar). The panel is a sibling
       of .custom--header inside .custom--header--wrapper, NOT a child. */
    .custom--header--wrapper .custom--search-panel {
        top: unset;
        min-height: 0;
    }

    /* Mobile: flatten .custom--header's bottom corners when the search
       panel is open, so the panel attaches seamlessly below it. */
    .custom--header--wrapper.menu-open:has(.custom--search-panel.active) .custom--header {
        border-radius: 16px 16px 0 0;
    }

    /* Clip children to .custom--header's rounded corners — otherwise
       level-1's border-bottom (a straight 1px line) sticks out past the
       16px rounded corners as a thin white-ish edge. Visible especially
       on Invest tab where level-2 is hidden so level-1 is the last row. */
    .custom--header--wrapper .custom--header {
        overflow: hidden;
    }
}


/* ─── Formula-lock notification ────────────────────────────────────────────────
   Notification "achat circulaire bloqué" affichée sous le sélecteur de formule
   (quote + cart) quand l'utilisateur tente de passer en Purchase avec un produit
   qui a `hide_purchase_price=true`. Classes partagées entre les deux contextes,
   intégrées dans `.quote-summary` côté quote et dans le footer du cart drawer.

   Variable CSS `--progress` (0..1) pilote l'indicateur circulaire :
     1 = cercle plein (8s restantes)
     0 = vide (compteur écoulé) */

.formula-lock {
    margin-top: 12px;
    padding: 16px 56px 16px 16px;
    background-color: rgba(255, 87, 87, 0.08);
    border: 1px solid rgba(255, 87, 87, 0.35);
    border-radius: 12px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    position: relative;
    animation: formula-lock-in 0.18s ease-out;
}

@keyframes formula-lock-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.formula-lock__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.formula-lock__title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #b03b3b;
    line-height: 1.3;
}

.formula-lock__message {
    font-size: 1.3rem;
    color: var(--body);
    line-height: 1.4;
    margin: 0;
}

.formula-lock__hint {
    font-size: 1.2rem;
    color: var(--body-sec);
    margin: 0;
    font-style: italic;
}

.formula-lock__countdown {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    /* Le chiffre est centré via position: absolute + transform sur l'enfant
       .formula-lock__countdown-value (pas via flex) : le line-height/baseline
       de la police créait un décalage vertical perceptible dans le cercle. */
}

.formula-lock__countdown svg {
    position: absolute;
    inset: 0;
    width: 32px;
    height: 32px;
    /* Le départ de la stroke commence en haut. */
    transform: rotate(-90deg);
    /* Override défensif : .section--quotes a un `svg { width: 20px }` global qui
       écrase l'attribut width="32" du SVG → viewBox distordu. On force les
       dimensions ici pour s'affranchir de toute règle parente. */
}

.formula-lock__countdown-track {
    fill: none;
    stroke: rgba(255, 87, 87, 0.18);
    stroke-width: 3;
}

.formula-lock__countdown-fill {
    fill: none;
    stroke: #b03b3b;
    stroke-width: 3;
    stroke-linecap: round;
    /* Circumférence d'un cercle de r=14 = 87.96. dasharray=88 pour rester simple.
       Animation CSS unique (8s linear) qui se relance à chaque montage de
       l'élément :
         - Vue (quote) : v-if mount/unmount → animation rejoue.
         - Cart (vanilla) : toggle [hidden] = display:none/block → reset auto.
       Du coup la fin de l'animation est exactement synchronisée avec la fin du
       setTimeout de 8s en JS — pas de décalage visuel. */
    stroke-dasharray: 88;
    stroke-dashoffset: 0;
    animation: formula-lock-countdown 8s linear forwards;
}

@keyframes formula-lock-countdown {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: 88; }
}

.formula-lock__countdown-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-size: 1.1rem;
    font-weight: 700;
    color: #b03b3b;
    line-height: 1;
}

/* ─── Signature modal (quote signing) ───────────────────────────────────────
   Pattern identique à .enky-confirm-modal (overlay fixed + container centré).
   Trois panes (draw / type / upload), une seule active à la fois via .is-active.
   Logique JS dans assets/quotes.js → openQuoteSignatureModal(). */

.enky-signature-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.enky-signature-modal[hidden] { display: none; }

.enky-signature-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(10, 30, 44, 0.5);
}

.enky-signature-modal__container {
    position: relative;
    background-color: #fff;
    border-radius: 16px;
    width: min(92vw, 640px);
    max-height: 92vh;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.enky-signature-modal__header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.enky-signature-modal__header-text { flex: 1; }
.enky-signature-modal__title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 4px;
    color: var(--body);
}
.enky-signature-modal__subtitle {
    font-size: 1.3rem;
    color: var(--body-sec);
    line-height: 1.4;
    margin: 0;
}
.enky-signature-modal__close {
    background: none;
    border: 0;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--body);
    transition: background-color .15s;
}
.enky-signature-modal__close:hover { background-color: rgb(var(--color-secondary-background)); }

/* Tabs */
.enky-signature-modal__tabs {
    display: flex;
    gap: 6px;
    background-color: rgb(var(--color-secondary-background));
    border-radius: 12px;
    padding: 4px;
}
.enky-signature-modal__tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--body-sec);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.enky-signature-modal__tab:hover { color: var(--body); }
.enky-signature-modal__tab.is-active {
    background-color: #fff;
    color: var(--body);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.enky-signature-modal__tab svg { flex-shrink: 0; }

/* Panes */
.enky-signature-modal__pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.enky-signature-modal__pane[hidden] { display: none; }
.enky-signature-modal__instruction {
    font-size: 1.3rem;
    color: var(--body-sec);
    margin: 0;
}

/* Draw — canvas */
.enky-signature-modal__canvas-wrap {
    position: relative;
    background-color: rgb(var(--color-secondary-background));
    border: 1px dashed rgb(var(--color-border));
    border-radius: 12px;
    overflow: hidden;
}
.enky-signature-modal__canvas {
    display: block;
    width: 100%;
    height: 220px;
    background-color: #fff;
    cursor: crosshair;
    touch-action: none; /* indispensable pour les pointer events sur touch */
}
.enky-signature-modal__clear {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid rgb(var(--color-border));
    font-size: 1.2rem;
    color: var(--body);
    cursor: pointer;
    transition: background-color .15s;
}
.enky-signature-modal__clear:hover {
    background-color: rgb(var(--color-secondary-background));
}

/* Type — input + preview */
.enky-signature-modal__input {
    height: 48px;
    padding: 4px 16px;
    border: 1px solid rgb(var(--color-border));
    border-radius: 8px;
    font-size: 1.4rem;
    color: var(--body);
    background-color: #fff;
}
.enky-signature-modal__input:focus {
    outline: none;
    border-color: var(--body);
}
.enky-signature-modal__typed-preview {
    min-height: 100px;
    background-color: #fff;
    border: 1px solid rgb(var(--color-border));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    font-family: "Caveat", "Brush Script MT", cursive;
    font-weight: 600;
    font-size: 4.6rem;
    color: var(--body);
    line-height: 1;
    text-align: center;
    word-break: break-word;
}
.enky-signature-modal__typed-placeholder {
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--body-sec);
}
.enky-signature-modal__typed-preview.has-content {
    border-color: rgb(var(--color-border));
}

/* Upload */
.enky-signature-modal__upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 20px;
    background-color: rgb(var(--color-secondary-background));
    border: 1px dashed rgb(var(--color-border));
    border-radius: 12px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
    text-align: center;
}
.enky-signature-modal__upload-label:hover {
    border-color: var(--body);
}
.enky-signature-modal__upload-label strong {
    font-size: 1.4rem;
    color: var(--body);
}
.enky-signature-modal__upload-label span {
    font-size: 1.2rem;
    color: var(--body-sec);
}
.enky-signature-modal__file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.enky-signature-modal__upload-preview {
    background-color: #fff;
    border: 1px solid rgb(var(--color-border));
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.enky-signature-modal__upload-preview img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
}
.enky-signature-modal__upload-change {
    padding: 6px 12px;
    border-radius: 6px;
    background-color: rgb(var(--color-secondary-background));
    border: 1px solid rgb(var(--color-border));
    font-size: 1.2rem;
    color: var(--body);
    cursor: pointer;
}

/* Error */
.enky-signature-modal__error {
    margin: 0;
    color: #b03b3b;
    font-size: 1.3rem;
}
.enky-signature-modal__error[hidden] { display: none; }

/* Footer */
.enky-signature-modal__footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.enky-signature-modal__footer .btn { flex: 1 1 auto; }

@media (max-width: 600px) {
    .enky-signature-modal__container { padding: 16px; }
    .enky-signature-modal__tab span { display: none; } /* icônes seules sur mobile */
    .enky-signature-modal__typed-preview { font-size: 3.6rem; min-height: 80px; }
}

/* ─── Secure payment badge (summary quote + page confirmation) ──────────────
   Mention "Paiement sécurisé via Stripe · SEPA" remplaçant la rangée de logos
   de cartes sous les récap de commande. Snippet : secure-payment-badge.liquid.
   Couleurs alignées sur les marques Stripe (#635BFF) et SEPA (#10298E). */

.enky-secure-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #64748b;
    font-family: inherit;
    padding: 16px 0;
}
.enky-secure-pay__lock { flex-shrink: 0; }
.enky-secure-pay__label {
    font-size: 13px;
    font-weight: 400;
}
.enky-secure-pay__stripe {
    font-size: 13px;
    font-weight: 600;
    color: #635BFF;
}
.enky-secure-pay__dot {
    color: #cbd5e1;
    font-size: 13px;
}
.enky-secure-pay__sepa {
    font-size: 13px;
    font-weight: 600;
    color: #10298E;
    letter-spacing: 0.3px;
}

/* ─── Tooltip "stock max atteint" — page quotes ─────────────────────────────
   Affiché 5 s sous le sélecteur de quantité d'une ligne de quote quand
   l'utilisateur tente de dépasser le stock (volet quote dormant, cf.
   showStockTooltip dans quotes.js). Miroir du tooltip cart. */
.section--quotes .qtt { position: relative; }
.qtt__stock-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: 5;
    width: max-content;
    max-width: 240px;
    padding: 6px 10px;
    border-radius: 6px;
    background-color: #2b2b2b;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.3;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}
.qtt__stock-tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 14px;
    border: 5px solid transparent;
    border-bottom-color: #2b2b2b;
}

/* ==========================================================================
   Wishlists (Phase 1) — cœurs (cartes + PDP), popover (picker/login), badge header
   ========================================================================== */

/* Contexte de positionnement du cœur (sibling de .img). */
.product-card.custom { position: relative; }

/* Base bouton cœur (TOUS contextes : carte + PDP + quick-view). Reset complet
   pour ne pas hériter du style « pilule » des boutons du thème. */
.wishlist-heart {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    min-width: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 3px rgba(13, 43, 64, 0.12);
    cursor: pointer;
    line-height: 0;
    transition: transform .12s ease, background-color .12s ease;
}
.wishlist-heart:hover { transform: scale(1.08); background-color: #fff; }

/* Cœur carte — coin haut-droit, au-dessus de l'image. */
.product-card .wishlist-heart {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 36px;
    height: 36px;
}

/* Carte en promo : on décale le badge promo à gauche du cœur (même spécificité
   que la règle d'origine `.product-card.custom .img .product-card__promo-badge`,
   appliquée plus bas dans le fichier → gagne). */
.product-card.custom .img .product-card__promo-badge { right: 54px; }

/* Icône cœur — contour, passe en plein (rouge) à l'actif. */
.wishlist-heart__icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--body, #063647);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill .12s ease, stroke .12s ease;
}
.wishlist-heart.is-active .wishlist-heart__icon { fill: var(--red, #E64F1E); stroke: var(--red, #E64F1E); }

/* Cœur PDP — coin haut-droit du bloc heading. */
.product-heading { position: relative; }
.wishlist-heart--pdp {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    background-color: rgb(var(--color-secondary-background));
}
.wishlist-heart--pdp .wishlist-heart__icon { width: 22px; height: 22px; }

/* Popover partagé (picker + prompt login), ancré au cœur. */
.enky-wishlist-popover {
    position: fixed;
    z-index: 9999999999;
    min-width: 240px;
    max-width: 300px;
    background: rgb(var(--color-background));
    border: 1px solid rgb(var(--color-border));
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(13, 43, 64, 0.14);
    padding: 12px;
}
.enky-wishlist-popover__title { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; color: var(--body); }
.enky-wishlist-popover__body { font-size: 1.4rem; line-height: 1.4; margin-bottom: 12px; }
.enky-wishlist-popover__actions { display: flex; flex-direction: column; gap: 8px; }
.enky-wishlist-popover__actions .btn { width: 100%; text-align: center; }

/* Picker — lignes de listes avec case cochée. */
.enky-wishlist-picker__list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.enky-wishlist-picker__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.4rem;
    text-align: left;
    color: var(--body);
}
.enky-wishlist-picker__row:hover { background: rgb(var(--color-secondary-background)); }
.enky-wishlist-picker__check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid rgb(var(--color-border));
    position: relative;
}
.enky-wishlist-picker__row.is-checked .enky-wishlist-picker__check {
    background: var(--red);
    border-color: var(--red);
}
.enky-wishlist-picker__row.is-checked .enky-wishlist-picker__check::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.enky-wishlist-picker__name { padding-top: .2em; flex: 1; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enky-wishlist-picker__new {
    margin-top: 6px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--red);
    font-weight: 600;
    font-size: 1.4rem;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
}
.enky-wishlist-picker__new:hover { background: rgb(var(--color-secondary-background)); }

/* Création inline d'une liste : input + bouton empilés, pleine largeur, pill 50px. */
.enky-wishlist-newlist__row { display: flex; flex-direction: column; gap: 8px; }
.enky-wishlist-newlist__input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 18px;
    border: 1px solid rgb(var(--color-border));
    border-radius: 50px;
    font-size: 1.4rem;
}
.enky-wishlist-newlist__submit { width: 100%; border-radius: 50px; }

/* ==========================================================================
   Wishlists (Phase 2) — page « Mes wishlists » (rendu Liquid)
   Réutilise la coquille compte (.container / .right / .navigation / .context-menu /
   .quotes-popup) ; styles propres pour la grille de cartes + la vue détail.
   ========================================================================== */
.section--wishlists .right { width: 100%; min-width: 0; }

/* Séparateur au-dessus de la barre recherche + « New wishlist ». */
.section--wishlists .navigation {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid rgb(231, 234, 236);
}

/* Grille des wishlists (cartes 4-produits). */
.wishlists-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    /* `align-items: start` empêche la stretch verticale par défaut du grid.
       Une card vide (sans preview 16:9) prend sa hauteur naturelle au lieu
       d'être étirée à la hauteur de la card la plus haute de la row. */
    align-items: start;
}

.wishlist-card {
    display: flex;
    flex-direction: column;
    background: rgb(var(--color-background));
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(13, 43, 64, 0.06);
    /* Pas d'overflow:hidden ici → sinon il clippe le menu contextuel (rename/delete).
       L'arrondi du haut est porté par .wishlist-card__preview. */
}
.wishlist-card__preview {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    text-decoration: none;
}
/* Grille en position absolue → elle remplit exactement le container (dont
   l'aspect-ratio reste maître) ; les images ne peuvent plus pousser sa hauteur. */
.wishlist-card__grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}
/* 1 seul produit → l'image occupe tout le container (aspect ratio identique à 2). */
.wishlist-card__cell:only-child { grid-column: 1 / -1; }
.wishlist-card__cell {
    overflow: hidden;
    background: rgb(var(--color-secondary-background));
    display: flex;
    align-items: center;
    justify-content: center;
}
.wishlist-card__cell img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.wishlist-card__count {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 4px 10px 2px; 
    border-radius: 20px;
    background: rgba(6, 54, 71, 0.88);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.2;
}
.wishlist-card__body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.wishlist-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wishlist-card__name {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--body);
    text-decoration: none;
    line-height: 1.25;
}
.wishlist-card__name:hover { text-decoration: underline; }
.wishlist-card__total-label { display: block; font-size: 1.2rem; color: var(--body-sec); margin-bottom: 2px; }
.wishlist-card__total-value { font-size: 1.8rem; font-weight: 700; color: var(--body); }

/* Menus contextuels de la page wishlist : les toggler/actions sont des <button>
   → on neutralise le style bouton par défaut et on fige la taille des icônes
   (la règle groupée `.section--wishlists svg{width:20px}` + le rendu bouton
   cassaient le ⋮ : 82px de large, svg à 0). */
.section--wishlists .context-menu__toggler {
    width: 44px;
    height: 44px;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    flex-shrink: 0;
    cursor: pointer;
}
.section--wishlists .context-menu__toggler:hover { background: rgb(var(--color-secondary-background)); }
/* Le dropdown doit passer AU-DESSUS des cœurs des cartes produit (z-index:3) —
   sinon il disparaît derrière le cœur du produit le plus à droite en vue détail.
   Même spécificité que la règle groupée (z-index:1), placée plus bas → gagne. */
.section--wishlists .context-menu .context-menu__wrapper { z-index: 30; }
.section--wishlists .context-menu__toggler svg { width: 16px !important; height: 16px; }
.section--wishlists .context-menu__action {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.section--wishlists .context-menu__action svg { width: 16px !important; height: 16px; flex-shrink: 0; }

/* Vue détail. */
.wishlist-detail .back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--body-sec);
    text-decoration: none;
    font-size: 1.4rem;
    margin-bottom: 16px;
}
.wishlist-detail .back:hover { color: var(--body); }
.wishlist-detail__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.wishlist-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

/* État vide. */
.wishlists-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 48px 0;
}
.wishlists-empty__text { font-size: 1.5rem; color: var(--body-sec); }

.wishlist-delete__text { font-size: 1.4rem; line-height: 1.5; margin: 0; color: var(--body); }

/* La modal réutilise `.quotes-popup` : quand active, la règle générique
   `.quotes-popup.active .inner{display:block}` afficherait TOUS les .inner.
   Comme on garde les 2 modals (form + delete) dans le DOM et qu'on bascule via
   [hidden], on force le hidden à gagner. */
.quotes-popup .inner[hidden] { display: none !important; }
.wishlist-delete__text { padding: 24px 24px 0; }

/* Responsive. */
@media (max-width: 989px) {
    .wishlist-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 749px) {
    .wishlists-grid { grid-template-columns: 1fr; }
    .wishlist-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}