/*
 * Arridal — barra "Filtrar y ordenar" del catálogo (/tienda/ y categorías).
 * La carga inc/filtros.php, después de arridal.css.
 *
 * Computadora (1024 px o más): lámina de papel 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: 272px minmax(0, 1fr);
		gap: clamp(28px, 3vw, 44px);
		align-items: start;
	}

	/* La barra acompaña al bajar, debajo de la cabecera */
	.apf {
		position: sticky;
		top: calc(var(--ap-header-h, 72px) + 24px);
		max-height: calc(100vh - var(--ap-header-h, 72px) - 44px);
		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, minmax(0, 1fr));
	}
}

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

.apf__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 50px;
	padding: 12px 18px;
	border: 0;
	border-radius: var(--ap-radius);
	background: var(--papel);
	color: var(--verde);
	font-family: var(--ap-font-display);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	box-shadow: var(--ap-shadow-card);
	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;
	border-radius: 2px;
	background: var(--oro);
}

.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(--verde);
	color: var(--oro-2);
	font-family: var(--ap-font-body);
	font-size: 0.8125rem;
	letter-spacing: 0;
	text-align: center;
}

.apf.is-open .apf__toggle {
	border-radius: var(--ap-radius) var(--ap-radius) 0 0;
	box-shadow: none;
}

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

	/* Panel cerrado hasta tocar el botón (sin JavaScript se muestra abierto) */
	.apf__panel {
		display: none;
		border-radius: 0 0 var(--ap-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: lámina de papel con puntada
   ====================================================================== */

.apf__panel {
	position: relative;
	padding: 16px 18px 18px;
	border-radius: var(--ap-radius-lg);
	background: var(--papel);
	color: var(--tinta);
	box-shadow: var(--ap-shadow-card);
}

.apf__panel::after {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1.5px dashed rgba(6, 61, 33, 0.2);
	border-radius: 17px;
	pointer-events: none;
}

@media (max-width: 1023px) {
	.apf__panel::after {
		border-radius: 0 0 11px 11px;
		border-top: 0;
	}
}

.apf__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
	padding: 4px 0 14px;
	border-bottom: 1.5px dashed rgba(6, 61, 33, 0.22);
	font-family: var(--ap-font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--verde);
}

.apf__title::before {
	content: "";
	width: 4px;
	height: 18px;
	border-radius: 2px;
	background: var(--oro);
}

.apf__group {
	margin: 0;
	padding: 16px 0;
	border: 0;
	border-bottom: 1px dashed rgba(6, 61, 33, 0.18);
	min-width: 0;
}

.apf__group:last-of-type {
	border-bottom: 0;
}

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

.ap-theme .apf__select {
	width: 100%;
	min-height: 44px;
	border: 1px solid rgba(6, 61, 33, 0.22);
	border-radius: 10px;
	background: #fff;
	color: var(--verde);
	font-weight: 700;
}

.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: 38px;
	padding: 4px 8px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 0.95rem;
	color: var(--tinta);
	transition: background 0.15s;
}

.apf__opt label:hover {
	background: rgba(6, 61, 33, 0.07);
}

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

.apf__opt input:checked ~ .apf__name {
	color: var(--verde);
	font-weight: 700;
}

.apf__name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	min-width: 0;
}

/* "tallas 1 a 8" al lado de "Niños" */
.apf__detail {
	font-size: 0.78rem;
	color: rgba(29, 43, 35, 0.62);
	letter-spacing: 0.02em;
}

/* Subcategorías: corridas a la derecha */
.apf__opt--hijo {
	padding-inline-start: 24px;
}

.apf__count {
	margin-inline-start: auto;
	flex: none;
	font-size: 0.78rem;
	color: rgba(29, 43, 35, 0.55);
}

/* Muestra de color (un circulito con el color real) */
.apf__swatch {
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--muestra, #c4cec7);
	box-shadow: inset 0 0 0 1px rgba(6, 61, 33, 0.28), 0 1px 2px rgba(0, 0, 0, 0.12);
}

.apf__swatch--neutro {
	background: linear-gradient(135deg, #e6e6e6 50%, #b8b8b8 50%);
}

/* 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 {
	background: transparent;
}

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

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

.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;
}

/* Sin resultados: aviso en lámina de papel */
.apf-results .woocommerce-info,
.apf-results .woocommerce-no-products-found {
	color: var(--crema);
}

/* En celular/tablet el título del panel repite el del botón (va al final para ganar a la regla de la sección 3) */
@media (max-width: 1023px) {
	.apf .apf__title {
		display: none;
	}

	/* Deja sitio al botón flotante de WhatsApp para que no tape los conteos */
	.apf__panel {
		padding-bottom: 24px;
	}
}