/* Ciclo de 15s dividido em três janelas de 5s, com as bordas se sobrepondo:
   a frase que sai só termina de sumir depois que a próxima começou a aparecer.
   Sem essa sobreposição a barra fica vazia por 0,8s a cada troca — e, se o
   cursor pausar nesse intervalo, ela congela em branco. */
/* Quatro frases num ciclo de 20s: cada uma ocupa 25%. As janelas se
   sobrepõem de propósito entre 25% e 27% — sem essa emenda o palco fica
   em branco na troca, que foi o defeito da primeira versão. */
@keyframes fb-aviso-gira {
	0%          { opacity: 0; translate: 0 0.375rem; }
	1.5%, 23%   { opacity: 1; translate: 0 0; }
	27%, 100%   { opacity: 0; translate: 0 -0.375rem; }
}

/* ============================================================================
   FIO BRANCO — cabeçalho
   ----------------------------------------------------------------------------
   Uma marcação só para desktop e celular. O anterior tinha duas seções
   completas no DOM (27% dos nós de cada página), não era fixo, e media 260px.
   ========================================================================== */

.fb-cab {
	position: sticky;
	inset-block-start: 0;
	z-index: 200;
	background-color: var(--fb-surface);
	font-family: var(--fb-font);

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

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

	/* ---- barra de avisos ----
	   Espresso do contorno do logo. Uma frase por vez, maiúsculas pequenas.
	   No desktop gira; no celular fica parada com uma frase sorteada. */
	& .fb-avisos {
		background-color: var(--fb-terracota);
		color: var(--fb-on-terracota);

		&[hidden] { display: none; }

		/* marcado pelo script anti-piscar, antes do primeiro repinte */

		/* O mecanismo de pausa exigido pela norma, sem botão e sem script.
		   Escopado NA BARRA: antes estava em .fb-cab e qualquer foco no menu
		   ou na busca congelava a rotação. */
		&:is(:hover, :focus-within) .fb-avisos__frase {
			animation-play-state: paused;
		}

		& .fb-cab__wrap {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: var(--fb-space-2xs);
			min-block-size: 2.25rem;
		}
	}

	& .fb-avisos__palco {
		position: relative;
		display: grid;
		flex: 0 1 auto;
		min-inline-size: 0;
		block-size: 1.125rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Rotação em CSS puro: cada frase ocupa um quarto de um ciclo de 20s,
	   escalonada por animation-delay. Sem JavaScript. */
	& .fb-avisos__frase {
		grid-area: 1 / 1;
		align-self: center;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-align: center;
		white-space: nowrap;
		opacity: 0;
		animation: fb-aviso-gira 20s infinite;

		&:nth-child(2) { animation-delay: 5s; }
		&:nth-child(3) { animation-delay: 10s; }
		&:nth-child(4) { animation-delay: 15s; }

		/* O asterisco da frase vira <strong>. A faixa já é 600 em caixa alta,
		   então o destaque precisa de um degrau largo para ser perceptível. */
		& strong {
			font-weight: 800;
		}
	}



	/* quem pediu menos movimento vê só a primeira frase, parada */
	@media (prefers-reduced-motion: reduce) {
		& .fb-avisos__frase {
			animation: none;

			&:first-child { opacity: 1; }
		}
	}

	/* ---- barra principal ---- */
	& .fb-cab__barra {
		background-color: rgb(255 255 255 / 0.92);
		backdrop-filter: blur(0.75rem);
		border-block-end: 0.0625rem solid var(--fb-seam);
	}

	& .fb-cab__grid {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: var(--fb-space-md);
		min-block-size: 4.625rem;
		transition: min-block-size 0.2s var(--fb-ease);
	}

	& .fb-cab__logo {
		display: flex;
		align-items: center;
		text-decoration: none;

		/* A barra tem 4,625rem e o logo ocupava 2,5rem — sobravam 2,1rem sem uso.
		   O arquivo novo (600x335, 7% de margem) rende bem mais nessa altura. */
		& img {
			display: block;
			block-size: 3.25rem;
			inline-size: auto;
			transition: block-size 0.2s var(--fb-ease);
		}
	}

	/* encolhe ao rolar, devolvendo altura ao conteúdo */
	&.is-rolado {
		& .fb-cab__grid { min-block-size: 3.625rem; }
		& .fb-cab__logo img { block-size: 2.5rem; }
	}

	/* ---- menu ---- */
	& .fb-cab__nav {
		justify-self: center;
	}

	& .fb-menu {
		display: flex;
		align-items: center;
		gap: var(--fb-space-md);
		margin: 0;
		padding: 0;
		list-style: none;

		& li {
			position: relative;
		}

		& > li > a {
			display: inline-flex;
			align-items: center;
			gap: 0.3125rem;
			padding-block: var(--fb-space-2xs);
			font-size: var(--fb-text-sm);
			font-weight: 500;
			color: var(--fb-ink);
			text-decoration: none;
			white-space: nowrap;

			&::after {
				content: "";
				position: absolute;
				inset-inline: 0 100%;
				inset-block-end: 0.125rem;
				block-size: 0.0625rem;
				background-color: var(--fb-ink);
				transition: inset-inline-end 0.25s var(--fb-ease);
			}
		}

		& > li:is(:hover, :focus-within, .current-menu-item) > a::after {
			inset-inline-end: 0;
		}

		/* Seta de submenu.

		   Era absoluta e ancorada no <li>, com inset-inline-end negativo — ou
		   seja, 13px FORA do item. Medido: ficava a 11px do item seguinte e a
		   20px do próprio texto, então lia como se pertencesse ao vizinho.

		   Agora entra no fluxo do link. O ::after já ocupa o sublinhado, então
		   a seta continua no ::before e volta para depois do texto por order —
		   pseudo-elemento é item flex como qualquer outro. */
		& .menu-item-has-children > a {
			&::before {
				content: "";
				order: 1;
				flex: none;
				inline-size: 0.3125rem;
				block-size: 0.3125rem;
				border-inline-end: 0.0625rem solid currentcolor;
				border-block-end: 0.0625rem solid currentcolor;

				/* Sem correção vertical de propósito. A regra antiga carregava
				   um recuo de -3px que subia a seta 2,2px acima da altura-x do
				   texto; medindo os pixels, align-items: center sozinho deixa o
				   desvio em 0,2px. Qualquer ajuste aqui piora. */
				rotate: 45deg;
				opacity: 0.55;
			}

			&:hover::before { opacity: 1; }
		}

		& .sub-menu {
			position: absolute;
			inset-block-start: 100%;
			inset-inline-start: -0.875rem;
			min-inline-size: 11.875rem;
			margin: 0;
			padding: var(--fb-space-2xs);
			list-style: none;
			background-color: var(--fb-surface);
			border: 0.0625rem solid var(--fb-seam);
			border-radius: var(--fb-radius);
			box-shadow: var(--fb-shadow-card);
			opacity: 0;
			visibility: hidden;
			translate: 0 -0.25rem;
			transition: opacity 0.18s, translate 0.18s, visibility 0.18s;

			& a {
				display: block;
				padding-block: 0.5625rem;
				padding-inline: var(--fb-space-xs);
				border-radius: 0.125rem;
				font-size: var(--fb-text-sm);
				color: var(--fb-ink-2);
				text-decoration: none;

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

		& li:is(:hover, :focus-within) > .sub-menu {
			opacity: 1;
			visibility: visible;
			translate: 0 0;
		}
	}

	/* ---- ações ---- */
	& .fb-cab__acoes {
		display: flex;
		align-items: center;
		gap: var(--fb-space-3xs);
	}

	& .fb-cab__icone {
		position: relative;
		display: grid;
		place-items: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		padding: 0;
		border: none;
		border-radius: var(--fb-radius-pill);
		background: none;
		color: var(--fb-ink);
		text-decoration: none;
		cursor: pointer;

		/* precisa declarar o fundo: sem isso o #c36 do tema pai aparece */
		&:is(:hover, :focus-visible) {
			background-color: var(--fb-ground);
			color: var(--fb-ink);
		}

		/* 1,5rem = 24px, igual ao viewBox: sem reescala, o traço cai em pixel
		   inteiro. A 20px ele virava 1,25px e borrava as bordas. */
		& svg {
			inline-size: 1.5rem;
			block-size: 1.5rem;
			stroke: currentcolor;
			fill: none;
			stroke-width: 1.75;
		}
	}

	& .fb-cab__burger { display: none; }

	& .fb-selo {
		position: absolute;
		inset-block-start: 0.3125rem;
		inset-inline-end: 0.1875rem;
		min-inline-size: 1.0625rem;
		block-size: 1.0625rem;
		padding-inline: var(--fb-space-3xs);
		border-radius: var(--fb-radius-pill);
		background-color: var(--fb-espresso);
		color: var(--fb-on-espresso);
		font-size: 0.625rem;
		font-weight: 700;
		line-height: 1.0625rem;
		text-align: center;
		font-variant-numeric: tabular-nums;

		&.is-vazio { display: none; }
	}

	/* ---- responsivo ---- */
	@media (width <= 73.75rem) {
		& .fb-menu { gap: var(--fb-space-sm); }
	}

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

		& .fb-cab__grid {
			gap: var(--fb-space-2xs);
			min-block-size: 3.625rem;
		}

		&.is-rolado .fb-cab__grid { min-block-size: 3.375rem; }

		& .fb-cab__nav { display: none; }
		& .fb-cab__burger { display: grid; }

		/* A logo tem de se referir ao centro da BARRA, não ao da sua coluna.
		   As laterais têm larguras diferentes — hambúrguer 38px de um lado,
		   três ícones de 120px do outro — então a coluna central nunca cai no
		   meio: a logo saía 41px à esquerda. Ajustar as colunas para 1fr auto
		   1fr também não resolve em telas estreitas, onde os ícones exigem
		   mais que a fração disponível e a simetria se perde de novo.

		   Os três itens são colocados explicitamente na mesma linha: a logo
		   atravessa a grade inteira e se centraliza nela, enquanto laterais
		   ancoram nas bordas. Sobreposição declarada em grid é o mecanismo
		   próprio para isso, e o centro passa a ser exato em qualquer largura. */
		& .fb-cab__burger {
			grid-area: 1 / 1;
			justify-self: start;
		}

		& .fb-cab__logo {
			grid-area: 1 / 1 / 2 / -1;
			justify-self: center;

			& img { block-size: 2.5rem; }
		}

		/* Sem gap em toda a faixa do celular, não só abaixo de 420px: a 430px
		   os três ícones somavam 188px e alcançavam a logo centralizada. */
		& .fb-cab__acoes {
			grid-area: 1 / 3;
			justify-self: end;
			gap: 0;
		}

		& .fb-avisos {
			& .fb-avisos .fb-cab__wrap { min-block-size: 2rem; }

			& .fb-avisos__frase {
				white-space: normal;
				text-wrap: balance;
			}

			/* O recuo de 1,5rem de cada lado existia para as frases não passarem
			   por baixo do botão de fechar, que ficava absoluto na ponta. Sem o
			   botão, eram 48px reservados para nada — e eram eles que faziam a
			   frase do frete quebrar em duas linhas até 430px. */
			& .fb-avisos__palco { block-size: auto; }
		}

	}

	/* Abaixo de 350px o espaço entre o hambúrguer e os três ícones deixa de
	   comportar a logo em 2,5rem sem encostar neles. A conta: metade da barra
	   menos a largura das ações define o máximo para meia logo. */
	@media (width <= 21.875rem) {
		& .fb-cab__logo img { block-size: 1.75rem; }
	}

	/* Compactar cedo, a 30rem e não a 26,25rem. Entre 420 e 448px os quatro
	   ícones somavam 176px e a metade da barra menos essa largura ficava
	   abaixo da meia logo — os dois se encontravam. A conta continua acessível
	   pela gaveta, então é ela que sai primeiro. */
	@media (width <= 30rem) {
		& .fb-cab__icone {
			inline-size: 2.375rem;
			block-size: 2.375rem;
		}
		& .fb-cab__conta { display: none; }
	}
}

/* ---- gaveta do celular (fora do .fb-cab: é position:fixed) ---- */
.fb-gaveta {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 210;
	display: flex;
	flex-direction: column;
	inline-size: min(21.25rem, 88dvw);
	padding: var(--fb-space-sm);
	background-color: var(--fb-surface);
	border-inline-end: 0.0625rem solid var(--fb-seam);
	overflow-y: auto;
	overscroll-behavior: contain;
	font-family: var(--fb-font);
	translate: -100% 0;
	visibility: hidden;
	transition: translate 0.3s var(--fb-ease), visibility 0s linear 0.3s;

	&.is-aberta {
		translate: 0 0;
		visibility: visible;
		transition: translate 0.3s var(--fb-ease), visibility 0s;
	}

	& .fb-gaveta__topo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--fb-space-xs);
		padding-block-end: var(--fb-space-xs);
		border-block-end: 0.0625rem solid var(--fb-seam);
	}

	& .fb-gaveta__conta {
		font-size: var(--fb-text-sm);
		font-weight: 600;
		color: var(--fb-ink);
		text-decoration: none;
	}

	/* O reset do tema pai dá a todo botão padding: .5rem 1rem. Num quadrado de
	   2,25rem isso deixa 4px de caixa para um glifo de 22px: ele transbordava
	   e assentava 5,5px à direita do centro — 16px de folga de um lado contra
	   5px do outro. Padding zerado e centralização por grid resolvem na
	   origem, sem compensar com margem. */
	& .fb-gaveta__fechar {
		display: grid;
		place-items: center;
		box-sizing: border-box;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		padding: 0;
		border: none;
		border-radius: var(--fb-radius-pill);
		background-color: var(--fb-ground);
		color: var(--fb-ink);
		font-size: 1.375rem;
		line-height: 1;
		cursor: pointer;

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

	& .fb-gaveta__menu {
		margin: 0;
		padding-block-start: var(--fb-space-2xs);
		padding-inline: 0;
		list-style: none;

		& a {
			display: block;
			padding-block: var(--fb-space-xs);
			font-size: var(--fb-text-base);
			font-weight: 500;
			color: var(--fb-ink);
			text-decoration: none;
			border-block-end: 0.0625rem solid var(--fb-seam);
		}

		& .sub-menu {
			margin: 0 0 var(--fb-space-3xs);
			padding-inline-start: var(--fb-space-sm);
			list-style: none;

			& a {
				padding-block: 0.625rem;
				font-size: var(--fb-text-sm);
				font-weight: 400;
				color: var(--fb-ink-2);
				border-block-end: none;
			}
		}
	}

	& .fb-gaveta__zap {
		margin-block-start: auto;
		padding: var(--fb-space-xs);
		border-radius: var(--fb-radius-pill);
		background-color: var(--fb-espresso);
		color: var(--fb-on-espresso);
		font-size: var(--fb-text-sm);
		font-weight: 600;
		text-align: center;
		text-decoration: none;
	}
}

.fb-cortina {
	position: fixed;
	inset: 0;
	z-index: 205;
	background-color: rgb(23 16 14 / 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;

	&.is-aberta {
		opacity: 1;
		visibility: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fb-cab *,
	.fb-gaveta,
	.fb-cortina {
		transition-duration: 0.01ms !important;
	}
}