/*
 * Cabeçalho de vidro escuro, em toda página com o cabeçalho editorial.
 * Opaco o bastante para manter o azul-marinho sobre páginas claras; o desfoque aparece no que rola por baixo.
 * O vidro fica no ::before: com backdrop-filter no próprio .site-header, ele viraria o bloco de contenção
 * do menu do celular, da busca e do véu (todos position: fixed) e os tiraria do lugar.
 */
.site-header {
	border-bottom-color: hsl(0 0% 100% / 0.1);
	background: transparent;
	box-shadow: none;
}

.site-header::before {
	content: "";
	position: absolute;
	z-index: -1;
	/* -1px embaixo: o ::before cobre só a área interna, e a borda de 1px ficava sobre o fundo claro da página
	   (virava uma listra branca em cima de seções escuras, como o topo da loja). */
	inset: 0 0 -1px;
	background: linear-gradient(180deg, hsl(215 68% 13% / 0.9), hsl(211 81% 6% / 0.94));
	box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.08), 0 12px 28px -22px hsl(218 60% 5% / 0.9);
	pointer-events: none;
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	backdrop-filter: blur(18px) saturate(1.5);
}

/* Sem suporte a desfoque, o vidro viraria um véu claro demais: volta a cor sólida de antes. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.site-header::before {
		background: var(--color-header);
	}
}

/*
 * Celular e tablet, opção "Barra flutuante" (Personalizar → Cabeçalho no celular; classe no body).
 * A barra fica solta das bordas; o botão do menu vai para a esquerda e o logotipo para o centro.
 * O botão continua dentro de .site-header__actions no HTML: o navigation.js prende o foco ali com o menu aberto.
 */
@media (max-width: 1023px) {
	body.b5g-cab-flutuante {
		--cab-folga: 0.625rem;
		--cab-barra: 3.5rem;
		--site-header-height: calc(var(--cab-folga) + var(--cab-barra));
	}

	.b5g-cab-flutuante .site-header {
		padding: var(--cab-folga) var(--cab-folga) 0;
		border-bottom: 0;
	}

	.b5g-cab-flutuante .site-header::before {
		inset: var(--cab-folga) var(--cab-folga) 0;
		border: 1px solid hsl(0 0% 100% / 0.17);
		border-radius: 1.125rem;
		background: linear-gradient(180deg, hsl(215 68% 14% / 0.86), hsl(211 81% 6% / 0.92));
		box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.14), 0 18px 34px -20px hsl(211 81% 6% / 0.85);
	}

	.b5g-cab-flutuante .site-header__inner {
		justify-content: flex-end;
		width: 100%;
		padding-inline: 0.5rem;
	}

	.b5g-cab-flutuante .site-header__brand-wrap {
		position: absolute;
		top: calc(var(--cab-folga) + var(--cab-barra) / 2);
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.b5g-cab-flutuante .site-header__brand,
	.b5g-cab-flutuante .site-header__brand .custom-logo-link {
		min-height: 0;
	}

	.b5g-cab-flutuante .site-header__logo,
	.b5g-cab-flutuante .site-header .custom-logo {
		width: auto;
		max-width: none;
		height: 1.625rem;
		max-height: 1.625rem;
	}

	/* Sem transform aqui: o :active do botão já usa transform (scale) e o faria pular. */
	.b5g-cab-flutuante .site-header__mobile-toggle {
		position: absolute;
		top: calc(var(--cab-folga) + (var(--cab-barra) - 2.5rem) / 2);
		left: calc(var(--cab-folga) + 0.5rem);
	}

	/* Login em modo painel: o X fecha no lugar do botão do menu (que some com o painel aberto), à esquerda.
	   Do lado direito ele empurraria a busca para cima do logotipo centralizado. */
	.b5g-cab-flutuante .acct-wrap--drop .acct-x {
		position: absolute;
		top: calc(var(--cab-folga) + (var(--cab-barra) - 2.5rem) / 2);
		left: calc(var(--cab-folga) + 0.5rem);
	}

	/* Menu, busca e véu começam logo abaixo da barra. */
	.b5g-cab-flutuante .mobile-menu {
		inset-block-start: var(--sticky-edge);
	}

	/*
	 * Páginas que começam com topo escuro (Proteção e produto da loja, busca, 404): o topo sobe por baixo da barra,
	 * senão o fundo claro da página aparece em volta dela. A borda transparente empurra o conteúdo de volta ao
	 * lugar, e o fundo passa a ser pintado a partir da borda (background-origin), sem emenda.
	 */
	.b5g-cab-flutuante main > :first-child:is(.lj-stage, .error-hero, .search-hero) {
		margin-top: calc(var(--site-header-height) * -1);
		border-top: var(--site-header-height) solid transparent;
		background-origin: border-box;
	}
}

@media (min-width: 640px) and (max-width: 1023px) {
	body.b5g-cab-flutuante {
		--cab-barra: 4rem;
	}
}

@media (max-width: 767px) {
	.b5g-cab-flutuante .search-panel {
		top: var(--sticky-edge);
	}
}

@media (max-width: 360px) {
	body.b5g-cab-flutuante {
		--cab-folga: 0.5rem;
	}

	.b5g-cab-flutuante .site-header__inner {
		padding-inline: 0.25rem;
	}

	.b5g-cab-flutuante .site-header__mobile-toggle,
	.b5g-cab-flutuante .acct-wrap--drop .acct-x {
		left: calc(var(--cab-folga) + 0.25rem);
	}

	.b5g-cab-flutuante .site-header__logo,
	.b5g-cab-flutuante .site-header .custom-logo {
		height: 1.5rem;
		max-height: 1.5rem;
	}
}