/* ============================================================
   Header responsive — BREAKPOINTS DEL OZ-MAQUETADOR (desktop-first, max-width)
   desktop >1366 | laptop <=1366 | tablet_h <=1024 | tablet_v <=768 | mobile <=480
   Cascada: mobile -> tablet_v -> tablet_h -> laptop -> desktop
   Se carga DESPUÉS del CSS original de ozado, por eso usa !important donde
   necesita ganarle al switch propio de ozado (que estaba en 991px).
   ============================================================ */

/* ---- FIX base: box-sizing border-box (el reset global no llega al header) ----
   Sin esto, width:100% + padding se DESBORDA (content-box). Scopeado al header. */
#header-top, #header-top *, #masthead, #masthead *,
#header-search, #header-search *, .oz-mnav, .oz-mnav * { box-sizing: border-box; }

/* Container del header: ancho fijo, centrado, sin márgenes negativos heredados. */
#header-top .container, #masthead .container, #header-search .container {
	width: 100%; max-width: 1440px;
	margin-left: auto !important; margin-right: auto !important;
	padding-left: 15px; padding-right: 15px;
}

/* ---- desktop (>1366): logo 300px ---- */
@media (min-width: 1367px) {
	#masthead .grid-items { grid-template-columns: 1fr 300px 1fr; }
	#masthead .grid-items .logo a { width: 300px; max-width: 300px; }
}

/* ---- laptop (<=1366): nav desktop, logo 270px ---- */
@media (max-width: 1366px) {
	#masthead .grid-items { grid-template-columns: 1fr 270px 1fr; }
	#masthead .grid-items .logo a { width: 270px; max-width: 270px; }
	#masthead .grid-items ul { gap: 14px; }
}

/* ---- Mantener NAV DESKTOP hasta tablet echada incluida (769-1024 y superior);
   header móvil (hamburguesa) solo entra en tablet_v (<=768). Antes el corte
   estaba en 1024/1025, así que tablet echada (769-1024) ya mostraba el header
   móvil — se sube el corte a 768/769 para que tablet echada use el header
   de escritorio completo (topbar + logo + nav horizontal + buscador). ---- */
@media (min-width: 769px) {
	#masthead .grid-items { display: grid !important; }
	#masthead .header-mobile { display: none !important; }
	#header-top { display: block !important; }
}

/* ---- tablet_h (769-1024): sigue en nav desktop, solo se ajusta el logo/gap
   para que quepa en un ancho menor sin desbordar. ---- */
@media (min-width: 769px) and (max-width: 1024px) {
	#masthead .grid-items { grid-template-columns: 1fr 220px 1fr; }
	#masthead .grid-items .logo a { width: 220px; max-width: 220px; }
	#masthead .grid-items ul { gap: 10px; }
	#masthead .grid-items ul li a { font-size: 14px; }
	#header-top .redes-contact { flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
	#header-top .contant-info .fwt-1 { flex-wrap: wrap; justify-content: center; gap: 2px 16px; }
	#header-top ul li { margin-right: 0; }
	#header-top p, #header-top { font-size: 12px; }
	#header-search { padding: 1rem 0; }
	#header-search .content { grid-template-columns: 1fr auto !important; gap: .6rem; }
}

/* ---- tablet_v (<=768): pasa a HEADER MÓVIL, topbar oculto ---- */
@media (max-width: 768px) {
	#masthead .grid-items { display: none !important; }
	#masthead .header-mobile {
		display: grid !important;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 1rem;
		padding: 6px 0;
	}
	#masthead .header-mobile .logo a { width: 190px; max-width: 190px; display: inline-block; }
	#masthead .header-mobile .logo img,
	#masthead .header-mobile .custom-logo { max-width: 100%; height: auto; }
	#header-top { display: none !important; }
	#header-search { padding: 1rem 0; }
	#header-search .content { grid-template-columns: 1fr !important; gap: .6rem; }
	#header-search .content .ofertas-button { width: 100% !important; justify-content: center; padding: 11px; }
}

/* ---- mobile (<=480) ---- */
@media (max-width: 480px) {
	#masthead .header-mobile .logo a { width: 155px; max-width: 155px; }
}

/* ============================================================
   Hamburguesa
   ============================================================ */
.menu-lateral {
	display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
	width: 46px; height: 40px; padding: 0 10px; background: none; border: 0; cursor: pointer;
}
.menu-lateral span { display: block; height: 2px; width: 100%; background: #222; border-radius: 2px; }

/* ============================================================
   Drawer de menú móvil
   ============================================================ */
.oz-mnav { position: fixed; inset: 0; z-index: 100050; visibility: hidden; pointer-events: none; }
.oz-mnav.is-open { visibility: visible; pointer-events: auto; }
.oz-mnav__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s ease; }
.oz-mnav.is-open .oz-mnav__overlay { opacity: 1; }
.oz-mnav__panel {
	position: absolute; top: 0; left: 0; height: 100%; width: min(320px, 86vw);
	background: #fff; box-shadow: 2px 0 24px rgba(0,0,0,.18); overflow-y: auto;
	transform: translateX(-100%); transition: transform .28s ease; padding: 10px 0 28px;
}
.oz-mnav.is-open .oz-mnav__panel { transform: translateX(0); }
.oz-mnav__close { background: none; border: 0; cursor: pointer; color: #333; padding: 8px 16px; margin: 0 0 4px auto; display: block; }
.oz-mnav__list { list-style: none; margin: 0; padding: 0; }
.oz-mnav__list > li { position: relative; }
.oz-mnav__list a { display: block; padding: 13px 20px; color: #222; text-decoration: none; font-size: 15px; border-bottom: 1px solid #f0f0f0; }
.oz-mnav__list a:hover { background: #f6f7f8; color: var(--danger, #ff0047); }
.oz-mnav__list .menu-item-has-children > a::after { content: "\203A"; float: right; transform: rotate(90deg); opacity: .55; }
.oz-mnav__list .menu-item-has-children.is-open > a::after { transform: rotate(-90deg); }
.oz-mnav__list .sub-menu { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .28s ease; background: #fafbfc; }
.oz-mnav__list .menu-item-has-children.is-open > .sub-menu { max-height: 700px; }
.oz-mnav__list .sub-menu a { padding-left: 38px; font-size: 14px; color: #4b5563; }
body.oz-mnav-lock { overflow: hidden; }

/* ============================================================
   Botón + Drawer de categorías de máquinas (ícono maquinas.png,
   desliza desde la DERECHA — equivalente al .maquinas-fixed-lateral
   del tema legacy ozado, aquí con contenido real de WooCommerce)
   ============================================================ */
.maquinas-lateral {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 40px; padding: 0; background: none; border: 0; cursor: pointer;
}
.maquinas-lateral img { display: block; width: 24px; height: 24px; object-fit: contain; }

.oz-maqnav { position: fixed; inset: 0; z-index: 100050; visibility: hidden; pointer-events: none; }
.oz-maqnav.is-open { visibility: visible; pointer-events: auto; }
.oz-maqnav__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s ease; }
.oz-maqnav.is-open .oz-maqnav__overlay { opacity: 1; }
.oz-maqnav__panel {
	position: absolute; top: 0; right: 0; height: 100%; width: min(270px, 80vw);
	background: #5b6672; box-shadow: -2px 0 24px rgba(0,0,0,.18); overflow-y: auto;
	transform: translateX(100%); transition: transform .28s ease; padding: 54px 0 28px;
}
.oz-maqnav.is-open .oz-maqnav__panel { transform: translateX(0); }
.oz-maqnav__close {
	position: absolute; top: 8px; right: 8px;
	background: none; border: 0; cursor: pointer; color: #fff; padding: 8px;
}
.oz-maqnav__list { list-style: none; margin: 0; padding: 0 24px; }
.oz-maqnav__list li + li { margin-top: 18px; }
.oz-maqnav__list a { display: block; color: #fff; text-decoration: none; font-size: 15px; }
.oz-maqnav__list a:hover { color: #ff0047; }