/*
 * Catálogo: cards, filtros, página da peça.
 *
 * Carregado só nas telas de catálogo (ver inc/enqueue.php).
 */

/* --- Card de produto ---------------------------------------------------- */

.sp-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--fb-raio);
	background: var(--fb-superficie);
	box-shadow: var(--fb-sombra-1);
	overflow: hidden;
	transition: box-shadow var(--fb-transicao), transform var(--fb-transicao);
}

.sp-card:hover {
	box-shadow: var(--fb-sombra-2);
	transform: translateY(-3px);
}

.sp-card__midia {
	position: relative;
	background: var(--fb-lavanda-clara);
	aspect-ratio: var(--fb-proporcao-produto);
	overflow: hidden;
}

.sp-card__link {
	display: block;
	height: 100%;
}

.sp-card__foto,
.sp-card__hover,
.fb-sem-foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fb-sem-foto {
	display: grid;
	place-items: center;
	color: var(--fb-roxo-claro);
}

/*
 * Segunda foto no hover. Só em dispositivos com ponteiro: no toque não existe
 * hover, e manter a troca ali deixaria a imagem presa no estado trocado.
 */
.sp-card__hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--fb-transicao-lenta);
}

@media (hover: hover) {
	.sp-card:hover .sp-card__hover {
		opacity: 1;
	}
}

.sp-selo {
	position: absolute;
	top: var(--fb-esp-3);
	left: var(--fb-esp-3);
	z-index: 2;
	padding: 3px var(--fb-esp-3);
	border-radius: var(--fb-raio-pilula);
	font-size: var(--fb-txt-xs);
	font-weight: var(--fb-peso-medio);
	letter-spacing: 0.02em;
}

.sp-selo--promo {
	background: var(--fb-acao);
	color: var(--fb-acao-texto);
}

.sp-selo--esgotado {
	top: auto;
	bottom: var(--fb-esp-3);
	background: var(--fb-roxo-profundo);
	color: var(--fb-acao-texto);
}

.sp-card--esgotado .sp-card__midia {
	opacity: 0.72;
}

.sp-card__corpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--fb-esp-2);
	padding: var(--fb-esp-4);
}

.sp-card__titulo {
	margin: 0;
	font-family: var(--fb-fonte-corpo);
	font-size: var(--fb-txt-base);
	font-weight: var(--fb-peso-normal);
	line-height: 1.35;
	color: var(--fb-texto);
}

.sp-card__titulo a {
	color: inherit;
	text-decoration: none;
}

.sp-card__titulo a:hover {
	color: var(--fb-acao);
}

/* O botão sempre encosta no fundo, mesmo com títulos de alturas diferentes. */
.sp-card__corpo .fb-botao {
	margin-top: auto;
}

/* --- Preço -------------------------------------------------------------- */

.sp-preco {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--fb-esp-2);
	margin: 0;
}

.sp-preco__valor {
	font-size: var(--fb-txt-lg);
	font-weight: var(--fb-peso-forte);
	color: var(--fb-roxo-escuro);
}

.sp-preco__antigo {
	font-size: var(--fb-txt-sm);
	color: var(--fb-texto-tenue);
}

.sp-preco__desconto {
	padding: 1px var(--fb-esp-2);
	border-radius: var(--fb-raio-pilula);
	background: var(--fb-acao-suave);
	color: var(--fb-roxo-escuro);
	font-size: var(--fb-txt-xs);
	font-weight: var(--fb-peso-medio);
}

.sp-preco--consulta {
	color: var(--fb-texto-suave);
	font-size: var(--fb-txt-sm);
}

/* --- Tamanhos ----------------------------------------------------------- */

.sp-tamanhos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fb-esp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-tamanho {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	padding: 2px var(--fb-esp-2);
	border: 1px solid transparent;
	border-radius: var(--fb-raio-pilula);
	background: var(--fb-lavanda-clara);
	color: var(--fb-roxo-escuro);
	font-size: var(--fb-txt-xs);
	line-height: 1;
}

.sp-tamanho--esgotado {
	color: var(--fb-texto-tenue);
	text-decoration: line-through;
	opacity: 0.6;
}

.sp-tamanho--mais {
	background: transparent;
	color: var(--fb-texto-tenue);
}

/* Versão interativa, na página da peça. */
.sp-tamanhos-campo {
	margin: 0;
	padding: 0;
	border: 0;
}

.sp-tamanhos-campo legend {
	padding: 0;
	margin-bottom: var(--fb-esp-2);
	font-size: var(--fb-txt-sm);
	font-weight: var(--fb-peso-medio);
	color: var(--fb-texto-suave);
}

.sp-tamanho-opcao {
	position: relative;
}

/*
 * O radio continua existindo e recebendo foco — só fica invisível. Isso mantém
 * teclado e leitor de tela funcionando sem nenhum JavaScript de acessibilidade.
 */
.sp-tamanho-opcao input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.sp-tamanho-opcao label {
	cursor: pointer;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--fb-esp-3);
	transition: background var(--fb-transicao), border-color var(--fb-transicao);
}

.sp-tamanho-opcao input:hover + label {
	border-color: var(--fb-roxo-claro);
}

.sp-tamanho-opcao input:focus-visible + label {
	outline: 2px solid var(--fb-foco);
	outline-offset: 2px;
}

.sp-tamanho-opcao input:checked + label {
	background: var(--fb-acao);
	border-color: var(--fb-acao);
	color: var(--fb-acao-texto);
}

.sp-tamanho-opcao input:disabled {
	cursor: not-allowed;
}

.sp-tamanho-opcao input:disabled + label {
	cursor: not-allowed;
}

/* --- Cores -------------------------------------------------------------- */

.sp-cores {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fb-esp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-cor {
	display: flex;
	align-items: center;
	gap: var(--fb-esp-2);
	font-size: var(--fb-txt-xs);
	color: var(--fb-texto-suave);
}

.sp-cor__bolinha {
	width: 20px;
	height: 20px;
	border: 1px solid var(--fb-borda);
	border-radius: 50%;
}

/* --- Esgotado ----------------------------------------------------------- */

.sp-esgotado {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--fb-esp-3) var(--fb-esp-5);
	border-radius: var(--fb-raio-pilula);
	background: var(--fb-borda);
	color: var(--fb-texto-suave);
	font-size: var(--fb-txt-sm);
	font-weight: var(--fb-peso-medio);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* --- Cabeçalho da listagem ---------------------------------------------- */

.fb-catalogo__cabecalho {
	margin-bottom: var(--fb-esp-5);
	text-align: center;
}

.fb-catalogo__titulo {
	margin-bottom: var(--fb-esp-2);
}

.fb-catalogo__descricao {
	max-width: 60ch;
	margin-inline: auto;
	color: var(--fb-texto-suave);
}

.fb-catalogo__contagem {
	margin: 0;
	font-size: var(--fb-txt-sm);
	color: var(--fb-texto-tenue);
}

/* --- Barra de filtros --------------------------------------------------- */

/*
 * O painel e cada grupo são <details>. O estado aberto/fechado é nativo do
 * navegador: funciona sem JavaScript, responde ao teclado e é anunciado por
 * leitores de tela sem precisarmos de aria-expanded nenhum.
 */

.fb-barra-catalogo {
	display: grid;
	gap: var(--fb-esp-3);
	margin-bottom: var(--fb-esp-6);
}

.fb-barra-catalogo__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--fb-esp-3);
}

/* --- O gatilho ---------------------------------------------------------- */

.fb-filtros {
	position: relative;
	flex: 0 0 auto;
}

.fb-filtros__gatilho {
	display: inline-flex;
	align-items: center;
	gap: var(--fb-esp-2);
	padding: var(--fb-esp-3) var(--fb-esp-5);
	border: 1px solid var(--fb-borda-forte);
	border-radius: var(--fb-raio-pilula);
	background: var(--fb-superficie);
	color: var(--fb-roxo-escuro);
	font-size: var(--fb-txt-sm);
	font-weight: var(--fb-peso-medio);
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background var(--fb-transicao), border-color var(--fb-transicao);
}

/* Esconde o triângulo padrão do <summary> nos dois motores. */
.fb-filtros__gatilho::-webkit-details-marker { display: none; }
.fb-filtros__gatilho::marker { content: ''; }

.fb-filtros__gatilho:hover {
	background: var(--fb-lavanda-clara);
	border-color: var(--fb-roxo-claro);
}

.fb-filtros__gatilho:focus-visible {
	outline: 2px solid var(--fb-foco);
	outline-offset: 2px;
}

.fb-filtros[open] .fb-filtros__gatilho {
	background: var(--fb-acao);
	border-color: var(--fb-acao);
	color: var(--fb-acao-texto);
}

.fb-filtros__contador {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 5px;
	border-radius: var(--fb-raio-pilula);
	background: var(--fb-acao);
	color: var(--fb-acao-texto);
	font-size: 11px;
	line-height: 1;
}

.fb-filtros[open] .fb-filtros__contador {
	background: var(--fb-acao-texto);
	color: var(--fb-acao);
}

/* Seta desenhada em CSS: gira ao abrir, sem precisar de outro ícone. */
.fb-filtros__seta,
.fb-grupo__seta {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--fb-transicao);
}

.fb-filtros[open] .fb-filtros__seta,
.fb-grupo[open] .fb-grupo__seta {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* --- O painel ----------------------------------------------------------- */

.fb-filtros__painel {
	position: absolute;
	top: calc(100% + var(--fb-esp-2));
	left: 0;
	z-index: 40;
	width: min(560px, 92vw);
	border: 1px solid var(--fb-borda);
	border-radius: var(--fb-raio-lg);
	background: var(--fb-superficie);
	box-shadow: var(--fb-sombra-3);
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.fb-filtros[open] .fb-filtros__painel {
		animation: fb-abre-painel 180ms ease-out;
	}
}

@keyframes fb-abre-painel {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* No computador o cabeçalho do painel é redundante com o botão. */
.fb-filtros__cabecalho {
	display: none;
}

.fb-filtros__grupos {
	max-height: min(60vh, 520px);
	overflow-y: auto;
	padding: var(--fb-esp-2) var(--fb-esp-5);
}

/* --- Cada grupo --------------------------------------------------------- */

.fb-grupo + .fb-grupo {
	border-top: 1px solid var(--fb-borda);
}

.fb-grupo__titulo {
	display: flex;
	align-items: center;
	gap: var(--fb-esp-2);
	padding: var(--fb-esp-4) 0;
	color: var(--fb-roxo-escuro);
	font-size: var(--fb-txt-sm);
	font-weight: var(--fb-peso-medio);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.fb-grupo__titulo::-webkit-details-marker { display: none; }
.fb-grupo__titulo::marker { content: ''; }

.fb-grupo__titulo:focus-visible {
	outline: 2px solid var(--fb-foco);
	outline-offset: 2px;
	border-radius: var(--fb-raio-sm);
}

/* A seta é empurrada para a direita; a marca de contagem fica antes dela. */
.fb-grupo__seta {
	margin-left: auto;
	color: var(--fb-roxo-claro);
}

.fb-grupo__marca {
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 5px;
	border-radius: var(--fb-raio-pilula);
	background: var(--fb-acao-suave);
	color: var(--fb-roxo-escuro);
	font-size: 11px;
	line-height: 1;
}

.fb-grupo__corpo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fb-esp-2);
	padding-bottom: var(--fb-esp-4);
}

.fb-grupo__corpo--cores {
	gap: var(--fb-esp-2) var(--fb-esp-3);
}

/* --- As opções ---------------------------------------------------------- */

.fb-opcao {
	position: relative;
}

/*
 * A caixa de marcar continua existindo e recebendo foco — só fica invisível
 * por cima do rótulo. É o que mantém teclado e leitor de tela funcionando sem
 * nenhum JavaScript de acessibilidade.
 */
.fb-opcao input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.fb-opcao label {
	display: inline-flex;
	align-items: center;
	gap: var(--fb-esp-2);
	min-height: 38px;
	padding: 0 var(--fb-esp-4);
	border: 1px solid var(--fb-borda);
	border-radius: var(--fb-raio-pilula);
	background: var(--fb-superficie);
	color: var(--fb-texto);
	font-size: var(--fb-txt-sm);
	cursor: pointer;
	transition: background var(--fb-transicao), border-color var(--fb-transicao),
		color var(--fb-transicao);
}

.fb-opcao input:hover + label {
	border-color: var(--fb-roxo-claro);
	background: var(--fb-lavanda-clara);
}

.fb-opcao input:focus-visible + label {
	outline: 2px solid var(--fb-foco);
	outline-offset: 2px;
}

.fb-opcao input:checked + label {
	background: var(--fb-acao);
	border-color: var(--fb-acao);
	color: var(--fb-acao-texto);
}

.fb-opcao__quantos {
	font-size: var(--fb-txt-xs);
	color: var(--fb-texto-tenue);
}

.fb-opcao input:checked + label .fb-opcao__quantos {
	color: inherit;
	opacity: .75;
}

/* Tamanhos: chips quadrados e compactos. */
.fb-opcao--chips label {
	justify-content: center;
	min-width: 48px;
	padding-inline: var(--fb-esp-3);
}

.fb-opcao--chips .fb-opcao__quantos {
	display: none;
}

/* Cores: a bolinha carrega a informação, o nome vem ao lado. */
.fb-opcao__bolinha {
	width: 18px;
	height: 18px;
	border: 1px solid rgb(74 42 92 / .18);
	border-radius: 50%;
	flex: none;
}

.fb-opcao input:checked + label .fb-opcao__bolinha {
	box-shadow: 0 0 0 2px var(--fb-acao-texto);
}

/* --- Faixa de preço ----------------------------------------------------- */

.fb-faixa-preco {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fb-esp-3);
	width: 100%;
}

.fb-faixa-preco__campo {
	display: inline-flex;
	align-items: center;
	gap: var(--fb-esp-2);
	padding: 0 var(--fb-esp-3);
	border: 1px solid var(--fb-borda);
	border-radius: var(--fb-raio-pilula);
	background: var(--fb-superficie);
}

.fb-faixa-preco__campo:focus-within {
	border-color: var(--fb-roxo-claro);
	box-shadow: var(--fb-foco-anel);
}

.fb-faixa-preco label {
	font-size: var(--fb-txt-xs);
	color: var(--fb-texto-tenue);
}

.fb-faixa-preco__moeda {
	font-size: var(--fb-txt-xs);
	color: var(--fb-texto-suave);
}

.fb-faixa-preco input {
	width: 5em;
	min-height: 38px;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--fb-txt-sm);
}

.fb-faixa-preco input:focus {
	outline: none;
}

/* --- Rodapé do painel --------------------------------------------------- */

.fb-filtros__rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fb-esp-3);
	padding: var(--fb-esp-4) var(--fb-esp-5);
	border-top: 1px solid var(--fb-borda);
	background: var(--fb-lavanda-clara);
}

.fb-filtros__limpar {
	font-size: var(--fb-txt-sm);
	color: var(--fb-texto-suave);
}

/* --- Ordenação ---------------------------------------------------------- */

.fb-ordenar {
	display: flex;
	align-items: center;
	gap: var(--fb-esp-2);
	margin-left: auto;
	font-size: var(--fb-txt-sm);
	color: var(--fb-texto-suave);
}

.fb-ordenar select {
	min-height: 44px;
	padding: 0 var(--fb-esp-5) 0 var(--fb-esp-4);
	border: 1px solid var(--fb-borda-forte);
	border-radius: var(--fb-raio-pilula);
	background: var(--fb-superficie);
	color: var(--fb-roxo-escuro);
	font-size: var(--fb-txt-sm);
	cursor: pointer;
}

.fb-ordenar select:focus-visible {
	outline: 2px solid var(--fb-foco);
	outline-offset: 2px;
}

/* --- Etiquetas dos filtros aplicados ------------------------------------ */

.fb-etiquetas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fb-esp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fb-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: var(--fb-esp-2);
	min-height: 32px;
	padding: 0 var(--fb-esp-3);
	border-radius: var(--fb-raio-pilula);
	background: var(--fb-acao-suave);
	color: var(--fb-roxo-escuro);
	font-size: var(--fb-txt-xs);
	text-decoration: none;
	transition: background var(--fb-transicao), color var(--fb-transicao);
}

.fb-etiqueta:hover {
	background: var(--fb-acao);
	color: var(--fb-acao-texto);
}

.fb-etiqueta .fb-icone {
	opacity: .6;
}

.fb-etiqueta:hover .fb-icone {
	opacity: 1;
}

.fb-etiqueta--limpar {
	background: none;
	color: var(--fb-texto-suave);
	text-decoration: underline;
	text-underline-offset: .22em;
}

.fb-etiqueta--limpar:hover {
	background: none;
	color: var(--fb-acao-hover);
}

/* --- Fundo escurecido, só no celular ------------------------------------ */

.fb-filtros-fundo {
	display: none;
}

/* --- Celular: o painel vira uma gaveta de baixo para cima ---------------- */

@media (max-width: 860px) {
	.fb-barra-catalogo__form {
		gap: var(--fb-esp-2);
	}

	.fb-filtros,
	.fb-filtros__gatilho {
		flex: 1;
	}

	.fb-filtros__gatilho {
		justify-content: center;
	}

	.fb-ordenar {
		margin-left: 0;
		flex: 1;
	}

	.fb-ordenar label {
		display: none;
	}

	.fb-ordenar select {
		width: 100%;
	}

	/*
	 * Gaveta: posicionada contra a janela, não contra o botão. Sobe de baixo,
	 * que é onde o polegar alcança.
	 */
	.fb-filtros__painel {
		position: fixed;
		inset: auto 0 0 0;
		width: 100%;
		max-height: 85vh;
		display: flex;
		flex-direction: column;
		border: 0;
		border-radius: var(--fb-raio-lg) var(--fb-raio-lg) 0 0;
		z-index: 110;
	}

	@media (prefers-reduced-motion: no-preference) {
		.fb-filtros[open] .fb-filtros__painel {
			animation: fb-sobe-gaveta 240ms ease-out;
		}
	}

	@keyframes fb-sobe-gaveta {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}

	.fb-filtros__cabecalho {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--fb-esp-4) var(--fb-esp-5);
		border-bottom: 1px solid var(--fb-borda);
		color: var(--fb-roxo-escuro);
	}

	.fb-filtros__fechar {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border: 0;
		border-radius: 50%;
		background: var(--fb-lavanda-clara);
		color: var(--fb-roxo-escuro);
	}

	.fb-filtros__grupos {
		flex: 1;
		max-height: none;
	}

	.fb-filtros__rodape .fb-botao {
		flex: 1;
	}

	.fb-filtros-fundo {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 105;
		background: rgb(74 42 92 / .45);
	}

	@media (prefers-reduced-motion: no-preference) {
		.fb-filtros-fundo {
			animation: fb-surge-fundo 200ms ease-out;
		}
	}

	@keyframes fb-surge-fundo {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
}

/* --- Página da peça ----------------------------------------------------- */

.sp-produto__topo {
	display: grid;
	gap: var(--fb-esp-7);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
}

@media (max-width: 860px) {
	.sp-produto__topo {
		grid-template-columns: 1fr;
		gap: var(--fb-esp-5);
	}
}

.sp-galeria-produto__principal {
	border-radius: var(--fb-raio-lg);
	background: var(--fb-lavanda-clara);
	overflow: hidden;
	aspect-ratio: var(--fb-proporcao-produto);
}

.sp-galeria-produto__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-galeria-produto__miniaturas {
	display: flex;
	gap: var(--fb-esp-2);
	margin: var(--fb-esp-3) 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
}

.sp-galeria-produto__mini {
	display: block;
	width: 72px;
	border: 2px solid transparent;
	border-radius: var(--fb-raio-sm);
	overflow: hidden;
	line-height: 0;
	transition: border-color var(--fb-transicao);
}

.sp-galeria-produto__mini.esta-ativa,
.sp-galeria-produto__mini:hover {
	border-color: var(--fb-acao);
}

.sp-produto__info {
	display: grid;
	gap: var(--fb-esp-4);
}

.sp-produto__titulo {
	margin: 0;
	font-size: var(--fb-txt-2xl);
}

.sp-produto__termos {
	margin: 0;
}

.sp-produto__resumo {
	margin: 0;
	color: var(--fb-texto-suave);
}

.sp-produto__acoes {
	display: flex;
	align-items: center;
	gap: var(--fb-esp-3);
}

/* Na página da peça o coração sai do canto e vira um botão ao lado do CTA. */
.sp-produto__acoes .fb-favorito {
	position: static;
	flex: none;
	width: 48px;
	height: 48px;
	border: 1px solid var(--fb-borda);
}

.sp-produto__comprar {
	flex: 1;
	min-height: 52px;
	font-size: var(--fb-txt-base);
}

.sp-produto__nota {
	display: flex;
	align-items: center;
	gap: var(--fb-esp-2);
	margin: 0;
	font-size: var(--fb-txt-xs);
	color: var(--fb-texto-suave);
}

.sp-produto__nota .fb-icone {
	color: var(--fb-whatsapp);
}

.sp-produto__ficha {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--fb-esp-2) var(--fb-esp-4);
	margin: 0;
	padding-top: var(--fb-esp-4);
	border-top: 1px solid var(--fb-borda);
	font-size: var(--fb-txt-sm);
}

.sp-produto__ficha dt {
	color: var(--fb-texto-tenue);
}

.sp-produto__ficha dd {
	margin: 0;
}

.sp-produto__descricao {
	max-width: 70ch;
	margin-top: var(--fb-esp-7);
}

/* --- Tabela de medidas -------------------------------------------------- */

.sp-medidas-tabela {
	margin-top: var(--fb-esp-7);
	max-width: 760px;
}

.sp-medidas-tabela__titulo {
	display: flex;
	align-items: center;
	gap: var(--fb-esp-2);
	font-size: var(--fb-txt-lg);
}

.sp-medidas-tabela__nota {
	font-size: var(--fb-txt-sm);
	color: var(--fb-texto-suave);
}

/* Tabela larga rola dentro da própria caixa, nunca empurra a página. */
.sp-medidas-tabela__rolagem {
	overflow-x: auto;
}

.sp-medidas-tabela table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fb-txt-sm);
}

.sp-medidas-tabela th,
.sp-medidas-tabela td {
	padding: var(--fb-esp-2) var(--fb-esp-3);
	border-bottom: 1px solid var(--fb-borda);
	text-align: left;
	white-space: nowrap;
}

.sp-medidas-tabela thead th {
	background: var(--fb-lavanda-clara);
	color: var(--fb-roxo-escuro);
	font-weight: var(--fb-peso-medio);
}

/* --- Relacionados ------------------------------------------------------- */

.sp-relacionados {
	padding-block: var(--fb-secao);
	background: var(--fb-lavanda-clara);
}