/*
 * Anclajes Powers — barra "Filtrar y ordenar" del catálogo.
 * La carga mu-plugins/ap-filtros.php, después de main.css y de los colores.
 *
 * Computadora (1024 px o más): barra fija a la izquierda, productos a la derecha en 3 columnas.
 * Celular y tablet: un botón "Filtrar y ordenar" abre y cierra el panel arriba de los productos.
 */

/* =========================================================================
   1. Retícula barra | productos
   ====================================================================== */

.apf-layout {
	display: block;
}

.apf-results {
	min-width: 0;
}

@media (min-width: 1024px) {
	.apf-layout {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		gap: clamp(28px, 3vw, 48px);
		align-items: start;
	}

	/* La barra acompaña al bajar, debajo del header (que mide ~62 px al bajar) */
	.apf {
		position: sticky;
		top: 86px;
		max-height: calc(100vh - 106px);
		overflow-y: auto;
		scrollbar-width: none;
	}

	.apf::-webkit-scrollbar {
		display: none;
	}

	/* Con la barra al lado entran 3 productos por fila (antes 4) */
	.ap-theme .apf-results ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================================================================
   2. Botón del celular "Filtrar y ordenar"
   ====================================================================== */

.apf__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--ap-line-strong);
	border-radius: var(--ap-radius);
	background: var(--ap-ink);
	color: var(--ap-white);
	font-family: var(--ap-font-condensed);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Ícono de "perillas" (tres rayas de distinto largo) */
.apf__toggle-icon {
	display: grid;
	gap: 4px;
	width: 18px;
}

.apf__toggle-icon span {
	display: block;
	height: 2px;
	background: var(--ap-red);
}

.apf__toggle-icon span:nth-child(2) {
	width: 70%;
}

.apf__toggle-icon span:nth-child(3) {
	width: 40%;
}

/* Cantidad de filtros marcados */
.apf__badge {
	margin-inline-start: auto;
	min-width: 24px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ap-red);
	color: #fff;
	font-size: 0.8125rem;
	text-align: center;
}

@media (max-width: 1023px) {
	.apf {
		margin-bottom: 20px;
	}

	/* Panel cerrado hasta tocar el botón (sin JavaScript se muestra abierto) */
	.apf__panel {
		display: none;
		margin-top: 8px;
		padding: 4px 16px 16px;
		border: 1px solid var(--ap-line);
		border-radius: var(--ap-radius);
	}

	.apf.is-open .apf__panel,
	html.no-js .apf__panel {
		display: block;
	}

	/* El título del panel repite el del botón */
	.apf__title {
		display: none;
	}
}

@media (min-width: 1024px) {
	.apf__toggle {
		display: none;
	}
}

/* =========================================================================
   3. Panel
   ====================================================================== */

.apf__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--ap-white);
	font-family: var(--ap-font-condensed);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ap-white);
}

.apf__title::before {
	content: "";
	width: 4px;
	height: 18px;
	background: var(--ap-red);
}

.apf__group {
	margin: 0;
	padding: 18px 0;
	border: 0;
	border-bottom: 1px solid var(--ap-line);
	min-width: 0;
}

.apf__legend {
	display: block;
	float: left;                     /* hace que la "leyenda" se comporte como un título normal */
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ap-steel);
}

.apf__select {
	width: 100%;
	min-height: 44px;
}

.apf__list {
	clear: both;
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.apf__opt label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	cursor: pointer;
	font-size: 0.9375rem;
	color: var(--ap-white);
}

.apf__opt input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ap-red);
	cursor: pointer;
}

.apf__opt label:hover .apf__name {
	color: var(--ap-red);
}

/* Subcategorías (ej. M12 dentro de Herramientas eléctricas): corridas a la derecha */
.apf__opt--hijo {
	padding-inline-start: 28px;
}

.apf__count {
	margin-inline-start: auto;
	font-family: var(--ap-font-mono);
	font-size: var(--ap-fs-xs);
	color: var(--ap-steel);
	opacity: 0.65;
}

/* Opción que hoy daría cero resultados con los otros filtros: gris y sin poder marcarla */
.apf__opt.is-off label {
	opacity: 0.4;
	cursor: not-allowed;
}

.apf__opt.is-off label:hover .apf__name {
	color: inherit;
}

/* =========================================================================
   4. Botones LIMPIAR y APLICAR FILTROS (Aplicar solo se ve sin JavaScript)
   ====================================================================== */

.apf__actions {
	display: grid;
	gap: 10px;
	padding-top: 18px;
}

.apf__btn {
	width: 100%;
	min-height: 46px;
}

/* =========================================================================
   5. Filtro instantáneo (la clase apf--instant la pone filtros.js)
   ====================================================================== */

/* Sin botón "Aplicar": filtra al marcar. Sin JavaScript el botón sigue visible. */
.apf--instant .apf__btn--aplicar {
	display: none;
}

/* Mientras llegan los productos nuevos, los actuales se ven apagados */
.apf-results {
	transition: opacity 200ms ease;
}

.apf-results.is-loading {
	opacity: 0.45;
	pointer-events: none;
}