/* ============================================================================
   FIO BRANCO — home
   ----------------------------------------------------------------------------
   Escopado em .fb-home para não brigar com o rodapé, que ainda é template
   do Elementor. Tipografia: Inter, uma família só.
   ========================================================================== */

@keyframes fb-zoom-entra {
	from { opacity: 0; scale: 0.97; }
	to   { opacity: 1; scale: 1; }
}

@keyframes fb-costurar {
	from { scale: 0 1; }
	to   { scale: 1 1; }
}

.fb-home {
	background-color: var(--fb-ground);
	color: var(--fb-body);
	font-family: var(--fb-font);
	font-size: var(--fb-text-base);
	line-height: var(--fb-lh-body);

	& *,
	& *::before,
	& *::after {
		box-sizing: border-box;
	}

	/* ---- trilho ---- */
	& .fb-wrap {
		inline-size: min(80rem, 100% - var(--fb-space-lg));
		margin-inline: auto;

		@media (width <= 60rem) {
			inline-size: min(80rem, 100% - var(--fb-space-md));
		}
	}

	/* o alinhavo: a agulha e a linha do logo, virando divisor */
	& .fb-alinhavo {
		block-size: 0.0625rem;
		border: none;
		margin: 0;
		background-image: linear-gradient(90deg, var(--fb-needle) 0 0.625rem, transparent 0.625rem 1.125rem);
		background-size: 1.125rem 0.0625rem;
		background-repeat: repeat-x;
	}

	/* ---- tipografia ---- */
	& .fb-eyebrow {
		margin: 0 0 var(--fb-space-2xs);
		font-size: var(--fb-text-xs);
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--fb-ink-2);
	}

	& .fb-titulo {
		margin: 0;
		font-family: var(--fb-font);
		font-size: var(--fb-text-2xl);
		font-weight: 600;
		line-height: var(--fb-lh-heading);
		letter-spacing: -0.035em;
		color: var(--fb-ink);
		text-wrap: balance;
	}

	& .fb-lede {
		margin: 0;
		max-inline-size: 56ch;
		color: var(--fb-ink-2);
		text-wrap: pretty;
	}

	& .fb-mono {
		font-size: var(--fb-text-sm);
		color: var(--fb-ink-2);
	}

	& .fb-link {
		font-size: var(--fb-text-sm);
		font-weight: 600;
		color: var(--fb-ink);
		text-decoration: none;
		border-block-end: 0.0625rem solid var(--fb-seam-strong);
		padding-block-end: 0.1875rem;

		&:hover { border-color: var(--fb-ink); }
	}

	/* ---- botões ---- */
	& .fb-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding-block: 0.9375rem;
		padding-inline: var(--fb-space-md);
		border-radius: var(--fb-radius-pill);
		font-size: var(--fb-text-lg);
		font-weight: 600;
		text-decoration: none;
		transition: background-color 0.18s, border-color 0.18s, translate 0.18s var(--fb-ease);
	}

	& .fb-btn--solido {
		background-color: var(--fb-espresso);
		color: var(--fb-on-espresso);

		&:hover {
			background-color: var(--fb-espresso-hi);
			color: var(--fb-on-espresso);
			translate: 0 -0.0625rem;
		}
	}

	& .fb-btn--vazado {
		border: 0.0625rem solid var(--fb-seam-strong);
		color: var(--fb-ink);

		&:hover {
			border-color: var(--fb-ink);
			translate: 0 -0.0625rem;
		}
	}

	/* ------------------------------------------------------------------------
	   HERÓI

	   O fundo é o wash da marca. Cheguei a montar tudo sobre o espresso para
	   destoar da categoria, que é toda branca e clínica, mas ficou gritante:
	   um bloco escuro logo abaixo do cabeçalho branco briga com a página
	   inteira em vez de acolher. A distinção vem da composição e da costura,
	   não de um contraste alto.

	   A composição é um diptico. A placa maior mostra a peça vestida; a menor,
	   sobreposta embaixo à esquerda, mostra o nome bordado. É a prova que
	   nenhum concorrente pode dar, porque nenhum deles fabrica.
	   --------------------------------------------------------------------- */
	& .fb-hero {
		background-color: var(--fb-wash);
		color: var(--fb-body);
	}

	& .fb-hero__grid {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(2rem, 5dvw, 4.5rem);
		padding-block: clamp(2.25rem, 4.5dvw, 4rem);

		@media (width <= 60rem) {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--fb-space-md);
			padding-block: var(--fb-space-lg) var(--fb-space-md);
		}
	}

	& .fb-hero__copy {
		display: flex;
		flex-direction: column;
		align-items: start;
		gap: var(--fb-space-md);

		/* A sobrancelha pertence ao título, não é um bloco à parte: com o gap
		   solto os quatro pedaços tinham o mesmo peso e o título perdia o par. */
		& .fb-hero__sobrancelha { margin-block-end: calc(var(--fb-space-md) * -0.62); }
	}

	& .fb-hero__sobrancelha {
		margin: 0;
		font-size: var(--fb-text-xs);
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--fb-ink-2);
	}

	& .fb-hero__titulo {
		margin: 0;
		font-size: var(--fb-text-3xl);
		font-weight: 600;
		line-height: var(--fb-lh-tight);
		letter-spacing: -0.045em;
		color: var(--fb-ink);
		text-wrap: balance;
	}

	/* O alinhavo do logo virando sublinhado — mesmo ritmo do .fb-alinhavo.
	   Gradiente e não text-decoration porque o tracejado do navegador varia
	   de plataforma e aqui a medida importa. */
	& .fb-hero__costura {
		position: relative;
		display: inline-block;
		color: var(--fb-terracota);
		white-space: nowrap;

		/* Reserva a largura da frase mais longa. Sem isso o título inteiro se
		   reorganiza a cada troca e a página pula — o custo de layout mais
		   caro que existe numa dobra. O texto fica invisível, não escondido:
		   precisa ocupar espaço. */
		&::before {
			content: attr(data-fb-maior);
			visibility: hidden;
		}
	}

	& .fb-hero__frase {
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 0;

		/* O ponto vive dentro da frase, então acompanha a palavra em vez de
		   ficar boiando no fim da largura reservada. */
		&::after {
			content: "";
			position: absolute;
			inset-inline: 0;
			inset-block-end: -0.08em;
			block-size: 0.032em;
			background-image: linear-gradient(90deg, currentcolor 0 0.14em, transparent 0.14em 0.25em);
			background-size: 0.25em 0.032em;
			background-repeat: repeat-x;
		}
	}

	/* Texto estável para leitor de tela: o visível muda o tempo todo e seria
	   reanunciado a cada letra. */
	& .fb-oculto {
		position: absolute;
		inline-size: 0.0625rem;
		block-size: 0.0625rem;
		padding: 0;
		margin: -0.0625rem;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	& .fb-hero__lede {
		margin: 0;
		max-inline-size: 56ch;
		color: var(--fb-body);
		text-wrap: pretty;
	}

	& .fb-hero__cta {
		display: flex;
		gap: var(--fb-space-xs);
		flex-wrap: wrap;

		/* Abaixo de 30rem os dois lado a lado quebravam "Comprar jalecos" em
		   duas linhas. Empilhados, cada um ganha a largura inteira e um alvo
		   de toque decente. */
		@media (width <= 30rem) {
			flex-direction: column;
			align-self: stretch;

			& .fb-btn { text-align: center; }
		}
	}

	/* As duas placas dividem a mesma linha do grid e se sobrepõem por span de
	   coluna — sem position: absolute, então tudo reflui sozinho e nada vaza
	   para fora do trilho. */
	& .fb-hero__arte {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		justify-self: end;
		inline-size: 100%;
		max-inline-size: 33rem;
		padding-block-end: 1.75rem;

		@media (width <= 60rem) {
			justify-self: center;
			max-inline-size: 26rem;
		}
	}

	& .fb-hero__placa {
		position: relative;
		grid-row: 1;
		display: block;
		inline-size: 100%;
		overflow: hidden;
		/* Sem block-size: 100% — ele atropelaria o aspect-ratio de cada placa
		   e as duas sairiam com a altura da linha do grid. */
		object-fit: cover;
		border-radius: var(--fb-radius);

		/* A placa da peça é um link com a foto dentro; a do bordado é a
		   própria imagem. Esta regra serve às duas. */
		& img {
			display: block;
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
			object-position: inherit;
		}

		/* Um fio quente fecha a placa contra o wash sem o peso de uma sombra,
		   que aqui só sujaria as duas fotos claras. */
		outline: 0.0625rem solid var(--fb-seam-strong);
		outline-offset: -0.0625rem;
	}

	& .fb-hero__placa--peca {
		grid-column: 4 / -1;
		aspect-ratio: 3 / 4;
		object-position: 50% 16%;

		&:is(:hover, :focus-visible) .fb-hero__etiqueta {
			background-color: var(--fb-terracota);
		}
	}

	/* Sem etiqueta ninguém descobre que a foto leva ao produto.

	   Encostada à direita: a placa do bordado sobrepõe o canto inferior
	   esquerdo da peça e comia o começo do texto. */
	& .fb-hero__etiqueta {
		position: absolute;
		inset-inline-end: var(--fb-space-2xs);
		inset-block-end: var(--fb-space-2xs);
		padding-block: 0.375rem;
		padding-inline: 0.75rem;
		border-radius: var(--fb-radius-pill);
		background-color: var(--fb-espresso);
		font-size: var(--fb-text-xs);
		font-weight: 600;
		letter-spacing: 0.02em;
		color: var(--fb-on-espresso);
		transition: background-color 0.2s var(--fb-ease, ease);
	}

	& .fb-hero__placa--prova {
		/* Quatro colunas em vez de seis: a prova é o detalhe que confirma, não
		   a imagem que abre. Menor, ela deixa a peça respirar e a sobreposição
		   passa a ser um gesto, não uma disputa. */
		grid-column: 1 / 5;
		align-self: end;
		aspect-ratio: 4 / 5;
		object-position: 50% 42%;
		margin-block-end: -1.75rem;
	}

	/* A placa da prova virou botão: o tema pai dá padding e borda a todo
	   button, e sem zerar isso a foto encolhe dentro de uma moldura cinza. */
	& button.fb-hero__placa {
		padding: 0;
		border: none;
		background: none;
		cursor: zoom-in;
		appearance: none;
	}

	& .fb-hero__lupa {
		position: absolute;
		inset-inline-end: 0.375rem;
		inset-block-start: 0.375rem;
		inline-size: 1.75rem;
		block-size: 1.75rem;
		border-radius: var(--fb-radius-pill);
		background-color: rgb(23 16 14 / 0.55);

		/* A lupa em máscara para herdar a cor, como os outros ícones do tema. */
		&::before {
			content: "";
			position: absolute;
			inset: 0;
			background-color: #fff;
			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M15.5 15.5L20 20M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 1.0625rem no-repeat;
		}
	}

	& button.fb-hero__placa:is(:hover, :focus-visible) .fb-hero__lupa {
		background-color: var(--fb-terracota);
	}

	/* ---- zoom do bordado ---- */
	& .fb-zoom {
		max-inline-size: min(92vw, 34rem);
		max-block-size: 92dvh;
		margin: auto;
		padding: 0;
		border: none;
		border-radius: var(--fb-radius);
		background-color: var(--fb-surface);
		color: var(--fb-body);
		overflow: hidden;

		&::backdrop {
			background-color: rgb(23 16 14 / 0.74);
		}

		@media (prefers-reduced-motion: no-preference) {
			&[open] { animation: fb-zoom-entra 0.22s cubic-bezier(0.22, 0.7, 0.3, 1); }
		}
	}

	& .fb-zoom__foto {
		display: block;
		inline-size: 100%;
		block-size: auto;
		max-block-size: calc(92dvh - 3.5rem);
		object-fit: contain;
	}

	& .fb-zoom__legenda {
		margin: 0;
		padding-block: var(--fb-space-2xs);
		padding-inline: var(--fb-space-sm);
		border-block-start: 0.0625rem solid var(--fb-seam);
		font-size: var(--fb-text-sm);
		color: var(--fb-ink-2);
		text-align: center;
	}

	& .fb-zoom__fechar {
		position: absolute;
		inset-inline-end: var(--fb-space-2xs);
		inset-block-start: var(--fb-space-2xs);
		display: grid;
		place-items: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		padding: 0;
		border: none;
		border-radius: var(--fb-radius-pill);
		background-color: rgb(23 16 14 / 0.55);
		color: #fff;
		cursor: pointer;

		& svg {
			inline-size: 1.125rem;
			block-size: 1.125rem;
			stroke: currentcolor;
			fill: none;
			stroke-width: 1.75;
			stroke-linecap: round;
		}

		&:is(:hover, :focus-visible) { background-color: var(--fb-terracota); }
	}

	& .fb-hero__provas {
		display: flex;
		flex-wrap: wrap;
		gap: var(--fb-space-2xs) var(--fb-space-lg);
		/* margin-block e não margin: o atalho zerava o margin-inline: auto do
		   .fb-wrap e a faixa saía do trilho, cortada na borda esquerda. */
		margin-block: 0;
		padding-block: var(--fb-space-sm) clamp(1.25rem, 2.5dvw, 2rem);
		padding-inline: 0;
		list-style: none;
		border-block-start: 0.0625rem solid var(--fb-seam-strong);
		font-size: var(--fb-text-xs);
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--fb-ink-2);
	}

	/* ---- garantias ---- */
	/* Quatro cartões sobre o fundo da própria página. O canto é o raio da
	   marca — 3px, quase reto. Arredondamento grande é o que data o visual de
	   cartão de loja; aqui a forma fica próxima do retângulo, como etiqueta.

	   O cartão é branco e o fundo fica neutro, não o contrário: cartão mais
	   escuro que a superfície embaixo lê como rebaixo, como se estivesse
	   afundado. Cartão fica sobre a página, então é o mais claro dos dois. */

	& .fb-garantias__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--fb-space-sm);
		padding-block: clamp(2rem, 3.5dvw, 2.75rem);

		/* margin-block, NÃO margin: o elemento também é .fb-wrap, que usa
		   margin-inline: auto para centralizar. Um `margin: 0` aqui zerava o
		   auto e a faixa colava na borda esquerda da tela. */
		margin-block: 0;

		@media (width <= 60rem) {
			grid-template-columns: repeat(2, 1fr);
			gap: var(--fb-space-2xs);
			padding-block: var(--fb-space-lg);
		}

		& > div {
			padding-block: var(--fb-space-md);
			padding-inline: var(--fb-space-sm);
			border: 0.0625rem solid var(--fb-seam);
			border-radius: var(--fb-radius);
			background-color: var(--fb-surface);

			@media (width <= 60rem) {
				padding: var(--fb-space-sm);
			}

			/* O ícone é máscara e não <img>: herda a cor da marca, não pede
			   requisição e poupa o markup de um elemento só para desenho. */
			&::before {
				content: "";
				display: block;
				inline-size: 1.375rem;
				block-size: 1.375rem;
				margin-block-end: var(--fb-space-sm);
				background-color: var(--fb-terracota);
				mask: var(--fb-icone) center / contain no-repeat;
			}
		}

		& [data-fb-icone="frete"] { --fb-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v8H3zM14 10h4l3 3v2h-7zM7 17.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM17.5 17.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'/%3E%3C/svg%3E"); }
		& [data-fb-icone="pagamento"] { --fb-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h20v12H2zM2 10h20M6 14h4'/%3E%3C/svg%3E"); }
		& [data-fb-icone="troca"] { --fb-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3l4 4-4 4M21 7H8a4 4 0 0 0-4 4M7 21l-4-4 4-4M3 17h13a4 4 0 0 0 4-4'/%3E%3C/svg%3E"); }
		& [data-fb-icone="atendimento"] { --fb-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.6 7.3L3 20.5l1.8-5.2A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E"); }

		& dt {
			margin: 0 0 var(--fb-space-2xs);
			font-size: var(--fb-text-xs);
			font-weight: 600;
			letter-spacing: 0.14em;
			text-transform: uppercase;
			color: var(--fb-ink-3);
		}

		& dd {
			margin: 0;
			font-size: var(--fb-text-sm);
			font-weight: 500;
			line-height: 1.45;
			color: var(--fb-ink);

			/* Sem sublinhado: o cartão já é um bloco de leitura, e o traço
			   embaixo sujava a única linha de conteúdo. */
			& a {
				color: inherit;
				text-decoration: none;

				&:is(:hover, :focus-visible) { color: var(--fb-terracota); }
			}
		}
	}

	/* ---- seções ---- */
	& .fb-secao {
		padding-block: var(--fb-space-2xl);

		&.fb-secao--curta { padding-block-start: 0; }
	}

	& .fb-secao__topo {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--fb-space-md);
		flex-wrap: wrap;
		margin-block-end: var(--fb-space-lg);
	}

	/* ---- portas de categoria ---- */
	& .fb-portas {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--fb-space-sm);

		@media (width <= 60rem) {
			grid-template-columns: 1fr 1fr;

			& > :last-child {
				grid-column: span 2;
				& img { aspect-ratio: 16 / 9; }
			}
		}
	}

	& .fb-porta {
		position: relative;
		display: block;
		overflow: hidden;
		border-radius: var(--fb-radius);
		background-color: var(--fb-surface-2);
		text-decoration: none;

		& img {
			display: block;
			inline-size: 100%;
			aspect-ratio: 4 / 5;
			object-fit: cover;
			transition: scale 0.6s var(--fb-ease);
		}

		&:hover img { scale: 1.04; }
	}

	& .fb-porta__rotulo {
		position: absolute;
		inset: auto var(--fb-space-xs) var(--fb-space-xs);
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		padding-block: var(--fb-space-xs);
		padding-inline: 0.875rem;
		background-color: var(--fb-surface);
		border-radius: 0.125rem;

		& strong {
			font-size: var(--fb-text-sm);
			font-weight: 600;
			color: var(--fb-ink);
		}

		& em {
			font-style: normal;
			font-size: var(--fb-text-xs);
			color: var(--fb-ink-2);
		}
	}

	/* ---- personalização ---- */
	& .fb-perso {
		background-color: var(--fb-surface);
	}

	& .fb-perso__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: var(--fb-space-xl);

		@media (width <= 60rem) {
			grid-template-columns: 1fr;
			gap: var(--fb-space-lg);
		}
	}

	& .fb-perso__arte img {
		display: block;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 1;
		object-fit: cover;
		border-radius: var(--fb-radius);
	}

	& .fb-perso__copy {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--fb-space-md);
	}

	& .fb-passos {
		inline-size: 100%;
		margin: 0;
		padding: 0;
		list-style: none;

		& li {
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: baseline;
			gap: var(--fb-space-xs);
			padding-block: 0.9375rem;
			border-block-start: 0.0625rem dashed var(--fb-seam-strong);

			&:last-child { border-block-end: 0.0625rem dashed var(--fb-seam-strong); }
		}

		& span {
			font-size: var(--fb-text-xs);
			font-weight: 600;
			letter-spacing: 0.1em;
			color: var(--fb-espresso);
		}

		& strong {
			font-size: var(--fb-text-sm);
			font-weight: 600;
			color: var(--fb-ink);
		}

		& p {
			margin: 0.125rem 0 0;
			font-size: var(--fb-text-sm);
			color: var(--fb-ink-2);
		}
	}

	/* ---- grade de produtos ---- */
	& .fb-grade {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--fb-space-md);

		@media (width <= 67.5rem) { grid-template-columns: repeat(3, 1fr); }
		@media (width <= 53.75rem) {
			grid-template-columns: 1fr 1fr;
			gap: var(--fb-space-sm);
		}
	}

	& .fb-card {
		position: relative;
		display: flex;
		flex-direction: column;
	}

	& .fb-card__media {
		position: relative;
		display: block;
		overflow: hidden;
		border-radius: var(--fb-radius);
		background-color: var(--fb-surface-2);
	}

	& .fb-card__img {
		display: block;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 4 / 5;
		object-fit: cover;
		transition: opacity 0.4s;

		&.fb-card__img--alt {
			position: absolute;
			inset: 0;
			opacity: 0;
		}
	}

	& .fb-card:hover .fb-card__img--alt { opacity: 1; }

	& .fb-flag {
		position: absolute;
		inset-block-start: 0.6875rem;
		inset-inline-start: 0.6875rem;
		padding-block: 0.3125rem;
		padding-inline: 0.5625rem;
		border-radius: 0.125rem;
		background-color: var(--fb-ink);
		color: var(--fb-ground);
		font-size: 0.625rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;

		&.fb-flag--novo {
			background-color: var(--fb-blush);
			color: var(--fb-on-blush);
		}

		&.fb-flag--esgotado {
			inset-inline: auto 0.6875rem;
			background-color: var(--fb-ink-3);
			color: var(--fb-surface);
		}
	}

	& .fb-card__corpo {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		gap: var(--fb-space-2xs);
		padding-block-start: 0.9375rem;
		padding-inline: 0.125rem;
	}

	& .fb-card__titulo {
		min-block-size: 2.7em;
		margin: 0;
		font-size: var(--fb-text-sm);
		font-weight: 500;
		line-height: 1.35;

		/* link único do cartão: o ::after estende a área clicável a tudo,
		   sem criar um segundo link para o mesmo destino. */
		& a {
			display: block;
			color: var(--fb-ink);
			text-decoration: none;

			/* o clamp mora no span; se ficasse no <a>, o overflow:hidden
			   recortaria o ::after e o cartão deixaria de ser clicável. */
			& span {
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			&::after {
				content: "";
				position: absolute;
				inset: 0;
			}

			&:hover { text-decoration: underline; text-underline-offset: 0.1875rem; }

			&:focus-visible {
				outline: 0.125rem solid var(--fb-ink);
				outline-offset: 0.1875rem;
			}
		}
	}

	& .fb-cores {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		gap: var(--fb-space-3xs);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	& .fb-cor {
		display: block;
		inline-size: 0.9375rem;
		block-size: 0.9375rem;
		border-radius: var(--fb-radius-pill);
		background-color: var(--cor);
		border: 0.0625rem solid var(--fb-seam-strong);

		&.is-atual {
			outline: 0.0625rem solid var(--fb-ink);
			outline-offset: 0.125rem;
		}
	}

	& .fb-cores__mais {
		font-size: var(--fb-text-xs);
		color: var(--fb-ink-3);
	}

	& .fb-card__grade {
		margin: 0;
		font-size: var(--fb-text-xs);
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--fb-ink-3);
	}

	& .fb-card__preco {
		margin-block: auto 0;
		font-size: var(--fb-text-lg);
		font-weight: 600;
		color: var(--fb-ink);
		font-variant-numeric: tabular-nums;

		& del {
			margin-inline-end: var(--fb-space-3xs);
			font-size: var(--fb-text-sm);
			font-weight: 400;
			color: var(--fb-ink-3);
		}
	}

	/* Os plugins de parcelamento centralizam texto com !important.
	   Dentro do cartão o alinhamento é à esquerda. */
	& .fb-card__corpo :is(.woo-custom-installments-group, .woo-custom-installments-group *) {
		text-align: start !important;
		margin-inline: 0 !important;
	}

	& .fb-card__corpo .woo-custom-installments-group {
		font-size: var(--fb-text-sm) !important;
		padding: 0 !important;
	}

	& .fb-card__corpo .woo-custom-installments-card-container i {
		display: none !important;
	}

	/* ---- paleta ---- */
	& .fb-paleta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--fb-space-2xs);
		margin: 0;
		padding: 0;
		list-style: none;

		& a {
			display: inline-flex;
			align-items: center;
			gap: var(--fb-space-2xs);
			padding-block: 0.5625rem;
			padding-inline: var(--fb-space-sm) 0.5625rem;
			border: 0.0625rem solid var(--fb-seam-strong);
			border-radius: var(--fb-radius-pill);
			font-size: var(--fb-text-sm);
			font-weight: 500;
			color: var(--fb-ink);
			text-decoration: none;
			transition: border-color 0.2s, background-color 0.2s;

			&:hover {
				border-color: var(--fb-ink);
				background-color: var(--fb-surface);
			}
		}

		& i {
			display: block;
			inline-size: 1.25rem;
			block-size: 1.25rem;
			border-radius: var(--fb-radius-pill);
			background-color: var(--cor);
			border: 0.0625rem solid var(--fb-seam-strong);
		}
	}

	/* ---- atendimento ---- */
	& .fb-atende {
		background-color: var(--fb-wash);
		padding-block: var(--fb-space-xl);
	}

	& .fb-atende__grid {
		display: grid;
		grid-template-columns: 1.3fr 0.7fr;
		align-items: center;
		gap: var(--fb-space-lg);

		& > div:first-child {
			display: flex;
			flex-direction: column;
			gap: var(--fb-space-xs);
		}

		@media (width <= 53.75rem) {
			grid-template-columns: 1fr;
			gap: var(--fb-space-md);
		}
	}

	& .fb-atende__cta {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--fb-space-2xs);
	}

	/* ---- loja física ---- */
	& .fb-loja__grid {
		display: grid;
		grid-template-columns: 1.1fr 0.9fr;
		align-items: center;
		gap: var(--fb-space-xl);

		& > img {
			display: block;
			inline-size: 100%;
			block-size: auto;
			aspect-ratio: 1.45;
			object-fit: cover;
			border-radius: var(--fb-radius);
		}

		@media (width <= 60rem) {
			grid-template-columns: 1fr;
			gap: var(--fb-space-lg);
		}
	}

	& .fb-loja__copy {
		display: flex;
		flex-direction: column;
		gap: var(--fb-space-md);
	}

	& .fb-loja__dados {
		margin: 0;

		& > div {
			display: grid;
			grid-template-columns: 6rem 1fr;
			gap: var(--fb-space-sm);
			padding-block: var(--fb-space-xs);
			border-block-start: 0.0625rem dashed var(--fb-seam-strong);

			&:last-child { border-block-end: 0.0625rem dashed var(--fb-seam-strong); }
		}

		& dt {
			padding-block-start: 0.1875rem;
			font-size: var(--fb-text-xs);
			font-weight: 600;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: var(--fb-ink-3);
		}

		& dd {
			margin: 0;
			font-size: var(--fb-text-sm);
			color: var(--fb-ink);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.fb-home *,
	.fb-home *::before,
	.fb-home *::after {
		transition-duration: 0.01ms !important;
	}
}