/**
 * Filtros do catálogo.
 *
 * Desktop (64em+): coluna de filtros à esquerda, grade à direita.
 * Celular: botão "Filtrar coroas" que abre o painel no lugar.
 *
 * O painel só se esconde sob `html.jf-menu-js` — a classe que menu.js põe no
 * <html> ainda no <head>, antes da pintura. Sem JavaScript o painel fica
 * aberto e o botão nem aparece: a pessoa perde o recolhimento, nunca o filtro.
 */

/* ---------- Moldura ---------- */

.jf-catalogo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--jf-space-md);
}

@media (min-width: 64em) {
	.jf-catalogo {
		grid-template-columns: var(--jf-filtros) minmax(0, 1fr);
		gap: var(--jf-space-xl);
		align-items: start;
	}
}

/* Com a coluna de filtros, a grade perde ~300px: quatro colunas só a partir do
   container largo. Abaixo disso, três — quatro cards de 180px deixavam a foto
   da coroa pequena demais para comparar. */
@media (min-width: 64em) {
	.jf-catalogo ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 75em) {
	.jf-catalogo ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Barra acima da grade ---------- */

.jf-catalogo__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jf-space-xs) var(--jf-space-md);
	margin: 0 0 var(--jf-space-md);
}

.jf-catalogo__quantos {
	margin: 0;
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
}

.jf-catalogo__ativos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jf-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jf-catalogo__ativos li {
	margin: 0;
}

.jf-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--jf-space-2xs);
	min-height: 2.25rem;
	padding: var(--jf-space-3xs) var(--jf-space-xs) var(--jf-space-3xs) var(--jf-space-sm);
	background-color: var(--jf-color-primary-soft);
	color: var(--jf-color-primary-hover);
	font-size: var(--jf-size-sm);
	font-weight: var(--jf-weight-semibold);
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--jf-radius-pill);
	transition: border-color var(--jf-transition);
}

.jf-chip:hover {
	border-color: var(--jf-color-primary);
	color: var(--jf-color-primary-hover);
}

.jf-catalogo__limpar,
.jf-filtros__limpar {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	color: var(--jf-color-text);
	font-size: var(--jf-size-sm);
	font-weight: var(--jf-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.jf-catalogo__limpar:hover,
.jf-filtros__limpar:hover {
	color: var(--jf-color-primary);
}

/* ---------- Painel ---------- */

.jf-filtros__painel {
	padding: var(--jf-pad-md);
	background-color: var(--jf-color-surface);
	border: 1px solid var(--jf-color-border);
	border-radius: var(--jf-radius-lg);
}

@media (min-width: 64em) {
	.jf-filtros {
		position: sticky;
		top: var(--jf-space-md);
	}

	.jf-filtros__painel {
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}
}

.jf-filtros__titulo {
	margin: 0 0 var(--jf-space-sm);
	font-size: var(--jf-size-lg);
}

.jf-filtro {
	padding: var(--jf-space-sm) 0;
	border-top: 1px solid var(--jf-color-border);
}

.jf-filtro:first-of-type {
	border-top: 0;
	padding-top: 0;
}

h3.jf-filtro__titulo {
	margin: 0 0 var(--jf-space-2xs);
	color: var(--jf-color-text);
	font-family: var(--jf-font-heading);
	font-size: var(--jf-size-sm);
	font-weight: var(--jf-weight-semibold);
	letter-spacing: var(--jf-tracking-eyebrow);
	text-transform: uppercase;
}

.jf-filtro__opcoes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jf-filtro__opcoes li {
	margin: 0;
}

/* Cada opção tem 44px de alvo, mesmo com a linha visualmente compacta. */
.jf-filtro__opcao {
	display: flex;
	align-items: center;
	gap: var(--jf-space-xs);
	min-height: var(--jf-tap-min);
	color: var(--jf-color-text);
	font-size: var(--jf-size-sm);
	text-decoration: none;
}

.jf-filtro__opcao:focus-visible {
	outline: var(--jf-focus-width) solid var(--jf-color-focus);
	outline-offset: var(--jf-focus-offset);
	border-radius: var(--jf-radius-sm);
}

/* Caixa de seleção desenhada: quadrada nos grupos de "ou", redonda no preço,
   que é escolha única. A forma diz como o grupo se comporta antes do clique. */
.jf-filtro__marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--jf-color-surface);
	color: var(--jf-color-text-on-dark);
	border: 1px solid var(--jf-color-border-strong);
	border-radius: var(--jf-radius-sm);
	transition: background-color var(--jf-transition), border-color var(--jf-transition);
}

.jf-filtro__opcoes--unica .jf-filtro__marca {
	border-radius: var(--jf-radius-pill);
}

.jf-filtro__opcao--ativa .jf-filtro__marca {
	background-color: var(--jf-color-primary);
	border-color: var(--jf-color-primary);
}

.jf-filtro__opcao:hover .jf-filtro__marca {
	border-color: var(--jf-color-primary);
}

.jf-filtro__opcao--ativa .jf-filtro__rotulo {
	font-weight: var(--jf-weight-semibold);
}

.jf-filtro__rotulo {
	flex: 1 1 auto;
}

.jf-filtro__opcao:hover .jf-filtro__rotulo {
	color: var(--jf-color-primary);
}

.jf-filtro__total {
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-xs);
	white-space: nowrap;
}

.jf-filtros__limpar {
	margin-top: var(--jf-space-xs);
}

/* No desktop, com mouse, a linha fica mais compacta: com 44px por opção, os
   cinco grupos passavam de 1.100px de altura. 36px continua acima do mínimo
   de 24px do critério 2.5.8. No toque a altura cheia volta. */
@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
	.jf-filtro__opcao {
		min-height: 2.25rem;
	}
}

/* ---------- Botão do celular ---------- */

.jf-filtros__abrir {
	display: none;
}

@media (max-width: 63.9375em) {
	.jf-menu-js .jf-filtros__abrir {
		display: inline-flex;
		align-items: center;
		gap: var(--jf-space-2xs);
		width: 100%;
		min-height: var(--jf-tap-min);
		padding: var(--jf-space-2xs) var(--jf-space-md);
		background-color: var(--jf-color-surface);
		color: var(--jf-color-text);
		font-size: var(--jf-size-base);
		font-weight: var(--jf-weight-semibold);
		border: 1px solid var(--jf-color-border-strong);
		border-radius: var(--jf-radius-md);
		cursor: pointer;
	}

	.jf-menu-js .jf-filtros__abrir:hover {
		background-color: var(--jf-color-surface);
		border-color: var(--jf-color-primary);
		color: var(--jf-color-primary);
	}

	.jf-menu-js .jf-filtros__abrir svg {
		color: var(--jf-color-primary);
	}

	.jf-filtros__contagem {
		margin-left: auto;
		padding: 0 var(--jf-space-2xs);
		background-color: var(--jf-color-primary-soft);
		color: var(--jf-color-primary-hover);
		font-size: var(--jf-size-xs);
		border-radius: var(--jf-radius-pill);
	}

	.jf-menu-js .jf-filtros__painel {
		display: none;
		margin-top: var(--jf-space-2xs);
	}

	/* O botão já diz "Filtrar coroas"; repetir o título dentro do painel
	   aberto logo abaixo dele é ruído. Continua no leitor de tela, porque é
	   ele que dá nome ao <aside>. */
	.jf-menu-js .jf-filtros__titulo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* No celular as opções viram pílulas lado a lado: em lista, uma por linha,
	   o painel aberto passava de 1.000px e a primeira coroa ficava a mais de
	   uma tela de distância. Duas colunas de lista foram tentadas e
	   espremiam os títulos ("PREDOMINAN-TE"). Cada pílula mantém 44px de
	   altura de toque. */
	.jf-menu-js .jf-filtros--aberto .jf-filtros__painel {
		display: block;
	}

	.jf-filtro,
	.jf-filtro:first-of-type {
		padding: var(--jf-space-xs) 0;
		border-top: 0;
	}

	.jf-filtro__opcoes {
		display: flex;
		flex-wrap: wrap;
		gap: var(--jf-space-2xs);
	}

	.jf-filtro__opcao {
		gap: var(--jf-space-2xs);
		padding: 0 var(--jf-space-sm) 0 var(--jf-space-xs);
		border: 1px solid var(--jf-color-border-strong);
		border-radius: var(--jf-radius-pill);
	}

	.jf-filtro__opcao--ativa {
		background-color: var(--jf-color-primary-soft);
		border-color: var(--jf-color-primary);
	}

	.jf-filtro__marca {
		width: 1.125rem;
		height: 1.125rem;
	}
}

/* ---------- "Ver N coroas" (só no celular, com o painel aberto) ---------- */

.jf-filtros__ver {
	display: none;
}

@media (max-width: 63.9375em) {
	.jf-menu-js .jf-filtros__ver {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: var(--jf-control-height);
		margin-top: var(--jf-space-sm);
		background-color: var(--jf-color-primary);
		color: var(--jf-color-text-on-dark);
		font-weight: var(--jf-weight-semibold);
		text-decoration: none;
		border-radius: var(--jf-radius-md);
	}

	.jf-menu-js .jf-filtros__ver:hover {
		background-color: var(--jf-color-primary-hover);
		color: var(--jf-color-text-on-dark);
	}
}

.jf-catalogo__lista:focus {
	outline: none;
}