/* ==========================================================================
   C2b · Mega menú de categorías — IMEXSU
   El marcado lo monta inc/megamenu.php, sustituyendo la salida de
   wp_nav_menu en el desplegable de categorías de Woodmart.

   Tres piezas, en fila: raíl de categorías, paneles (solo uno visible) y
   la tarjeta oscura, que es única para todo el desplegable y por eso vive
   fuera de los paneles.

   Las flechas de las categorías y de los enlaces se dibujan aquí con dos
   bordes y un giro, no con SVG: son más de doscientos iconos idénticos y
   puramente decorativos, y en marcado costaban unos 22 KB y 400 nodos de
   DOM en TODAS las páginas del sitio.

   Contrastes: #fff sobre #050A62 = 17,13:1 · #1F2937 sobre #F5F7FA = 12,44:1
   · #5B6472 sobre blanco = 5,98:1 · #1668C4 sobre blanco = 5,49:1 ·
   #D7DCE3 sobre el degradado de la tarjeta = 12,42:1 medido contra su
   parada más clara (#050A62).
   ========================================================================== */

/* --- 1. El contenedor del tema -----------------------------------------
   Woodmart lo trae como columna estrecha. Aquí pasa a ser el panel ancho
   de la maqueta, anclado al borde izquierdo del contenedor, que es justo
   donde está el botón que lo abre.
   ----------------------------------------------------------------------- */
.wd-header-cats .wd-dropdown-cats{
	left: 0;
	width: min(1240px, calc(100vw - 32px));
	max-width: none;
	padding: 0;
	border-radius: 0 0 var(--imx-r-lg) var(--imx-r-lg);
	box-shadow: 0 24px 60px rgba(3, 6, 63, .38);
	overflow: hidden;
}

.imx-mm{
	display: flex;
	align-items: stretch;
	background: var(--imx-surface);
}

/* La flecha compartida: un cuadrado al que se le pintan dos lados y se
   gira 45°. Hereda el color del texto, así que sirve igual sobre el raíl
   claro y sobre la categoría activa en azul. */
.imx-mm__cat > a::after,
.imx-mm__lista a::after{
	content: "";
	flex-shrink: 0;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
}

/* --- 2. Raíl de categorías ---------------------------------------------
   El tope de altura va AQUÍ y no en el panel, y es lo que decide lo alto
   que sale todo: son 22 categorías a 36 px, o sea 800 px de lista, y si se
   le deja crecer el panel queda mucho más alto que su propio contenido y
   se abre un socavón blanco a la derecha. Capado, el raíl se desplaza y el
   panel mide lo que mide lo que enseña.
   ----------------------------------------------------------------------- */
.imx-mm__rail{
	width: 268px;
	flex-shrink: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 14px;
	list-style: none;
	background: var(--imx-surface-alt);
	border-right: 1px solid var(--imx-line);
	max-height: min(470px, calc(100vh - 220px));
	overflow-y: auto;
	overscroll-behavior: contain;
}

.imx-mm__rail > li{ margin: 0; padding: 0; border: 0; }

.imx-mm__rail > li > a{
	display: flex;
	align-items: center;
	gap: 11px;
	height: 36px;
	padding: 0 12px;
	border-radius: var(--imx-r-sm);
	font-size: 13.5px;
	line-height: 1.2;
	color: var(--imx-text);
	transition: background-color .12s ease, color .12s ease;
}

.imx-mm__rail .nav-link-text{ flex-grow: 1; }

.imx-mm__c{
	font-size: 12px;
	color: var(--imx-text-muted);
	font-variant-numeric: tabular-nums;
}

.imx-mm__cat > a::after{ width: 5px; height: 5px; opacity: .45; }

.imx-mm__rail > li > a:hover{
	background: #E9EDF3;
	color: var(--imx-ink);
}

/* La categoría enfocada. La clase la pone megamenu.js; la primera viene ya
   marcada desde el servidor para que nunca se vea un hueco. */
.imx-mm__cat.is-active > a,
.imx-mm__cat.is-active > a:hover{
	background: var(--imx-brand);
	color: #fff;                 /* 17,13:1 */
	font-weight: 600;
}

.imx-mm__cat.is-active .imx-mm__c{ color: var(--imx-on-ink-soft); } /* 10,05:1 */
.imx-mm__cat.is-active > a::after{ opacity: 1; }

/* «Todas las categorías» y cualquier otro ítem que no sea taxonomía. */
.imx-mm__otro > a{ font-weight: 600; color: var(--imx-action); }
.imx-mm__otro > a:hover{ color: var(--imx-action-hover); }

/* --- 3. Paneles --------------------------------------------------------- */
.imx-mm__panes{
	flex-grow: 1;
	min-width: 0;
	overflow-y: auto;
}

.imx-mm__pane{ display: none; padding: 26px 30px; box-sizing: border-box; }
.imx-mm__pane.is-active{ display: block; }

.imx-mm__cabeza{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 22px;
}

/* El nombre de la categoría NO es un encabezado: este panel va en la
   cabecera, antes del H1 de la página. Lleva el tamaño del tablero y
   ningún peso semántico. */
.imx-mm__titulo{
	margin: 0;
	font-family: var(--imx-display);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--imx-ink);
}

.imx-mm__sub{
	margin: 7px 0 0;
	font-size: 13.5px;
	color: var(--imx-text-muted);
	font-variant-numeric: tabular-nums;
}

.imx-mm__todo{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--imx-action);
}

.imx-mm__todo:hover{ color: var(--imx-action-hover); }

/* --- 4. Columnas: tarjeta arriba, enlaces debajo -----------------------
   Es la estructura del tablero. La tarjeta lleva foto, nombre y precio; los
   enlaces son el resto de productos de la categoría, repartidos entre las
   tres columnas.
   ----------------------------------------------------------------------- */
.imx-mm__cols{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	align-items: start;
}

.imx-mm__prod{ display: block; color: inherit; }

.imx-mm__prod-img{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 128px;
	margin-bottom: 12px;
	border: 1px solid var(--imx-line);
	border-radius: var(--imx-r-md);
	background: var(--imx-surface-alt);
	overflow: hidden;
	transition: border-color .15s ease;
}

.imx-mm__prod-img img{ max-width: 72%; max-height: 78%; width: auto; height: auto; }
.imx-mm__prod:hover .imx-mm__prod-img{ border-color: var(--imx-action); }

.imx-mm__prod-n{
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--imx-ink);
	margin-bottom: 5px;
}

.imx-mm__prod:hover .imx-mm__prod-n{ color: var(--imx-action); }

/* El precio ya trae su unidad de venta del mu-plugin; aquí solo se viste.
   El bloque es el contenedor, NO los importes: el rango de un producto
   variable son dos .amount y ponerlos en bloque los partía en dos líneas.
   La familia se fuerza a la de cuerpo porque .price hereda otras reglas
   dentro de la cabecera. */
.imx-mm__prod-p{
	display: block;
	font-family: var(--imx-body);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--imx-text-muted);   /* 5,98:1 */
	font-variant-numeric: tabular-nums;
	line-height: 1.45;
}

.imx-mm__prod-p .price{ font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; }
.imx-mm__prod-p del{ opacity: .7; }
.imx-mm__prod-p ins{ text-decoration: none; }

.imx-mm__lista{
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.imx-mm__lista a{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--imx-action);       /* 5,49:1 */
}

.imx-mm__lista a:hover{ color: var(--imx-action-hover); }

/* La flecha, pegada al borde derecho y alineada con la PRIMERA línea del
   nombre, que muchos ocupan dos. */
.imx-mm__lista a::after{
	width: 4px;
	height: 4px;
	margin: 5px 0 0 auto;
	border-width: 1.6px;
}

/* --- 5. Tarjeta de la derecha ------------------------------------------
   Una sola para todo el desplegable, fuera de los paneles: el texto no
   depende de la categoría, y repetirla en los 22 era una quinta parte del
   peso del menú. Si algún día hay un titular por categoría, vuelve dentro.
   ----------------------------------------------------------------------- */
.imx-mm__promo{
	width: 286px;
	flex-shrink: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin: 26px 30px 26px 0;
	padding: 24px;
	border-radius: var(--imx-r-md);
	background: linear-gradient(150deg, var(--imx-ink), var(--imx-brand));
}

.imx-mm__promo-regla{
	display: block;
	width: 34px;
	height: 4px;
	margin-bottom: 16px;
	background: var(--imx-accent);
}

.imx-mm__promo-eyebrow{
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--imx-accent);       /* 14,54:1 */
}

.imx-mm__promo-titulo{
	margin: 0 0 20px;
	font-family: var(--imx-display);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;                    /* 17,13:1 */
}

.imx-mm__promo-sellos{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 13px;
	color: var(--imx-on-ink);       /* 12,42:1 */
}

.imx-mm__promo-sellos li{ display: flex; gap: 10px; line-height: 1.45; }
.imx-mm__promo-sellos svg{ width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--imx-accent); }

.imx-mm__promo-cta{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 46px;
	margin-top: auto;
	border-radius: var(--imx-r-sm);
	background: var(--imx-accent);
	color: var(--imx-accent-ink);   /* 14,54:1 — el amarillo nunca con blanco */
	font-size: 13.5px;
	font-weight: 700;
	text-align: center;
}

.imx-mm__promo-cta:hover{ background: #E6D900; color: var(--imx-accent-ink); }

/* --- 6. Estrecho --------------------------------------------------------
   Por debajo de 1024 Woodmart sirve el menú móvil y este desplegable no
   llega a abrirse, pero si alguien fuerza la cabecera de escritorio en una
   tableta el panel no cabe: se queda solo el raíl, que sigue llevando a
   cada categoría.
   ----------------------------------------------------------------------- */
@media (max-width: 1199px){
	.imx-mm__promo{ display: none; }
	.imx-mm__cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px){
	.wd-header-cats .wd-dropdown-cats{ width: auto; }
	.imx-mm__panes{ display: none; }
	.imx-mm__rail{ width: 260px; border-right: 0; max-height: none; }
	.imx-mm__cat > a::after{ display: none; }
}