/* ==========================================================
   ELENA HOMEPAGE — MOBILE FIX
   Only corrects mobile navigation and horizontal overflow.
   Desktop layout remains unchanged.
   ========================================================== */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}


/* ==========================================================
   DESKTOP — preserve current approved header
   ========================================================== */

.home-mobile-toggle,
.home-mobile-quote{
    display:none;
}

@media(min-width:901px){

    .home-responsive-header .nav{
        display:flex;
    }

    .home-responsive-header .home-desktop-quote{
        display:inline-flex;
    }

}


/* ==========================================================
   MOBILE HEADER
   ========================================================== */

@media(max-width:900px){

    .home-responsive-header{
        position:relative;
        z-index:1200;
    }

    .home-responsive-header .header-inner{
        position:relative;
        display:flex;
        align-items:center;
        flex-wrap:nowrap;
    }

    .home-responsive-header .brand-real-logo{
        flex:1 1 auto;
        width:auto;
        min-width:0;
    }

    .home-responsive-header .home-desktop-quote{
        display:none !important;
    }

    .home-mobile-toggle{
        position:relative;
        display:block;
        flex:0 0 43px;
        width:43px;
        height:43px;
        margin-left:auto;
        padding:0;
        cursor:pointer;
        background:#fff;
        border:1px solid #dce3e9;
        border-radius:9px;
        box-shadow:none;
    }

    .home-mobile-toggle span{
        position:absolute;
        left:11px;
        width:20px;
        height:2px;
        background:#071a2d;
        border-radius:2px;
        transition:
            top .22s ease,
            opacity .18s ease,
            transform .22s ease;
    }

    .home-mobile-toggle span:nth-child(1){
        top:13px;
    }

    .home-mobile-toggle span:nth-child(2){
        top:20px;
    }

    .home-mobile-toggle span:nth-child(3){
        top:27px;
    }

    .home-responsive-header.is-mobile-open
    .home-mobile-toggle span:nth-child(1){
        top:20px;
        transform:rotate(45deg);
    }

    .home-responsive-header.is-mobile-open
    .home-mobile-toggle span:nth-child(2){
        opacity:0;
    }

    .home-responsive-header.is-mobile-open
    .home-mobile-toggle span:nth-child(3){
        top:20px;
        transform:rotate(-45deg);
    }

    .home-responsive-header .nav{
        position:absolute;
        top:calc(100% + 1px);
        right:14px;
        left:14px;
        z-index:1300;

        display:flex !important;
        align-items:stretch;
        flex-direction:column;
        gap:0;

        margin:0;
        padding:12px;

        visibility:hidden;
        opacity:0;
        transform:translateY(-7px);
        pointer-events:none;

        background:#fff;
        border:1px solid #e1e7ec;
        box-shadow:0 18px 34px rgba(7,26,45,.14);

        transition:
            opacity .2s ease,
            transform .2s ease,
            visibility .2s ease;
    }

    .home-responsive-header.is-mobile-open .nav{
        visibility:visible;
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
    }

    .home-responsive-header .nav > a{
        position:relative;
        display:flex;
        align-items:center;
        width:100%;
        min-height:45px;
        padding:0 11px;
        color:#26394a;
        font-size:13px;
        font-weight:700;
        text-decoration:none;
        border-bottom:1px solid #edf1f4;
    }

    .home-responsive-header .nav > a::after{
        top:0;
        right:auto;
        bottom:0;
        left:0;
        width:3px;
        height:auto;
        background:linear-gradient(
            180deg,
            #0f9b72,
            #1479eb
        );
        transform:scaleY(0);
    }

    .home-responsive-header .nav > a:hover,
    .home-responsive-header .nav > a.is-active{
        color:#0f9b72;
    }

    .home-responsive-header .nav > a:hover::after,
    .home-responsive-header .nav > a.is-active::after{
        transform:scaleY(1);
    }

    .home-responsive-header
    .nav > .home-mobile-quote{
        display:flex;
        justify-content:center;
        min-height:43px;
        margin-top:11px;
        color:#fff;
        background:linear-gradient(
            90deg,
            #0f9b72,
            #1479eb
        );
        border:0;
        border-radius:7px;
    }

    .home-responsive-header
    .nav > .home-mobile-quote::after{
        display:none;
    }

    .home-responsive-header
    .nav > .home-mobile-quote:hover{
        color:#fff;
    }

}


/* ==========================================================
   MOBILE SLIDER OVERFLOW CORRECTION
   ========================================================== */

@media(max-width:520px){

    .hero,
    .track,
    .slide{
        max-width:100vw;
        overflow:hidden;
    }

    .slide-content,
    .slide-filters .slide-content,
    .slide-clean-room .slide-content{
        width:calc(100% - 32px) !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    .products{
        min-width:0 !important;
        max-width:100% !important;
    }

    .slide-filters .products{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
        grid-template-rows:
            repeat(2,112px) !important;
        gap:6px !important;
    }

    .slide-filters .product,
    .slide-filters .product:nth-child(n){
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:108px !important;
    }

    .slide-filters .product img{
        max-width:100% !important;
        max-height:100% !important;
        object-fit:contain;
    }

    .slide-clean-room .products{
        width:100% !important;
        max-width:100% !important;
        transform:scale(.78) !important;
        transform-origin:top center !important;
    }

}


/* ==========================================================
   SMALL PHONE HEADER
   ========================================================== */

@media(max-width:575px){

    .home-responsive-header .header-inner{
        width:calc(100% - 28px);
        height:72px;
        gap:10px;
    }

    .home-responsive-header .brand-real-logo{
        max-width:158px;
        height:49px;
    }

    .home-responsive-header .brand-logo-image{
        max-width:152px;
        max-height:45px;
    }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

.home-mobile-toggle:focus-visible,
.home-responsive-header .nav a:focus-visible{
    outline:3px solid rgba(20,121,235,.27);
    outline-offset:3px;
}

@media(prefers-reduced-motion:reduce){

    .home-responsive-header *,
    .home-responsive-header *::before,
    .home-responsive-header *::after{
        transition:none !important;
        animation:none !important;
    }

}