/*====================================
=          HEADER - RESPONSIVE
=====================================*/

@media (max-width: 900px){

    .site-header{
        height:70px;
    }

    .header-container{
        padding:0 20px;
    }

    /* Logo: nunca en 2 líneas, más chico */
    .site-logo{
        width:auto;
    }

    .site-logo a{
        font-size:16px;
        line-height:1.2;
        white-space:nowrap;
    }

    .site-logo img{
        max-height:40px;
    }

    /* Ocultar nav de desktop, mostrar botón hamburguesa */
    .stylos-navigation{
        position:fixed;
        top:70px;
        left:0;
        width:100%;
        height:calc(100vh - 70px);
        background:#fff;
        flex-direction:column;
        justify-content:flex-start;
        align-items:flex-start;
        padding:30px 24px;
        transform:translateX(100%);
        opacity:0;
        visibility:hidden;
        transition:transform .35s ease, opacity .35s ease, visibility .35s;
        overflow-y:auto;
    }

    .site-header.menu-open .stylos-navigation{
        transform:translateX(0);
        opacity:1;
        visibility:visible;
    }

    .stylos-menu{
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        width:100%;
    }

    .stylos-menu li{
        width:100%;
        border-bottom:1px solid #eee;
    }

    .stylos-menu a{
        display:block;
        padding:16px 4px;
        font-size:17px;
    }

    .stylos-menu a::after{
        display:none;
    }

    .menu-toggle{
        display:flex;
        order:3;
    }

    .header-icons{
        width:auto;
        gap:16px;
        order:2;
    }

    /* El nombre del carrito/usuario/búsqueda mantienen tamaño pero con menos separación */
    .icon-search{
        display:none;
    }

}

@media (max-width: 480px){

    .site-logo a{
        font-size:14px;
    }

}

body.no-scroll{
    overflow:hidden;
}