/** Shopify CDN: Minification failed

Line 3703:9 Cannot use type selector "--success" directly after nesting selector "&"
Line 3704: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;
                }

                .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: 1 / 1;

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

            .arrow--prev,
            .arrow--next{
                width: 32px;
                height: 32px;
                border-radius: 40px;
                background-color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                border: 0;

                &.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);
                    }
                }
            }
        }
    }

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

        .container{
            overflow: hidden;

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

                .thumb{
                    aspect-ratio: 1 / 1;
                    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;
                    }
                }
            }
        }
    }
}

@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;

        .imgs{
            height: calc(100vh - 24px - var(--enky-header-height));
            aspect-ratio: 1;

            .container{
                aspect-ratio: 1;
                height: 100%;
            }

            .img{

                img{
                    object-fit: cover;
                }
            }
        }

        .thumbs{

            .thumb{
                width: 80px !important;
                height: 80px;
            }
        }

        .imgs .img{
            /* max-height: calc(100svh - var(--enky-header-height) - 24px - 8vw - 12px); */
        }
    }

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

    .main-product.has-thumb .left{
        /* The image is square (aspect-ratio: 1) sized by its height, so its
           rendered width equals this same calc. We expose it as a custom
           property so the thumbs row can match the image's exact width — any
           overflow scrolls horizontally inside `.thumbs .container` (which
           has `overflow: hidden`) instead of pushing the column wider than
           the image. */
        --enky-main-image-side: calc(100vh - 24px - var(--enky-header-height) - 96px);

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

        .thumbs{
            width: var(--enky-main-image-side);
            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;
    }
}

#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;
            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;

            /* Header (always visible) — name + info icon side by side. Anchored
               (`position: relative`) so the formula info tooltip can position
               itself relative to the icon row. */
            .plan-header{
                display: flex;
                align-items: center;
                gap: 4px;
                position: relative;
            }

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

            .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-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, describes both
               formula types (subscription + circular purchase) in one shot.
               Toggled via Vue (`showFormulaInfo`) ; closes on outside click. */
            .formula-info-tooltip{
                position: absolute;
                top: calc(100% + 8px);
                left: 0;
                z-index: 10;
                width: min(320px, calc(100vw - 32px));
                padding: 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;
            }

            .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;
            }

            .formula-info-tooltip__section{
                padding-right: 16px; /* leave room for the close button on the first section */
            }

            .formula-info-tooltip__section + .formula-info-tooltip__section{
                margin-top: 16px;
                padding-right: 0;
            }

            .formula-info-tooltip__title{
                margin: 0 0 4px;
                font-size: 1.4rem;
                font-weight: 600;
                line-height: 1.3;
                color: #063647;
            }

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

            /* 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; }
                }

                /* 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: 1;

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

                        .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;

    .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;

        > img{
            width: var(--card-img-width, 100%);
            height: var(--card-img-width, 100%);
            object-fit: cover;
            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{
        *{ line-height: 1.3; }

        .vendor{
            margin-bottom: 8px;
            display: inline-block;
        }
    }

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

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

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

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

    .product-details__grid{
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .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{
            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 {

    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{

        .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{

        .project{

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

@media(max-width: 749.98px){

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

        .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;
                            }
                        }

                        .price{
                            display: grid;
                            grid-template-columns: auto auto;
                            font-size: 1.4rem;
                            gap: 0 4px;

                            *{ line-height: 1; }

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

                            .price__duration{
                                grid-column: span 2;
                                text-align: right;
                            }
                        }
                    }

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

                .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;
        }
    }

    .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);
}

.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;
}

.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;
}

.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;
    }
}

.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;
}

.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;
}

.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: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    background-size: cover;
    background-position: center;
    background-color: #F7F7F6;
}
/* ==========================================================================
   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;
    }
}