/* Barra de filtro por estilo — loja e páginas de categoria.
   Carregada só em is_shop() / is_product_taxonomy() (inc/filtro-estilos.php). */

.bx-filtro {
	margin: 0 0 1.75rem;
	padding: 1rem 1.15rem 1.15rem;
	background: var(--bg-elev);
	border: 1px solid var(--border-soft);
	border-radius: 16px;
}

.bx-filtro__topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .85rem;
}

.bx-filtro__rotulo {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
}

.bx-filtro__limpar {
	font-size: .82rem;
	font-weight: 600;
	color: var(--purple-bright);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.bx-filtro__limpar:hover,
.bx-filtro__limpar:focus-visible {
	border-bottom-color: currentColor;
}

.bx-filtro__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bx-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .44rem .8rem;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--text-soft);
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 999px;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.bx-chip:hover,
.bx-chip:focus-visible {
	color: var(--text);
	background: var(--bg-card-hover);
	border-color: var(--purple-deep);
}

.bx-chip--ativo {
	color: #fff;
	background: var(--grad);
	border-color: transparent;
}

/* O contador precisa funcionar sobre o card escuro e sobre o gradiente do chip
   ligado, por isso usa currentColor com opacidade em vez de uma cor fixa. */
.bx-chip__n {
	font-size: .72rem;
	font-weight: 700;
	color: currentColor;
	opacity: .6;
}

.bx-chip--ativo .bx-chip__n {
	opacity: .85;
}

.bx-filtro__vazio {
	margin: 1.5rem 0;
	color: var(--muted);
}

.bx-filtro__vazio a {
	color: var(--purple-bright);
}

@media (max-width: 600px) {
	.bx-filtro {
		padding: .9rem 1rem 1rem;
		border-radius: 14px;
	}

	/* No celular a barra vira uma faixa rolável: 17 chips empilhados comiam a
	   tela inteira antes do primeiro jogo aparecer. */
	.bx-filtro__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: .2rem;
		margin-right: -1rem;
		padding-right: 1rem;
	}

	.bx-filtro__chips::-webkit-scrollbar {
		display: none;
	}

	.bx-chip {
		flex: 0 0 auto;
	}
}