/**
 * Zenth Toolkit — Nav Menu Mega Panel v3.1 (CR Editorial Dark)
 *
 * Nav horizontal de header con paneles dropdown full-width (mega menú). Tema
 * dark editorial: cards con label/caption sobre imagen, featured block lateral,
 * underline animado bajo el trigger activo y stagger de entrada de los items.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Wrapper + tokens   → .zenth-nav-mega-wrapper (variables --zenth-nav-*)
 *   §2  Nav bar            → mega / list / item / link / chevron
 *   §3  Underline + empty  → underline animado + estado vacío
 *   §4  Panels container   → .zenth-nav-mega-panels (capa absolute full-width)
 *   §5  Panel              → panel + is-active + inner + content + eyebrow
 *   §6  Grid + columnas    → grid + cols-auto / cols-2..6
 *   §7  Item (card)        → thumb + img + overlay + body + label + caption
 *   §8  Tags               → badges NEW / HOT / SOLD_OUT
 *   §9  Featured block     → bloque destacado lateral + CTA rojo
 *   §10 Responsive         → @media de tamaño + subsección de accesibilidad
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS usados acá:  1200 (reduce cols / oculta featured) · 1199 (oculta
 *   todo el nav mega y cae al hamburguesa). + 1 media de accesibilidad
 *   (prefers-reduced-motion). Todo consolidado en §10.
 * ─────────────────────────────────────────────────────────────────────────
 * CHANGELOG
 * v3.1 changes (rediseño editorial dark):
 *   + Background del panel: NEGRO (#0A0A0A)
 *   + Cards editoriales con label/caption ENCIMA de imagen vía gradient
 *   + Aspect ratio 4:5 ahora aplicado al item completo (no solo thumb)
 *   + Border radius bajado: 6px → 4px (más sutil, más editorial)
 *   + Featured CTA: glassmorphism → rojo sólido CR (#E8001D)
 *   + Featured title: 22px → 32px, weight 700 → 800
 *   + Eyebrow + subtitle ajustados a paleta dark
 *   + Tags (NEW/HOT) con shadow sutil para mejor contraste sobre fotos
 *
 * v3.0 base (Etapa 2):
 *   + Underline animado bajo trigger activo
 *   + Stagger de items al abrir (cascada)
 *   + Featured block lateral derecho
 *   + Columnas configurables por panel
 *   + Transición de altura suave
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · WRAPPER + TOKENS — .zenth-nav-mega-wrapper
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-nav-mega-wrapper {
	--zenth-nav-bg: #000000;
	--zenth-nav-text: #ffffff;
	--zenth-nav-text-muted: rgba(255, 255, 255, 0.65);
	--zenth-nav-accent: #E8001D;
	--zenth-nav-border: rgba(255, 255, 255, 1);
	--zenth-nav-hover-bg: rgba(255, 255, 255, 0.04);
	--zenth-nav-shadow: none;
	--zenth-nav-speed: 240ms;
	--zenth-nav-speed-slow: 360ms;
	--zenth-nav-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--zenth-nav-z: 999990;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-family: inherit;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · NAV BAR — mega / list / item / link / chevron
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-nav-mega-wrapper .zenth-nav-mega {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
}

.zenth-nav-mega-wrapper .zenth-nav-mega__list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.zenth-nav-mega-wrapper .zenth-nav-mega__item {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.zenth-nav-mega-wrapper .zenth-nav-mega__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 12px 10px !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	color: var(--zenth-nav-text) !important;
	font-family: inherit !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: color 150ms ease;
	outline: none !important;
	white-space: nowrap;
}

.zenth-nav-mega-wrapper .zenth-nav-mega__link:hover,
.zenth-nav-mega-wrapper .zenth-nav-mega__link:focus-visible,
.zenth-nav-mega-wrapper .zenth-nav-mega__item[data-active="true"] > .zenth-nav-mega__link {
	color: var(--zenth-nav-accent) !important;
	background: transparent !important;
}

.zenth-nav-mega-wrapper .zenth-nav-mega__link:focus-visible {
	outline: 2px solid var(--zenth-nav-accent) !important;
	outline-offset: 2px;
}

.zenth-nav-mega-wrapper .zenth-nav-mega__chevron {
	display: inline-flex;
	align-items: center;
	transition: transform var(--zenth-nav-speed) var(--zenth-nav-ease);
}

.zenth-nav-mega-wrapper .zenth-nav-mega__item[data-active="true"] .zenth-nav-mega__chevron {
	transform: rotate(180deg);
}

.zenth-nav-mega-wrapper .zenth-nav-mega__chevron svg {
	display: block;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · UNDERLINE + EMPTY — underline animado + estado vacío
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-nav-mega-wrapper .zenth-nav-mega__underline {
	position: absolute;
	bottom: 4px;
	left: 14px;
	right: 14px;
	height: 2px;
	background: var(--zenth-nav-accent);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform var(--zenth-nav-speed) var(--zenth-nav-ease);
	pointer-events: none;
}

.zenth-nav-mega-wrapper .zenth-nav-mega__link:hover .zenth-nav-mega__underline,
.zenth-nav-mega-wrapper .zenth-nav-mega__link:focus-visible .zenth-nav-mega__underline,
.zenth-nav-mega-wrapper .zenth-nav-mega__item[data-active="true"] .zenth-nav-mega__underline {
	transform: scaleX(1);
}

.zenth-nav-mega-empty {
	padding: 8px 14px;
	font-size: 13px;
	color: var(--zenth-nav-text-muted);
	font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · PANELS CONTAINER — capa absolute full-width
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-nav-mega-wrapper .zenth-nav-mega-panels {
	position: absolute;
	top: var(--zenth-nav-panels-top, 100%);
	left: var(--zenth-nav-panels-left, 50%);
	transform: translateX(var(--zenth-nav-panels-translate, -50%));
	width: 100vw;
	max-width: 100vw;
	z-index: var(--zenth-nav-z);
	pointer-events: none;
	display: grid;
	grid-template-columns: 1fr;
}

.zenth-nav-mega-wrapper[data-active-panel-id] .zenth-nav-mega-panels {
	pointer-events: auto;
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · PANEL — panel + is-active + inner + content + eyebrow
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-nav-mega-wrapper .zenth-nav-mega-panel {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	background: var(--zenth-nav-bg);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: var(--zenth-nav-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--zenth-nav-speed) var(--zenth-nav-ease),
				transform var(--zenth-nav-speed) var(--zenth-nav-ease),
				visibility 0s linear var(--zenth-nav-speed);
	pointer-events: none;
}

.zenth-nav-mega-wrapper .zenth-nav-mega-panel.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity var(--zenth-nav-speed) var(--zenth-nav-ease),
				transform var(--zenth-nav-speed) var(--zenth-nav-ease),
				visibility 0s linear 0s;
	pointer-events: auto;
}

.zenth-nav-mega-wrapper .zenth-nav-mega-panel__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 40px 40px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

/* Con featured block: 2 columnas (contenido + featured 340px) */
.zenth-nav-mega-wrapper .zenth-nav-mega-panel--has-featured .zenth-nav-mega-panel__inner {
	grid-template-columns: 1fr 340px;
}

.zenth-nav-mega-wrapper .zenth-nav-mega-panel__content {
	min-width: 0;
}

.zenth-nav-mega-wrapper .zenth-nav-mega-panel__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--zenth-nav-text-muted);
	margin-bottom: 20px;
	display: inline-block;
}

/* Variante anchor: misma estética pero tappable, con transición sutil al hover. */
.zenth-nav-mega-wrapper a.zenth-nav-mega-panel__eyebrow--link {
	text-decoration: none;
	cursor: pointer;
	transition: color 180ms ease;
}

.zenth-nav-mega-wrapper a.zenth-nav-mega-panel__eyebrow--link:hover,
.zenth-nav-mega-wrapper a.zenth-nav-mega-panel__eyebrow--link:focus-visible {
	color: var(--cr-color-primary, #e8001d);
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · GRID + COLUMNAS — grid + cols-auto / cols-2..6
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-nav-mega-wrapper .zenth-nav-mega-panel__grid {
	display: grid;
	gap: 24px 20px;
}

/* Auto (default): grid con auto-fill y min 180px */
.zenth-nav-mega-panel--cols-auto .zenth-nav-mega-panel__grid {
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Columnas fijas — ancho controlado por modificador.

   La filosofía: cuando hay pocas cards (cols-2, cols-3) las hacemos
   más anchas para que llenen el panel sin desperdiciar espacio. El
   aspect-ratio del thumb cambia selectivamente para evitar que la
   altura del panel se dispare.

   - cols-2: 2 cards anchas (480px c/u) + thumb landscape 16/10
   - cols-3: 3 cards medianas (320px c/u) + thumb portrait 4/5
   - cols-4/5/6: grid completo 1fr, thumbs portrait 4/5 default

   `justify-content: start` mantiene el grid alineado a la izquierda
   y permite que el espacio sobrante quede a la derecha si el
   contenido no llena el max-width. */
.zenth-nav-mega-panel--cols-2 .zenth-nav-mega-panel__grid {
	grid-template-columns: repeat(2, minmax(0, 480px));
	justify-content: start;
}
.zenth-nav-mega-panel--cols-3 .zenth-nav-mega-panel__grid {
	grid-template-columns: repeat(3, minmax(0, 320px));
	justify-content: start;
}
.zenth-nav-mega-panel--cols-4 .zenth-nav-mega-panel__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.zenth-nav-mega-panel--cols-5 .zenth-nav-mega-panel__grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.zenth-nav-mega-panel--cols-6 .zenth-nav-mega-panel__grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · ITEM (CARD) — thumb + img + overlay + body + label + caption
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-nav-mega-wrapper .zenth-nav-mega-item {
	position: relative;
	display: block !important;
	text-decoration: none !important;
	color: var(--zenth-nav-text) !important;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 320ms var(--zenth-nav-ease),
				transform 320ms var(--zenth-nav-ease);
	/* Stagger: el delay se calcula por CSS custom property --stagger-index */
	transition-delay: calc(var(--stagger-index, 0) * 40ms);
}

/* Al activarse el panel, los items aparecen con stagger */
.zenth-nav-mega-wrapper .zenth-nav-mega-panel.is-active .zenth-nav-mega-item {
	opacity: 1;
	transform: translateY(0);
}

.zenth-nav-mega-wrapper .zenth-nav-mega-item__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 4px;
	overflow: hidden;
}

/* Override de aspect-ratio para cols-2: cards anchas (480px) con
   thumb landscape para que la altura total del panel coincida con
   los paneles de cols-auto/4/5 (mismo "shelf height" ~300px).

   Cálculo: 480px ancho × (10/16) = 300px altura → match con la
   altura de las cards portrait de cols-auto (240 × 5/4 = 300px). */
.zenth-nav-mega-panel--cols-2 .zenth-nav-mega-item__thumb {
	aspect-ratio: 16 / 10;
}

.zenth-nav-mega-wrapper .zenth-nav-mega-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms var(--zenth-nav-ease);
}

.zenth-nav-mega-wrapper .zenth-nav-mega-item:hover .zenth-nav-mega-item__thumb img {
	transform: scale(1.06);
}

.zenth-nav-mega-wrapper .zenth-nav-mega-item__thumb-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.08));
}

/* Gradient overlay inferior — siempre visible para que el texto blanco
   sea legible. Pure black abajo (0% opacity en arriba). */
.zenth-nav-mega-wrapper .zenth-nav-mega-item__thumb-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		#000000 0%,
		rgba(0, 0, 0, 0.5) 35%,
		rgba(0, 0, 0, 0) 65%);
	opacity: 1;
	transition: opacity 250ms var(--zenth-nav-ease);
	pointer-events: none;
	z-index: 1;
}

/* En hover el gradient se intensifica un poco para reforzar el feedback */
.zenth-nav-mega-wrapper .zenth-nav-mega-item:hover .zenth-nav-mega-item__thumb-overlay {
	background: linear-gradient(to top,
		#000000 0%,
		rgba(0, 0, 0, 0.6) 40%,
		rgba(0, 0, 0, 0.05) 70%);
}

/* Body posicionado absoluto en la parte inferior del thumb.
   Como bottom:0 + el item solo contiene el thumb en flow, queda
   alineado al borde inferior de la imagen sin necesidad de ser
   hijo del thumb directamente. */
.zenth-nav-mega-wrapper .zenth-nav-mega-item__body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 16px 18px;
	pointer-events: none;
}

.zenth-nav-mega-wrapper .zenth-nav-mega-item__label {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
	transition: color 200ms var(--zenth-nav-ease);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.zenth-nav-mega-wrapper .zenth-nav-mega-item:hover .zenth-nav-mega-item__label {
	color: var(--zenth-nav-accent);
}

.zenth-nav-mega-wrapper .zenth-nav-mega-item__caption {
	font-size: 12px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.3;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · TAGS — badges NEW / HOT / SOLD_OUT
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-nav-mega-wrapper .zenth-nav-mega-item__tag {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1;
	border-radius: 3px;
	text-transform: uppercase;
	color: #fff;
	z-index: 3;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.zenth-nav-mega-wrapper .zenth-nav-mega-item__tag--new {
	background: #2563eb;
}

.zenth-nav-mega-wrapper .zenth-nav-mega-item__tag--hot {
	background: var(--zenth-nav-accent);
}

.zenth-nav-mega-wrapper .zenth-nav-mega-item__tag--sold_out {
	background: #999999;
}


/* ═══════════════════════════════════════════════════════════════════════
   §9 · FEATURED BLOCK — bloque destacado lateral + CTA rojo
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-nav-mega-wrapper .zenth-nav-mega-panel__featured {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 4px;
	background: #1a1a1a;
	min-height: 100%;
	text-decoration: none !important;
	color: #fff !important;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 320ms var(--zenth-nav-ease),
				transform 320ms var(--zenth-nav-ease);
	/* Featured aparece al final del stagger */
	transition-delay: 200ms;
}

.zenth-nav-mega-wrapper .zenth-nav-mega-panel.is-active .zenth-nav-mega-panel__featured {
	opacity: 1;
	transform: translateY(0);
}

.zenth-nav-mega-wrapper .zenth-nav-mega-panel__featured-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--zenth-nav-ease);
}

.zenth-nav-mega-wrapper .zenth-nav-mega-panel__featured:hover .zenth-nav-mega-panel__featured-img {
	transform: scale(1.04);
}

.zenth-nav-mega-wrapper .zenth-nav-mega-panel__featured-overlay {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 0;
	width: 100%;
	min-height: 360px;
	padding: 32px 28px 28px;
	background: linear-gradient(to top,
		rgba(0, 0, 0, 0.88) 0%,
		rgba(0, 0, 0, 0.55) 40%,
		rgba(0, 0, 0, 0.1) 75%,
		rgba(0, 0, 0, 0) 100%);
}

.zenth-nav-mega-wrapper .zenth-nav-mega-panel__featured-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 8px;
}

.zenth-nav-mega-wrapper .zenth-nav-mega-panel__featured-title {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.05;
	color: #fff;
	margin-bottom: 6px;
	letter-spacing: -0.01em;
}

.zenth-nav-mega-wrapper .zenth-nav-mega-panel__featured-subtitle {
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 18px;
}

/* CTA rojo sólido — estilo CR consistente con otros botones del sitio */
.zenth-nav-mega-wrapper .zenth-nav-mega-panel__featured-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	background: var(--zenth-nav-accent);
	border: none;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #fff;
	transition: background 200ms var(--zenth-nav-ease),
				transform 200ms var(--zenth-nav-ease);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.zenth-nav-mega-wrapper .zenth-nav-mega-panel__featured-cta::after {
	content: '→';
	font-size: 14px;
	line-height: 1;
	transition: transform 200ms var(--zenth-nav-ease);
}

.zenth-nav-mega-wrapper .zenth-nav-mega-panel__featured:hover .zenth-nav-mega-panel__featured-cta {
	background: #ff0a23;
}

.zenth-nav-mega-wrapper .zenth-nav-mega-panel__featured:hover .zenth-nav-mega-panel__featured-cta::after {
	transform: translateX(4px);
}


/* ═══════════════════════════════════════════════════════════════════════
   §10 · RESPONSIVE — todos los @media de tamaño, de más ancho a más angosto
   ───────────────────────────────────────────────────────────────────────
   Tiers:  ≤1200 (reduce cols / oculta featured) → ≤1199 (oculta nav mega).
   La regla base correspondiente queda siempre ANTES de su @media. Al final,
   accesibilidad (prefers-reduced-motion), que NO es breakpoint de tamaño y
   no se consolida con los de arriba.
   ═══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────── ≤1200px · reduce cols + oculta featured ─────── */
@media (max-width: 1200px) {
	/* §6 · En viewports entre 1025-1200px reducir columnas grandes */
	.zenth-nav-mega-panel--cols-5 .zenth-nav-mega-panel__grid,
	.zenth-nav-mega-panel--cols-6 .zenth-nav-mega-panel__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* §9 · En viewport entre 1025-1200px ocultar featured para dar espacio al grid */
	.zenth-nav-mega-wrapper .zenth-nav-mega-panel--has-featured .zenth-nav-mega-panel__inner {
		grid-template-columns: 1fr;
	}
	.zenth-nav-mega-wrapper .zenth-nav-mega-panel__featured {
		display: none;
	}
}

/* ──────────────────────── ≤1199px · oculta el nav mega (→ hamburguesa) ── */
@media (max-width: 1199px) {
	/* §1 · El nav mega desaparece; el header cae al menú hamburguesa */
	.zenth-nav-mega-wrapper {
		display: none !important;
	}
}


/* ─────────────────── ACCESIBILIDAD · prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
	.zenth-nav-mega-wrapper *,
	.zenth-nav-mega-wrapper *::before,
	.zenth-nav-mega-wrapper *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
	.zenth-nav-mega-wrapper .zenth-nav-mega-item {
		transition-delay: 0ms !important;
	}
}