/*
 * Barra de filtros de los archivos: panel lateral cuando no cabe (ver filtros-panel.js).
 *
 * Va después de la hoja de la barra (sils-filtros) y cuelga del id del panel
 * (#sils-panel-filtros; con dos barras en la página, como en las pestañas de una selección,
 * también #sils-panel-filtros-2) para ganar a los estilos por id que Bricks pone a la lista de
 * filtros (#brxe-acflis: fila con salto de línea).
 *
 * Estilo «cortado»: filas a todo el ancho separadas por líneas finas, sin cajas ni radios;
 * botones del pie con radio suave (4 px), como «Añadir» de la ficha. Estados de elección
 * con el check negro de «Crea tu pared».
 */

/* ── Colección elegida en la barra (escritorio, Inspiración) ─────────────── */
.sils-filtros__coleccion {
	display: none;
	align-items: center;
	padding: 1.5rem 2rem;
}

.sils-filtros__coleccion.es-visible {
	display: flex;
	animation: sils-panel-aparece .2s ease;
}

/* Como lo elegido dentro de cada desplegable (jet-filter-items-dropdown__active__item). */
.sils-filtros .sils-filtros__etiqueta,
.sils-filtros .sils-filtros__etiqueta:focus {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.1rem 0.6rem;
	border: 0;
	border-radius: 0.3rem;
	background-color: var(--sils-fondo-imagenes);
	box-shadow: none;
	color: var(--sils-principal);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-3xs);
	font-weight: 400;
	line-height: 1.8rem;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s ease;
}

.sils-filtros .sils-filtros__etiqueta:hover {
	background-color: var(--sils-linea);
}

.sils-filtros .sils-filtros__etiqueta:focus-visible {
	outline: 1px solid var(--sils-principal);
	outline-offset: 0.2rem;
}

/* ── La barra en tableta y móvil (hasta 1279 px) ─────────────────────────
 * El corte lo pone el CSS desde el primer pintado (el guion usa el mismo): la fila de
 * filtros, el ✕ y el orden no llegan a verse, y el guion los lleva al panel. Si esto lo
 * decidiera el guion, la fila se vería aparecer y desaparecer al cargar.
 * `!important` para ganar al CSS por id de Bricks (#brxe-acflis lleva display: flex).
 * `.brxe-container` distingue la barra del panel, que también lleva `sils-filtros`.
 */
.sils-filtros__abrir,
.sils-panel__cabeza {
	display: none;
}

.sils-filtros__abrir i {
	font-size: var(--sils-txt-2xs, 1.4rem);
}

@media (max-width: 1279px) {
	.brxe-container.sils-filtros > .sils-filtros__lista,
	.brxe-container.sils-filtros .brxe-jet-smart-filters-sorting,
	.brxe-container.sils-filtros .brxe-jet-smart-filters-remove-filters {
		display: none !important;
	}

	.brxe-container.sils-filtros {
		min-height: 5rem;
	}

	.brxe-container.sils-filtros > :has(> .sils-filtros__cuenta) {
		flex-grow: 1;
	}

	.brxe-container.sils-filtros .sils-filtros__cuenta {
		min-width: 0;
		margin-right: auto;
		padding: 0 var(--sils-margen-seguridad);
		text-align: left;
	}

	.brxe-container.sils-filtros .sils-filtros__abrir,
	.brxe-container.sils-filtros .sils-filtros__abrir:focus {
		display: flex;
		align-items: center;
		gap: var(--sils-esp-2xs, 0.8rem);
		min-height: 4.8rem;
		margin: 0;
		padding: 0 var(--sils-margen-seguridad) 0 1.6rem;
		border: 0;
		border-left: 1px solid var(--sils-principal);
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: var(--sils-principal);
		font-family: var(--sils-fuente-thoren);
		font-size: var(--sils-txt-xs);
		font-weight: 400;
		line-height: 1.2;
		letter-spacing: 0.05rem;
		text-transform: uppercase;
		white-space: nowrap;
		cursor: pointer;
		animation: sils-panel-aparece .2s ease;
	}

	.brxe-container.sils-filtros .sils-filtros__abrir:hover {
		background-color: color-mix(in srgb, var(--sils-principal) 4%, transparent);
	}

	.brxe-container.sils-filtros .sils-filtros__abrir:focus-visible {
		outline: 1px solid var(--sils-principal);
		outline-offset: -0.4rem;
	}
}

/* Nº de filtros puestos: el contador de la cabecera, en negro. */
.sils-filtros__num {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	height: 1.6rem;
	padding: 0 var(--sils-esp-3xs, 0.4rem);
	border-radius: 0.8rem;
	background-color: var(--sils-principal);
	color: var(--sils-blanco);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-4xs, 1.1rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
}

.sils-filtros__num:not(:empty) {
	display: inline-flex;
}

/* ── El panel ───────────────────────────────────────────────────────────── */
html.sils-panel-abierto,
html.sils-panel-abierto body {
	overflow: hidden;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2)[hidden] {
	display: none;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__velo {
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--sils-principal) 40%, transparent);
	opacity: 0;
	transition: opacity .32s ease;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__hoja {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(100%, 44rem);
	background-color: var(--sils-blanco);
	color: var(--sils-principal);
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2).es-abierto .sils-panel__velo {
	opacity: 1;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2).es-abierto .sils-panel__hoja {
	transform: none;
}

/* Cabecera: título y cerrar, con línea negra como la barra. */
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__barra {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-shrink: 0;
	min-height: 5.6rem;
	border-bottom: 1px solid var(--sils-principal);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__titulo {
	display: flex;
	align-items: center;
	gap: var(--sils-esp-2xs, 0.8rem);
	margin: 0;
	padding: 0 var(--sils-margen-seguridad);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-xs);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__cerrar,
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__cerrar:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.6rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--sils-principal);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--sils-principal);
	font-size: var(--sils-txt-s, 1.6rem);
	cursor: pointer;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__cerrar:hover {
	background-color: var(--sils-gris-claro);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__cerrar:focus-visible {
	outline: 1px solid var(--sils-principal);
	outline-offset: -0.4rem;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__contenido {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ── Filas: Ordenar, Colección y cada filtro ─────────────────────────────── */
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-filtros__lista {
	display: block;
	width: 100%;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__orden,
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__seccion,
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-filtros__lista > [data-sils-nombre] {
	display: block;
	border: 0;
	border-bottom: 1px solid var(--sils-linea);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-filtros__coleccion {
	display: none;
}

/* Filtro sin opciones: JetSmartFilters lo oculta (style="display: none"); su sección, también. */
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-filtros__lista > [data-sils-nombre]:has(> .jet-filter[style*="display: none"]) {
	display: none;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__nombre {
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-xs);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
}

/* Ordenar: el nombre a la izquierda y el selector de JetSmartFilters a la derecha. */
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__orden {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sils-esp-s, 1.6rem);
	min-height: 5.6rem;
	padding-left: var(--sils-margen-seguridad);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__orden .brxe-jet-smart-filters-sorting {
	align-self: stretch;
	display: flex;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__orden .jet-sorting-select {
	height: 100%;
	min-width: 0;
	padding: 0 calc(var(--sils-margen-seguridad) + 2.4rem) 0 1.6rem;
	border: 0;
	background: none;
	color: var(--sils-principal);
	font-size: var(--sils-txt-xs);
	text-align: right;
	text-align-last: right;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__orden .jet-sorting::after {
	right: calc(var(--sils-margen-seguridad) - 0.4rem);
}

/* Cabecera desplegable de cada sección. */
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__cabeza,
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__cabeza:focus {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sils-esp-s, 1.6rem);
	width: 100%;
	min-height: 5.6rem;
	margin: 0;
	padding: 1.2rem var(--sils-margen-seguridad);
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--sils-principal);
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__cabeza:hover {
	background-color: var(--sils-gris-claro);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__cabeza:focus-visible {
	outline: 1px solid var(--sils-principal);
	outline-offset: -0.4rem;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__rotulo {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

/* Lo elegido, bajo el nombre y en una línea. */
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__elegidos {
	overflow: hidden;
	color: var(--sils-secundario);
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-3xs);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: 0.025rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__elegidos:empty {
	display: none;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__cabeza i {
	flex-shrink: 0;
	font-size: var(--sils-txt-3xs, 1.2rem);
	transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .es-abierta > .sils-panel__cabeza i {
	transform: rotate(180deg);
}

/* El filtro de JetSmartFilters dentro de su sección: sin su etiqueta de desplegable y con
 * el cuerpo en su sitio, que se abre animando el alto. */
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-filtros__lista > [data-sils-nombre] > * {
	flex: none;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .jet-filter-items-dropdown {
	height: auto;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .jet-filter-items-dropdown__label {
	display: none;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .jet-filter-items-dropdown__body,
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__opciones {
	display: block;
	position: static;
	width: auto;
	height: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	visibility: hidden;
	transition: height .32s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .32s;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .es-abierta .jet-filter-items-dropdown__body,
:is(#sils-panel-filtros, #sils-panel-filtros-2) .es-abierta > .sils-panel__opciones {
	visibility: visible;
	transition: height .32s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}

/* Casillas y colores: dos columnas, con más aire para el dedo. */
:is(#sils-panel-filtros, #sils-panel-filtros-2) .jet-checkboxes-list-wrapper,
:is(#sils-panel-filtros, #sils-panel-filtros-2) .jet-color-image-list-wrapper {
	margin: 0;
	padding: 0 var(--sils-margen-seguridad) 1.6rem;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .jet-checkboxes-list__row {
	margin: 0 0 0.2rem;
	padding-top: 0;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .jet-checkboxes-list__button {
	padding: 1rem var(--sils-esp-2xs, 0.8rem);
}

/* Colección: una fila por logo con el check negro de «Crea tu pared». */
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__opcion,
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__opcion:focus {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 2rem;
	align-items: center;
	gap: var(--sils-esp-s, 1.6rem);
	width: 100%;
	min-height: 5.6rem;
	margin: 0;
	padding: 1rem var(--sils-margen-seguridad);
	border: 0;
	border-top: 1px solid var(--sils-linea);
	border-radius: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .16s ease, opacity .2s ease;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__opcion:hover,
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__opcion.is-activa {
	background-color: var(--sils-gris-claro);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__opcion.is-activa {
	box-shadow: inset 2px 0 0 var(--sils-principal);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__opcion:disabled {
	opacity: .35;
	cursor: default;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__opcion:focus-visible {
	outline: 1px solid var(--sils-principal);
	outline-offset: -0.4rem;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__logo img {
	display: block;
	width: auto;
	max-width: 18rem;
	height: 4.4rem;
	object-fit: contain;
	object-position: left center;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__check {
	position: relative;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--sils-principal);
	opacity: 0;
	transform: scale(.6);
	transition: opacity .2s ease, transform .24s cubic-bezier(.22, .61, .36, 1);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__check::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--sils-blanco);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 1rem no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 1rem no-repeat;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__opcion.is-activa .sils-panel__check {
	opacity: 1;
	transform: none;
}

/* ── Pie: Limpiar y Ver N obras ──────────────────────────────────────────── */
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__pie {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sils-esp-xs, 1.2rem);
	flex-shrink: 0;
	padding: 1.2rem var(--sils-margen-seguridad) calc(1.2rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--sils-principal);
	background-color: var(--sils-blanco);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__limpiar,
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__ver {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sils-esp-2xs, 0.8rem);
	height: 4.4rem;
	margin: 0;
	padding: 0 2rem;
	border: 1px solid var(--sils-principal);
	border-radius: var(--sils-radio, 0.4rem);
	box-shadow: none;
	font-family: var(--sils-fuente-thoren);
	font-size: var(--sils-txt-boton);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, opacity .2s ease;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__limpiar,
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__limpiar:focus {
	background-color: var(--sils-blanco);
	color: var(--sils-principal);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__limpiar:hover {
	background-color: var(--sils-gris-claro);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__ver,
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__ver:focus {
	background-color: var(--sils-principal);
	color: var(--sils-blanco);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__ver:hover {
	background-color: var(--sils-texto);
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__limpiar:focus-visible,
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__ver:focus-visible {
	outline: 1px solid var(--sils-principal);
	outline-offset: 0.2rem;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__limpiar:disabled,
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__ver:disabled {
	opacity: .35;
	cursor: default;
}

/* Mientras llega el listado: anillo de 12 px y «Actualizando». */
:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__giro {
	display: none;
	width: 1.2rem;
	height: 1.2rem;
	border: 0.15rem solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: sils-gira .8s linear infinite;
}

:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__ver.es-cargando .sils-panel__giro {
	display: block;
}

/* ── Rejilla del móvil: 1 o 2 obras por fila ─────────────────────────────
 * Botón de la barra (filtros-panel.js), solo hasta 767 px: la rejilla de Bricks pasa ahí a
 * 2 columnas (`mobile_landscape`). La elección cuelga de <html>: `sils-rejilla` (interruptor,
 * inc/catalogo.php) y `sils-rejilla-1|2` (lo elegido; sin elección, cada archivo sale como
 * siempre: obras de 2 en 2, Inspiración de 1 en 1 en vertical).
 * A una por fila, la imagen de la tarjeta pasa de 22,5 rem a 1,25 veces el ancho (tope 80 %
 * del alto de la pantalla), que es para lo que se elige: ver la obra más grande.
 * `!important` para ganar al CSS por id de Bricks (#brxe-acrgrd).
 */
.sils-filtros__rejilla {
	display: none;
}

@media (max-width: 767px) {
	html.sils-rejilla .brxe-container.sils-filtros .sils-filtros__rejilla,
	html.sils-rejilla .brxe-container.sils-filtros .sils-filtros__rejilla:focus {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 4.8rem;
		min-height: 4.8rem;
		margin: 0;
		padding: 0;
		border: 0;
		border-left: 1px solid var(--sils-principal);
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: var(--sils-principal);
		cursor: pointer;
		animation: sils-panel-aparece .2s ease;
	}

	/* Solo con ratón: en el móvil el «encima» se queda pegado tras tocar. */
	@media (hover: hover) {
		html.sils-rejilla .brxe-container.sils-filtros .sils-filtros__rejilla:hover {
			background-color: color-mix(in srgb, var(--sils-principal) 4%, transparent);
		}
	}

	/* Con el botón, la barra no se parte: si no cabe (Inspiración a 360 px, «733
	 * composiciones»), el nº de obras pasa a dos líneas dentro de su celda. */
	html.sils-rejilla .brxe-container.sils-filtros .sils-filtros__derecha {
		flex-wrap: nowrap !important;
	}

	html.sils-rejilla .brxe-container.sils-filtros .sils-filtros__cuenta {
		flex: 1 1 0;
		min-width: 0;
		padding-right: var(--sils-esp-2xs, 0.8rem);
		line-height: 1.25;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	html.sils-rejilla .brxe-container.sils-filtros .sils-filtros__rejilla:focus-visible {
		outline: 1px solid var(--sils-principal);
		outline-offset: -0.4rem;
	}

	.sils-filtros__rejilla svg {
		width: 2rem;
		height: 2rem;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.4;
	}

	/* Obras (rejilla de Bricks). */
	html.sils-rejilla-1 .brx-grid:has(> .jsfb-query--cuadros) {
		grid-template-columns: minmax(0, 1fr) !important;
		--sils-alto-tarjeta: min(calc((100vw - 2 * var(--sils-margen-seguridad)) * 1.25), 80svh);
	}

	/* Inspiración (mosaico de Bricks). */
	html.sils-rejilla-1 .bricks-masonry:has(> .jsfb-query--cuadros) {
		--columns: 1 !important;
	}

	html.sils-rejilla-2 .bricks-masonry:has(> .jsfb-query--cuadros) {
		--columns: 2 !important;
	}

	/* El cambio se funde: sale en 0,16 s y entra en 0,2 s, sin saltos. */
	html.sils-rejilla :is(.brx-grid, .bricks-masonry):has(> .jsfb-query--cuadros) {
		transition: opacity .2s ease;
	}

	html.sils-rejilla :is(.brx-grid, .bricks-masonry).sils-rejilla-cambia:has(> .jsfb-query--cuadros) {
		opacity: 0;
		transition-duration: .16s;
	}
}

@keyframes sils-panel-aparece {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes sils-gira {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__velo,
	:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__hoja,
	:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__cabeza i,
	:is(#sils-panel-filtros, #sils-panel-filtros-2) .jet-filter-items-dropdown__body,
	:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__opciones,
	:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__check,
	html.sils-rejilla :is(.brx-grid, .bricks-masonry):has(> .jsfb-query--cuadros) { transition: none; }

	:is(#sils-panel-filtros, #sils-panel-filtros-2) .sils-panel__giro { animation-duration: 2s; }
}