/*=================================
    HEADER PRINCIPAL LUXMODA
=================================*/

.lux-header{

    position: fixed !important;

    top:0 !important;
    left:0 !important;

    width:100% !important;

    height:70px !important;

    background-color:var(--color-secundario) !important;

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    padding:0 60px !important;

    box-sizing:border-box !important;

    z-index:99999 !important;

}



/*=================================
    LOGO
=================================*/


.lux-logo{

    display:flex !important;

    align-items:center !important;

    justify-content:flex-start !important;

    flex:0 0 auto !important;

}



.lux-logo img{

    height:68px !important;

    width:auto !important;

    max-width:200px !important;

}



/*=================================
    MENÚ PRINCIPAL
=================================*/


.lux-nav{

    flex:1 !important;

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

}



.lux-menu{

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    justify-content:center !important;

    gap:42px !important;

    list-style:none !important;

    margin:0 !important;

    padding:0 !important;

}



.lux-menu li{

    display:flex !important;

    align-items:center !important;

    margin:0 !important;

    padding:0 !important;

}



.lux-menu li a{

    display:flex !important;

    align-items:center !important;

    color:white !important;

    text-decoration:none !important;

    font-size:15px !important;

    font-weight:500 !important;

    letter-spacing:.3px;

    text-transform:uppercase;

    transition:.3s ease;

}



.lux-menu li a:hover{

    color:var(--color-terciario) !important;

}



/*=================================
    ICONOS
=================================*/


.lux-icons{

    display:flex !important;

    align-items:center !important;

    justify-content:flex-end !important;

    gap:22px !important;

    flex:0 0 auto !important;

}



.lux-icons a{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    color:white !important;

    position:relative !important;

    text-decoration:none !important;

    transition:.3s ease;

}



.lux-icons a:hover{

    color:var(--color-terciario) !important;

}



.lux-icons svg{

    width:24px !important;

    height:24px !important;

    stroke:currentColor !important;

}



/*=================================
    CONTADOR CARRITO
=================================*/


.cart-count{

    position:absolute !important;

    top:-8px !important;

    right:-10px !important;

    width:18px !important;

    height:18px !important;

    border-radius:50% !important;

    background:var(--color-terciario) !important;

    color:white !important;

    font-size:.65rem !important;

    font-weight:600 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

}



/*=================================
    TRANSICIONES
=================================*/


.lux-header,
.lux-menu li a,
.lux-icons a{

    transition:.3s ease;

}