/**
 * Archivo de subcategoría de industria.
 *
 * Tres piezas: la fila de pastillas de las subcategorías hermanas, el filtro
 * lateral por marca e industria padre, y el acomodo en dos columnas de ese
 * filtro con la grilla de productos.
 */

/* ── Dos columnas ────────────────────────────────────────────────────────── */

/* Los ID los pone la plantilla de Elementor a mano (pestaña Avanzado de cada
   contenedor): son el gancho tanto de este ancho como del reemplazo por AJAX
   en subcategoria.js. */
#ax-filtro-zona {
	flex: 0 0 260px;
}

#ax-productos-zona {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 900px) {
	#ax-subcategoria-fila {
		flex-wrap: wrap;
	}

	#ax-filtro-zona,
	#ax-productos-zona {
		flex-basis: 100%;
	}
}

/* ── Hermanas ────────────────────────────────────────────────────────────── */

.ax-hermanas__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

/* Apariencia (color/borde/hover/activo) de .ax-hermanas__tag: unificada con
   .nav-search-tag, .blog-filtro-tag y .entry-tag en layout.css (tema), que
   se carga siempre — ver el comentario ahí. Acá solo queda el layout de la
   fila (.ax-hermanas__lista, arriba). */

/* ── Filtro lateral ──────────────────────────────────────────────────────── */

.ax-filtro {
	--ax-filtro-rojo: var(--ax-rojo, #de1a1c);
}

.ax-filtro__grupo + .ax-filtro__grupo {
	margin-top: 28px;
}

.ax-filtro__titulo {
	margin: 0 0 12px;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ax-filtro__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ax-filtro__opcion {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 4px;
	color: inherit;
	text-decoration: none;
	line-height: 1.3;
}

/* La casilla es dibujada, no un <input>: el enlace ya hace todo el trabajo
   de act/desactivar por URL, y una casilla real habría necesitado un evento
   de JS aparte para no romper la navegación sin JS. */
.ax-filtro__opcion::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1.5px solid #c2c2c2;
	border-radius: 4px;
	background: #fff;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ax-filtro__opcion--activa::before {
	border-color: var(--ax-filtro-rojo);
	background: var(--ax-filtro-rojo);
}

.ax-filtro__opcion--activa::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 9px;
	width: 8px;
	height: 4px;
	border-left: 1.5px solid #fff;
	border-bottom: 1.5px solid #fff;
	transform: rotate(-45deg);
}

.ax-filtro__opcion:hover {
	color: var(--ax-filtro-rojo);
}

/* Mientras el AJAX trae el resultado, para que no se sienta que el clic no
   hizo nada. */
.ax-filtro[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

.ax-productos-aviso {
	padding: 40px 20px;
	text-align: center;
	color: #6a6a6a;
}