/*
 * Cabeçalho e rodapé próprios — substituem os templates do Elementor.
 *
 * Carregado no site inteiro (inc/header-footer.php). Todas as cores são declaradas
 * explicitamente no elemento, nunca só herdadas: o Kadence declara cor nos próprios h1–h6 e uma
 * declaração no elemento vence a herança (ver "Armadilhas de CSS" no README).
 */

.inloft-header,
.inloft-footer {
	--ihf-verde: #223829;
	--ihf-verde-mid: #3A7D4E;
	--ihf-terracota: #904B2C;
	--ihf-terracota-mid: #B35A32;
	--ihf-salvia: #BFBB9B;
	--ihf-creme: #EAE4D3;
	--ihf-offwhite: #F2EEE4;

	--ihf-display: var(--inloft-font-display, "Poppins", "Helvetica Neue", Arial, sans-serif);
	--ihf-body: var(--inloft-font-body, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

	--ihf-max: 1240px;

	font-family: var(--ihf-body);
	box-sizing: border-box;
}

.inloft-header *,
.inloft-footer * {
	box-sizing: inherit;
}

/* ══════════════════════════════════════════════════════════════════════════
   CABEÇALHO
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * O `z-index` aqui não é enfeite: sem ele o cabeçalho fica em `z-index: auto` e QUALQUER elemento
 * flutuante passa por cima do menu — era o que a faixa "Ofertas disponíveis" fazia, tanto com o
 * menu mobile aberto quanto sobre a borda direita do cabeçalho em janelas de desktop mais baixas.
 *
 * Criar o contexto de empilhamento aqui resolve celular e computador de uma vez: tudo o que está
 * dentro do cabeçalho sobe junto (painel mobile e dropdown do desktop), então o `z-index: 60` do
 * `.sub-menu` lá embaixo passa a valer só dentro deste contexto, e não mais globalmente.
 *
 * O valor 500 também não é arbitrário. Ele já foi 100, e isso EMPATAVA com a `.fc-topbar` (o
 * breadcrumb das páginas de coleção, `pagina-colecoes/public/assets/css/frontend.css`). Empate de
 * `z-index` no mesmo contexto é decidido pela ordem no DOM, e a topbar vem depois — ela cobria o
 * primeiro item do dropdown e cortava o painel da busca ao meio.
 *
 * Subimos o cabeçalho em vez de baixar a topbar porque `100` é um valor "alto padrão" que qualquer
 * plugin pode reusar amanhã: numa faixa própria, o cabeçalho ganha dessa banda inteira de uma vez.
 *
 * Escala combinada — respeite ao mexer:
 *   conteúdo (auto) → faixa de ofertas (90) → cromo de página, ex. fc-topbar (100) →
 *   cabeçalho e seus painéis (500) → modais, gavetas e lightboxes (99991+).
 * Ver "Armadilhas de CSS" no README antes de mexer nestes números.
 */
/* Sticky como no PDF (p00): fica no topo ao rolar. O #wrapper do Kadence usa
   `overflow: clip`, que não cria contexto de rolagem — o sticky funciona. */
.inloft-header {
	--ihf-top: 0px;
	position: sticky;
	top: var(--ihf-top);
	z-index: 500;
	background: var(--ihf-creme);
	color: var(--ihf-verde);
	border-bottom: 1px solid rgba(191, 187, 155, .45);
	transition: transform .25s ease;
	will-change: transform;
}

.admin-bar .inloft-header {
	--ihf-top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .inloft-header {
		--ihf-top: 46px;
	}
}

/*
 * Esconde ao descer, reaparece ao subir. A classe é posta por assets/js/header.js.
 *
 * O deslocamento é `-100% - var(--ihf-top)` e não só `-100%`: com a barra do wp-admin o
 * cabeçalho gruda em 32px (46px no celular), então um `-100%` cru deixaria uma faixa de creme
 * pendurada abaixo da barra de admin. Como o mesmo custom property alimenta o `top`, os dois
 * nunca saem de sincronia.
 */
.inloft-header.is-oculto {
	transform: translateY(calc(-100% - var(--ihf-top)));
}

@media (prefers-reduced-motion: reduce) {
	.inloft-header {
		transition: none;
	}
}

.inloft-header__topo {
	max-width: var(--ihf-max);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: clamp(12px, 3vw, 32px);
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */

.inloft-header__logo {
	flex: 0 0 auto;
	line-height: 0;
}

/* O teto de altura também existe no mu-plugin de tipografia; repetido aqui para o
   cabeçalho próprio não depender daquele arquivo. */
.inloft-header__logo img,
.inloft-header__logo .custom-logo {
	display: block;
	max-height: 48px;
	width: auto;
	height: auto;
}

.inloft-header__logo-texto {
	font-family: var(--ihf-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ihf-verde);
	text-decoration: none;
	line-height: 1.2;
}

/* ── Busca (shortcode do wpvs) ────────────────────────────────────────────── */

.inloft-header__busca {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.inloft-header__busca .wpvs {
	width: 100%;
	max-width: 420px;
}

/*
 * O painel de resultados desce ABAIXO do cabeçalho, como na p04 do PDF.
 *
 * O padrão do plugin é `position: fixed; top: 0`, que cobria o cabeçalho
 * inteiro — logo e navegação sumiam no instante em que a busca era aberta.
 * Aqui ele passa a ser absoluto em relação ao `.inloft-header` (que já é
 * `position: relative`) e alinhado à largura dele.
 *
 * O posicionamento mora no TEMA, não no plugin: o plugin continua servindo a
 * qualquer contexto (inclusive fora deste cabeçalho); quem manda no layout do
 * cabeçalho é o tema.
 */
.inloft-header__busca .wpvs-modal {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	transform: none;
	width: auto;
	max-width: none;
	min-width: 0;
	border-radius: 0;
	border-top: 1px solid rgba(191, 187, 155, .55);
}

/* As animações do plugin carregam translateX(-50%) para se manterem centradas.
   Aqui a centralização não vem de transform, então elas seriam um pulo lateral
   — precisam ser substituídas, entrada e saída. */
.inloft-header__busca .wpvs-modal:not([hidden]) {
	animation: inloft-busca-entra .22s cubic-bezier(.22, 1, .36, 1) both;
}

/* Vem depois da regra de entrada de propósito: quando o JS põe `is-closing`, o
   modal ainda não tem `hidden`, então as duas regras casam e a última vence. */
.inloft-header__busca .wpvs-modal.is-closing {
	animation: inloft-busca-sai .18s cubic-bezier(.4, 0, 1, 1) both;
}

@keyframes inloft-busca-entra {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes inloft-busca-sai {
	to { opacity: 0; transform: translateY(-6px); }
}

.inloft-header__busca .wpvs-modal__inner {
	max-width: var(--ihf-max);
	padding: 22px 24px 30px;
}

/* ── Ações à direita ──────────────────────────────────────────────────────── */

.inloft-header__acoes {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.6vw, 20px);
}

.inloft-header__pedidos {
	font-family: var(--ihf-body);
	font-size: .9375rem;
	color: var(--ihf-verde);
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s ease;
}

.inloft-header__pedidos:hover,
.inloft-header__pedidos:focus {
	color: var(--ihf-terracota);
}

.inloft-header__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--ihf-verde);
	text-decoration: none;
	border-radius: 50%;
	transition: background-color .18s ease, color .18s ease;
}

.inloft-header__icone:hover,
.inloft-header__icone:focus {
	background: rgba(191, 187, 155, .28);
	color: var(--ihf-terracota);
}

/* ── Navegação principal ──────────────────────────────────────────────────── */

.inloft-header__nav {
	border-top: 1px solid rgba(191, 187, 155, .35);
}

.inloft-header__menu {
	max-width: var(--ihf-max);
	margin: 0 auto;
	padding: 0 24px;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(16px, 3.4vw, 46px);
	min-height: 52px;
}

.inloft-header__menu li {
	position: relative;
	margin: 0;
}

.inloft-header__menu a {
	display: inline-block;
	padding: 14px 0;
	font-family: var(--ihf-body);
	font-size: 1rem;
	line-height: 1.2;
	color: var(--ihf-verde);
	text-decoration: none;
	transition: color .18s ease;
}

.inloft-header__menu a:hover,
.inloft-header__menu a:focus,
.inloft-header__menu .current-menu-item > a,
.inloft-header__menu .current_page_item > a {
	color: var(--ihf-terracota);
}

/* Item da página atual leva sublinhado (PDF p00) — o hover só muda a cor,
   para o visitante distinguir "onde estou" de "onde o mouse está". */
.inloft-header__menu .current-menu-item > a,
.inloft-header__menu .current-menu-ancestor > a,
.inloft-header__menu .current_page_item > a,
.inloft-header__menu .current_page_ancestor > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Chevron nos itens com filhos — como no PDF (Curadoria ▾, Produtos ▾). */
.inloft-header__menu > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 7px;
	vertical-align: 1px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .18s ease;
}

.inloft-header__menu > .menu-item-has-children:hover > a::after,
.inloft-header__menu > .menu-item-has-children:focus-within > a::after {
	transform: rotate(-135deg) translateY(-2px);
}

/*
 * ── Painel suspenso: UM visual para todos ─────────────────────────────────
 *
 * A p10 do PDF define a linguagem: fundo branco, CANTOS RETOS, borda fina,
 * colado na base do cabeçalho e alinhado à largura dele. Antes o submenu era
 * um cartãozinho arredondado e flutuante — outra linguagem.
 *
 * As duas regras abaixo valem para o `.sub-menu` (Curadoria) e para o
 * `.inloft-mega` (Produtos), que é o que torna o visual único de fato.
 *
 * Largura conforme o conteúdo: o mega ocupa a faixa toda porque tem colunas;
 * a lista curta se ajusta ao texto, para não sobrar um painel vazio.
 */
.inloft-header__menu .sub-menu,
.inloft-header__menu .inloft-mega {
	position: absolute;
	top: 100%;
	margin: 0;
	background: #fff;
	border: 1px solid rgba(191, 187, 155, .55);
	border-radius: 0;
	box-shadow: 0 10px 24px rgba(34, 56, 41, .07);
	opacity: 0;
	visibility: hidden;
	transition: opacity .16s ease, visibility .16s ease;
	z-index: 60;
}

.inloft-header__menu li:hover > .sub-menu,
.inloft-header__menu li:focus-within > .sub-menu,
.inloft-header__menu li:hover > .inloft-mega,
.inloft-header__menu li:focus-within > .inloft-mega {
	opacity: 1;
	visibility: visible;
}

/* Lista curta (Curadoria): largura do conteúdo, ancorada no item. */
.inloft-header__menu .sub-menu {
	left: 50%;
	transform: translateX(-50%);
	min-width: 210px;
	padding: 10px 0;
	list-style: none;
}

.inloft-header__menu .sub-menu a {
	display: block;
	padding: 9px 20px;
	font-size: .9375rem;
	white-space: nowrap;
}

.inloft-header__menu .sub-menu a:hover,
.inloft-header__menu .sub-menu a:focus {
	background: rgba(191, 187, 155, .18);
}

/*
 * "Ver todas as Coleções" abre o submenu de Curadoria (p08). Mesmo tratamento do "Ver todos" do
 * mega-menu de Produtos: sublinhado e peso maior, para ler como atalho e não como mais uma
 * coleção da lista. O divisor separa o atalho dos nomes.
 */
.inloft-header__menu .sub-menu .inloft-menu-colecao--todas a {
	font-family: var(--ihf-display);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.inloft-header__menu .sub-menu .inloft-menu-colecao--todas {
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(191, 187, 155, .45);
}

.inloft-header__menu .sub-menu .inloft-menu-colecao--todas a:hover,
.inloft-header__menu .sub-menu .inloft-menu-colecao--todas a:focus {
	color: var(--ihf-terracota);
}

/* ── Mega-menu de Produtos (p10) ──────────────────────────────────────────── */

/*
 * Ocupa a faixa inteira, como na p10.
 *
 * Detalhe que não é óbvio: `.inloft-header__menu li` é `position: relative`, e
 * um filho absoluto se resolve pelo ancestral posicionado MAIS PRÓXIMO — o
 * painel sairia com a largura do texto "Produtos". Por isso o item que carrega
 * o mega volta a ser `static`, e quem serve de referência é o `<nav>`.
 *
 * O `.sub-menu` da Curadoria continua ancorado no próprio item, que segue
 * `relative` — é o que dá a "largura conforme o conteúdo".
 */
.inloft-header__nav {
	position: relative;
}

.inloft-header__menu > .inloft-tem-mega {
	position: static;
}

/*
 * A GRADE é do componente, não do menu.
 *
 * O mesmo painel é impresso em três lugares: menu do desktop, painel mobile e —
 * desde que a busca deixou de abrir em branco — dentro do modal do `wpvs`. Por
 * isso a estrutura mora aqui, sem escopo, e o bloco seguinte fica só com o
 * POSICIONAMENTO dentro do menu.
 */
.inloft-mega {
	display: grid;
	grid-template-columns: minmax(180px, 15%) 1fr;
}

/* Sem a coluna de ambientes (árvore rasa), o painel é uma coluna só. A classe
   vem do PHP em vez de um `:has()` — não depende de suporte a seletor. */
.inloft-mega--simples {
	grid-template-columns: 1fr;
}

.inloft-header__menu .inloft-mega {
	left: 0;
	right: 0;
	/* Alinha o conteúdo à mesma coluna do menu, mesmo o painel indo de ponta a
	   ponta. */
	padding-inline: max(24px, calc((100% - var(--ihf-max)) / 2 + 24px));
}

.inloft-mega__ambientes {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 26px 18px 26px 0;
	border-right: 1px solid rgba(191, 187, 155, .55);
}

.inloft-mega__ambiente {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 9px 14px;
	background: none;
	border: 0;
	font-family: var(--ihf-body);
	font-size: 1rem;
	color: var(--ihf-verde);
	text-align: left;
	cursor: pointer;
	transition: color .16s ease, background-color .16s ease;
}

.inloft-mega__ambiente:hover,
.inloft-mega__ambiente:focus-visible {
	background: rgba(191, 187, 155, .18);
}

/*
 * Raiz sem filhos: é um <a>, e `.inloft-header__menu a` (0,2,0) venceria o
 * padding de `.inloft-mega__ambiente` (0,1,0).
 *
 * A solução NÃO é escopar no menu — o painel também vive no modal da busca, e
 * lá a regra escopada não valeria. Repetindo a classe do bloco chegamos a
 * (0,2,0): empata com o seletor do menu e vence por vir depois no arquivo, sem
 * depender do contexto. Mesmo truque nos dois seletores abaixo.
 */
.inloft-mega .inloft-mega__ambiente--link {
	padding: 9px 14px;
	text-decoration: none;
	font-size: 1rem;
}

.inloft-mega__ambiente[aria-selected="true"] {
	color: var(--ihf-terracota);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.inloft-mega__painel {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 26px 8px 26px 34px;
}

.inloft-mega__painel[hidden] {
	display: none;
}

.inloft-mega__colunas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px 28px;
	align-items: start;
}

/*
 * Cor declarada no elemento, nunca herdada: o Kadence declara cor nos próprios
 * h1–h6 e uma declaração no elemento vence a herança.
 */
.inloft-mega__titulo {
	margin: 0 0 12px;
	font-family: var(--ihf-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ihf-verde);
}

.inloft-mega__titulo a {
	padding: 0;
	color: var(--ihf-verde);
	text-decoration: none;
}

.inloft-mega__titulo a:hover,
.inloft-mega__titulo a:focus {
	color: var(--ihf-terracota);
}

.inloft-mega__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.inloft-mega .inloft-mega__lista a {
	display: block;
	padding: 4px 0;
	font-family: var(--ihf-body);
	font-size: .9375rem;
	line-height: 1.35;
	color: var(--ihf-verde);
	white-space: normal;
}

.inloft-mega .inloft-mega__lista a:hover,
.inloft-mega .inloft-mega__lista a:focus {
	color: var(--ihf-terracota);
}

.inloft-mega .inloft-mega__ver-todos {
	align-self: flex-start;
	padding: 0;
	font-family: var(--ihf-display);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--ihf-verde);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.inloft-mega .inloft-mega__ver-todos:hover,
.inloft-mega .inloft-mega__ver-todos:focus {
	color: var(--ihf-terracota);
}

/* ── O mesmo painel, dentro do modal da busca ─────────────────────────────── */

/*
 * Aqui ele não flutua nem precisa de moldura: o painel do modal já é a moldura,
 * e o wrapper `.wpvs-modal__browse` (do plugin) já dá o divisor e o respiro.
 * Só desfazemos o que era do menu.
 */
.wpvs-modal .inloft-mega {
	position: static;
	opacity: 1;
	visibility: visible;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/*
 * Os seletores abaixo repetem `.wpvs-modal` de propósito.
 *
 * O `search.css` traz um reset `.wpvs, .wpvs *` que zera `margin` e `padding`
 * de TODOS os descendentes — o painel injetado incluído. Ele tem a mesma
 * especificidade (0,1,0) das regras do componente, então hoje quem decide é a
 * ordem de carga: `header-footer.css` entra depois e ganha. Isso é frágil.
 * Com `.wpvs-modal` na frente chegamos a (0,2,0) e o layout para de depender
 * dessa ordem.
 */
.wpvs-modal .inloft-mega__ambientes {
	padding: 0 18px 0 0;
}

.wpvs-modal .inloft-mega__painel {
	padding: 0 0 0 34px;
}

.wpvs-modal .inloft-mega__ambiente {
	padding: 9px 14px;
}

.wpvs-modal .inloft-mega__titulo {
	margin: 0 0 12px;
}

/* Celular: a coluna de ambientes empilha em vez de espremer as categorias. */
@media (max-width: 700px) {
	.wpvs-modal .inloft-mega {
		grid-template-columns: 1fr;
	}

	.wpvs-modal .inloft-mega__ambientes {
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0 0 12px;
		border-right: 0;
		border-bottom: 1px solid rgba(191, 187, 155, .55);
	}

	.wpvs-modal .inloft-mega__painel {
		padding: 14px 0 0;
	}
}

/* ── Hambúrguer + painel mobile ───────────────────────────────────────────── */

.inloft-header__hamburguer {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.inloft-header__hamburguer span {
	display: block;
	width: 22px;
	height: 2px;
	margin: 0 auto;
	background: var(--ihf-verde);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.inloft-header__hamburguer[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.inloft-header__hamburguer[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.inloft-header__hamburguer[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/*
 * O painel rola por dentro, em vez de esticar o cabeçalho.
 *
 * O cabeçalho é `position: sticky; top: 0`. Com o mega-menu de Produtos aberto ele passava de
 * 3.600px numa tela de 844px — e sticky mais alto que a janela fica preso no topo: rolar a página
 * não revelava o resto do menu (medido: o `top` do cabeçalho seguia 0 depois de 1.500px de
 * rolagem). O teto vem de `--ihf-painel-max`, que o `header.js` calcula ao abrir como
 * "tela menos a barra de cima"; os 70dvh são a rede para quando o JS não roda.
 */
.inloft-header__mobile {
	border-top: 1px solid rgba(191, 187, 155, .35);
	background: var(--ihf-offwhite);
	max-height: var(--ihf-painel-max, 70dvh);
	overflow-y: auto;
	/* A rolagem para no fim do painel em vez de empurrar a página atrás. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.inloft-header__menu-mobile {
	list-style: none;
	margin: 0;
	padding: 8px 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.inloft-header__menu-mobile a {
	display: block;
	padding: 13px 0;
	font-size: 1.0625rem;
	color: var(--ihf-verde);
	text-decoration: none;
	border-bottom: 1px solid rgba(191, 187, 155, .3);
}

.inloft-header__menu-mobile a:hover,
.inloft-header__menu-mobile a:focus {
	color: var(--ihf-terracota);
}

/*
 * Links pessoais do painel mobile. "Favoritos" sai da barra abaixo de 768px e "Meus Pedidos"
 * já era escondido abaixo de 900px sem alternativa nenhuma — os dois só existem no mobile aqui.
 */
.inloft-header__mobile-conta {
	list-style: none;
	margin: 0;
	padding: 0 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-top: 1px solid rgba(191, 187, 155, .35);
}

.inloft-header__mobile-conta a {
	display: block;
	padding: 13px 0;
	font-size: 1.0625rem;
	color: var(--ihf-verde);
	text-decoration: none;
	border-bottom: 1px solid rgba(191, 187, 155, .3);
}

.inloft-header__mobile-conta li:last-child a {
	border-bottom: 0;
}

.inloft-header__mobile-conta a:hover,
.inloft-header__mobile-conta a:focus {
	color: var(--ihf-terracota);
}

/* ── Submenu mobile: acordeão ─────────────────────────────────────────────── */

/*
 * O item com filhos vira linha com link + botão de expandir. O link continua levando à página do
 * pai; quem abre o submenu é o botão (montado por assets/js/header.js).
 */
.inloft-header__menu-mobile .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.inloft-header__menu-mobile .menu-item-has-children > a {
	flex: 1;
	border-bottom: 0;
}

.inloft-header__toggle-sub {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	position: relative;
}

/* Seta em CSS: sem dependência de ícone, e gira ao abrir. */
.inloft-header__toggle-sub::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	margin: -6px 0 0 -5px;
	border-right: 2px solid var(--ihf-verde);
	border-bottom: 2px solid var(--ihf-verde);
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.inloft-header__toggle-sub[aria-expanded="true"]::before {
	transform: rotate(-135deg);
	margin-top: -2px;
}

.inloft-header__menu-mobile .menu-item-has-children > .sub-menu {
	flex: 1 0 100%;
}

.inloft-header__menu-mobile .sub-menu {
	list-style: none;
	margin: 0;
	padding-left: 16px;
	border-bottom: 1px solid rgba(191, 187, 155, .3);
}

.inloft-header__menu-mobile .sub-menu a {
	font-size: 1rem;
	color: rgba(34, 56, 41, .82);
}

/*
 * Mega-menu dentro do painel mobile.
 *
 * Aqui o painel não flutua: ele é só mais um bloco recolhível do acordeão, empilhado. Todas as
 * regras de posicionamento e de grade do desktop são desfeitas — senão o `position: absolute`
 * herdado tiraria o painel do fluxo e ele sumiria atrás do conteúdo.
 */
.inloft-header__menu-mobile .menu-item-has-children > .inloft-mega {
	flex: 1 0 100%;
}

.inloft-header__menu-mobile .inloft-mega {
	position: static;
	display: block;
	opacity: 1;
	visibility: visible;
	border: 0;
	border-bottom: 1px solid rgba(191, 187, 155, .3);
	box-shadow: none;
	padding-inline: 16px 0;
}

/*
 * O acordeão recolhe pelo atributo `hidden`, e a regra de classe acima venceria
 * o `display:none` que o navegador dá a `[hidden]` — o painel ficaria sempre
 * aberto. Mesma armadilha já documentada no README.
 */
.inloft-header__menu-mobile .inloft-mega[hidden] {
	display: none;
}

.inloft-header__menu-mobile .inloft-mega__ambientes {
	padding: 6px 0 10px;
	border-right: 0;
	border-bottom: 1px solid rgba(191, 187, 155, .3);
}

.inloft-header__menu-mobile .inloft-mega__ambiente {
	padding: 10px 4px;
}

.inloft-header__menu-mobile .inloft-mega__painel {
	padding: 12px 0 16px;
}

.inloft-header__menu-mobile .inloft-mega__colunas {
	grid-template-columns: 1fr;
	gap: 18px;
}

@media (prefers-reduced-motion: reduce) {
	.inloft-header__toggle-sub::before {
		transition: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   RODAPÉ
   ══════════════════════════════════════════════════════════════════════════ */

.inloft-footer {
	background: var(--ihf-offwhite);
	color: var(--ihf-verde);
	border-top: 1px solid rgba(191, 187, 155, .45);
}

.inloft-footer__interno {
	max-width: var(--ihf-max);
	margin: 0 auto;
	padding: clamp(36px, 5vw, 60px) 24px;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 48px);
}

.inloft-footer__logo {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
}

.inloft-footer__logo img {
	display: block;
	max-width: 220px;
	height: auto;
}

.inloft-footer__logo-texto {
	display: block;
	font-family: var(--ihf-display);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ihf-verde);
	line-height: 1.2;
}

.inloft-footer__logo-texto small {
	display: block;
	margin-top: 6px;
	font-family: var(--ihf-body);
	font-size: .6875rem;
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: none;
	color: rgba(34, 56, 41, .72);
	max-width: 22ch;
}

.inloft-footer__sociais {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	gap: 10px;
}

.inloft-footer__sociais a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 0;
	background: var(--ihf-verde);
	color: var(--ihf-creme);
	text-decoration: none;
	transition: background-color .18s ease;
}

.inloft-footer__sociais a:hover,
.inloft-footer__sociais a:focus {
	background: var(--ihf-terracota);
	color: var(--ihf-creme);
}

/* Briefing: títulos do rodapé em Poppins Regular. */
.inloft-footer__titulo {
	font-family: var(--ihf-display);
	font-size: .875rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 0 0 14px;
	color: var(--ihf-verde);
}

.inloft-footer__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.inloft-footer__lista a {
	font-size: .9375rem;
	line-height: 1.5;
	color: rgba(34, 56, 41, .82);
	text-decoration: none;
	transition: color .18s ease;
}

.inloft-footer__lista a:hover,
.inloft-footer__lista a:focus {
	color: var(--ihf-terracota);
}

/* Item da lista de reserva cujo destino ainda não existe: fica como texto, não como link
   quebrado. Some sozinho quando a página for criada. */
.inloft-menu__sem-destino {
	font-size: .9375rem;
	line-height: 1.5;
	color: rgba(34, 56, 41, .72);
	cursor: default;
}

.inloft-footer__horario {
	font-size: .9375rem;
	line-height: 1.7;
	margin: 0;
	color: rgba(34, 56, 41, .82);
}

.inloft-footer__base {
	border-top: 1px solid rgba(191, 187, 155, .4);
}

/*
 * Briefing ("DIMINUIR ASSIM!"): barra fina, numa linha só — SSL à esquerda, bandeiras e
 * copyright à direita. Eram duas linhas empilhadas, ~84px; assim fica ~44px. No celular empilha.
 */
.inloft-footer__base-interno {
	max-width: var(--ihf-max);
	margin: 0 auto;
	padding: 12px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	font-size: .75rem;
	color: rgba(34, 56, 41, .72);
}

.inloft-footer__base-interno p {
	margin: 0;
}

.inloft-footer__base-interno .inloft-footer__ssl {
	margin-right: auto;
}

.inloft-footer__bandeiras {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.inloft-footer__bandeiras img {
	display: block;
	width: auto;
	height: 22px;
}

@media (max-width: 600px) {
	.inloft-footer__base-interno {
		flex-direction: column;
		align-items: flex-start;
	}

	.inloft-footer__base-interno .inloft-footer__ssl {
		margin-right: 0;
	}
}

/* ── Foco visível ─────────────────────────────────────────────────────────── */

.inloft-header a:focus-visible,
.inloft-header button:focus-visible,
.inloft-footer a:focus-visible {
	outline: 2px solid var(--ihf-terracota);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVO
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
	.inloft-footer__interno {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	/* Abaixo deste ponto a navegação horizontal vira painel mobile. */
	.inloft-header__nav {
		display: none;
	}

	.inloft-header__hamburguer {
		display: flex;
	}

	.inloft-header__pedidos {
		display: none;
	}
}

/*
 * 768px é o breakpoint do PRÓPRIO wpvs (assets/css/search.css): abaixo dele a barra de busca
 * já vira um círculo de 44px. Antes, o cabeçalho a mandava ocupar uma linha inteira a partir
 * de 900px (`flex: 1 0 100%`) — por decreto, não por falta de espaço — e o resultado era um
 * botão de 44px sozinho numa segunda linha. Dois efeitos colaterais que sumiram junto:
 * na faixa 769–900px a pílula de 420px também ficava sozinha numa linha inteira, e o
 * cabeçalho tinha 130px de altura onde bastam ~70px.
 *
 * O coração (Favoritos) sai da barra aqui e reaparece no painel do hambúrguer: são os ~48px
 * que faltavam para logo + lupa + ícones caberem numa linha só a 360px.
 */
@media (max-width: 768px) {
	.inloft-header__topo {
		padding-left: 16px;
		padding-right: 16px;
	}

	/*
	 * `margin-left: auto` no lugar do `flex: 1 1 auto` da regra base: a busca deixa de esticar
	 * (senão a lupa de 44px ficaria centrada num vão enorme) mas continua empurrando tudo o que
	 * vem depois dela para a direita. Sem isso, logo, lupa e ícones se amontoam à esquerda e
	 * sobram ~190px vazios na borda direita. Resultado: logo à esquerda, lupa colada no grupo
	 * de ícones à direita.
	 */
	.inloft-header__busca {
		flex: 0 0 auto;
		margin-left: auto;
	}

	.inloft-header__acoes .inloft-header__icone--favoritos {
		display: none;
	}

	/* Rede de segurança abaixo de ~352px: o logo encolhe em vez de quebrar a linha. */
	.inloft-header__logo {
		flex: 0 1 auto;
		min-width: 0;
	}

	.inloft-header__logo img,
	.inloft-header__logo .custom-logo {
		max-width: 100%;
	}
}

@media (max-width: 560px) {
	.inloft-footer__interno {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.inloft-header__hamburguer span,
	.inloft-header__menu .sub-menu,
	.inloft-header__icone,
	.inloft-footer__sociais a {
		transition: none;
	}
}

/* ── Botão flutuante de WhatsApp ──────────────────────────────────────────────
 *
 * `references/components.md`: círculo verde-mid #3A7D4E, ícone branco, sombra suave. O PDF pede o
 * botão no canto inferior DIREITO e só em quatro telas; as duas divergências são deliberadas.
 *
 * POR QUE ESQUERDA. A direita já é disputada por três flutuantes, e este botão perde para todos
 * no empilhamento: a cesta do carrinho (`z-index: 9999997`), o botão de vídeo do
 * `story-video-popup` (`999990`) e a faixa "Ofertas Disponíveis". Enquanto ele morou lá, o CSS
 * precisava adivinhar a altura dos vizinhos — `bottom: 88px` como padrão para passar por cima da
 * cesta, e uma regra `:has(#svp-float-btn)` que o empurrava para 204px quando o botão de vídeo
 * existia no DOM. Era essa regra que o fazia parecer "no meio da tela", e ela disparava até com o
 * vídeo invisível, porque `:has()` casa por presença, não por visibilidade.
 *
 * Pior: os 88px eram 22 + 50 + 16 calculados sobre uma cesta cujo tamanho e posição vêm de
 * options do banco (side-cart-woocommerce/templates/global/inline-style.php) — mudar a cesta no
 * wp-admin desalinhava o botão sem nada avisar. Na esquerda, nada disso existe: o canto está
 * vazio em todas as páginas, e o afastamento volta a ser o do canto mesmo.
 *
 * ESCALA. Largura, altura e ícone saem de uma rampa contínua, sem degrau de breakpoint: 56px a
 * partir de 1200px de tela, descendo até 44px a 360px. O piso é 44px porque é o alvo de toque
 * mínimo recomendado pela WCAG.
 *
 * z-index 9990 é escolhido dentro da escala documentada no topo deste arquivo: acima do cabeçalho
 * (500) e do voltar-ao-topo do Kadence (1000), e ABAIXO da faixa de modais e gavetas (99991+).
 * Um botão de contato nunca pode cobrir a gaveta do carrinho nem o painel da busca.
 */
.inloft-whatsapp {
	position: fixed;
	left: clamp(16px, 2vw, 24px);
	bottom: clamp(16px, 2vw, 24px);
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(44px, 38.9px + 1.43vw, 56px);
	height: clamp(44px, 38.9px + 1.43vw, 56px);
	border-radius: 50%;
	background: var(--ihf-verde-mid, #3A7D4E);
	color: #fff;
	box-shadow: 0 6px 20px rgba(34, 56, 41, .28);
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.inloft-whatsapp:hover,
.inloft-whatsapp:focus-visible {
	background: #2F6540;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(34, 56, 41, .34);
}

/*
 * O anel de foco precisa vencer o `hide-focus-outline` do Kadence, que apaga o foco do site
 * inteiro com `:where(html:not(.no-js)) .hide-focus-outline *:focus { outline: 0 }`. O `:where()`
 * não conta especificidade, então aquela regra vale (0,2,0) — exatamente o mesmo peso de
 * `.inloft-whatsapp:focus-visible`. Empate se decide por ordem de carregamento, e depender disso é
 * frágil: a segunda regra sobe para (0,3,0) e resolve sem `!important`.
 *
 * Para quem navega por teclado, o anel é o único indicador de onde está.
 */
.inloft-whatsapp:focus-visible,
.hide-focus-outline .inloft-whatsapp:focus-visible {
	outline: 3px solid var(--ihf-terracota, #904B2C);
	outline-offset: 3px;
}

/* Metade do botão, para o ícone acompanhar a rampa sozinho: 28px quando ele tem 56, 22px em 44. */
.inloft-whatsapp__icone {
	display: block;
	width: 50%;
	height: 50%;
}

@media (prefers-reduced-motion: reduce) {
	.inloft-whatsapp {
		transition: none;
	}

	.inloft-whatsapp:hover,
	.inloft-whatsapp:focus-visible {
		transform: none;
	}
}