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

.header-main{

    background:#fff;

    border-bottom:1px solid var(--border);

}

.header-wrapper{

    height:95px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

}

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

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    min-width:300px;

}

.logo img{
    width:70px;
    height:auto;
    transition:.3s;
}

.logo-text h1{

    font-size:24px;

    font-weight:700;

    color:var(--text);

    margin:0;

}

.logo-text span{

    display:block;

    color:var(--text-light);

    font-size:13px;

}

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

.search-button{

    border-radius:0 14px 14px 0;

}

.search-button{

    border-radius:0 14px 14px 0;

}
.search-box{

    flex:1;

}

.search-wrapper{

    display:flex;

    height:52px;

    border:1px solid #D7E3FF;

    border-radius:12px;

    overflow:hidden;

    background:#fff;

    transition:.25s ease;

}

.search-wrapper:focus-within{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(31,94,255,.12);

}

.search-wrapper:hover{

    border-color:#9DBBFF;

}

.search-wrapper input{

    flex:1;

    padding:0 20px;

    font-size:15px;

}

.search-wrapper select{

    width:180px;

    border:none;

    border-left:1px solid var(--border);

    padding:0 15px;

    background:#fff;

}

.search-wrapper button{

    width:70px;

    background:var(--primary);

    color:#fff;

    transition:.3s;

}

.search-wrapper button:hover{

    background:var(--primary-dark);

}

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

.header-actions{

    display:flex;

    gap:20px;

}

.header-icon{

    display:flex;

    flex-direction:column;

    align-items:center;

    position:relative;

    color:var(--text);

    transition:.3s;

}

.header-icon i{

    font-size:22px;

    margin-bottom:6px;

}

.header-icon span{

    font-size:13px;

}

.header-icon:hover{

    color:var(--primary);

}

.cart-icon small{

    position:absolute;

    top:-4px;

    right:10px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--danger);

    color:#fff;

    font-size:11px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==============================
BOTÓN MENÚ
==============================*/

.menu-toggle{

    display:none;

}