/**
 * Roccha sobre o Bijoux — header em vidro, ícones e filtro de categoria.
 *
 * As cores saem das variáveis globais do kit do Elementor, com um valor de
 * reserva ao lado: se o kit for trocado no painel, isto acompanha.
 */

:root {
	--rj-tinta:   var( --e-global-color-vamtam_accent_3, #051F34 );
	--rj-realce:  var( --e-global-color-vamtam_accent_1, #CB9274 );
	--rj-linha:   var( --e-global-color-vamtam_accent_4, #E3DBD4 );
	--rj-fundo:   var( --e-global-color-vamtam_accent_8, #F6F4F2 );

	/* .68 em vez de .55: com a logo verde da Roccha em cima da foto do banner,
	   um vidro mais fino deixava o "JOIAS" ilegível. */
	--rj-vidro:        rgba( 255, 255, 255, .68 );
	--rj-vidro-borda:  rgba( 5, 31, 52, .07 );
	--rj-vidro-sombra: 0 10px 34px -20px rgba( 5, 31, 52, .55 );
}

/* ==========================================================================
   1. Header fixa em vidro
   ========================================================================== */

/**
 * Quem prende a header no topo é o sticky do Elementor, que já marca o estado
 * com `elementor-sticky--effects` assim que a página passa do offset (30px,
 * configurado no template). Aqui entra só a aparência desse estado: fundo
 * translúcido, desfoque do que passa por baixo e uma linha de um pixel no
 * lugar da sombra pesada.
 *
 * O `.vamtam-sticky-header--fixed-shown` do tema entra junto porque no desktop
 * a header também se esconde ao descer e reaparece ao subir — e nesse
 * reaparecer o tema pinta o fundo de branco sólido, que apagaria o vidro.
 *
 * O `__spacer` fica de fora: é o clone invisível que o Elementor deixa no
 * fluxo para o conteúdo não pular.
 */
.elementor-location-header .elementor-section.elementor-sticky {
	transition: background-color .35s ease, backdrop-filter .35s ease,
	            box-shadow .35s ease, transform .2s ease !important;
}

.elementor-location-header .elementor-section.elementor-sticky--effects:not( .elementor-sticky__spacer ),
.vamtam-sticky-header.vamtam-sticky-header--fixed-shown {
	background-color: var( --rj-vidro ) !important;
	-webkit-backdrop-filter: saturate( 180% ) blur( 20px );
	        backdrop-filter: saturate( 180% ) blur( 20px );
	border-bottom: 1px solid var( --rj-vidro-borda );
	box-shadow: var( --rj-vidro-sombra );
}

/**
 * Tamanho da logo.
 *
 * A do demo era um SVG deitado de 130x50 e o widget herdou essa largura fixa.
 * A da Roccha é a versão horizontal montada pelo `75-logo-horizontal.php`
 * (2108x520): sem soltar a largura ela fica presa nos 153px do demo e o nome
 * some.
 */
/* A largura mora no widget (`76-logo-largura.php`); aqui só a garantia de que
   a altura acompanha, senão a imagem achata. */
.elementor-location-header .elementor-widget-theme-site-logo img,
.elementor-location-footer .elementor-widget-theme-site-logo img {
	height: auto;
	max-width: 100%;
}

/* Safari antigo e Firefox sem `backdrop-filter`: fundo quase sólido, senão o
   texto da header cai em cima da foto do banner e some. */
@supports not ( ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) ) {
	.elementor-location-header .elementor-section.elementor-sticky--effects:not( .elementor-sticky__spacer ),
	.vamtam-sticky-header.vamtam-sticky-header--fixed-shown {
		background-color: rgba( 255, 255, 255, .94 ) !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.elementor-location-header .elementor-section.elementor-sticky {
		transition: none !important;
	}
}

/* ==========================================================================
   2. Ícones de menu e de carrinho
   ========================================================================== */

/* Alvo de toque de 44px sem inchar o desenho do ícone. */
.elementor-menu-cart__toggle_button,
.vamtam-popup-toggle .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 6px;
	background: transparent !important;
	border: 0;
	color: var( --rj-tinta );
	transition: color .2s ease, opacity .2s ease;
}

.elementor-menu-cart__toggle_button:hover,
.elementor-menu-cart__toggle_button:focus-visible,
.vamtam-popup-toggle .elementor-button:hover,
.vamtam-popup-toggle .elementor-button:focus-visible {
	color: var( --rj-realce );
}

.elementor-menu-cart__toggle_button:focus-visible,
.vamtam-popup-toggle .elementor-button:focus-visible {
	outline: 2px solid var( --rj-realce );
	outline-offset: 3px;
}

/* Os dois ícones vêm da mesma fonte do tema; igualar o corpo é o que faz eles
   pararem de parecer de tamanhos diferentes lado a lado. */
.elementor-menu-cart__toggle_button .elementor-button-icon i,
.vamtam-popup-toggle .elementor-button-icon i,
.vamtam-popup-toggle .elementor-button i {
	font-size: 22px;
	line-height: 1;
	vertical-align: middle;
}

.elementor-menu-cart__toggle_button .elementor-button-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* O contador: bolinha discreta encostada no canto do ícone, não um botão. */
.elementor-menu-cart__toggle_button .elementor-button-icon-qty {
	position: absolute;
	top: -7px;
	right: -9px;
	display: grid;
	place-items: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var( --rj-realce );
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, .85 );
}

/* Carrinho vazio não precisa de um "0" pendurado. */
.vamtam-wc-cart-empty .elementor-menu-cart__toggle_button .elementor-button-icon-qty {
	display: none;
}

/* O valor ao lado do ícone só atrapalha em tela pequena. */
@media ( max-width: 767px ) {
	.elementor-menu-cart__toggle_button .elementor-button-text {
		display: none;
	}
}

/* ==========================================================================
   3. Página de produto: galeria em carrossel
   ========================================================================== */

/**
 * O tema vinha com a galeria "full size" (fotos empilhadas), que desliga o
 * flexslider do WooCommerce. Com o carrossel de volta, o tema não tem estilo
 * nenhum para as setas — elas apareciam como uma lista com marcador, escrito
 * "Previous / Next".
 *
 * A galeria vira uma grade de três áreas: a foto em cima, ocupando a linha
 * inteira; as miniaturas embaixo à esquerda; as setas embaixo à direita. Sem
 * sobreposição e sem número mágico — as setas não precisam saber a altura da
 * foto para ficar no lugar certo.
 */
.woocommerce div.product .woocommerce-product-gallery {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"foto     foto"
		"miniatur setas";
	align-items: center;
	gap: 12px 16px;
}

.woocommerce div.product .woocommerce-product-gallery .flex-viewport {
	grid-area: foto;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
	grid-area: miniatur;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li {
	width: 74px;
	margin: 0;
	list-style: none;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	opacity: .5;
	border: 1px solid transparent;
	transition: opacity .2s ease, border-color .2s ease;
	cursor: pointer;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var( --rj-tinta );
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav {
	grid-area: setas;
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav li {
	margin: 0;
	list-style: none;
}

/* `font-size: 0` esconde o texto sem tirar o nome acessível do link. */
.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var( --rj-linha );
	background: #fff;
	color: var( --rj-tinta );
	font-size: 0;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a::before {
	font-family: "theme-icons", sans-serif;
	font-size: 19px;
	line-height: 1;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav .flex-prev::before {
	content: "\e901";   /* vamtam-theme-arrow-left */
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav .flex-next::before {
	content: "\e902";   /* vamtam-theme-arrow-right */
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a:hover {
	border-color: var( --rj-realce );
	color: var( --rj-realce );
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a.flex-disabled {
	opacity: .3;
	pointer-events: none;
}

/* Uma foto só não precisa de carrossel. */
.woocommerce div.product .woocommerce-product-gallery--columns-1 .flex-direction-nav,
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs:not( :has( li + li ) ) {
	display: none;
}

@media ( max-width: 640px ) {
	.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li {
		width: 58px;
	}
}

/* ==========================================================================
   4. Página de produto: variação em botão
   ========================================================================== */

/* O select continua no DOM — é ele que o WooCommerce escuta — mas sai de vista
   e do fluxo. `display:none` quebraria a validação do formulário em navegador
   que ainda a faz sobre campo escondido. */
.woocommerce div.product form.cart .variations select.rjx-select-motor {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.woocommerce div.product form.cart .variations {
	margin-bottom: 18px;
	border: 0;
}

.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr {
	display: block;
}

.woocommerce div.product form.cart .variations tr {
	margin-bottom: 18px;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.woocommerce div.product form.cart .variations label {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .7;
}

/* O eco da escolha, ao lado do rótulo: "TAMANHO   16". */
.rjx-swatch-eco {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var( --rj-realce );
	opacity: 1;
}

.woocommerce div.product form.cart .variations .rjx-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* O tema estiliza `button` cru como pílula: sem reset, os seletores herdariam
   isso inteiro. */
.woocommerce div.product form.cart .variations button.rjx-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var( --rj-linha );
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	color: var( --rj-tinta );
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .12s ease;
}

.woocommerce div.product form.cart .variations button.rjx-swatch:hover:not( :disabled ) {
	border-color: var( --rj-realce );
	color: var( --rj-realce );
}

.woocommerce div.product form.cart .variations button.rjx-swatch:active:not( :disabled ) {
	transform: scale( .96 );
}

.woocommerce div.product form.cart .variations button.rjx-swatch:focus-visible {
	outline: 2px solid var( --rj-realce );
	outline-offset: 2px;
}

.woocommerce div.product form.cart .variations button.rjx-swatch.rjx-swatch--ativo,
.woocommerce div.product form.cart .variations button.rjx-swatch.rjx-swatch--ativo:hover {
	border-color: var( --rj-tinta );
	background: var( --rj-tinta );
	color: #fff;
}

/* Esgotado: risco diagonal, a convenção de seletor de tamanho. */
.woocommerce div.product form.cart .variations button.rjx-swatch.rjx-swatch--esgotado {
	position: relative;
	border-color: var( --rj-linha );
	background: var( --rj-fundo );
	color: rgba( 5, 31, 52, .35 );
	cursor: not-allowed;
}

.woocommerce div.product form.cart .variations button.rjx-swatch.rjx-swatch--esgotado::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top left, transparent calc( 50% - 1px ), rgba( 5, 31, 52, .22 ) 50%, transparent calc( 50% + 1px ) );
}

/* "Limpar" some para o pé da grade, discreto — clicar de novo no botão já
   desmarca, então ele é a segunda saída, não a primeira. */
.woocommerce div.product form.cart .variations .reset_variations {
	display: inline-block;
	margin-top: 10px;
	font-size: 12px;
	letter-spacing: .04em;
	text-decoration: underline;
	opacity: .55;
}

.woocommerce div.product form.cart .variations .reset_variations:hover {
	opacity: 1;
	color: var( --rj-realce );
}

/* Por que o botão de compra está desligado. */
.rjx-aviso-variacao:empty {
	display: none;
}

.rjx-aviso-variacao {
	margin: 10px 0 0;
	font-size: 13px;
	color: var( --rj-realce );
}

@media ( max-width: 640px ) {
	.woocommerce div.product form.cart .variations button.rjx-swatch {
		min-width: 48px;
		padding: 0 13px;
	}
}

/* ==========================================================================
   5. Peças relacionadas: carrossel em vez de pilha
   ========================================================================== */

/**
 * O widget de relacionados do Elementor é uma grade: 4 colunas no desktop, 2 no
 * tablet e **1 no celular**. Com quatro peças, isso empilha quatro cartões de
 * altura inteira no pé da página — a pessoa rola quatro telas de sugestão
 * depois de já ter visto o produto.
 *
 * Vira um carrossel horizontal com `scroll-snap`, que é rolagem nativa: pega o
 * gesto de arrastar no celular e a rolagem lateral no trackpad, sem biblioteca
 * nenhuma. O cartão em 68% da largura deixa o próximo aparecendo pela borda —
 * é o que avisa que dá para arrastar, sem precisar de seta.
 *
 * ponytail: `scroll-snap` resolve. Um slider com setas e paginação só faria
 * sentido se a lista passasse de umas dez peças.
 */
@media ( max-width: 1024px ) {
	.elementor-widget-woocommerce-product-related ul.products,
	.elementor-widget-wc-upsell ul.products,
	.related.products ul.products,
	.up-sells ul.products {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		margin: 0;
		padding: 0 0 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.elementor-widget-woocommerce-product-related ul.products > li.product,
	.elementor-widget-wc-upsell ul.products > li.product,
	.related.products ul.products > li.product,
	.up-sells ul.products > li.product {
		flex: 0 0 68%;
		width: 68%;
		max-width: 68%;
		margin: 0;
		scroll-snap-align: start;
	}

	/* As fotos do demo misturam retrato (810x1125) e paisagem (810x735). Numa
	   grade isso passa; numa fileira, um cartão fica 200px mais alto que o
	   vizinho e abre um buraco embaixo dos outros. O quadrado empata. */
	.elementor-widget-woocommerce-product-related ul.products > li.product img,
	.elementor-widget-wc-upsell ul.products > li.product img,
	.related.products ul.products > li.product img,
	.up-sells ul.products > li.product img {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	/* Barra fina, só para dizer onde a lista está. */
	.elementor-widget-woocommerce-product-related ul.products,
	.elementor-widget-wc-upsell ul.products,
	.related.products ul.products,
	.up-sells ul.products {
		scrollbar-width: thin;
		scrollbar-color: var( --rj-linha ) transparent;
	}

	.elementor-widget-woocommerce-product-related ul.products::-webkit-scrollbar,
	.elementor-widget-wc-upsell ul.products::-webkit-scrollbar,
	.related.products ul.products::-webkit-scrollbar,
	.up-sells ul.products::-webkit-scrollbar {
		height: 3px;
	}

	.elementor-widget-woocommerce-product-related ul.products::-webkit-scrollbar-thumb,
	.elementor-widget-wc-upsell ul.products::-webkit-scrollbar-thumb,
	.related.products ul.products::-webkit-scrollbar-thumb,
	.up-sells ul.products::-webkit-scrollbar-thumb {
		background: var( --rj-linha );
	}
}

/* No tablet cabem dois cartões e meio. */
@media ( min-width: 641px ) and ( max-width: 1024px ) {
	.elementor-widget-woocommerce-product-related ul.products > li.product,
	.elementor-widget-wc-upsell ul.products > li.product,
	.related.products ul.products > li.product,
	.up-sells ul.products > li.product {
		flex-basis: 38%;
		width: 38%;
		max-width: 38%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.elementor-widget-woocommerce-product-related ul.products,
	.elementor-widget-wc-upsell ul.products,
	.related.products ul.products,
	.up-sells ul.products {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   6. Filtro das páginas de categoria
   ========================================================================== */

.rj-filtro {
	--rj-filtro-altura: 46px;

	margin: 0 0 32px;
	font-size: 15px;
	color: var( --rj-tinta );
}

.rj-filtro__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border: 1px solid var( --rj-linha );
	background: #fff;
}

/* --- busca --- */

.rj-filtro__busca {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 240px;
	min-width: 0;
}

.rj-filtro__lupa {
	position: absolute;
	left: 12px;
	width: 18px;
	height: 18px;
	pointer-events: none;
	opacity: .55;
}

.rj-filtro__busca input[type="search"] {
	width: 100%;
	height: var( --rj-filtro-altura );
	margin: 0;
	padding: 0 38px 0 40px;
	border: 1px solid transparent;
	border-radius: 0;
	background: var( --rj-fundo );
	color: inherit;
	font: inherit;
	transition: border-color .2s ease, background-color .2s ease;
	-webkit-appearance: none;
	        appearance: none;
}

.rj-filtro__busca input[type="search"]:focus {
	border-color: var( --rj-realce );
	background: #fff;
	outline: none;
}

.rj-filtro__busca input::-webkit-search-cancel-button {
	display: none;
}

.rj-filtro__limpar-busca {
	position: absolute;
	right: 10px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: rgba( 5, 31, 52, .08 );
	color: inherit;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
}

.rj-filtro__limpar-busca:hover {
	background: var( --rj-realce );
	color: #fff;
}

/* --- botão que abre o painel --- */

.rj-filtro__alternar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: var( --rj-filtro-altura );
	padding: 0 18px;
	border: 1px solid var( --rj-linha );
	border-radius: 0;
	background: #fff;
	color: inherit;
	font: inherit;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 12px;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}

.rj-filtro__alternar svg {
	width: 18px;
	height: 18px;
}

.rj-filtro__alternar:hover,
.rj-filtro__alternar[aria-expanded="true"] {
	border-color: var( --rj-realce );
	color: var( --rj-realce );
}

.rj-filtro__selo {
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var( --rj-realce );
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

/* --- ordenação --- */

.rj-filtro__ordenar {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 0 auto;
}

.rj-filtro__ordenar-rotulo {
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .8;
	white-space: nowrap;
}

/* ponytail: seta nativa do select. Uma seta desenhada à mão custaria um
   data-URI e não ficaria melhor do que a do sistema. */
.rj-filtro__ordenar select {
	height: var( --rj-filtro-altura );
	margin: 0;
	padding: 0 10px;
	border: 1px solid var( --rj-linha );
	border-radius: 0;
	background: #fff;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.rj-filtro__ordenar select:focus {
	border-color: var( --rj-realce );
	outline: none;
}

/* --- painel --- */

.rj-filtro__painel {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 24px 32px;
	padding: 24px 14px 26px;
	border: 1px solid var( --rj-linha );
	border-top: 0;
	background: var( --rj-fundo );
}

.rj-filtro__painel[hidden] {
	display: none;
}

.rj-filtro__grupo {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.rj-filtro__grupo legend {
	margin-bottom: 12px;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .65;
}

.rj-filtro__pastilhas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rj-filtro__pastilha {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var( --rj-linha );
	background: #fff;
	color: inherit;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.rj-filtro__pastilha:hover {
	border-color: var( --rj-realce );
	color: var( --rj-realce );
}

.rj-filtro__pastilha.is-marcada {
	border-color: var( --rj-tinta );
	background: var( --rj-tinta );
	color: #fff;
}

/* A contagem entre parênteses: solta, um "1" ao lado do nome vira um traço
   e a pessoa lê "Dourado 18k |". */
.rj-filtro__contagem {
	font-size: 11px;
	opacity: .5;
}

.rj-filtro__contagem::before {
	content: "(";
}

.rj-filtro__contagem::after {
	content: ")";
}

.rj-filtro__pastilha.is-marcada .rj-filtro__contagem {
	opacity: .7;
}

/* --- preço --- */

.rj-filtro__preco {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.rj-filtro__preco label {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	width: auto;
	margin: 0;
	font-size: 13px;
}

.rj-filtro__preco label span {
	opacity: .6;
}

/* O tema estica todo input para 100% da coluna; aqui a largura é do tamanho
   do que se digita, senão dois campos de preço ocupam meia tela. */
.rj-filtro__preco input[type="text"] {
	flex: 0 0 auto;
	width: 96px;
	min-width: 0;
	height: 36px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var( --rj-linha );
	border-radius: 0;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: 14px;
}

.rj-filtro__preco input:focus {
	border-color: var( --rj-realce );
	outline: none;
}

.rj-filtro__aplicar {
	height: 36px;
	padding: 0 18px;
	border: 1px solid var( --rj-tinta );
	border-radius: 0;
	background: var( --rj-tinta );
	color: #fff;
	font: inherit;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.rj-filtro__aplicar:hover {
	background: var( --rj-realce );
	border-color: var( --rj-realce );
}

/* --- rodapé: total e o que está filtrado --- */

.rj-filtro__rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: 14px;
}

.rj-filtro__total {
	margin: 0;
	font-size: 14px;
	opacity: .75;
}

.rj-filtro__ativos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rj-filtro__ativos li {
	margin: 0;
}

.rj-filtro__ativos a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 30px;
	padding: 0 12px;
	border: 1px solid var( --rj-linha );
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font-size: 13px;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}

.rj-filtro__ativos a:hover {
	border-color: var( --rj-realce );
	color: var( --rj-realce );
}

.rj-filtro__zerar a {
	border-style: dashed;
	opacity: .8;
}

/* --- telas pequenas --- */

@media ( max-width: 640px ) {
	.rj-filtro__barra {
		gap: 10px;
	}

	.rj-filtro__busca {
		flex: 1 1 100%;
	}

	.rj-filtro__alternar {
		flex: 1 1 auto;
		justify-content: center;
	}

	.rj-filtro__ordenar {
		flex: 1 1 auto;
	}

	.rj-filtro__ordenar-rotulo {
		display: none;
	}

	.rj-filtro__ordenar select {
		width: 100%;
	}

	.rj-filtro__painel {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}