/* Disparador — calca exacta de .nav-productos/.nav-hamburger de propuesta-v2.html,
   vive dentro de la barra navy-deep (#0F1F5C) del segundo row de nav. */
.omega-hw-menu-productos { position: relative; height: 45px; display: flex; }
.menu-productos-trigger {
	display: flex; align-items: center; gap: 8px;
	height: 45px;
	padding: 0 18px;
	border: none;
	border-right: 1px solid rgba(255,255,255,0.1);
	background: transparent;
	font-family: Gotham, sans-serif !important;
	font-size: 13px; font-weight: 700;
	color: #fff !important;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 140ms;
	flex-shrink: 0;
	white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
	.menu-productos-trigger:hover { background: rgba(255,255,255,0.08); color: #fff !important; }
}
/* Tamaño configurable desde Elementor (Style → Ícono, responsive) vía la
   variable --omega-hamburger-ancho (default 16px, misma proporción de
   siempre: alto = ancho/8, espacio entre líneas = ancho*0.21875 — así las
   3 líneas escalan juntas sin desarmar el ícono). */
.menu-productos-hamburger {
	display: flex; flex-direction: column;
	gap: calc(var(--omega-hamburger-ancho, 16px) * 0.21875);
}
.menu-productos-hamburger span {
	width: var(--omega-hamburger-ancho, 16px);
	height: calc(var(--omega-hamburger-ancho, 16px) * 0.125);
	background: #fff;
	border-radius: 1px;
	display: block;
}

/* Móvil: solo el icono, sin texto "PRODUCTOS" — mismo azul que los iconos de
   Mi cuenta/Carrito (omega-hw-nav-action, #334155) en vez de blanco, porque
   ahí ya no vive dentro de la barra navy sino junto a esos otros iconos. */
@media (max-width: 768px) {
	.menu-productos-trigger {
		padding: 0 10px;
		gap: 0;
		border-right: none;
		color: #334155 !important;
	}
	.menu-productos-trigger-text { display: none; }
	.menu-productos-hamburger span { background: #334155; }
}

/* Overlay + panel — ocultos hasta que .omega-hw-menu-productos tenga .is-open */
.menu-productos-overlay {
	position: fixed; inset: 0;
	background: rgba(15,31,92,0.5);
	opacity: 0; visibility: hidden;
	transition: opacity 200ms cubic-bezier(0.23,1,0.32,1), visibility 0s linear 200ms;
	z-index: 99998;
}
.menu-productos-panel {
	position: fixed; top: 0; left: 0; bottom: 0;
	width: 100%; max-width: 400px;
	background: #fff;
	z-index: 99999;
	display: flex; flex-direction: column;
	transform: translateX(-100%);
	transition: transform 200ms cubic-bezier(0.23,1,0.32,1);
	box-shadow: 0 0 32px rgba(15,31,92,0.25);
}
/* El panel queda encerrado en el z-index de su fila del header (Elementor: 99)
   y la fila del logo/carrito tiene 100, así que el logo se veía encima del
   drawer abierto (2026-10-05). Dentro de la fila pasa lo mismo: la columna del
   drawer y la del menú azul tienen 99 y gana la que va después. Mientras está
   abierto, sube cada contenedor que lo envuelve (fila y columna). */
.elementor-location-header .e-con:has(.omega-hw-menu-productos.is-open),
.elementor-location-header .elementor-section.elementor-top-section:has(.omega-hw-menu-productos.is-open) {
	z-index: 1000 !important;
}
.omega-hw-menu-productos.is-open .menu-productos-overlay {
	opacity: 1; visibility: visible;
	transition: opacity 240ms cubic-bezier(0.23,1,0.32,1), visibility 0s;
}
.omega-hw-menu-productos.is-open .menu-productos-panel {
	transform: translateX(0);
	transition: transform 240ms cubic-bezier(0.23,1,0.32,1);
}
@media (prefers-reduced-motion: reduce) {
	.menu-productos-overlay, .menu-productos-panel { transition: opacity 120ms linear !important; transform: none !important; }
}

body.omega-hw-menu-lock-scroll { overflow: hidden; }

.menu-productos-panel-header {
	background: #1e3a8a;
	flex-shrink: 0;
}
.menu-productos-panel-header-top {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 20px 12px;
}
.menu-productos-panel-title {
	font-family: Gotham, sans-serif !important; font-weight: 700; font-size: 15px;
	letter-spacing: 0.04em;
	color: #fff;
}
.menu-productos-close {
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	border: none; background: transparent;
	color: #fff !important;
	font-size: 22px; line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background 140ms;
}
@media (hover: hover) and (pointer: fine) {
	.menu-productos-close:hover { background: rgba(255,255,255,0.15); }
}
.menu-productos-account {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 20px 16px;
	font-family: GothamBook, Gotham, sans-serif !important;
	font-size: 14px; font-weight: 700;
	color: #fff !important;
	text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
	.menu-productos-account:hover { text-decoration: underline; color: #fff !important; }
}

/* Mismo azul que .section-eyebrow (Catálogo, LO MÁS PEDIDO, etc.) en el
   resto del sitio y que el botón Ofertas -- el gris apagado que tenía antes
   es el tratamiento que la propuesta reserva para casos más discretos
   (ej. el eyebrow de Marcas), no para etiquetas de sección como esta. */
.menu-productos-section-label {
	padding: 14px 20px 4px;
	font-family: Gotham, sans-serif !important; font-weight: 800; font-size: 12px;
	letter-spacing: 0.06em; text-transform: uppercase;
	color: #0369A1;
}
.menu-productos-divider {
	height: 1px;
	margin: 8px 20px;
	background: #e2e8f0;
}

.menu-productos-body { position: relative; flex: 1; overflow: hidden; }

/* Los sub-niveles viven anidados dentro de su <li> padre (así el "volver" es
   simplemente subir al <ul> contenedor en el propio árbol del DOM). Por eso NO
   se puede ocultar el nivel inactivo con display:none — un display:none en un
   ancestro oculta también a sus descendientes aunque tengan position:absolute,
   así que el nivel activo (varios niveles adentro) nunca llegaría a pintarse.
   visibility sí se puede "revertir" en un descendiente aunque el ancestro esté
   oculto, por eso es lo que controla qué nivel se ve. */
.menu-productos-list, .menu-productos-sublist {
	position: absolute; inset: 0;
	overflow-y: auto;
	list-style: none; margin: 0; padding: 8px 0;
	background: #fff;
	visibility: hidden;
}
.menu-productos-list.is-active, .menu-productos-sublist.is-active { visibility: visible; }

.menu-productos-row {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%;
	padding: 13px 20px;
	border: none;
	background: transparent;
	font-family: GothamBook, Gotham, sans-serif !important;
	font-size: 14px; font-weight: 600;
	color: #0f172a !important;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	.menu-productos-row:hover { background: #f1f5f9; color: #1e3a8a !important; }
}
.menu-productos-chevron { flex-shrink: 0; color: #94a3b8; }

/* Fila estilo "Ayuda y configuración" de Amazon: ícono + texto alineados a
   la izquierda (la fila base trae justify-content:space-between pensado
   para las categorías con chevron a la derecha; acá no hay chevron). */
.menu-productos-row-config { justify-content: flex-start; }
.menu-productos-row-config svg { flex-shrink: 0; color: #64748b; }

.menu-productos-back {
	border-bottom: 1px solid #e2e8f0;
	margin-bottom: 4px;
}
.menu-productos-back-btn {
	display: flex; align-items: center; gap: 8px;
	width: 100%;
	padding: 13px 20px;
	border: none;
	background: transparent;
	font-family: GothamBook, Gotham, sans-serif !important;
	font-size: 13px; font-weight: 600;
	color: #1e3a8a !important;
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	.menu-productos-back-btn:hover { background: #f1f5f9; }
}
.menu-productos-sublist-title {
	padding: 0 20px 12px;
	font-family: Gotham, sans-serif !important;
	font-size: 16px; font-weight: 800;
	color: #0f172a;
}

@media (max-width: 480px) {
	.menu-productos-panel { max-width: 70%; }
}