/* Menu (Menu simples + Mega Menu) — cores/fontes controláveis pelo widget
   Elementor; aqui só layout e comportamento. Breakpoint mobile: 1024px.

   !important no burger/trigger de propósito (mesmo motivo documentado em
   search.css e nos outros módulos): "[type=button]" do reset global do
   tema/WooCommerce tem a MESMA especificidade de uma classe, então sem
   !important o resultado depende só da ordem de carregamento — foi isso
   que deixava o toggle mobile com a borda rosa crua deles e "engolia" as
   3 barrinhas do ícone (cor virava a cor de texto deles também). */

/* O header sticky do Elementor (classe .elementor-sticky, confirmada via
   DevTools) tem um ancestral com transform, o que faz ele criar seu
   PRÓPRIO stacking context. Isso tem duas consequências, e essa regra
   resolve a segunda:

   1) position:fixed de qualquer coisa lá dentro (mega menu, painel da
      busca, off-canvas) passa a ser calculado relativo à CAIXA desse
      ancestral, não à janela — resolvido em JS (offsetParent) em cada
      lugar que precisa.

   2) Sem um z-index explícito, esse stacking context inteiro (o header
      e TUDO dentro dele, não importa o z-index interno) só ganha de
      quem vem depois dele no DOM se o que vem depois também não tiver
      seu próprio contexto de empilhamento "mais alto". Muita seção do
      Elementor usa position:relative por padrão — o suficiente pra
      "furar" na frente do header. Foi exatamente isso que fazia o
      dropdown da Busca (e o Mega Menu) aparecerem ATRÁS do conteúdo da
      página no mobile, mesmo com z-index alto neles. Só dá pra resolver
      subindo o z-index do PRÓPRIO header (o container do stacking
      context), não dos filhos — filho nenhum escapa do teto do pai. */
.elementor-sticky {
	z-index: 999999 !important;
}

/* CORREÇÃO (confirmada ao vivo em produção, DevTools, com o menu mobile
   aberto): a regra acima só ajuda quando o Elementor JÁ colou a classe
   ".elementor-sticky" no header — e ele só faz isso depois que a página é
   rolada e o header "gruda" no topo. No TOPO da página (antes de rolar),
   essa classe ainda não existe, e o header cai de volta pro z-index que o
   próprio Elementor configura pro container dele (nesse projeto: 99) — que
   perde fácil pro z-index:500 do .loja-cipo-nav-overlay (a "máscara"
   escurecida por trás do off-canvas). Resultado batido com o relato: abrir
   o menu mobile sem ter rolado a página antes faz o header inteiro
   (incluindo o painel do menu já aberto) pintar POR BAIXO da máscara —
   fica com a aparência de "esmaecido"/atrás dela, mesmo o menu tendo
   z-index alto (o teto de quem contém sempre vence, ver comentário acima).

   Correção: eleva o <header> que contém o nosso menu incondicionalmente,
   sem depender da classe ".elementor-sticky" ter sido adicionada ou não —
   cobre tanto "no topo da página" quanto "já rolou". `:has()` escopa isso
   só ao header que realmente tem nosso menu dentro, sem tocar em outros
   containers ".e-con"/".e-flex" do Elementor espalhados pela página. */
header:has(.loja-cipo-nav) {
	position: relative;
	z-index: 1000002 !important;
}

.loja-cipo-nav {
	position: relative;
}

/* 28px pra bater com o tamanho dos outros ícones do header (lupa da Busca,
   carrinho) — antes era 30x24 (assimétrico), o que fazia ele parecer maior
   e desalinhado perto dos outros. align-self:center defende contra o
   header não centralizar os itens verticalmente por padrão (o burger tem
   altura própria fixa, não esticável, então sem isso ele seguia o topo/
   base da linha em vez do centro); line-height:0 tira o respiro invisível
   que um <button> herda por padrão (mesmo bug clássico de ícone "flutuando"
   torto dentro do botão). As duas transformações do "X" (abaixo) foram
   recalculadas pra essa nova altura — ver comentário lá. */
.loja-cipo-nav-burger.loja-cipo-nav-burger {
	display: none !important;
	align-self: center !important;
	position: relative;
	top: -6px;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	cursor: pointer;
	width: 28px;
	height: 20px;
	flex-shrink: 0;
	flex-direction: column;
	justify-content: space-between;
	color: #222;
	line-height: 0;
}

.loja-cipo-nav-burger span {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

/* 9px (não mais 13px): com justify-content:space-between e 3 barras de 2px
   numa caixa de 20px de altura (mudou de novo, era 28px), a barra do meio
   fica exatamente em y=9 — esse é o valor que as barras 1 e 3 precisam
   andar pra se encontrarem ali e formarem o "X" certinho. Sempre que a
   altura dessa caixa mudar, esse número precisa ser recalculado junto
   (fórmula: (altura - 6) / 2 - 1). */
.loja-cipo-nav.is-open .loja-cipo-nav-burger span:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}

.loja-cipo-nav.is-open .loja-cipo-nav-burger span:nth-child(2) {
	opacity: 0;
}

.loja-cipo-nav.is-open .loja-cipo-nav-burger span:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

.loja-cipo-nav-list {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent !important;
}

.loja-cipo-nav-item {
	position: relative;
}

/* Escondidos por padrão (desktop) — só existem no off-canvas mobile. Sem
   esse "display:none" de base, eles apareciam soltos no meio da lista
   horizontal do desktop (o botão de fechar virava um "X" extra ao lado de
   "Produtos"/"Nossa História", e os links de Conta/Favoritos apareciam
   duplicando os ícones que já existem no header). */
.loja-cipo-nav-close-item,
.loja-cipo-nav-utility-item {
	display: none;
}

.loja-cipo-nav-link.loja-cipo-nav-link,
.loja-cipo-nav-trigger.loja-cipo-nav-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	color: #222;
	text-decoration: none;
	padding: 8px 0 !important;
	transition: color 0.15s ease;
}

.loja-cipo-nav-link:hover,
.loja-cipo-nav-trigger:hover {
	color: #8bc34a;
}

.loja-cipo-nav-item.is-featured .loja-cipo-nav-link,
.loja-cipo-nav-item.is-featured .loja-cipo-nav-trigger {
	color: #c1440e;
	font-weight: 600;
}

.loja-cipo-nav-chevron {
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.loja-cipo-nav-trigger[aria-expanded="true"] .loja-cipo-nav-chevron {
	transform: rotate(180deg);
}

/* Painel do mega menu — full width no desktop, com o CONTEÚDO
   limitado/centralizado por dentro (.loja-cipo-mega-inner).

   Histórico rápido (pra quem for mexer aqui depois): já tentamos (1)
   position:fixed com "top" calculado a partir do <nav> inteiro — errado,
   sobrava vão porque o <nav> não representa a altura real do header; (2)
   position:absolute ancorado no <li> com o truque "left:50vw + width:100vw
   + translateX(-50%)" — errado também: "left:50vw" ainda é somado à
   posição do containing block (o próprio <li>, que fica lá pela esquerda
   do header), então o painel saía deslocado pra direita, exatamente na
   distância de onde o item estava.

   A solução final: volta pro position:fixed (que naturalmente cobre a
   largura toda via left:0/right:0, sem nenhuma conta de vw) + "top"
   calculado em JS (positionMegaPanel() em nav.js) — mas agora descontando
   o offsetParent do painel, não usando a coordenada da tela direto. Isso
   importa porque o header sticky do Elementor tem um ancestral com
   transform, o que faz esse ancestral virar o "containing block" do
   nosso position:fixed (em vez da janela) — se a gente escrever um valor
   de "top" relativo à JANELA nessa situação, o navegador vai interpretar
   como relativo à CAIXA DESSE ANCESTRAL, e como as duas coisas quase
   nunca coincidem, sobra (ou falta) exatamente essa diferença. */

.loja-cipo-mega-panel {
	position: fixed;
	left: 0;
	right: 0;
	top: 0; /* sobrescrito via JS (positionMegaPanel) antes de cada abertura */
	background: transparent;
	padding: 32px 20px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 100;
}

.loja-cipo-nav-item.has-mega:hover > .loja-cipo-mega-panel,
.loja-cipo-nav-item.has-mega:focus-within > .loja-cipo-mega-panel,
.loja-cipo-nav-item.has-mega.is-open > .loja-cipo-mega-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.loja-cipo-mega-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px;
}

.loja-cipo-mega-blocks {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	flex: 1;
	min-width: 220px;
}

.loja-cipo-mega-block {
	min-width: 140px;
}

.loja-cipo-mega-block-title {
	display: block;
	font-weight: 700;
	color: #c1440e;
	margin-bottom: 12px;
	font-size: 15px;
}

.loja-cipo-mega-block ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.loja-cipo-mega-block a {
	color: #333;
	text-decoration: none;
	font-size: 14px;
}

.loja-cipo-mega-block a:hover {
	color: #8bc34a;
}

.loja-cipo-mega-banners {
	display: flex;
	gap: 16px;
	flex-shrink: 0;
}

.loja-cipo-mega-banner {
	position: relative;
	display: block;
	width: 220px;
	height: 300px;
	border-radius: 8px;
	background-color: #eee;
	overflow: hidden;
	text-decoration: none;
}

/* Camada da imagem, separada do link — é ela que dá o zoom no hover (ver
   .loja-cipo-mega-banner:hover abaixo). Ficando numa camada própria, o
   zoom não empurra/distorce o texto por cima nem escapa do arredondado,
   já que quem corta (overflow:hidden) é o .loja-cipo-mega-banner (pai). */
.loja-cipo-mega-banner-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.45s ease;
}

.loja-cipo-mega-banner:hover .loja-cipo-mega-banner-image {
	transform: scale(1.06);
}

.loja-cipo-mega-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 60%);
}

.loja-cipo-mega-banner-caption {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.loja-cipo-mega-banner-title {
	color: #fff;
	font-weight: 600;
	font-style: italic;
	font-size: 17px;
	line-height: 1.25;
	font-family: Georgia, "Times New Roman", serif;
}

.loja-cipo-mega-banner-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.loja-cipo-mega-banner-cta svg {
	flex-shrink: 0;
}

/* Versão mobile do mega menu (ver render_mobile_block() em
   Nav_Renderer.php) — markup TOTALMENTE separado do .loja-cipo-mega-panel
   acima (mesmos dados, blocos/itens, HTML diferente). Escondida por
   padrão (desktop); só aparece dentro do @media mobile. Duas tentativas
   anteriores de "responsivar" o painel de vitrine do desktop (banners,
   tipografia grande/itálica) pro celular deram texto cortado e caixas
   vazias — mais simples e confiável ter dois HTMLs dedicados. */
.loja-cipo-mobile-mega {
	display: none;
}

/* Overlay do off-canvas mobile (criado via JS, inserido como primeiro filho
   do <body> — ver comentário em getOverlay()/nav.js).

   Motivo de ficar ABAIXO do header agora (mudou de novo, ler com atenção):
   a seção do header no Elementor tem seu próprio z-index (a linha toda em
   999, o container do menu dentro dela em 9 — configurado direto no
   Elementor). Isso faz esse container criar seu PRÓPRIO stacking context:
   uma vez que ele tem z-index explícito, TUDO dentro dele (nav, off-canvas,
   z-index:1000001 incluso) fica travado competindo só como "nível 9" contra
   coisas de fora — não importa o quão alto a gente suba o z-index do
   off-canvas por dentro, ele não escapa do teto do próprio container (mesma
   regra do .elementor-sticky, documentada no topo do arquivo).

   Então: se o overlay (nível 1000000) tentar ficar ACIMA do header inteiro,
   ele também cobre o off-canvas que está preso lá dentro — foi exatamente
   isso que quebrou depois da mudança no Elementor. Solução: o overlay
   simplesmente não pode competir de igual pra igual com o header. Ele fica
   BAIXO (nível 500 — acima do conteúdo normal da página, que não define
   z-index, mas abaixo dos 999 do header), pra deixar o bloco do header
   inteiro (com o off-canvas dentro) sempre por cima, sem precisar disputar
   número com ele.

   Efeito colateral pequeno: na faixa de 25vw que sobra ao lado do painel de
   75vw, os ícones do header (lupa, conta) não ficam mais escurecidos pelo
   overlay — mas o menu abre e fecha certo, que é o que importa agora. */

.loja-cipo-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s;
	z-index: 500;
}

.loja-cipo-nav-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

body.loja-cipo-nav-lock {
	overflow: hidden;
}

/* Mobile — hambúrguer + off-canvas */

@media (max-width: 1024px) {
	.loja-cipo-nav-burger.loja-cipo-nav-burger {
		display: inline-flex !important;
	}

	.loja-cipo-nav-list {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 75vw;
		/* Cor fixa no código — desistimos de depender do controle do
			Elementor (offcanvas_bg_color) pra essa cor base: mesmo com o
			código certo, o CSS gerado pelo Elementor fica em cache por
			página e não dava pra confiar que ia recarregar. O controle do
			widget ainda existe e ainda FUNCIONA se alguém mexer nele (tem
			!important + mais especificidade que essa regra), mas o padrão
			agora não depende de ninguém mexer em nada no Elementor. */
		background: #f3ece7 !important;
		flex-direction: column;
		align-items: stretch;
		/* !important pq o controle "Espaçamento entre itens" do Elementor
		   (nav_items_gap, pensado pro desktop) gera uma regra tipo
		   ".elementor-2931 .elementor-element-XXXX .loja-cipo-nav-list"
		   com 4 classes de especificidade — maior que a nossa aqui (1
		   classe). Sem !important, o valor configurado lá (28px, pensado
		   pra barra horizontal do desktop) vazava pro mobile também. */
		gap: 8px !important;
		padding: 54px 22px 24px;
		overflow-y: auto;
		overflow-x: hidden;
		transform: translateX(-100%);
		transition: transform 0.32s ease;
		/* Continua alto por segurança (acima de elementos internos do
		   próprio header, tipo o mega painel). A defesa real contra o
		   overlay agora é o overlay ficar em 500 (ver comentário dele) —
		   ver explicação completa lá sobre o stacking context criado pelo
		   z-index configurado no Elementor pro container do menu. */
		z-index: 1000001;
		box-shadow: none;
	}

	.loja-cipo-nav.is-open .loja-cipo-nav-list {
		transform: translateX(0);
	}

	/* Linha separadora entre os itens de topo (Produtos, Nossa História...),
	   ponta a ponta do painel (não só da largura do texto) — truque clássico
	   de "full bleed": margin negativo tira o item pra fora do padding
	   lateral do painel (22px), padding positivo de volta bota o CONTEÚDO
	   exatamente onde já estava, sobrando só a borda tocando as bordas. Usa
	   "+" (só entre itens consecutivos) de propósito — sem linha acima do
	   primeiro item nem abaixo do último (que já encosta na caixa laranja de
	   Conta/Favoritos, com fundo próprio, dispensa separador). */
	.loja-cipo-nav-item {
		margin: 0 -22px;
		padding: 0 22px;
	}

	.loja-cipo-nav-item + .loja-cipo-nav-item {
		border-top: 1px solid #ececec;
	}

	/* Botão de fechar — só existe (visualmente) no mobile; um <li> especial
	   posicionado no canto do painel (ver Nav_Renderer::render(), precisa
	   ser <li> porque é filho de um <ul>). O burger do header some coberto
	   pelo próprio painel full-screen quando aberto, então sem isso não
	   sobrava nenhum jeito óbvio de fechar. */
	.loja-cipo-nav-close-item {
		display: block;
		position: absolute;
		top: 18px;
		right: 16px;
		border-bottom: none !important;
	}

	.loja-cipo-nav-close {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 36px !important;
		height: 36px !important;
		border-radius: 50% !important;
		background: rgba(0, 0, 0, 0.06) !important;
		border: none !important;
		margin: 0 !important;
		padding: 0 !important;
		color: inherit;
		cursor: pointer;
	}

	.loja-cipo-nav-link.loja-cipo-nav-link,
	.loja-cipo-nav-trigger.loja-cipo-nav-trigger {
		width: 100%;
		justify-content: space-between;
		padding: 12px 0 !important;
		font-size: 15px;
	}

	/* Seta do item com Mega Menu (ex.: "Produtos") igual à cor do texto dos
	   outros links — !important pq o controle de cor do chevron no
	   Elementor (chevron_color) gera uma regra com 4 classes de
	   especificidade, mais que a nossa aqui. Também muda o SENTIDO: fechado
	   aponta pra direita (">", indicando "abre algo"), e só deita pra baixo
	   (apontando que o conteúdo caiu embaixo) quando o acordeão abre — troca
	   o comportamento padrão (que era setinha pra baixo virando pra cima),
	   só pro item de topo do mobile mesmo (não mexe no 2º nível dos blocos
	   nem no desktop). */
	.loja-cipo-nav-trigger .loja-cipo-nav-chevron {
		color: #222 !important;
		transform: rotate(-90deg);
	}

	.loja-cipo-nav-trigger[aria-expanded="true"] .loja-cipo-nav-chevron {
		transform: rotate(0deg);
	}

	/* Conta/Favoritos — rodapé do off-canvas (ver render_utility_links() em
	   Nav_Renderer.php). margin-top:auto no <li> empurra a caixa pro fundo
	   do painel quando sobra espaço (menu curto); com o menu longo, some o
	   "auto" e ela só fica logo depois do último item, exigindo scroll. */
	.loja-cipo-nav-utility-item {
		display: block;
	}

	.loja-cipo-nav-item + .loja-cipo-nav-utility-item {
		margin-top: auto;
	}

	/* Caixa laranja envolvendo os dois links — sem separador entre eles
	   (só espaço), pedido explícito: "não use separator". Sai da largura
	   do padding do painel (margin negativo) pra tocar as bordas. */
	.loja-cipo-nav-utility-box {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin: 16px -22px -24px;
		padding: 10px 22px calc(20px + env(safe-area-inset-bottom, 0px));
		background: #c1440e;
	}

	.loja-cipo-nav-utility-link {
		display: flex !important;
		align-items: center;
		gap: 10px;
		padding: 10px 0 !important;
		font-size: 14px;
		font-weight: 500;
		color: #fff !important;
		text-decoration: none !important;
	}

	.loja-cipo-nav-utility-link svg {
		flex-shrink: 0;
	}

	/* O painel "de vitrine" do desktop (banners com foto, tipografia
	   grande/itálica) some inteiro no mobile — quem aparece no lugar é o
	   .loja-cipo-mobile-mega logo abaixo, um HTML dedicado e mais simples
	   (ver comentário dele). Tentar só "responsivar" esse painel pro
	   celular (2 rodadas anteriores) sempre esbarrava em texto cortado ou
	   caixa vazia. */
	.loja-cipo-mega-panel {
		display: none;
	}

	.loja-cipo-mobile-mega {
		display: block;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height 0.35s ease, opacity 0.25s ease;
	}

	.loja-cipo-nav-item.has-mega.is-open .loja-cipo-mobile-mega {
		max-height: 2000px;
		opacity: 1;
	}

	/* 1º nível dentro do acordeão do item de menu: cada bloco (ex.: "Velas")
	   vira seu PRÓPRIO acordeão, igual ao padrão "Feminino > Roupas" da
	   referência — fechado por padrão, com chevron próprio. */
	.loja-cipo-mobile-mega-block {
		border-top: 1px solid #ececec;
	}

	/* !important + classe dobrada em TUDO aqui — é um <button type="button">,
	   e o reset global "[type=button]" do tema (border rosa, padding,
	   background) tem a MESMA especificidade de uma classe só (seletor de
	   atributo = 1 classe). Já vimos esse exato bug em praticamente todo
	   botão deste plugin (burger, fechar da Busca, trigger do menu
	   simples...) — dessa vez esqueci de aplicar aqui, e é exatamente o que
	   deixava "Aromas"/"Para Presentear" com a caixa rosa cortada e "Velas"
	   (o aberto) com fundo rosa sólido (provavelmente o :focus/:active do
	   próprio reset, também sem a gente sobrescrever). */
	.loja-cipo-mobile-mega-block-trigger.loja-cipo-mobile-mega-block-trigger,
	.loja-cipo-mobile-mega-block-trigger.loja-cipo-mobile-mega-block-trigger:hover,
	.loja-cipo-mobile-mega-block-trigger.loja-cipo-mobile-mega-block-trigger:focus,
	.loja-cipo-mobile-mega-block-trigger.loja-cipo-mobile-mega-block-trigger:active {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		background: none !important;
		box-shadow: none !important;
		outline: none !important;
		border: none !important;
		border-radius: 0 !important;
		cursor: pointer;
		font: inherit !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		color: #222 !important;
		text-align: left;
		padding: 12px 0 !important;
		margin: 0 !important;
	}

	.loja-cipo-mobile-mega-block-trigger .loja-cipo-nav-chevron {
		color: #999;
	}

	.loja-cipo-mobile-mega-block-trigger[aria-expanded="true"] .loja-cipo-nav-chevron {
		transform: rotate(180deg);
	}

	.loja-cipo-mobile-mega-block-items {
		list-style: none;
		margin: 0;
		padding: 0;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height 0.3s ease, opacity 0.2s ease;
	}

	.loja-cipo-mobile-mega-block.is-open .loja-cipo-mobile-mega-block-items {
		max-height: 1000px;
		opacity: 1;
	}

	/* !important na cor/sublinhado: sem isso o link herdava a cor de
	   destaque global do tema (o mesmo rosa usado em "Outlet") em vez do
	   cinza que a gente queria — mesmo bug de sempre, faltou forçar. */
	.loja-cipo-mobile-mega-block-items a {
		display: block;
		padding: 8px 0 8px 14px;
		border-bottom: 1px solid #ececec;
		color: #555 !important;
		text-decoration: none !important;
		font-size: 14px;
		white-space: normal;
		overflow-wrap: break-word;
	}

	.loja-cipo-mobile-mega-block-items li:last-child a {
		border-bottom: none;
	}
}