/* ========================= */
/* BASE */
/* ========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
margin:0;
font-family:Arial;
background:#f6f7fb;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* ========================= */
/* TOP BAR */
/* ========================= */

.top-bar{

background:#000;

font-size:13px;

color:#ccc;

}

.top-bar-wrapper{

display:flex;

justify-content:flex-end;

align-items:center;

padding:6px 0;

gap:18px;

flex-wrap:wrap;

}

.top-link{

color:#ccc;

text-decoration:none;

display:flex;

align-items:center;

gap:6px;

transition:.2s;

font-size:13px;

}

.top-link:hover{

color:#fff;

}

.top-link i{

font-size:13px;

}
/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:768px){
    
.top-bar-wrapper{
    
justify-content:center;

gap:12px;

}

.top-link span{
    
display:none;

}

}

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

.header{

background:#000;

padding:12px 0;

}

/* CONTENEDOR */

.header-wrapper{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

flex-wrap:wrap;

}

/* LOGO */

.logo-area{

display:flex;

flex-direction:column;

}

.logo-area img{

height:50px;

}

/* CODIGO POSTAL */

.codigo-postal{

display:flex;

align-items:center;

gap:6px;

font-size:13px;

color:#4da3ff;

margin-top:4px;

cursor:pointer;

transition:.2s;

}

.codigo-postal:hover{

text-decoration:underline;

}

/* BUSCADOR */

.search-area{

flex:1;

display:flex;

max-width:600px;

margin:0 auto;

}

.buscador{

width:100%;

padding:10px 14px;

border:none;

border-radius:6px 0 0 6px;

outline:none;

font-size:14px;

}

.btn-buscar{

background:#b720eb;

border:none;

color:#fff;

padding:0 18px;

border-radius:0 6px 6px 0;

cursor:pointer;

}

.btn-buscar:hover{

background:#9c1ccc;

}

/* DERECHA */

.header-right{

display:flex;

align-items:center;

gap:20px;

}

/* WHATSAPP */

.whatsapp-header{

display:flex;

align-items:center;

gap:8px;

color:#25d366;

text-decoration:none;

font-weight:600;

font-size:14px;

}

.whatsapp-header:hover{

color:#1ebe5d;

}

/* CARRITO */

.carrito-icon{

position:relative;

cursor:pointer;

color:#fff;

font-size:18px;

}

/* BADGE */

#carritoBadge{

position:absolute;

top:-6px;

right:-10px;

background:#b720eb;

color:#fff;

font-size:11px;

padding:2px 6px;

border-radius:50%;

font-weight:600;

min-width:18px;

text-align:center;

}

/* RESPONSIVE */

@media(max-width:768px){
    
.search-area{
    
order:3;

width:100%;

margin-top:10px;

}

.header-wrapper{
    
gap:10px;

}

}

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

.menu-principal{

background:#000;

position:relative;

z-index:9999;

}

.menu-bar{

display:flex;
align-items:center;
gap:30px;

height:48px;

}

/* LINKS */

.menu-links{

display:flex;
gap:20px;

}

.menu-links a{

color:#fff;
text-decoration:none;
font-size:14px;

}

.menu-links a:hover{

color:#b720eb;

}

/* BOTON CATEGORIAS */

.btn-categorias{

height:54px;

background:none;

border:none;

display:flex;

align-items:center;

gap:8px;

color:#fff;

font-size:14px;

font-weight:500;

cursor:pointer;

transition:.2s;

}

.btn-categorias:hover{

color:#b720eb;

}

/* ========================= */
/* PANEL CATEGORIAS */
/* ========================= */

.panel-categorias{

position:absolute;

top:100%;
left:0;

width:280px;

background:#fff;

border-radius:18px;

padding:10px 0;

box-shadow:
0 15px 40px rgba(0,0,0,.14);

display:none;

z-index:99999;

overflow:hidden;

}

.menu-categorias:hover .panel-categorias{

display:block;

}

/* ========================= */
/* ITEM */
/* ========================= */

.categoria-item{

position:relative;

}

.categoria-item > a{

display:flex;

align-items:center;

justify-content:space-between;

gap:12px;

padding:15px 20px;

text-decoration:none;

color:#333;

font-size:14px;

transition:.2s;

}

.categoria-item > a:hover{

background:#f7f7f7;

padding-left:24px;

}

.categoria-item i{

font-size:15px;

}

/* ========================= */
/* SUBMENU */
/* ========================= */

.sub-panel{

position:absolute;

left:100%;
top:0;

width:240px;

background:#fff;

border-radius:18px;

padding:10px 0;

box-shadow:
0 15px 40px rgba(0,0,0,.14);

display:none;

overflow:hidden;

}

.categoria-item:hover .sub-panel{

display:block;

}

.sub-panel a{

display:block;

padding:13px 18px;

text-decoration:none;

font-size:14px;

color:#333;

transition:.2s;

}

.sub-panel a:hover{

background:#f5f5f5;

padding-left:22px;

}

/* ========================= */
/* OFERTAS */
/* ========================= */

.menu-ofertas{

position:relative;

}

.btn-ofertas{

height:54px;

background:none;

border:none;

display:flex;

align-items:center;

gap:8px;

color:#fff;

font-size:14px;

font-weight:500;

cursor:pointer;

transition:.2s;

}

.btn-ofertas:hover{

color:#b720eb;

}

.panel-ofertas{

position:absolute;

top:100%;
left:0;

width:240px;

background:#fff;

border-radius:18px;

padding:10px 0;

box-shadow:
0 15px 40px rgba(0,0,0,.14);

display:none;

overflow:hidden;

}

.menu-ofertas:hover .panel-ofertas{

display:block;

}

.panel-ofertas a{

display:flex;

align-items:center;

gap:10px;

padding:14px 18px;

text-decoration:none;

font-size:14px;

color:#333;

transition:.2s;

}

.panel-ofertas a:hover{

background:#f5f5f5;

padding-left:22px;

}

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

.menu-toggle{

display:none;

background:none;

border:none;

color:#fff;

font-size:24px;

cursor:pointer;

}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:992px){

.search-area{

order:3;

width:100%;

max-width:100%;

}

.header-wrapper{

gap:18px;

}

}

@media(max-width:768px){

.top-bar-wrapper{

justify-content:center;

gap:14px;

}

.top-link span{

display:none;

}

.header{

padding:12px 0;

}

.logo-area img{

height:44px;

}

.whatsapp-header span{

display:none;

}

.menu-links{

display:none;

}

.menu-toggle{

display:block;

}

.menu-bar{

justify-content:space-between;

}

.panel-categorias{

position:fixed;

top:0;
left:-100%;

width:300px;
height:100%;

border-radius:0;

overflow:auto;

transition:.3s;

}

.panel-categorias.activo{

left:0;

}

.sub-panel{

position:static;

display:none;

width:100%;

box-shadow:none;

border-radius:0;

padding-left:15px;

}

.categoria-item:hover .sub-panel{

display:block;

}

}

@media(max-width:480px){

.container{

width:94%;

}

.buscador{

font-size:14px;

padding:0 14px;

}

.btn-buscar{

width:52px;

}

#carritoBadge{

min-width:18px;
height:18px;

font-size:10px;

}

}