.omega-hw-nav-action {
	display: flex; align-items: center; gap: 6px;
	padding: 8px 12px;
	border-radius: 7px;
	font-size: 13px; font-weight: 600;
	color: #334155;
	text-decoration: none;
	position: relative;
	transition: background 140ms, color 140ms;
}
@media (hover: hover) and (pointer: fine) {
	.omega-hw-nav-action:hover { background: #f1f5f9; color: #1e3a8a; }
}
.omega-hw-carrito { padding-right: 18px; }
.omega-hw-nav-icon { display: flex; }
/* Tamaño por defecto — cada widget (Mi cuenta / Carrito) trae su propio
   control responsive en Elementor (Style → Ícono) que pisa esto por
   breakpoint sin tocar este archivo. */
.omega-hw-nav-icon svg { width: 20px; height: 20px; }
.omega-hw-nav-label { display: flex; flex-direction: column; line-height: 1.2; }
.omega-hw-nav-title { font-size: 11px; line-height: 1.2; }
.omega-hw-nav-sub { font-size: 10px; color: #64748b; font-weight: 400; }
.omega-hw-carrito-badge {
	position: absolute; top: 4px; right: 4px;
	width: 18px; height: 18px;
	background: #0369a1; color: #fff;
	border-radius: 50%;
	font-size: 10px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}

/* Móvil: solo icono en Mi cuenta y Carrito. Sucursal se queda visible con nombre corto — ver widget-sucursal.php */
@media (max-width: 768px) {
	.omega-hw-mi-cuenta .omega-hw-nav-label,
	.omega-hw-carrito .omega-hw-nav-label { display: none; }
	.omega-hw-nav-sub.omega-hw-carrito-contador { display: none; } /* el conteo pasa al badge en móvil */
}

/* Sucursal: pastilla navy que abre el popup de selección (data-abrir-modal-sucursal,
   definido en functions.php) — no es un <select> nativo: un <select> no se puede
   diseñar más allá del estado cerrado (la lista la pinta el sistema operativo), así
   que usamos un botón con look de select (label + valor + chevron) para tener control
   total del popup. SÍ se queda visible en móvil (a diferencia de Mi cuenta/Carrito) —
   es la pieza que en el mockup V2 desaparecía por completo dentro de la topbar oculta;
   aquí vive en la fila principal del header, nunca dentro de un bloque que se oculta. */
.omega-hw-sucursal-pill {
	display: inline-flex; align-items: center; gap: 6px;
	background: transparent;
	padding: 7px 12px;
	border-radius: 7px;
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
	transition: color 140ms;
}
.omega-hw-sucursal-pill-valor {
	font-family: GothamBook, Gotham, sans-serif !important; font-weight: 700;
	max-width: 160px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.omega-hw-sucursal-pill-chevron { flex-shrink: 0; opacity: 0.6; }
/* Vive sobre el fondo navy-deep del header (#0f1f5c) — texto blanco translúcido en
   reposo (mismo tratamiento que .topbar-link de la propuesta), blanco sólido en hover.
   El tema sobreescribe el color de cualquier <a> en :hover con !important propio —
   mismo blindaje ya aplicado en el mini-carrito y en los botones de la card. */
a.omega-hw-sucursal-pill,
a.omega-hw-sucursal-pill .omega-hw-sucursal-pill-valor {
	color: #ffffff73 !important;
}
@media (hover: hover) and (pointer: fine) {
	a.omega-hw-sucursal-pill:hover,
	a.omega-hw-sucursal-pill:hover .omega-hw-sucursal-pill-valor {
		color: #ffffff !important;
	}
}
@media (max-width: 768px) {
	.omega-hw-sucursal-pill-valor { max-width: 110px; }
}
@media (max-width: 480px) {
	.omega-hw-sucursal-pill-valor { max-width: 80px; }
}

/* Mini-carrito: panel que aparece al hacer hover sobre el ícono del carrito.
   Solo en dispositivos con mouse real — en touch el link sigue llevando directo
   al carrito (misma lógica de fallback que el resto del sitio), así que la acción
   principal nunca depende del hover. */
.omega-hw-carrito-wrap { position: relative; display: flex; }

/* Header fijo (sticky de Elementor Pro): cada fila fija recibe
   "z-index: var(--z-index, 99)", así que la fila del carrito y la barra del menú
   quedaban empatadas en 99 y ganaba la del menú (va después en el HTML): el
   mini-carrito, aunque tenga z-index 200, solo compite DENTRO de su fila y
   quedaba tapado por la barra azul (confirmado en vivo, 2026-09-24).
   Se sube un nivel cualquier fila fija que contenga el carrito o Mi cuenta.
   Selector con .e-con / .elementor-section para ganarle en especificidad a
   ".e-con.elementor-sticky--active" sin depender del orden de carga. */
.e-con.elementor-sticky--active:has(.omega-hw-nav-action),
.elementor-section.elementor-sticky--active:has(.omega-hw-nav-action) {
	z-index: 100;
}

/* Páginas internas: la fila del logo / buscador / Mi cuenta quedó sin fondo en
   Elementor (para la home, donde va sobre el slider), y al bajar, ya fija, se
   veía el contenido de la página a través de ella. Fija = blanca. La fila del
   menú no entra (tiene su navy, ver menu-primary.css); la home la maneja
   hero-slider.css. */
body:not(:has(.omega-hw-hero-header-encima-si)) .elementor-location-header .e-con.e-parent.elementor-sticky--active:not(:has(.omega-hw-menu-primary)) {
	background-color: #fff;
}

.omega-hw-mini-cart {
	position: absolute;
	top: 100%;
	right: 0;
	width: 300px;
	max-width: calc(100vw - 24px);
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(15,31,92,0.16);
	padding: 16px;
	z-index: 200;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px) scale(0.97);
	transform-origin: top right;
	transition: opacity 160ms cubic-bezier(0.23,1,0.32,1), transform 160ms cubic-bezier(0.23,1,0.32,1), visibility 0s linear 160ms;
}
@media (hover: hover) and (pointer: fine) {
	.omega-hw-carrito-wrap:hover .omega-hw-mini-cart {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0) scale(1);
		transition: opacity 160ms cubic-bezier(0.23,1,0.32,1), transform 160ms cubic-bezier(0.23,1,0.32,1);
	}
}
@media (prefers-reduced-motion: reduce) {
	.omega-hw-mini-cart,
	.omega-hw-carrito-wrap:hover .omega-hw-mini-cart {
		transform: none;
		transition: opacity 120ms linear, visibility 0s linear;
	}
}

.omega-hw-mini-cart-empty {
	display: flex; flex-direction: column; align-items: center;
	padding: 20px 8px;
	text-align: center;
}
.omega-hw-mini-cart-empty svg { color: #cbd5e1; margin-bottom: 8px; }
.omega-hw-mini-cart-empty p { margin: 0; font-size: 13px; font-weight: 500; color: #334155; }

.omega-hw-mini-cart-items { display: flex; flex-direction: column; gap: 12px; max-height: 280px; overflow-y: auto; }
.omega-hw-mini-cart-item { display: flex; align-items: flex-start; gap: 10px; }
.omega-hw-mini-cart-thumb {
	width: 44px; height: 44px;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
	background: #f1f5f9;
	object-fit: cover;
	flex-shrink: 0;
}
.omega-hw-mini-cart-item-info { min-width: 0; flex: 1; }
.omega-hw-mini-cart-item-name {
	font-family: GothamBook, Gotham, sans-serif; font-weight: normal;
	font-size: 13px; color: #0f172a; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	margin-bottom: 2px;
}
.omega-hw-mini-cart-item-qty { font-size: 11.5px; color: #64748b; }
.omega-hw-mini-cart-remove {
	flex-shrink: 0;
	width: 20px; height: 20px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	font-size: 16px; line-height: 1;
	font-weight: normal;
	color: #94a3b8;
	text-decoration: none;
	transition: background 140ms, color 140ms;
}
@media (hover: hover) and (pointer: fine) {
	.omega-hw-mini-cart-remove:hover { background: #fee2e2; color: #b91c1c; }
}

.omega-hw-mini-cart-subtotal {
	display: flex; align-items: baseline; justify-content: space-between;
	margin-top: 14px; padding-top: 12px;
	border-top: 1px solid #e2e8f0;
	font-size: 12px; font-weight: 600; color: #334155;
}
.omega-hw-mini-cart-subtotal strong { font-size: 15px; font-weight: 800; color: #0f1f5c; }

.omega-hw-mini-cart-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.omega-hw-mini-cart-btn {
	display: flex; align-items: center; justify-content: center;
	width: 100%; padding: 10px;
	border-radius: 6px;
	font-size: 12.5px; font-weight: 700;
	text-decoration: none;
	border: 1.5px solid #1e3a8a;
	transition: background 140ms, color 140ms, border-color 140ms;
}
.omega-hw-mini-cart-btn-outline { background: #fff; }
.omega-hw-mini-cart-btn-solid { background: #1e3a8a; }
@media (hover: hover) and (pointer: fine) {
	.omega-hw-mini-cart-btn-outline:hover { background: #f1f5f9; }
	.omega-hw-mini-cart-btn-solid:hover { background: #0f1f5c; border-color: #0f1f5c; }
}
/* El tema sobreescribe el color de cualquier <a> en :hover con !important propio —
   ganado ya una vez con las tarjetas de producto (ver grid-productos.css). Acá ese
   !important le empataba en especificidad a un simple ".clase:hover", así que se
   sube la especificidad calificando con el wrapper + doble clase + tag, para que
   nuestro !important gane sin importar el orden de carga. */
.omega-hw-carrito-wrap a.omega-hw-mini-cart-btn.omega-hw-mini-cart-btn-outline,
.omega-hw-carrito-wrap a.omega-hw-mini-cart-btn.omega-hw-mini-cart-btn-outline:hover {
	color: #1e3a8a !important;
}
.omega-hw-carrito-wrap a.omega-hw-mini-cart-btn.omega-hw-mini-cart-btn-solid,
.omega-hw-carrito-wrap a.omega-hw-mini-cart-btn.omega-hw-mini-cart-btn-solid:hover {
	color: #fff !important;
}

@media (max-width: 480px) {
	.omega-hw-mini-cart { right: -8px; }
}