/**
 * Filtros de catalogo: barra lateral fija en escritorio (min-width 1024px,
 * el ancho de tableta grande acordado en el proyecto), panel en movil.
 */

/*
 * Scroll fino y de bajo contraste para cualquier zona con scroll propio de
 * este panel (barra lateral, popup "Ver más", panel de movil): sin esto el
 * navegador dibuja su barra de scroll gris gruesa por defecto, que se nota
 * como un elemento de interfaz aparte en vez de pasar desapercibida.
 */
.ace-category-filters__scroll,
.ace-filter-modal__grid,
.ace-filters-offcanvas__body {
	scrollbar-color: var(--wp--preset--color--hairline, #e2e1de) transparent;
	scrollbar-width: thin;
}

.ace-category-filters__scroll::-webkit-scrollbar,
.ace-filter-modal__grid::-webkit-scrollbar,
.ace-filters-offcanvas__body::-webkit-scrollbar {
	block-size: 6px;
	inline-size: 6px;
}

.ace-category-filters__scroll::-webkit-scrollbar-track,
.ace-filter-modal__grid::-webkit-scrollbar-track,
.ace-filters-offcanvas__body::-webkit-scrollbar-track {
	background: transparent;
}

.ace-category-filters__scroll::-webkit-scrollbar-thumb,
.ace-filter-modal__grid::-webkit-scrollbar-thumb,
.ace-filters-offcanvas__body::-webkit-scrollbar-thumb {
	background-color: var(--wp--preset--color--hairline, #e2e1de);
	border-radius: 999px;
}

.ace-category-filters__scroll:hover::-webkit-scrollbar-thumb,
.ace-filter-modal__grid:hover::-webkit-scrollbar-thumb,
.ace-filters-offcanvas__body:hover::-webkit-scrollbar-thumb {
	background-color: var(--wp--preset--color--contrast-muted, #6b6b6b);
}

.ace-category-layout {
	display: grid;
	gap: var(--wp--preset--spacing--50, 2rem);
	grid-template-columns: minmax(0, 1fr);
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
}

.ace-category-filters {
	display: none;
	/* Ancho fijo real: sin esto una categoria con nombre largo o varias
	   etiquetas activas puede "inflar" la columna del grid y correr la
	   grilla de productos hacia la derecha (lo que vio Adriano en /tienda/). */
	min-inline-size: 0;
	overflow-wrap: anywhere;
	/*
	 * Sin relleno lateral propio -pedido de Adriano, corrige un intento
	 * anterior con padding-inline: el panel es una columna mas de la pagina,
	 * no una tarjeta flotante, y ese aire corria "Filtrar" hacia la derecha
	 * del titulo "Tienda" de arriba, desalineados. Los paneles que si son
	 * tarjetas flotantes (el popup "Ver mas", el panel de movil) tienen su
	 * propio padding interno, sin tocar esta regla.
	 */
}

/* La grilla de resultados tambien necesita min-inline-size:0: un track "1fr"
   de CSS Grid puede igual desbordar por el contenido si no se lo decis. */
.ace-category-results {
	min-inline-size: 0;
}

/*
 * Mientras llegan los resultados nuevos (el visitante acaba de tocar "Ver
 * resultados" o "Limpiar filtros" y el panel ya se cerro), la grilla se
 * atenua: es la señal de que el pedido esta en camino. Solo opacidad, no
 * mueve nada de lugar; con "reducir movimiento" el cambio es directo.
 */
.ace-category-results.is-loading ul.products,
.ace-category-results.is-loading .ace-results-toolbar {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.ace-category-results.is-loading ul.products,
	.ace-category-results.is-loading .ace-results-toolbar {
		transition: none;
	}
}

.ace-filters-panel-head {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--30, 1rem);
}

.ace-filters-panel-head h2 {
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	margin: 0;
}

.ace-filters-clear {
	color: var(--wp--preset--color--accent, #3f4a5a);
	font-size: 0.875rem;
	/* Un nivel menos que antes (600->500) -pedido de Adriano, se veia muy pesado-. */
	font-weight: 500;
	text-decoration: none;
}

.ace-filters-clear:hover {
	text-decoration: underline;
}

.ace-filter-group {
	border-block-end: 1px solid var(--wp--preset--color--hairline, #e2e1de);
	padding-block: 0.5rem;
}

.ace-filter-group:first-child {
	border-block-start: none;
	padding-block-start: 0;
}

.ace-filter-group summary {
	cursor: pointer;
	/* Un nivel menos que antes (600->500) -pedido de Adriano, se veia muy pesado-. */
	font-weight: 500;
	list-style: none;
	padding-block: 0.25rem;
}

.ace-filter-group summary::-webkit-details-marker {
	display: none;
}

/*
 * Renglon de opcion sin caja de seleccion visible (criterio Mercado Libre,
 * pedido explicito de Adriano): la casilla real sigue en el DOM -funciona
 * con teclado y lector de pantalla- pero no se dibuja como cuadrito. La
 * unica senal de que un filtro esta activo es su etiqueta en
 * `.ace-filters-chips`, arriba del panel; el renglon no cambia de estilo.
 */
.ace-filter-option {
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
	cursor: pointer;
	display: block;
	font-size: 0.8125rem;
	line-height: 1.15;
	margin: 0;
	/* Las filas del popup "Ordenar" son <a>, no <label>: sin esto salian subrayadas. */
	text-decoration: none;
	/*
	 * Densidad Mercado Libre, pedido explicito de Adriano en dos vueltas: el
	 * renglon ocupa poco mas que su propio texto, no un padding tipo boton.
	 * Con line-height 1.15 sobre 13px, esto deja unos 4-5px reales entre el
	 * final de un renglon y el principio del siguiente.
	 */
	padding-block: 2px;
}

.ace-filter-option:hover {
	color: var(--wp--preset--color--contrast, #1c1c1c);
}

/*
 * Fondo gris claro en el propio renglon cuando la opcion esta marcada
 * (ademas de la etiqueta/chip arriba del panel): las dos senales a la vez,
 * criterio Mercado Libre pedido por Adriano. `:has()` lee el checkbox
 * escondido dentro del mismo <label>, sin agregar clases por JS.
 */
.ace-filter-option:has(input:checked) {
	background: var(--wp--preset--color--base-alt, #f1f0ee);
	border-radius: 0.375rem;
	margin-inline: -0.375rem;
	padding-inline: 0.375rem;
}

.ace-filter-option input {
	block-size: 1px;
	clip: rect(0 0 0 0);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

/* El foco por teclado tiene que seguir siendo visible aunque la casilla no se vea. */
.ace-filter-option input:focus-visible + .ace-filter-option__label {
	outline: 2px solid var(--wp--preset--color--accent, #3f4a5a);
	outline-offset: 2px;
}

.ace-filter-option__count {
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
	font-size: 0.8125rem;
	margin-inline-start: 0.25rem;
}

/* ---------- Etiquetas de filtros activos ---------- */

.ace-filters-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: var(--wp--preset--spacing--20, 0.75rem);
}

.ace-filter-chip {
	align-items: center;
	background: var(--wp--preset--color--base-alt, #f1f0ee);
	border-radius: var(--wp--preset--border-radius--pill, 999px);
	color: var(--wp--preset--color--contrast, #1c1c1c);
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 500;
	gap: 0.3rem;
	padding-block: 0.3rem;
	padding-inline: 0.7rem;
	text-decoration: none;
}

.ace-filter-chip:hover {
	background: var(--wp--preset--color--hairline, #e2e1de);
}

.ace-filter-chip .ace-icon--close {
	block-size: 0.75rem;
	inline-size: 0.75rem;
}

.ace-filter-price-row {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	padding-block: 0.375rem;
}

.ace-filter-price-input {
	border: 1.5px solid var(--wp--preset--color--hairline, #e2e1de);
	border-radius: 0.5rem;
	font: inherit;
	inline-size: 100%;
	min-block-size: 2.75rem;
	padding-inline: 0.625rem;
}

.ace-filter-price-sep {
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
	flex-shrink: 0;
}

/* ---------- "Ver más": abre un popup, no despliega en el panel ---------- */

.ace-filter-more-toggle {
	background: none;
	border: 0;
	color: var(--wp--preset--color--accent, #3f4a5a);
	cursor: pointer;
	font: inherit;
	font-size: 0.8125rem;
	/* Un nivel menos que antes (600->500) -pedido de Adriano, se veia muy pesado-. */
	font-weight: 500;
	margin-block-start: 0.25rem;
	padding: 0.25rem 0;
}

.ace-filter-more-toggle:hover {
	text-decoration: underline;
}

.ace-filter-modal {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 1.5rem;
	pointer-events: none;
	position: fixed;
	z-index: var(--wp--custom--layer--modal, 300);
}

.ace-filter-modal.is-open {
	pointer-events: auto;
}

.ace-filter-modal__overlay {
	background: rgb(0 0 0 / 55%);
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 0.2s ease-out;
}

.ace-filter-modal.is-open .ace-filter-modal__overlay {
	opacity: 1;
}

.ace-filter-modal__dialog {
	background: var(--wp--preset--color--surface, #fff);
	border-radius: 1rem;
	box-shadow: 0 1rem 3rem rgb(0 0 0 / 22%);
	display: flex;
	flex-direction: column;
	inline-size: min(36rem, 100%);
	max-block-size: min(32rem, 80vh);
	opacity: 0;
	position: relative;
	transform: scale(0.96);
	transition:
		opacity 0.2s ease-out,
		transform 0.2s ease-out;
}

.ace-filter-modal.is-open .ace-filter-modal__dialog {
	opacity: 1;
	transform: scale(1);
}

.ace-filter-modal__header {
	align-items: center;
	border-block-end: 1px solid var(--wp--preset--color--hairline, #e2e1de);
	display: flex;
	flex-shrink: 0;
	justify-content: space-between;
	padding: 1rem 1.25rem;
}

.ace-filter-modal__header h3 {
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	margin: 0;
}

.ace-filter-modal__close {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	min-block-size: var(--wp--custom--target--min, 2.75rem);
	min-inline-size: var(--wp--custom--target--min, 2.75rem);
}

.ace-filter-modal__grid {
	align-content: start;
	column-gap: 1.25rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	overflow-y: auto;
	padding: 1rem 1.25rem 1.25rem;
	row-gap: 0.125rem;
}

@media (max-width: 40rem) {
	.ace-filter-modal__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 40.01rem) and (max-width: 56rem) {
	.ace-filter-modal__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Barra de resultados ---------- */

/*
 * Dos barras que se turnan por ancho, nunca las dos juntas: `.ace-results-
 * toolbar` (cantidad + "Ordenar") en escritorio/tableta grande, la tira
 * "Ordenar / Ofertas / Filtrar" calcada de Mercado Libre por debajo de
 * 900px -mismo corte que ya usa la barra lateral de filtros-. La cantidad
 * de resultados no se ve en movil -pedido de Adriano-.
 */
.ace-results-toolbar {
	align-items: center;
	display: none;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--30, 1rem);
}

.ace-mobile-toolbar {
	display: flex;
}

@media (min-width: 56.25rem) {
	.ace-results-toolbar {
		display: flex;
	}

	.ace-mobile-toolbar {
		display: none;
	}
}

.ace-results-count {
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
	font-size: 0.9375rem;
}

.ace-results-toolbar-actions {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	margin-inline-start: auto;
}

.ace-filter-count-badge {
	background: var(--wp--preset--color--accent, #3f4a5a);
	border-radius: var(--wp--preset--border-radius--pill, 999px);
	color: var(--wp--preset--color--accent-contrast, #fff);
	font-size: 0.75rem;
	line-height: 1.4;
	min-inline-size: 1.25rem;
	padding-inline: 0.35rem;
	text-align: center;
}

/*
 * "Ordenar" en escritorio/tableta (>=900px): link con icono, mismo lenguaje
 * que ".ace-filter-more-toggle"/".ace-filters-clear" (sin fondo ni borde,
 * color de acento) -pedido de Adriano, no el boton con borde y forma de
 * pildora que tenia antes-. Abre un desplegable anclado con la opcion
 * actual a la vista, no el popup compartido de "Filtrar" -eso es solo de
 * movil, ver ".ace-mobile-toolbar__link" y ".ace-sort-offcanvas" mas abajo-.
 */
.ace-sort-dropdown {
	/*
	 * Ahora vive en la cabecera del titulo (`woocommerce_archive_description`,
	 * ver `render_header_sort_dropdown()` en PHP), que se muestra en todos los
	 * anchos. En movil "Ordenar" es otro elemento (`.ace-mobile-toolbar__link`
	 * mas abajo), asi que este desplegable se esconde ahi para no duplicarse.
	 */
	display: none;
	position: relative;
}

@media (min-width: 56.25rem) {
	.ace-sort-dropdown {
		display: block;
		flex-shrink: 0;
	}
}

.ace-sort-trigger {
	align-items: center;
	background: none;
	border: 0;
	color: var(--wp--preset--color--accent, #3f4a5a);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	/* Un nivel menos que antes (600->500) -pedido de Adriano, se veia muy pesado-. */
	font-weight: 500;
	gap: 0.35rem;
	min-block-size: var(--wp--custom--target--min, 2.75rem);
}

/* Sin esto el <strong> con la opcion elegida sale en 700 (negrita por default del navegador), mas pesado que el resto del link. */
.ace-sort-trigger strong {
	font-weight: 600;
}

.ace-sort-trigger:hover {
	text-decoration: underline;
}

.ace-sort-trigger__icon {
	block-size: 1rem;
	inline-size: 1rem;
}

.ace-sort-dropdown__caret {
	block-size: 0.75rem;
	flex-shrink: 0;
	inline-size: 0.75rem;
	transition: transform 0.15s ease-out;
}

.ace-sort-trigger[aria-expanded="true"] .ace-sort-dropdown__caret {
	transform: rotate(180deg);
}

/*
 * Espaciado mas generoso que el panel de filtros -pedido de Adriano, se
 * veia "muy comprimido"-: son 5 opciones nomas, no una lista larga que
 * necesite densidad Mercado Libre. Mas padding en la tarjeta y mas alto por
 * renglon.
 */
.ace-sort-dropdown__menu {
	background: var(--wp--preset--color--surface, #fff);
	border-radius: 0.75rem;
	box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 18%);
	inset-inline-start: 0;
	list-style: none;
	margin: 0;
	min-inline-size: 14rem;
	padding: 0.5rem;
	position: absolute;
	inset-block-start: calc(100% + 0.375rem);
	z-index: var(--wp--custom--layer--panel, 200);
}

.ace-sort-dropdown__menu .ace-filter-option {
	border-radius: 0.5rem;
	font-size: 0.875rem;
	padding-block: 0.625rem;
	padding-inline: 0.625rem;
}

/* ---------- Tira "Ordenar / Ofertas / Filtrar" de movil (criterio Mercado Libre) ---------- */

/*
 * Pegada a la cabecera de verdad, sin ningun aire en el medio -pedido de
 * Adriano-. El hueco no era solo el `padding-top` del molde de pagina
 * (`<main class="wp-block-group" style="padding-top:var(--wp--preset--
 * spacing--60)">`): WordPress agrega, por separado, otro margen encima
 * (`margin-block-start`, la separacion automatica que pone entre cabecera y
 * `<main>` en TODAS las paginas del sitio) que un margen negativo puesto
 * solo en la tira de abajo -como se intento antes- no puede cancelar: ese
 * segundo margen esta afuera del padding, en el propio `<main>`, fuera del
 * alcance de cualquier cosa que este adentro de el.
 *
 * Por eso la correccion va directo a la fuente (el `<main>` del molde), no a
 * la tira: se anula ahi mismo, con la clase que agrega `add_body_class()` en
 * PHP para no afectar ninguna otra pagina del sitio, y solo en movil/tableta
 * chica (<900px, el mismo corte que usa el resto de este archivo para
 * mostrar la tira) porque en escritorio ese aire es el que separa la
 * cabecera del titulo "Resultados de busqueda"/"Tienda" y ahi si se quiere
 * -no fue parte de este pedido-.
 */
@media (max-width: 56.1875rem) {
	.ace-catalog-listing main.wp-block-group[style*="padding-top"] {
		margin-block-start: 0;
		padding-top: 0 !important;
	}
}

.ace-mobile-toolbar {
	align-items: stretch;
	background: var(--wp--preset--color--surface, #fff);
	border-block-end: 1px solid var(--wp--preset--color--hairline, #e2e1de);
	margin-block-end: var(--wp--preset--spacing--30, 1rem);
	/*
	 * Ancho completo real, "rompiendo" el contenedor angosto de WooCommerce
	 * en el que vive esta tira (`#primary`, sin layout de bloques: la clase
	 * `alignfull` de WordPress no aplica ahi) -pedido de Adriano-. Truco
	 * clasico: el elemento mide el ancho de la ventana entera (100vw) y se
	 * recentra con margenes negativos iguales a la mitad de esa diferencia.
	 */
	inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
}

.ace-mobile-toolbar__link {
	align-items: center;
	background: none;
	border: 0;
	color: var(--wp--preset--color--contrast, #1c1c1c);
	cursor: pointer;
	display: flex;
	flex: 1 1 0;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	gap: 0.35rem;
	justify-content: center;
	min-block-size: var(--wp--custom--target--min, 2.75rem);
	padding-block: 0.625rem;
	white-space: nowrap;
}

.ace-mobile-toolbar__icon {
	block-size: 0.9375rem;
	flex-shrink: 0;
	inline-size: 0.9375rem;
}

.ace-mobile-toolbar__icon-wrap {
	display: inline-flex;
	position: relative;
}

/* Punto de "orden distinto de Relevancia aplicado" sobre el icono de "Ordenar" en movil. */
.ace-mobile-toolbar__active-dot {
	background: var(--wp--preset--color--accent, #3f4a5a);
	block-size: 0.4375rem;
	border: 1.5px solid var(--wp--preset--color--surface, #fff);
	border-radius: 999px;
	inline-size: 0.4375rem;
	inset-block-start: -0.25rem;
	inset-inline-end: -0.3125rem;
	position: absolute;
}

.ace-mobile-toolbar__divider {
	align-self: center;
	background: var(--wp--preset--color--hairline, #e2e1de);
	block-size: 1.25rem;
	flex-shrink: 0;
	inline-size: 1px;
}

.ace-mobile-toolbar__oferta-form {
	/*
	 * align-items:stretch explicito (no "normal"): con el valor inicial el
	 * <label> hijo se quedaba en su alto minimo de 44px en vez de estirarse
	 * a la altura real de la fila (55px), y quedaba mas arriba que "Ordenar"
	 * y "Filtrar" -reportado por Adriano con captura-. block-size:100% en el
	 * label de abajo hace el resto: asegura el estirado sin depender de como
	 * cada navegador resuelva `align-items:normal` en un flex anidado.
	 */
	align-items: stretch;
	display: flex;
	flex: 1 1 0;
}

.ace-mobile-toolbar__switch {
	align-items: center;
	block-size: 100%;
	cursor: pointer;
	display: flex;
	gap: 0.4rem;
	inline-size: 100%;
	justify-content: center;
	padding-inline: 0.5rem;
	white-space: nowrap;
}

.ace-mobile-toolbar__switch input {
	block-size: 1px;
	clip: rect(0 0 0 0);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

.ace-mobile-toolbar__switch-label {
	font-size: 0.8125rem;
	font-weight: 500;
}

/* Interruptor visual, mismo patron que el toggle "Llega mañana" de Mercado Libre. */
.ace-mobile-toolbar__switch-track {
	background: var(--wp--preset--color--hairline, #e2e1de);
	border-radius: 999px;
	block-size: 1.25rem;
	flex-shrink: 0;
	inline-size: 2.125rem;
	position: relative;
	transition: background-color 0.15s ease-out;
}

.ace-mobile-toolbar__switch-thumb {
	background: var(--wp--preset--color--surface, #fff);
	block-size: 1rem;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
	inset-block-start: 0.125rem;
	inset-inline-start: 0.125rem;
	inline-size: 1rem;
	position: absolute;
	transition: transform 0.15s ease-out;
}

.ace-mobile-toolbar__switch input:checked ~ .ace-mobile-toolbar__switch-track {
	background: var(--wp--preset--color--accent, #3f4a5a);
}

.ace-mobile-toolbar__switch input:checked ~ .ace-mobile-toolbar__switch-track .ace-mobile-toolbar__switch-thumb {
	transform: translateX(0.875rem);
}

.ace-mobile-toolbar__switch input:focus-visible ~ .ace-mobile-toolbar__switch-track {
	outline: 2px solid var(--wp--preset--color--accent, #3f4a5a);
	outline-offset: 2px;
}

/* Fila activa del panel "Ordenar": mismo fondo gris que un filtro marcado. */
.ace-filter-option.is-current {
	background: var(--wp--preset--color--base-alt, #f1f0ee);
	border-radius: 0.375rem;
	/* Un nivel menos que antes (600->500) -pedido de Adriano-: el fondo gris ya distingue la fila elegida, no hace falta tanto peso de letra encima. */
	font-weight: 500;
	margin-inline: -0.375rem;
	padding-inline: 0.375rem;
}

/* ---------- Botones ----------
 * `.ace-btn` y sus variantes viven en foundations.css: son un componente
 * del sistema de diseno (lo usa tambien la ficha de producto), no algo
 * propio del panel de filtros. Ver foundations.css, seccion 7c.
 */

/* ---------- Panel de filtros en movil ---------- */

.ace-filters-offcanvas {
	inset: 0;
	pointer-events: none;
	position: fixed;
	z-index: var(--wp--custom--layer--panel, 200);
}

.ace-filters-offcanvas.is-open {
	pointer-events: auto;
}

.ace-filters-offcanvas__overlay {
	background: rgb(0 0 0 / 55%);
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 0.25s ease-out;
}

.ace-filters-offcanvas.is-open .ace-filters-offcanvas__overlay {
	opacity: 1;
}

.ace-filters-offcanvas__dialog {
	background: var(--wp--preset--color--surface, #fff);
	block-size: min(85vh, 100%);
	border-start-end-radius: 1rem;
	border-start-start-radius: 1rem;
	box-shadow: 0 -0.5rem 1.5rem rgb(0 0 0 / 15%);
	display: flex;
	flex-direction: column;
	inset-block-end: 0;
	inset-inline: 0;
	position: absolute;
	transform: translateY(100%);
	transition: transform 0.25s ease-out;
}

.ace-filters-offcanvas.is-open .ace-filters-offcanvas__dialog {
	transform: translateY(0);
}

.ace-filters-offcanvas__header {
	align-items: center;
	border-block-end: 1px solid var(--wp--preset--color--hairline, #e2e1de);
	display: flex;
	flex-shrink: 0;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--30, 1rem);
}

.ace-filters-offcanvas__header h2 {
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	margin: 0;
}

.ace-filters-offcanvas__close {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	min-block-size: var(--wp--custom--target--min, 2.75rem);
	min-inline-size: var(--wp--custom--target--min, 2.75rem);
}

.ace-icon--close {
	transform: rotate(45deg);
}

/*
 * El <form> es el segundo hijo flex del dialogo (despues del encabezado) y
 * tiene que repartir su alto entre el cuerpo con scroll y el pie fijo, igual
 * que antes hacia el dialogo entre header/body. min-block-size:0 es necesario
 * en los dos niveles (form y body): un hijo flex no se achica por debajo de
 * la altura de su contenido por default, y sin esto en los dos lugares el
 * pie con "Limpiar filtros"/"Ver resultados" terminaba empujado fuera de la
 * pantalla -bug real encontrado al verificar con captura, no visible mirando
 * solo el CSS-.
 */
.ace-filters-offcanvas__form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-block-size: 0;
}

.ace-filters-offcanvas__body {
	flex: 1 1 auto;
	min-block-size: 0;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--30, 1rem);
}

.ace-filters-offcanvas__footer {
	border-block-start: 1px solid var(--wp--preset--color--hairline, #e2e1de);
	display: flex;
	flex-shrink: 0;
	gap: 0.75rem;
	padding: var(--wp--preset--spacing--30, 1rem);
}

.ace-filters-offcanvas__footer .ace-btn {
	/*
	 * flex-basis 0 + min-inline-size 0: los dos botones se reparten el ancho
	 * del pie por igual sin que el contenido de uno empuje al otro. Texto en
	 * una sola linea con padding e interlineado mas chicos que el boton
	 * generico: "Ver resultados (99)" es el caso mas largo (dos digitos) y
	 * tiene que entrar igual en la mitad del pie a 390px de ancho.
	 */
	flex: 1 1 0;
	font-size: 0.75rem;
	min-inline-size: 0;
	padding-inline: 0.5rem;
	white-space: nowrap;
}

.ace-filters-offcanvas__footer .ace-btn [data-ace-filters-count-label] {
	margin-inline-start: 0.2rem;
}

/* ---------- Escritorio: barra lateral a partir de 900px ---------- */

/*
 * El corte de 900px, y los topes de columnas de la grilla mas abajo, copian
 * el prototipo aprobado (`_project/prototipo/css/style.css`, reglas
 * `.category-filters` y `.category-results .product-grid`) en vez de un
 * numero propio.
 */
@media (min-width: 56.25rem) {
	.ace-category-layout {
		align-items: start;
		/* Ancho fijo real (no "auto" ni basado en contenido): agregar
		   etiquetas activas arriba o que un grupo tenga mas o menos opciones
		   no debe correr ni angostar la grilla de productos. */
		grid-template-columns: 16rem minmax(0, 1fr);
		/*
		 * Menos aire arriba -pedido de Adriano, se veia "desordenado" con un
		 * hueco grande entre el titulo y la grilla-: ahora "Ordenar" comparte
		 * la linea del titulo (ver ".woocommerce-products-header" mas abajo),
		 * asi que no hace falta tanto margen para separar los dos.
		 */
		margin-block-start: var(--wp--preset--spacing--20, 0.75rem);
	}

	.ace-category-filters {
		display: block;
		/*
		 * Pedido de Adriano: el panel NO queda fijo en pantalla al hacer
		 * scroll (se probo "position: sticky" y no le gusto el resultado
		 * visual). Vuelve a ser una columna mas del flujo normal, como el
		 * resto de la pagina.
		 */
	}

	/*
	 * Titulo "Tienda"/de la categoria y "Ordenar" en la misma linea -pedido
	 * de Adriano-: el titulo a la izquierda, el desplegable a la derecha.
	 * `woocommerce-products-header` es el <header> que WooCommerce ya arma
	 * alrededor del titulo (ver `render_header_sort_dropdown()` en PHP);
	 * `align-items:baseline` para que el titulo grande y el link chico de
	 * "Ordenar" no queden descentrados entre si.
	 */
	.woocommerce-products-header {
		align-items: baseline;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
}

/*
 * Popup "Ordenar" de movil: mismo patron de hoja inferior que "Filtrar",
 * pero mas bajo -son solo 5 filas, no necesita el 85vh fijo del panel de
 * filtros, que tiene mucho mas contenido-. Crece con su contenido y topea
 * antes de llegar a ocupar toda la pantalla. En escritorio/tableta
 * (>=900px) no se usa: ahi "Ordenar" es el desplegable anclado de mas
 * arriba (".ace-sort-dropdown").
 */
.ace-sort-offcanvas .ace-filters-offcanvas__dialog {
	block-size: auto;
	max-block-size: min(24rem, 80vh);
}

/*
 * Espaciado mas generoso que el panel de filtros -pedido de Adriano, se
 * veia "muy comprimido"-: son 5 opciones nomas, no una lista larga que
 * necesite densidad Mercado Libre.
 */
.ace-sort-offcanvas .ace-filters-offcanvas__body {
	overflow-y: auto;
	padding-block: 0.5rem;
}

.ace-sort-offcanvas .ace-filter-option {
	border-radius: 0.5rem;
	font-size: 0.9375rem;
	padding-block: 0.75rem;
	padding-inline: 0.5rem;
}

/*
 * La barra lateral ya come parte del ancho del contenedor, asi que la
 * grilla de "Tienda"/categoria topea distinto que la grilla general
 * (`ul.products` en woocommerce.css, que sigue en 6/5/4/2 columnas en
 * contextos sin barra lateral, como el inicio o favoritos). 4 columnas fijas
 * de 900px para arriba -pedido de Adriano-, no 5 como antes.
 */
@media (min-width: 56.3125rem) {
	.ace-category-results ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ace-filters-offcanvas__overlay,
	.ace-filters-offcanvas__dialog {
		transition: none;
	}
}