/* ======================================
   OXIUM HEADER
   URBAN VAPE STYLE
====================================== */


header{

    position:fixed;

    top:20px;
    left:50%;

    transform:translateX(-50%);

    width:92%;
    max-width:1450px;

    height:72px;

    padding:0 28px;

    display:flex;

    align-items:center;

    justify-content:space-between;


    background:rgba(5,5,5,.55);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);


    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;


    z-index:9999;

    transition:.4s;

}



header.hide{

    transform:

    translate(-50%,-120%);

}



header::after{

    content:"";

    position:absolute;

    bottom:0;

    left:20%;

    width:60%;

    height:1px;


    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

}





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


.logo{


    flex-shrink:0;


    color:#fff;

    text-decoration:none;


    font-size:28px;

    font-weight:800;


    letter-spacing:8px;


    transition:.3s;

}



.logo:hover{

    text-shadow:

    0 0 25px rgba(255,255,255,.35);

}







/* =====================
        NAV
===================== */


.header-actions{


    display:flex;


    align-items:center;


    justify-content:flex-end;


    gap:24px;


    flex:1;


    min-width:0;


}





.header-actions > a{


    position:relative;


    color:#cfcfcf;


    text-decoration:none;


    font-size:13px;


    font-weight:600;


    letter-spacing:1.5px;


    white-space:nowrap;


    transition:.3s;

}



.header-actions > a:hover{


    color:white;

}





.header-actions > a::after{


    content:"";


    position:absolute;


    bottom:-10px;


    left:0;


    width:0;


    height:2px;


    background:white;


    transition:.3s;


}



.header-actions > a:hover::after{


    width:100%;

}






/* =====================
        BUSCADOR
===================== */


.buscador{


    position:relative;


    width:210px;


    flex-shrink:1;


}



.buscador input{


    width:100%;


    height:38px;


    box-sizing:border-box;


    padding:

    0 42px 0 18px;



    border-radius:50px;


    border:

    1px solid rgba(255,255,255,.15);



    background:

    rgba(255,255,255,.06);



    color:white;


    outline:none;


    font-size:13px;


}



.buscador input::placeholder{

    color:#8a8a8a;

}




.buscador input:focus{


    border-color:

    rgba(255,255,255,.45);

}




.buscador button{


    position:absolute;


    top:5px;


    right:5px;


    width:28px;


    height:28px;


    border-radius:50%;


    border:none;


    cursor:pointer;


    background:white;


    color:#111;


}

/* =====================
   RESULTADOS BUSQUEDA
===================== */

.resultados-busqueda{

    position:absolute;

    top:45px;

    left:0;

    width:100%;

    background:#111;

    border:1px solid rgba(255,255,255,.10);

    border-radius:18px;

    overflow:hidden;

    display:none;

    z-index:10000;

    backdrop-filter:blur(15px);

    -webkit-backdrop-filter:blur(15px);

    box-shadow:
    0 10px 30px rgba(0,0,0,.35);

}

.resultado-item{

    display:block;

    padding:12px 16px;

    color:#cfcfcf;

    text-decoration:none;

    font-size:13px;

    transition:.25s;

    border-bottom:
    1px solid rgba(255,255,255,.05);

}

.resultado-item:last-child{

    border-bottom:none;

}

.resultado-item:hover{

    background:
    rgba(255,255,255,.06);

    color:white;

}





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


.nav-cart{


    flex-shrink:0;


    width:42px;


    height:42px;


    display:flex;


    align-items:center;


    justify-content:center;


    position:relative;



    background:

    rgba(255,255,255,.08);



    border-radius:50%;

    margin-left: 16px;


}



.nav-cart::after{


    display:none;

}



.cart-icon{


    font-size:18px;

}



.cart-count{


    position:absolute;


    top:-5px;


    right:-5px;


    width:18px;


    height:18px;


    display:flex;


    align-items:center;


    justify-content:center;



    background:white;


    color:#111;


    border-radius:50%;


    font-size:11px;


    font-weight:700;


}







/* =====================
        LOGIN
===================== */


.login-btn{


    flex-shrink:0;


    padding:

    10px 18px;


    border:

    1px solid rgba(255,255,255,.25);


    border-radius:50px;


}






/* =====================
        USUARIO
===================== */


.user-menu{


    position:relative;


    flex-shrink:0;


}



.user-name{


    background:none;


    border:none;


    color:white;


    cursor:pointer;


    font-size:13px;


    font-weight:600;


}



.user-dropdown{


    display:none;


    position:absolute;


    top:45px;


    right:0;


    width:220px;


    padding:10px;


    background:#111;


    border:

    1px solid rgba(255,255,255,.1);


    border-radius:18px;


}



.user-dropdown.active{

    display:block;

}



.user-dropdown a{


    display:block;


    padding:12px;


    color:#ccc;


    text-decoration:none;


}



.user-dropdown a:hover{


    background:#1d1d1d;


    color:white;


}







/* =====================
        MENU MOBILE
===================== */


.menu-toggle{


    display:none;


    background:none;


    border:none;


    color:white;


    font-size:28px;


    cursor:pointer;


}






/* =====================
        TABLET
===================== */


@media(max-width:1200px){


.header-actions{


    gap:15px;

}



.header-actions > a{


    font-size:12px;

}



.buscador{


    width:170px;

}



}







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


@media(max-width:900px){


header{


    height:65px;

    padding:0 20px;

}



.logo{


    font-size:24px;

}



.menu-toggle{


    display:block;

}




.header-actions{


    position:absolute;


    top:80px;


    left:0;


    width:100%;


    padding:25px;


    flex-direction:column;


    align-items:center;


    background:#090909;


    border-radius:20px;


    display:none;


}



.header-actions.show{


    display:flex;


}




.header-actions > a{


    font-size:14px;

}



.buscador{


    width:90%;

}



.nav-cart{


    width:45px;

}


}