/**
 * Cabeçalho — três faixas.
 *
 * Estrutura da Bonfim Flores: faixa operacional fina, linha principal com
 * marca/busca/ações, faixa de navegação. As três ocupam juntas menos altura do
 * que o cabeçalho anterior ocupava com duas.
 */

/* ---------- Faixa 1: operacional ---------- */

.jf-faixa {
	background-color: var(--jf-color-surface-alt);
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-xs);
	border-bottom: 1px solid var(--jf-color-border);
}

.jf-faixa__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jf-space-md);
	min-height: 2.25rem;
}

.jf-faixa__itens {
	display: flex;
	align-items: center;
	gap: var(--jf-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jf-faixa__itens li {
	display: flex;
	align-items: center;
	gap: var(--jf-space-3xs);
	max-width: none;
	margin: 0;
}

.jf-faixa__itens svg,
.jf-faixa__tel svg {
	color: var(--jf-color-primary);
}

.jf-faixa__tel {
	display: inline-flex;
	align-items: center;
	gap: var(--jf-space-3xs);
	color: var(--jf-color-text);
	font-weight: var(--jf-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
}

/* No celular sobra só o telefone: é a única coisa dessa faixa que alguém
   com pressa vai usar. */
@media (max-width: 47.9375em) {
	.jf-faixa__itens {
		display: none;
	}

	.jf-faixa__in {
		justify-content: center;
	}
}

/* ---------- Faixa 2: marca, busca, ações ---------- */

.jf-cab {
	background-color: var(--jf-color-surface);
	border-bottom: 1px solid var(--jf-color-border);
}

.jf-cab__linha {
	display: flex;
	align-items: center;
	gap: var(--jf-space-md);
	padding-top: var(--jf-space-sm);
	padding-bottom: var(--jf-space-sm);
}

/* O Storefront já envolve o cabeçalho num `.col-full`; as faixas internas
   (`.jf-cab__linha`, `.jf-cab__nav-in`) são `.col-full` de novo. O padding
   lateral somava duas vezes e logo, busca e menu ficavam 32px para dentro da
   faixa de atendimento e do conteúdo da página. */
.jf-cab .col-full {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.jf-marca {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--jf-color-primary);
	text-decoration: none;
}

/* O logo oficial é largo (3,3:1), com tagline embaixo; limitar a largura é o
   que devolve espaço para a busca, o elemento central da faixa. Em 12rem ele
   fica com ~58px de altura. */
.jf-marca .jf-logo,
.jf-marca img {
	display: block;
	height: auto;
	width: auto;
	max-width: 12rem;
}

/* A busca toma o espaço livre — é o elemento central da faixa. */
.jf-busca {
	position: relative;
	display: flex;
	flex: 1 1 24rem;
	max-width: 34rem;
	margin: 0;
}

.jf-busca__campo {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--jf-control-height);
	padding: 0 var(--jf-space-sm);
	background-color: var(--jf-color-bg);
	color: var(--jf-color-text);
	font-family: var(--jf-font-body);
	font-size: var(--jf-size-sm);
	border: 1px solid var(--jf-color-border);
	border-right: 0;
	border-radius: var(--jf-radius-md) 0 0 var(--jf-radius-md);
}

.jf-busca__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.25rem;
	min-height: var(--jf-control-height);
	padding: 0;
	background-color: var(--jf-color-primary);
	color: var(--jf-color-text-on-dark);
	border: 0;
	border-radius: 0 var(--jf-radius-md) var(--jf-radius-md) 0;
	cursor: pointer;
	transition: background-color var(--jf-transition);
}

.jf-busca__botao:hover {
	background-color: var(--jf-color-primary-hover);
}

.jf-cab__acoes {
	display: flex;
	align-items: center;
	gap: var(--jf-space-2xs);
	margin-left: auto;
}

.jf-cab__acao {
	display: inline-flex;
	align-items: center;
	gap: var(--jf-space-2xs);
	min-height: var(--jf-tap-min);
	padding: var(--jf-space-3xs) var(--jf-space-2xs);
	background: transparent;
	color: var(--jf-color-text);
	font-family: var(--jf-font-body);
	border: 0;
	border-radius: var(--jf-radius-md);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--jf-transition);
}

.jf-cab__acao:hover {
	background-color: var(--jf-color-bg);
	color: var(--jf-color-primary);
}

.jf-cab__acao svg {
	flex: 0 0 auto;
	color: var(--jf-color-primary);
}

.jf-cab__acao-texto {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	text-align: left;
}

.jf-cab__acao-texto small {
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-xs);
}

.jf-cab__acao-texto strong {
	font-size: var(--jf-size-sm);
	font-weight: var(--jf-weight-semibold);
}

.jf-cab__menu {
	display: none;
	order: 2;
	align-items: center;
	justify-content: center;
	width: var(--jf-tap-min);
	height: var(--jf-tap-min);
	padding: 0;
	background: transparent;
	color: var(--jf-color-text);
	border: 0;
	border-radius: var(--jf-radius-md);
	cursor: pointer;
}

/* ---------- Faixa 3: navegação ---------- */

.jf-cab__nav-faixa {
	border-top: 1px solid var(--jf-color-border);
}

.jf-cab__nav-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jf-space-md);
	/* Folga entre o fundo do hover e as linhas da faixa: com o link ocupando
	   a altura inteira, o destaque encostava nas duas bordas. */
	padding-top: var(--jf-space-2xs);
	padding-bottom: var(--jf-space-2xs);
}

.jf-cab__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jf-space-3xs);
	/* O recuo negativo alinha o TEXTO do primeiro item com a borda do
	   container, e o fundo do hover sobra para fora — em vez de zerar o
	   padding do primeiro link e deixar o destaque colado na palavra. */
	margin: 0 0 0 calc(var(--jf-space-xs) * -1);
	padding: 0;
	list-style: none;
}

.jf-cab__lista li {
	max-width: none;
	margin: 0;
}

/* Padding apertado e fonte menor: com seis itens mais o WhatsApp, o espaço de
   1024px não comporta o respiro que caberia num container de 1390. */
.jf-cab__lista a {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	min-height: 2.5rem;
	padding: var(--jf-space-3xs) var(--jf-space-xs);
	color: var(--jf-color-text-muted);
	font-size: var(--jf-size-sm);
	font-weight: var(--jf-weight-semibold);
	text-decoration: none;
	border-radius: var(--jf-radius-md);
}

.jf-cab__lista a:hover,
.jf-cab__lista .current-menu-item > a {
	color: var(--jf-color-primary);
	background-color: var(--jf-color-bg);
}


/* O WhatsApp fica na ponta, em verde: é o único elemento do cabeçalho que não
   é navegação, e precisa se distinguir dela sem gritar. */
.jf-cab__whats {
	display: inline-flex;
	align-items: center;
	gap: var(--jf-space-3xs);
	flex: 0 0 auto;
	min-height: var(--jf-tap-min);
	padding: var(--jf-space-3xs) var(--jf-space-xs);
	color: var(--jf-color-success);
	font-size: var(--jf-size-sm);
	font-weight: var(--jf-weight-semibold);
	text-decoration: none;
	border-radius: var(--jf-radius-md);
}

.jf-cab__whats:hover {
	background-color: var(--jf-color-bg);
	color: var(--jf-color-success);
}

/* ---------- Mobile ---------- */

@media (max-width: 61.9375em) {
	/* Sem JS: navegação visível, rolável na horizontal, e nenhum botão de
	   menu. Com JS (classe .jf-menu-js): navegação fechada e aberta pelo
	   botão. */
	.jf-cab__nav-in {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-top: var(--jf-space-2xs);
		padding-bottom: var(--jf-space-sm);
	}

	.jf-cab__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.jf-cab__lista {
		margin-left: 0;
	}

	/* A linha divisória fica no item, e o link ganha um respiro dentro dela:
	   o fundo do hover/toque não encosta nas linhas de cima e de baixo. */
	.jf-cab__lista > li {
		padding: var(--jf-space-3xs) 0;
		border-bottom: 1px solid var(--jf-color-border);
	}

	.jf-cab__lista a {
		display: flex;
		min-height: var(--jf-tap-min);
		padding: var(--jf-space-2xs) var(--jf-space-xs);
		border-radius: var(--jf-radius-md);
	}

	.jf-cab__whats {
		margin-top: var(--jf-space-2xs);
		padding-left: 0;
	}

	.jf-menu-js .jf-cab__nav-faixa {
		display: none;
	}

	.jf-menu-js .jf-cab--menu-aberto .jf-cab__nav-faixa {
		display: block;
	}

	.jf-menu-js .jf-cab__menu {
		display: inline-flex;
	}

	/* Some da tela, não do leitor de tela. Com `display: none` o botão do
	   carrinho e o link da conta ficavam sem nome acessível no celular — só um
	   ícone, anunciado como "botão" (WCAG 4.1.2). */
	.jf-cab__acao-texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.jf-busca {
		order: 3;
		flex-basis: 100%;
		max-width: none;
	}

	.jf-cab__linha {
		flex-wrap: wrap;
	}

	.jf-cab__acoes {
		gap: 0;
	}
}

/* Faixa intermediária: entre 992px e 1216px o rótulo do WhatsApp é o primeiro
   a sair, porque o ícone dele já é reconhecível e a navegação não é. */
@media (min-width: 62em) and (max-width: 76em) {
	.jf-cab__whats span {
		display: none;
	}

	.jf-cab__lista {
		flex-wrap: nowrap;
	}
}

@media (max-width: 61.9375em) {
	.jf-cab__linha {
		gap: var(--jf-space-2xs) var(--jf-space-xs);
		padding-top: var(--jf-space-xs);
		padding-bottom: var(--jf-space-xs);
	}

	.jf-marca { order: 0; }
	.jf-cab__acoes { order: 1; }
	.jf-cab__menu { order: 2; }
	.jf-busca { order: 3; }

	.jf-marca .jf-logo,
	.jf-marca img {
		max-width: 9.5rem;
	}
}

/* ---------- Submenu ----------
 *
 * Itens editáveis em Aparência → Menus (ver jf_menu_submenu()). O item-pai
 * continua link; o botão ao lado dele abre o painel. Sem JavaScript, o painel
 * abre por hover/foco no desktop e fica aberto no celular — nenhum link some
 * por falta de script.
 */

.jf-cab__lista > .menu-item-has-children {
	position: relative;
	display: flex;
	align-items: center;
}

.jf-cab__lista > .menu-item-has-children > a {
	padding-right: var(--jf-space-3xs);
}

.jf-sub__botao {
	display: none;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	min-height: 2.5rem; /* a altura dos links; no celular volta a 44px */
	padding: 0;
	background: transparent;
	color: var(--jf-color-text-muted);
	border: 0;
	border-radius: var(--jf-radius-md);
	cursor: pointer;
}

.jf-menu-js .jf-sub__botao {
	display: inline-flex;
}

.jf-sub__botao:hover,
.jf-sub--aberto > .jf-sub__botao {
	color: var(--jf-color-primary);
	background-color: var(--jf-color-bg);
}

.jf-sub__botao svg {
	transition: transform var(--jf-transition);
}

.jf-sub--aberto > .jf-sub__botao svg {
	transform: rotate(180deg);
}

.jf-cab__lista .sub-menu {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jf-cab__lista .jf-sub--aberto > .sub-menu,
html:not(.jf-menu-js) .jf-cab__lista .menu-item-has-children:hover > .sub-menu,
html:not(.jf-menu-js) .jf-cab__lista .menu-item-has-children:focus-within > .sub-menu {
	display: grid;
}

/* Título de grupo: texto, não link. */
.jf-sub__titulo {
	display: block;
	padding: var(--jf-space-2xs) var(--jf-space-2xs) var(--jf-space-3xs);
	color: var(--jf-color-text);
	font-family: var(--jf-font-heading);
	font-size: var(--jf-size-xs);
	font-weight: var(--jf-weight-semibold);
	letter-spacing: var(--jf-tracking-eyebrow);
	text-transform: uppercase;
}

.jf-cab__lista .sub-menu a,
.jf-cab__lista .sub-menu li:first-child a {
	display: flex;
	padding: var(--jf-space-2xs);
	color: var(--jf-color-text);
	font-weight: var(--jf-weight-regular);
}

.jf-cab__lista .sub-menu a:hover {
	color: var(--jf-color-primary);
	background-color: var(--jf-color-bg);
}

.jf-cab__lista .sub-menu .jf-sub--todas a {
	color: var(--jf-color-primary);
	font-weight: var(--jf-weight-semibold);
}

/* Desktop: painel flutuante em duas colunas — tipo à esquerda, tamanho à
   direita. `dense` sobe os itens da segunda coluna para o topo dela. */
@media (min-width: 62em) {
	.jf-cab__lista .sub-menu {
		position: absolute;
		z-index: 100;
		top: 100%;
		left: 0;
		grid-template-columns: repeat(2, minmax(11rem, 1fr));
		grid-auto-flow: row dense;
		column-gap: var(--jf-space-md);
		padding: var(--jf-space-sm);
		background-color: var(--jf-color-surface);
		border: 1px solid var(--jf-color-border);
		border-radius: var(--jf-radius-lg);
		box-shadow: var(--jf-shadow-lg);
	}

	.jf-cab__lista .sub-menu > li {
		grid-column: 1;
	}

	.jf-cab__lista .sub-menu > li.jf-sub--col2 {
		grid-column: 2;
	}

	.jf-cab__lista .sub-menu > li.jf-sub--todas {
		grid-column: 1 / -1;
		margin-top: var(--jf-space-2xs);
		padding-top: var(--jf-space-2xs);
		border-top: 1px solid var(--jf-color-border);
	}
}

/* Celular: o painel abre no lugar, recuado sob o item. */
@media (max-width: 61.9375em) {
	.jf-cab__lista > .menu-item-has-children {
		flex-wrap: wrap;
	}

	.jf-cab__lista > .menu-item-has-children > a {
		flex: 1 1 auto;
	}

	.jf-sub__botao {
		width: var(--jf-tap-min);
		min-height: var(--jf-tap-min);
	}

	/* A divisória já está no <li> do item-pai; o painel só recua. */
	.jf-cab__lista .sub-menu {
		flex-basis: 100%;
		padding: 0 0 var(--jf-space-2xs) var(--jf-space-sm);
	}

	html:not(.jf-menu-js) .jf-cab__lista .sub-menu {
		display: grid;
	}

	.jf-cab__lista .sub-menu a,
	.jf-cab__lista .sub-menu li:first-child a {
		padding: var(--jf-space-2xs) var(--jf-space-xs);
		border-bottom: 0;
	}

	.jf-sub__titulo {
		padding-left: var(--jf-space-xs);
	}
}

/* ---------- Sugestões da busca ----------
 *
 * Painel aberto por busca.js abaixo do campo. Lista de links: foto, nome e
 * preço — o mesmo trio do card do catálogo, em linha.
 */

.jf-sugestoes {
	position: absolute;
	z-index: 200;
	top: calc(100% + var(--jf-space-3xs));
	left: 0;
	right: 0;
	padding: var(--jf-space-2xs);
	background-color: var(--jf-color-surface);
	border: 1px solid var(--jf-color-border);
	border-radius: var(--jf-radius-lg);
	box-shadow: var(--jf-shadow-lg);
	text-align: left;
}

.jf-sugestoes[hidden] {
	display: none;
}

.jf-sugestoes__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jf-sugestoes__lista li {
	max-width: none;
	margin: 0;
}

.jf-sugestao {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--jf-space-sm);
	min-height: var(--jf-tap-min);
	padding: var(--jf-space-2xs);
	color: var(--jf-color-text);
	font-size: var(--jf-size-sm);
	text-decoration: none;
	border-radius: var(--jf-radius-md);
}

.jf-sugestao:hover,
.jf-sugestao:focus-visible {
	background-color: var(--jf-color-bg);
	color: var(--jf-color-primary);
}

.jf-sugestao:focus-visible,
.jf-sugestoes__todas:focus-visible {
	outline: var(--jf-focus-width) solid var(--jf-color-focus);
	outline-offset: calc(var(--jf-focus-width) * -1);
}

.jf-sugestao__foto {
	display: block;
	width: 3rem;
	height: 3rem;
	margin: 0;
	object-fit: cover;
	background-color: var(--jf-color-surface-alt);
	border-radius: var(--jf-radius-sm);
}

.jf-sugestao__nome {
	line-height: var(--jf-leading-snug);
}

.jf-sugestao__preco {
	font-weight: var(--jf-weight-semibold);
	white-space: nowrap;
}

.jf-sugestoes__vazio {
	margin: 0;
	padding: var(--jf-space-xs) var(--jf-space-2xs);
	color: var(--jf-color-text);
	font-size: var(--jf-size-sm);
}

.jf-sugestoes__todas {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--jf-tap-min);
	margin-top: var(--jf-space-3xs);
	padding: var(--jf-space-2xs);
	color: var(--jf-color-primary);
	font-size: var(--jf-size-sm);
	font-weight: var(--jf-weight-semibold);
	text-decoration: none;
	border-top: 1px solid var(--jf-color-border);
	border-radius: 0 0 var(--jf-radius-md) var(--jf-radius-md);
}

.jf-sugestoes__todas:hover {
	background-color: var(--jf-color-bg);
	color: var(--jf-color-primary-hover);
}

/* Enquanto a consulta vai e volta, a lupa esmaece — sem spinner girando
   (movimento nunca é pressão, regra 8). */
.jf-busca--buscando .jf-busca__botao svg {
	opacity: 0.55;
}