/**
 * Listado de productos (doc 04, mockup 03).
 *
 * Escritorio: panel de filtros fijo a la izquierda y rejilla a la derecha.
 * Móvil: los filtros se van a un cajón deslizante y la rejilla pasa a dos
 * columnas o a lista, según lo que elija quien mire.
 */

/* --------------------------------------------------------- 1. Estructura */

.bx-listado {
	padding-bottom: var(--bx-e-6);
}

.bx-listado__cabecera {
	padding: var(--bx-e-3) 0 var(--bx-e-2);
}

.bx .bx-listado__titulo {
	margin: 4px 0 6px;
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: clamp(1.5rem, 5.6vw, 2.4rem);
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
}

.bx-listado__descripcion {
	max-width: 60ch;
	margin-bottom: var(--bx-e-2);
	font-size: .92rem;
}

.bx-listado__cuenta {
	margin: 0;
	color: var(--bx-texto-3);
	font-size: .84rem;
}

/* Barra de herramientas: filtros a la izquierda, orden y vista a la derecha. */
.bx-listado__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bx-e-2);
	margin-bottom: var(--bx-e-3);
}

.bx-listado__herramientas {
	display: flex;
	align-items: center;
	gap: var(--bx-e-2);
	margin-left: auto;
}

.bx .bx-listado__abrir-filtros {
	min-height: 42px;
	padding: 8px 16px;
	font-size: .84rem;
	text-transform: none;
	letter-spacing: 0;
}

.bx-listado__cuerpo {
	display: grid;
	gap: var(--bx-e-3);
}

@media (min-width: 992px) {
	.bx-listado__cuerpo {
		grid-template-columns: 264px minmax(0, 1fr);
		gap: var(--bx-e-4);
		align-items: start;
	}

	/* El panel llega hasta donde llegan los productos, no hasta donde acaba la
	   ventana: antes se cortaba a la altura del viewport y dejaba fuera media
	   lista de filtros sin avisar. Si aun así no cabe, se recorta con un
	   degradado y aparece el botón que lo estira hacia abajo. */
	.bx-listado__lateral {
		position: relative;
	}

	.bx-listado--filtros-cortados .bx-filtros__cuerpo {
		max-height: var(--bx-filtros-alto, 70vh);
		overflow: hidden;
		/* El degradado del final avisa de que ahí sigue habiendo filtros. */
		-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent 100%);
		mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent 100%);
	}

	.bx-listado--filtros-cortados.bx-listado--filtros-enteros .bx-filtros__cuerpo {
		max-height: none;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.bx-listado--filtros-cortados .bx-filtros__mas {
		display: block;
	}

	/* El panel deja de ser una columna fija: en escritorio los filtros se
	   abren en un modal grande, donde caben todos a la vez y se aplican de
	   una vez. La columna se recupera sola sin JavaScript. */
	.bx-con-js .bx-listado__cuerpo {
		grid-template-columns: minmax(0, 1fr);
	}

	.bx-con-js .bx-listado__lateral {
		display: none;
	}

	.bx-filtros-abiertos.bx-con-js .bx-listado__lateral {
		display: block;
	}
}

/* ------------------------------------------------- 2. Rejilla y lista */

.bx .bx-listado__resultados ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bx-e-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx ul.products > li.product {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
}

.bx .bx-listado__resultados ul.products::before,
.bx .bx-listado__resultados ul.products::after {
	content: none;
}

@media (min-width: 600px) {
	.bx .bx-listado__resultados ul.products {
		gap: var(--bx-e-3);
	}
}

@media (min-width: 782px) {
	.bx .bx-listado__resultados ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.bx .bx-listado__resultados ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Vista de lista: una fila por producto, con la foto a la izquierda. Es la que
   dibuja el mockup para móvil; aquí se puede elegir en cualquier pantalla. */
.bx-listado--lista .bx-listado__resultados ul.products {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bx-e-1);
}

.bx-listado--lista .bx-tarjeta {
	flex-direction: row;
	align-items: stretch;
}

.bx-listado--lista .bx-tarjeta__media {
	flex: 0 0 clamp(96px, 26vw, 148px);
	aspect-ratio: 1;
}

/* La miniatura de esta vista mide 98 px en móvil y ahí no caben el badge y el
   corazón en la misma esquina: se pisaban. Los badges bajan al pie de la foto,
   que está libre —el precio en esta vista vive en el cuerpo—, y el corazón se
   queda con su esquina de siempre. */
.bx-listado--lista .bx-tarjeta__media .bx-badges {
	top: auto;
	bottom: 8px;
	left: 8px;
}

.bx-listado--lista .bx-tarjeta__cuerpo {
	justify-content: center;
	padding: var(--bx-e-2) var(--bx-e-2) var(--bx-e-2) var(--bx-e-3);
}

.bx-listado--lista .bx .bx-tarjeta__nombre,
.bx-listado--lista .bx-tarjeta__nombre {
	-webkit-line-clamp: 3;
	min-height: 0;
	font-size: .92rem;
}

.bx-listado--lista .bx-tarjeta__precio {
	margin-top: 6px;
	padding-top: 0;
}

/* En lista, el botón se queda abajo a la derecha y no ocupa todo el ancho. */
.bx-listado--lista .bx-tarjeta__accion {
	align-self: flex-end;
	margin-top: 8px;
}

.bx-listado--lista .bx .bx-tarjeta a.bx-tarjeta__btn,
.bx-listado--lista .bx .bx-tarjeta__btn {
	width: auto;
	min-width: 11rem;
}

.bx-listado--lista .bx-tarjeta__cuerpo {
	justify-content: space-between;
}

/* -------------------------------------------------- 3. Selector de vista */

.bx-vistas {
	display: flex;
	gap: 4px;
	padding: 3px;
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-s);
	background: rgba(255, 255, 255, .04);
}

.bx .bx-vistas__boton {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 7px;
	color: var(--bx-texto-3);
}

.bx .bx-vistas__boton:hover {
	color: var(--bx-texto);
}

.bx .bx-vistas__boton--activo {
	background: linear-gradient(180deg, rgba(56, 214, 245, .22), rgba(56, 214, 245, .08));
	box-shadow: inset 0 1px 0 rgba(180, 240, 255, .3);
	color: var(--bx-accent);
}

/* ----------------------------------------------------- 4. Panel de filtros */

.bx-filtros {
	position: relative;
	padding: var(--bx-e-3);
	border-radius: var(--bx-r-l);
	background: linear-gradient(160deg, rgba(9, 26, 42, .55) 0%, var(--bx-panel-fondo) 45%, rgba(3, 12, 22, .6) 100%);
	border: 1px solid var(--bx-panel-borde);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.bx-filtros__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bx-e-2);
	margin-bottom: var(--bx-e-2);
}

.bx .bx-filtros__titulo {
	margin: 0;
	color: var(--bx-gold);
	font-family: var(--bx-display);
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bx .bx-filtros__limpiar {
	color: var(--bx-accent);
	font-size: .76rem;
	white-space: nowrap;
}

/* El aspa solo existe dentro del cajón del móvil; el cajón la enciende. */
.bx-filtros__cerrar {
	display: none;
}

.bx-filtro {
	border-top: 1px solid var(--bx-panel-linea);
}

.bx-filtro__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bx-e-1);
	padding: 12px 0;
	cursor: pointer;
	list-style: none;
}

.bx-filtro__cabecera::-webkit-details-marker {
	display: none;
}

.bx-filtro__nombre {
	color: var(--bx-texto);
	font-family: var(--bx-ui);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Signo de más que se convierte en menos al abrir. */
.bx-filtro__signo {
	position: relative;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
}

.bx-filtro__signo::before,
.bx-filtro__signo::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 12px;
	height: 1.6px;
	border-radius: 2px;
	background: var(--bx-texto-3);
	transition: transform .2s ease, opacity .2s ease;
}

.bx-filtro__signo::after {
	transform: rotate(90deg);
}

.bx-filtro[open] .bx-filtro__signo::after {
	opacity: 0;
	transform: rotate(0);
}

.bx-filtro__cuerpo {
	padding: 0 0 var(--bx-e-2);
}

.bx-filtro__opciones {
	display: grid;
	gap: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
	/* Con muchos valores, la lista se desplaza en vez de estirar el panel. */
	max-height: 15rem;
	overflow-y: auto;
	scrollbar-width: thin;
}

.bx-filtro__opcion {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
}

.bx-filtro__opcion label {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	color: var(--bx-texto-2);
	font-size: .82rem;
	line-height: 1.3;
	cursor: pointer;
}

.bx .bx-filtro__opcion input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
}

.bx-filtro__opcion:hover label {
	color: var(--bx-texto);
}

.bx-filtro__cuenta {
	flex: 0 0 auto;
	color: var(--bx-texto-3);
	font-size: .74rem;
}

/* Un valor sin productos se ve, para que la gama esté completa, pero no se
   puede marcar: llevaría a una pantalla sin resultados. */
.bx-filtro__opcion--vacia {
	/* Lo bastante apagadas para leerse como "aquí no hay nada", pero no tanto
	   como para borrarse: sobre el vidrio claro del cajón y del modal, el .38
	   de antes las dejaba casi invisibles. */
	opacity: .52;
}

.bx-filtro__opcion--vacia label {
	cursor: not-allowed;
}

/* Las listas largas reparten sus valores en cuantas columnas quepan, también
   en el cajón del móvil: una tira de veinte temáticas en vertical obliga a
   desplazar media pantalla para llegar al filtro siguiente. Si las etiquetas
   son largas —o el idioma las estira—, vuelven solas a una sola columna. */
.bx-filtro--doble .bx-filtro__opciones {
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	gap: 8px 10px;
}

/* Muestras de color. */
.bx-filtro__opciones--color {
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	gap: 8px 10px;
}

.bx-filtro__muestra {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: var(--bx-muestra, transparent);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3);
}

/* ------------------------------------------------------- 5. Precio */

.bx-precio {
	padding-top: 6px;
}

.bx-precio__barra {
	position: relative;
	height: 3px;
	margin: 6px 4px 0;
	border-radius: 3px;
	background: rgba(255, 255, 255, .12);
}

.bx-precio__recorrido {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--bx-accent), var(--bx-accent-2));
}

/* Los dos mandos comparten carril: el de arriba solo captura su propio pomo. */
.bx-precio__mandos {
	position: relative;
	height: 20px;
	margin: -10px 4px 0;
}

.bx .bx-precio__mando {
	position: absolute;
	left: 0;
	width: 100%;
	height: 20px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.bx-precio__mando::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border: 2px solid var(--bx-bg-0);
	border-radius: 50%;
	background: var(--bx-accent);
	box-shadow: 0 0 10px rgba(56, 214, 245, .5);
	cursor: grab;
	pointer-events: auto;
}

.bx-precio__mando::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 2px solid var(--bx-bg-0);
	border-radius: 50%;
	background: var(--bx-accent);
	box-shadow: 0 0 10px rgba(56, 214, 245, .5);
	cursor: grab;
	pointer-events: auto;
}

.bx-precio__mando::-moz-range-track {
	background: none;
}

/* Sin JavaScript los mandos no pueden repartirse el carril: se ocultan y se
   filtra escribiendo el precio en las dos cajas, que es lo que manda. */
.bx-sin-js .bx-precio__barra,
.bx-sin-js .bx-precio__mandos {
	display: none;
}

.bx-precio__campos {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.bx-precio__campo {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	padding: 6px 8px;
	border: 1px solid var(--bx-control-borde);
	border-radius: var(--bx-r-s);
	background: var(--bx-control-fondo);
}

.bx-precio__moneda {
	color: var(--bx-texto-3);
	font-size: .78rem;
}

.bx .bx-precio__campo input {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bx-texto);
	font-family: var(--bx-ui);
	font-size: .82rem;
}

.bx .bx-precio__campo input:focus {
	outline: none;
	box-shadow: none;
}

.bx-precio__hasta {
	flex: 0 0 auto;
	color: var(--bx-texto-3);
}

/* --------------------------------------------------- 6. Pie del panel */

.bx-filtros__pie {
	margin-top: var(--bx-e-2);
	padding-top: var(--bx-e-2);
	border-top: 1px solid var(--bx-panel-linea);
}

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

/* Con JavaScript el filtro se aplica al momento en escritorio, así que el
   botón solo hace falta en el cajón del móvil. */
@media (min-width: 992px) {
	.bx-con-js .bx-filtros__pie {
		display: none;
	}
}

/* ------------------------------------------- 7. Cajón de filtros en móvil */

@media (max-width: 991px) {
	/* Mismo contenedor que el menú móvil: cristal, margen por los cuatro
	   lados y esquinas redondeadas, en vez de un panel pegado a los bordes. */
	.bx-listado__lateral {
		position: fixed;
		top: calc(env(safe-area-inset-top, 0px) + 8px);
		right: 12px;
		bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
		z-index: 95;
		width: min(80%, 380px);
		display: flex;
		overflow: hidden;
		border-radius: 20px;
		transform: translateX(108%);
		transition: transform .28s cubic-bezier(.22, .9, .3, 1);
		visibility: hidden;
	}

	.bx-filtros-abiertos .bx-listado__lateral {
		transform: none;
		visibility: visible;
	}

	.bx-listado__lateral .bx-filtros {
		flex: 1 1 auto;
		min-height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 0;
		border-radius: 0;
		padding: var(--bx-e-3) var(--bx-e-3) var(--bx-e-2);

		/* Fondo macizo y sin desenfoque de fondo. En el cajón, el panel se
		   mueve y se enmascara, y con backdrop-filter dentro el navegador
		   rasterizaba la capa a menor resolución: se veía borroso el propio
		   texto de los filtros, no solo lo que hay detrás. El velo ya se
		   encarga de difuminar la página. */
		background: linear-gradient(160deg, #1c5062 0%, #15414f 45%, #0f3242 100%);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* El botón de aplicar se queda a la vista al fondo del cajón. */
	.bx-listado__lateral .bx-filtros__pie {
		position: sticky;
		bottom: 0;
		margin-top: var(--bx-e-3);
		padding-bottom: 4px;
		background: linear-gradient(180deg, rgba(3, 12, 22, 0) 0%, rgba(3, 12, 22, .92) 22%);
	}

	/* Sin desenfoque de fondo: el velo y el cajón acaban en el mismo grupo de
	   pintado, y el blur del velo emborronaba también el texto de los filtros
	   —comprobado: quitándolo, el panel se lee nítido—. El velo oscurece, que
	   es lo que hace falta para que el cajón mande. */
	.bx-velo-filtros {
		position: fixed;
		inset: 0;
		z-index: 94;
		background: rgba(0, 4, 9, .72);
	}

	/* El cajón se cierra con su propia aspa, con el velo o con Escape. El botón
	   de la barra se queda debajo del velo: elevarlo lo dejaba flotando encima
	   del panel, que quedaba feo y confundía. */
	/* El aspa es la misma del menú móvil: círculo de cristal en la esquina,
	   por encima del contenido y sin empujar el título. */
	.bx-filtros__cerrar {
		position: absolute;
		top: 12px;
		right: 12px;
		z-index: 4;
		display: grid;
		place-items: center;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 1px solid rgba(210, 236, 248, .42);
		border-radius: 50%;
		background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)), rgba(9, 26, 38, .3);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
		color: #ffffff;
		cursor: pointer;
	}

	.bx-filtros__cerrar:hover {
		border-color: rgba(56, 214, 245, .55);
		background: rgba(56, 214, 245, .16);
	}

	/* El título deja sitio al aspa. */
	.bx-listado__lateral .bx-filtros__cabecera {
		padding-right: 34px;
	}

	/* Sin JavaScript no hay cajón que valga: el panel se queda en la página,
	   encima de los resultados, y se usa con su botón de aplicar. */
	/* Sin JavaScript no hay cajón: los filtros son una columna más de la
	   página, así que devuelven el vidrio al panel de contenido de siempre. */
	.bx-sin-js .bx-listado__lateral {
		position: static;
		width: auto;
		transform: none;
		visibility: visible;
		border: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}

	.bx-sin-js .bx-listado__lateral .bx-filtros {
		border-radius: var(--bx-r-l);
		border: 1px solid var(--bx-panel-borde);
		background: linear-gradient(160deg, rgba(9, 26, 42, .55) 0%, var(--bx-panel-fondo) 45%, rgba(3, 12, 22, .6) 100%);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
	}

	.bx-sin-js .bx-listado__abrir-filtros {
		display: none;
	}
}

/* ------------------------------------------------------ 8. Paginación */

.bx-paginacion {
	margin-top: var(--bx-e-4);
}

.bx-paginacion__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx .bx-paginacion__lista a,
.bx .bx-paginacion__lista span {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-s);
	background: rgba(255, 255, 255, .04);
	color: var(--bx-texto-2);
	font-family: var(--bx-ui);
	font-size: .84rem;
	font-weight: 500;
}

.bx .bx-paginacion__lista a:hover {
	border-color: rgba(56, 214, 245, .5);
	background: rgba(56, 214, 245, .1);
	color: var(--bx-texto);
}

.bx .bx-paginacion__lista .current {
	border-color: var(--bx-cta-borde);
	background: var(--bx-cta-fondo);
	color: var(--bx-cta-texto);
	box-shadow: var(--bx-cta-glow);
}

.bx .bx-paginacion__lista .dots {
	border-color: transparent;
	background: none;
}

.bx-paginacion__atras {
	transform: rotate(180deg);
}

/* ------------------------------------------------------- 9. Sin resultados */

.bx-vacio {
	text-align: center;
}

.bx-vacio__texto {
	max-width: 46ch;
	margin: 0 auto var(--bx-e-3);
	color: var(--bx-texto-2);
}

.bx-vacio__acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bx-e-2);
	margin: 0 0 var(--bx-e-4);
}

.bx .bx-vacio__rotulo {
	margin: 0 0 var(--bx-e-2);
	color: var(--bx-gold);
	font-family: var(--bx-ui);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.bx-vacio__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx-vacio__cuenta {
	color: var(--bx-texto-3);
}

/* --------------------------------------------- 10. Orden de WooCommerce */

.bx .woocommerce-ordering {
	margin: 0;
}

.bx .woocommerce-ordering select {
	min-height: 42px;
	padding: 8px 34px 8px 12px;
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-s);
	background-color: rgba(255, 255, 255, .04);
	color: var(--bx-texto);
	font-family: var(--bx-ui);
	font-size: .82rem;
}

@media (prefers-reduced-motion: reduce) {
	.bx-listado__lateral {
		transition: none;
	}
}

/* -------------------------------- 11. Botón "ver todos los filtros" */

/* Solo asoma cuando el panel no cabe entero, y lo decide el navegador con lo
   que mide de verdad. */
.bx-filtros__mas {
	display: none;
	width: 100%;
	margin-top: var(--bx-e-1);
	padding: 9px 12px;
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-s);
	background: rgba(255, 255, 255, .04);
	color: var(--bx-accent);
	font-family: var(--bx-ui);
	font-size: .78rem;
	font-weight: 600;
	cursor: pointer;
}

.bx-filtros__mas:hover {
	border-color: rgba(56, 214, 245, .5);
	background: rgba(56, 214, 245, .1);
}

/* En el cajón del móvil no hace falta: allí se desplaza con el dedo. */
@media (max-width: 991px) {
	.bx-filtros__mas {
		display: none !important;
	}
}

/* ------------------------- 12. El nacimiento del cajón en móvil */

/* El cajón no entra deslizándose: nace como un punto pegado a la derecha y
   crece, igual que el menú y el carrito. Fuera de escritorio, donde el mismo
   panel es un modal centrado con su propia animación. */
@media (max-width: 991px) {
	.bx-filtros-abiertos .bx-listado__lateral {
		transition: none;
	}

	.bx-listado--naciendo .bx-listado__lateral {
		animation: bx-panel-nace .72s cubic-bezier(.34, .04, .18, 1) both;
	}

	.bx-listado--muriendo .bx-listado__lateral {
		/* Mientras se encoge sigue estando a la vista: si no, se lo llevaría de
		   golpe la clase que lo esconde en cuanto empieza a cerrarse. */
		transform: none;
		visibility: visible;
		animation: bx-panel-muere .34s ease-in both;
	}

	/* El velo entra pronto y se va con el panel. */
	.bx-velo-filtros {
		animation: bx-velo-entra .3s ease both;
	}

	.bx-listado--muriendo ~ .bx-velo-filtros,
	.bx-listado--muriendo .bx-velo-filtros {
		animation: bx-velo-entra .26s ease reverse both;
	}
}
/* --------------------------------------------- 13. Selector de orden */

.bx-orden {
	position: relative;
}

.bx-orden__boton {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-s);
	background: rgba(255, 255, 255, .04);
	color: var(--bx-texto-2);
	font-family: var(--bx-ui);
	font-size: .82rem;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

.bx-orden__boton::-webkit-details-marker {
	display: none;
}

.bx-orden[open] > .bx-orden__boton,
.bx-orden__boton:hover {
	border-color: rgba(56, 214, 245, .5);
	color: var(--bx-texto);
}

/* En móvil el orden se reduce a su icono, para que quepa a la misma altura
   que el botón de filtros sin comerse la fila. */
.bx-orden__actual {
	display: none;
}

@media (min-width: 600px) {
	.bx-orden__actual {
		display: inline;
	}
}

.bx-orden__lista {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 40;
	min-width: 14rem;
	list-style: none;
	margin: 0;
	padding: 6px;
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-m);
	background: linear-gradient(160deg, #0a1b2b 0%, #061320 55%, #030b14 100%);
	box-shadow: var(--bx-sombra);
}

.bx .bx-orden__opcion {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--bx-texto-2);
	font-size: .82rem;
	white-space: nowrap;
}

.bx .bx-orden__opcion:hover {
	background: rgba(255, 255, 255, .06);
	color: var(--bx-texto);
}

.bx .bx-orden__opcion--activa {
	background: linear-gradient(180deg, rgba(56, 214, 245, .2), rgba(56, 214, 245, .06));
	color: var(--bx-accent);
	font-weight: 600;
}

/* --------------------------------- 14. Franja de confianza del listado */

/* Sin esto la franja se pegaba a los bordes del panel y a la paginación. */
.bx-listado .bx-bloque--confianza {
	margin-top: var(--bx-e-5);
	padding: var(--bx-e-3);
}

@media (min-width: 782px) {
	.bx-listado .bx-bloque--confianza {
		padding: var(--bx-e-3) var(--bx-e-4);
	}

	.bx-listado .bx-confianza {
		gap: var(--bx-e-3) var(--bx-e-4);
	}
}

/* Y la paginación necesita aire por debajo antes de la franja. */
.bx-listado .bx-paginacion {
	margin-bottom: var(--bx-e-4);
}

/* ------------------------------------------ 15. Casillas de los filtros */

/* Casillas propias, más grandes y con aire arcano: rombo de cristal que al
   marcarse se enciende en cian. La casilla del navegador se esconde pero sigue
   siendo la que manda, así que el teclado y los lectores de pantalla la usan
   igual que siempre. */
.bx .bx-filtro__opcion input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1px solid rgba(190, 224, 240, .38);
	border-radius: 7px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 55%, rgba(255, 255, 255, .06) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.bx .bx-filtro__opcion input[type="checkbox"]:hover {
	border-color: rgba(56, 214, 245, .6);
}

/* La marca: dos trazos que se dibujan al encenderse. */
.bx .bx-filtro__opcion input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 7px;
	width: 6px;
	height: 11px;
	border: solid #eafcff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(.4);
	opacity: 0;
	transition: opacity .16s ease, transform .16s cubic-bezier(.2, 1.4, .4, 1);
}

.bx .bx-filtro__opcion input[type="checkbox"]:checked {
	border-color: var(--bx-cta-borde);
	background: linear-gradient(180deg, rgba(56, 214, 245, .55), rgba(56, 214, 245, .18));
	box-shadow:
		0 0 14px rgba(56, 214, 245, .5),
		inset 0 1px 0 rgba(255, 255, 255, .35);
}

.bx .bx-filtro__opcion input[type="checkbox"]:checked::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.bx .bx-filtro__opcion input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--bx-accent);
	outline-offset: 3px;
}

.bx .bx-filtro__opcion input[type="checkbox"]:disabled {
	cursor: not-allowed;
	box-shadow: none;
}

/* Con casillas más grandes, la fila necesita más aire. */
.bx-filtro__opciones {
	gap: 10px;
}

.bx-filtro__opcion {
	min-height: 28px;
}


/* ------------------------------------- 16. Filtros en modal (escritorio) */

/* Botón llamativo: cristal violeta y azul, como pidió David. */
.bx .bx-listado__abrir-filtros {
	border: 1px solid rgba(150, 130, 255, .55);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .03) 46%, rgba(255, 255, 255, .08) 100%),
		linear-gradient(112deg, rgba(139, 92, 246, .62) 0%, rgba(94, 96, 240, .55) 46%, rgba(56, 214, 245, .55) 100%);
	color: #ffffff;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow:
		0 0 22px rgba(120, 96, 245, .38),
		inset 0 1px 0 rgba(255, 255, 255, .3);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.bx .bx-listado__abrir-filtros:hover {
	border-color: rgba(180, 160, 255, .8);
	color: #ffffff;
	filter: brightness(1.1);
	box-shadow:
		0 0 30px rgba(120, 96, 245, .55),
		inset 0 1px 0 rgba(255, 255, 255, .42);
}

.bx .bx-listado__abrir-filtros svg {
	color: #d9d2ff;
}

@media (min-width: 992px) {
	/* El panel pasa a ser un modal centrado, casi a pantalla completa, pero
	   sin estirarse más de lo que ocupen sus filtros. */
	.bx-con-js .bx-listado__lateral {
		position: fixed;
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
		z-index: 95;
		width: min(1280px, 94vw);
		max-height: 90vh;
		transform: translate(-50%, -50%);
		visibility: visible;
		border-radius: var(--bx-r-l);
		transition: none;
	}

	.bx-con-js .bx-listado__lateral .bx-filtros {
		display: flex;
		flex-direction: column;
		max-height: 90vh;
		padding: var(--bx-e-4);
		border: 0;
		border-radius: var(--bx-r-l);
		/* Transparente: el cristal lo pone el modal, no su contenido; dos
		   capas de vidrio superpuestas apagan el turquesa y emborronan. */
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* Rejilla de verdad y no columnas de texto: con columnas, los bloques
	   fluían y cada uno empezaba a una altura distinta. Aquí cada filtro ocupa
	   su celda, así que todas las cabeceras de una misma fila quedan a la misma
	   altura y las columnas cuadran. */
	/* Tres columnas finas para los filtros principales —tipo de producto, color
	   y temática— y una cuarta donde se apilan los demás. Cada lista cae en
	   vertical, que es como se lee una lista, y el modal no se estira a lo
	   ancho con opciones sueltas.

	   El número de columnas lo dice el marcado y no está escrito aquí: el día
	   que haya un atributo más, o uno menos, la rejilla se ajusta sola en vez
	   de dejar una columna vacía. */
	.bx-con-js .bx-listado__lateral .bx-filtros__cuerpo {
		flex: 1 1 auto;
		display: grid;
		grid-template-columns: var(--bx-columnas-filtro, repeat(4, minmax(0, 1fr)));
		align-items: start;
		gap: var(--bx-e-3) var(--bx-e-4);
		overflow-y: auto;
		overscroll-behavior: contain;
		max-height: none;
		-webkit-mask-image: none;
		mask-image: none;
	}


	/* Cada columna es un contenedor con sus filtros pegados uno debajo de
	   otro. Si fueran hijos sueltos de la rejilla, esta los alinearía por
	   filas y dejaría huecos entre unos y otros según lo que midiera el
	   filtro más largo de su fila. */
	.bx-con-js .bx-listado__lateral .bx-filtros__pila {
		grid-row: 1;
	}

	.bx-con-js .bx-listado__lateral .bx-filtro {
		border-top: 0;
		border-bottom: 1px solid var(--bx-panel-linea);
		margin: 0;
	}

	.bx-con-js .bx-listado__lateral .bx-filtro__cabecera {
		padding-top: 0;
	}

	/* Nada de desplazar dentro de un filtro: se ven todas las opciones. Las
	   listas largas reparten sus valores en dos columnas y su bloque ocupa el
	   doble de ancho, para que la rejilla siga cuadrando. */
	.bx-con-js .bx-listado__lateral .bx-filtro__opciones {
		max-height: none;
		overflow: visible;
	}

	/* Una sola columna de opciones por bloque… */
	.bx-con-js .bx-listado__lateral .bx-filtro__opciones {
		grid-template-columns: minmax(0, 1fr);
		gap: 9px;
	}

	/* …salvo las listas largas, que reparten sus valores en dos y por eso su
	   hueco en la rejilla vale por dos. Con veinte temáticas en una sola
	   columna el modal se iría de alto y el resto quedaría desierto. */
	.bx-con-js .bx-listado__lateral .bx-filtro--doble .bx-filtro__opciones {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--bx-e-3);
	}

	.bx-con-js .bx-listado__lateral .bx-filtros__cabecera {
		padding-right: 44px;
		margin-bottom: var(--bx-e-3);
		padding-bottom: var(--bx-e-2);
		border-bottom: 1px solid var(--bx-panel-linea);
	}

	.bx-con-js .bx-listado__lateral .bx .bx-filtros__titulo,
	.bx-con-js .bx-listado__lateral .bx-filtros__titulo {
		font-size: 1.15rem;
	}

	/* En el modal el aspa y el botón de aplicar sí hacen falta. */
	.bx-con-js .bx-listado__lateral .bx-filtros__cerrar {
		position: absolute;
		top: 18px;
		right: 18px;
		z-index: 4;
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 1px solid rgba(210, 236, 248, .42);
		border-radius: 50%;
		background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
		color: #ffffff;
		cursor: pointer;
	}

	.bx-con-js .bx-listado__lateral .bx-filtros__cerrar:hover {
		border-color: rgba(56, 214, 245, .55);
		background: rgba(56, 214, 245, .16);
	}

	.bx-con-js .bx-listado__lateral .bx-filtros__pie {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--bx-e-2);
		flex: 0 0 auto;
	}

	.bx-con-js .bx-listado__lateral .bx .bx-filtros__aplicar {
		width: auto;
		min-width: 15rem;
	}

	/* Dentro del modal no se aplica al vuelo: se elige todo y se aplica de
	   una vez, que es justo lo que pidió David. */
	.bx-con-js .bx-listado__lateral .bx-filtros__mas {
		display: none !important;
	}

	.bx-velo-filtros {
		position: fixed;
		inset: 0;
		z-index: 94;
		background: rgba(0, 4, 9, .74);
	}
}


/* ------------------------------- 17. Apertura del modal en escritorio */

@media (min-width: 992px) {
	/* El modal nace de un punto y crece hasta su tamaño, con un tirón final
	   muy corto. Lo importante es que sea rápido: la estela de humo, pensada
	   para un cajón que entra por el lado, aquí se leía como un manchón lento
	   encima del panel. */
	.bx-listado--naciendo .bx-listado__lateral {
		animation: bx-modal-nace .72s cubic-bezier(.34, .04, .18, 1) both;
	}

	.bx-listado--muriendo .bx-listado__lateral {
		animation: bx-modal-muere .34s ease-in both;
	}

	/* El velo entra y sale con él, sin llamar la atención. */
	.bx-listado--naciendo .bx-velo-filtros {
		animation: bx-velo-entra .3s ease both;
	}

	.bx-listado--muriendo .bx-velo-filtros {
		animation: bx-velo-entra .24s ease reverse both;
	}
}

/* Las curvas de nacer y morir del modal —bx-modal-nace y bx-modal-muere— viven
   en componentes.css: las comparte con el modal de las condiciones del pago,
   que se abre igual. */

/* Las partículas del portal se pintan por encima del modal. */
.bx-chispas--portal {
	z-index: 121;
}

@media (prefers-reduced-motion: reduce) {
	.bx-listado--naciendo .bx-listado__lateral,
	.bx-listado--muriendo .bx-listado__lateral,
	.bx-listado--naciendo .bx-velo-filtros,
	.bx-listado--muriendo .bx-velo-filtros {
		animation: none;
	}
}

/* La pila de filtros cortos: en el modal es la cuarta columna; en el cajón del
   móvil, unos bloques más de la lista. */
.bx-filtros__pila {
	display: flex;
	flex-direction: column;
}

/* ------------------- Los filtros del cajón, enteros

   En el cajón del móvil las secciones van apiladas y el panel se desplaza
   entero, así que no hace falta que cada lista tenga además su propio scroll:
   con él, las listas largas se quedaban en una ventanita de quince líneas y
   había que desplazar dentro de un sitio que ya se desplaza. En escritorio no
   cambia nada: allí manda el modal, con sus columnas. */

@media (max-width: 991px) {
	.bx-listado__lateral .bx-filtro__opciones {
		max-height: none;
		overflow: visible;
	}
}