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

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

body{
font-family:Arial, Helvetica, sans-serif;
background:#f8f9fb;
}

.container{
max-width:1200px;
margin:0 auto;
padding-left:18px;
padding-right:18px;
}

/* ========================= */
/* 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;
font-size:13px;
transition:.2s;
}

.top-link i{
font-size:13px;
}

.top-link:hover{
color:#fff;
}

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

.header{
background:#000;
padding:12px 0;
position:relative;
z-index:50;
}

.header-wrapper{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
}

.logo-area{
display:flex;
flex-direction:column;
align-items:flex-start;
}

.logo-mobile-row{
display:flex;
align-items:center;
justify-content:center;
width:auto;
position:relative;
}

.logo-area img,
.header-logo{
height:70px;
width:auto;
display:block;
object-fit:contain;
}

.menu-toggle-header{
display:none;
}

.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{
flex:1;
min-width:0;
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;
transition:.2s;
}

.btn-buscar:hover{
background:#9c1ccc;
}

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

.header-right{
display:flex;
align-items:center;
gap:26px;
}

.whatsapp-header{
display:flex;
align-items:center;
gap:6px;
color:#25d366;
text-decoration:none;
font-weight:600;
font-size:18px;
white-space:nowrap;
transition:.2s;
}

.whatsapp-header:hover{
color:#1ebe5d;
}

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

.carrito-icon{
position:relative;
width:44px;
height:44px;
border:none;
background:transparent;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:22px;
padding:0;
transition:.2s;
}

.carrito-icon i{
color:#fff;
font-size:22px;
line-height:1;
display:block;
}

.carrito-icon:hover i{
color:#b720eb;
}

.carrito-badge{
position:absolute;
top:2px;
right:0;
min-width:18px;
height:18px;
padding:0 5px;
border-radius:999px;
background:#fff;
color:#b720eb;
font-size:11px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
border:1px solid #e5e5e5;
box-shadow:0 2px 6px rgba(0,0,0,.25);
pointer-events:none;
}

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

#carritoOverlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
opacity:0;
visibility:hidden;
z-index:3000;
transition:.25s;
}

#carritoOverlay.activo{
opacity:1;
visibility:visible;
}

#carritoLateral{
position:fixed;
top:0;
right:-390px;
width:370px;
max-width:92%;
height:100%;
background:#fff;
box-shadow:-8px 0 28px rgba(0,0,0,.22);
transition:.3s ease;
z-index:9999;
display:flex;
flex-direction:column;
}

#carritoLateral.activo{
right:0;
}

/* ========================= */
/* MENU PRINCIPAL DESKTOP */
/* ========================= */

.menu-principal{
background:#000;
border-top:1px solid #111;
position:relative;
z-index:60;
}

.menu-bar{
width:100%;
height:48px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:32px;
flex-wrap:nowrap;
}

.menu-toggle{
display:none;
}

.menu-categorias{
position:relative;
display:flex;
align-items:center;
margin:0;
flex:0 0 auto;
}

.btn-categorias,
.btn-ofertas{
background:none;
border:none;
color:#fff;
font-size:14px;
font-weight:500;
display:flex;
align-items:center;
gap:7px;
height:48px;
padding:0;
cursor:pointer;
white-space:nowrap;
}

.menu-links{
display:flex;
align-items:center;
flex-direction:row;
gap:28px;
height:48px;
width:auto;
flex:0 0 auto;
}

.menu-links a{
color:#fff;
text-decoration:none;
font-size:14px;
height:48px;
display:flex;
align-items:center;
white-space:nowrap;
transition:.2s;
}

.menu-links a:hover,
.btn-categorias:hover,
.btn-ofertas:hover{
color:#b720eb;
}

.menu-ofertas{
position:relative;
display:flex;
align-items:center;
}

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

.panel-categorias{
position:absolute;
top:100%;
left:0;
width:280px;
background:#f2f2f2;
border-radius:18px;
box-shadow:0 12px 30px rgba(0,0,0,.25);
padding:10px 0;
display:none;
z-index:100;
}

.menu-categorias:hover .panel-categorias{
display:block;
}

.categoria-item{
position:relative;
}

.categoria-item a{
display:flex;
align-items:center;
gap:12px;
padding:16px 20px;
text-decoration:none;
color:#333;
font-size:14px;
font-weight:500;
}

.panel-categorias > .categoria-item > a::after{
content:">";
margin-left:auto;
font-size:18px;
color:#999;
}

.categoria-item:hover{
background:#e9e9e9;
}

.sub-panel{
position:absolute;
left:100%;
top:0;
width:260px;
background:#f2f2f2;
border-radius:18px;
box-shadow:0 12px 30px rgba(0,0,0,.25);
padding:10px 0;
display:none;
}

.categoria-item:hover .sub-panel{
display:block;
}

.sub-panel a{
display:block;
padding:14px 20px;
text-decoration:none;
color:#333;
font-size:14px;
}

.sub-panel a:hover{
background:#e9e9e9;
padding-left:24px;
}

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

.panel-ofertas{
position:absolute;
top:100%;
left:0;
width:240px;
background:#f2f2f2;
border-radius:16px;
box-shadow:0 12px 25px rgba(0,0,0,.2);
display:none;
padding:10px 0;
z-index:100;
}

.menu-ofertas:hover > .panel-ofertas{
display:block;
}

.panel-ofertas a{
display:flex;
align-items:center;
gap:12px;
padding:14px 18px;
text-decoration:none;
color:#333;
font-size:14px;
height:auto;
}

.panel-ofertas a:hover{
background:#e6e6e6;
color:#333;
}

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

.menu-mobile-overlay{
display:none;
}

.cerrar-menu-mobile{
display:none;
}

@media(max-width:768px){

.top-bar{
display:none;
}

.header{
padding:14px 0 16px;
}

.header-wrapper{
flex-direction:column;
align-items:center;
gap:14px;
}

.logo-area{
width:100%;
align-items:center;
}

.logo-mobile-row{
width:100%;
display:grid;
grid-template-columns:52px 1fr 52px;
align-items:center;
min-height:54px;
}

.menu-toggle-header{
grid-column:1;
display:flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border:none;
background:transparent;
color:#fff;
font-size:30px;
cursor:pointer;
}

.menu-toggle-header i{
font-size:30px;
color:#fff;
line-height:1;
}

.logo-mobile-row a{
grid-column:2;
display:flex;
align-items:center;
justify-content:center;
}

.logo-mobile-row img,
.logo-mobile-row .header-logo{
height:48px;
width:auto;
display:block;
object-fit:contain;
}

.codigo-postal{
justify-content:center;
font-size:14px;
margin-top:6px;
}

.header-right{
width:100%;
justify-content:center;
gap:38px;
}

.whatsapp-header{
font-size:17px;
}

.search-area{
order:3;
width:100%;
max-width:100%;
margin-top:4px;
}

.buscador{
height:48px;
font-size:16px;
border-radius:8px 0 0 8px;
}

.btn-buscar{
width:64px;
font-size:18px;
border-radius:0 8px 8px 0;
}

/* MENU MOBILE CERRADO */

.menu-principal{
z-index:60;
}

.menu-bar{
display:flex;
align-items:center;
flex-wrap:nowrap;
gap:26px;
overflow-x:auto;
white-space:nowrap;
padding:14px 18px;
height:auto;
scrollbar-width:none;
}

.menu-bar::-webkit-scrollbar{
display:none;
}

.menu-toggle{
display:none !important;
}

.menu-categorias{
display:flex;
flex:0 0 auto;
position:static;
margin:0;
}

.btn-categorias{
font-size:18px;
font-weight:700;
height:auto;
padding:10px 0;
}

.menu-links{
display:flex;
flex-direction:row;
align-items:center;
gap:28px;
width:auto;
height:auto;
flex:0 0 auto;
background:transparent;
}

.menu-links a,
.btn-ofertas{
display:flex;
align-items:center;
width:auto;
height:auto;
white-space:nowrap;
padding:10px 0;
font-size:18px;
color:#fff;
}

.menu-ofertas{
display:flex;
flex:0 0 auto;
position:relative;
}

/* PANEL CATEGORIAS MOBILE */

.panel-categorias{
position:fixed;
top:0;
left:-100%;
width:100%;
max-width:none;
height:100vh;
background:#f4f4f4;
z-index:999999;
display:block;
overflow-y:auto;
transition:left .3s ease;
padding:12px 0 30px;
border-radius:0;
box-shadow:none;
}

.panel-categorias.activo{
left:0;
}

.cerrar-menu-mobile{
display:flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border:none;
background:#000;
color:#fff;
font-size:22px;
border-radius:50%;
margin:14px 18px 16px auto;
cursor:pointer;
}

.categoria-item:hover{
background:transparent;
}

.categoria-item a{
font-size:18px;
padding:20px 24px;
}

.sub-panel{
position:static;
width:100%;
box-shadow:none;
border-radius:0;
display:none;
background:#e9e9e9;
padding:0;
}

.categoria-item:hover .sub-panel{
display:none;
}

.categoria-item.activo > .sub-panel{
display:block;
}

.sub-panel a{
font-size:15px;
padding:14px 58px;
}

.panel-ofertas{
position:absolute;
top:100%;
left:0;
width:240px;
background:#f2f2f2;
z-index:999999;
}

body.menu-abierto{
overflow:hidden;
}

}

@media(max-width:420px){

.container{
padding-left:14px;
padding-right:14px;
}

.logo-mobile-row{
grid-template-columns:46px 1fr 46px;
}

.logo-mobile-row img{
height:42px;
}

.menu-toggle-header{
width:42px;
height:42px;
font-size:28px;
}

.whatsapp-header span{
font-size:16px;
}

.carrito-icon{
width:40px;
height:40px;
}

.menu-bar{
gap:24px;
padding:13px 14px;
}

.btn-categorias,
.menu-links a,
.btn-ofertas{
font-size:17px;
}

}

.ofertas-mobile-lateral{
display:none;
}

@media(max-width:768px){

.menu-links .menu-ofertas{
display:none !important;
}

.ofertas-mobile-lateral{
display:block;
}

}

@media(min-width:769px){

.menu-links .menu-ofertas{
display:flex;
}

.ofertas-mobile-lateral{
display:none !important;
}

}