/* =====================================================================
   MEGA-MENU SHOW GLASS — "SHOWROOM 1990"
   Header + mega-menu premium (navy profundo + dourado da marca)
   v1.0.0

   Como funciona: este CSS estiliza CLASSES que você aplica nos
   containers/widgets do header (Elementor → aba Avançado → CSS Classes).
   Contrato de classes (ver INSTALACAO.txt):
     .sg-header   → Container da linha do header (logo|nav|ações)
     .sg-topbar   → Container da barra superior (irmã do header)
     .sg-logo     → widget Imagem do logo
     .sg-nav      → widget Menu/Mega Menu da navegação
     .sg-actions  → Container das ações (busca/conta/carrinho/CTA)
     .sg-icon     → cada ícone de ação
     .sg-cta      → botão "Solicitar Orçamento"
     .sg-mega     → Container do conteúdo de cada dropdown (o painel)
     .sg-mega-col → cada coluna de links dentro do painel
     .sg-mega-h   → título (heading) de cada coluna
     .sg-tag      → micro-etiqueta (ex.: "LED")
     .sg-mega-photo → Container da foto de obra + legenda
     .sg-mega-cap   → legenda editorial da foto
   ===================================================================== */

/* Tokens (cores, fontes, métricas) ficam em tokens.css — carregado antes deste arquivo. */

/* =====================================================================
   1) TOPBAR  (Container IRMÃO do header — NÃO sticky)
   ===================================================================== */
.sg-topbar {
	background: var(--sg-ink) !important;
	min-height: 36px;
	font-family: 'Inter', sans-serif;
	border-bottom: 1px solid rgba(159, 170, 186, 0.12);
}
.sg-topbar,
.sg-topbar * { color: var(--sg-mute); }

/* Selo "DESDE 1990" */
.sg-seal {
	display: inline-flex; align-items: center;
	font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
	color: var(--sg-gold-l) !important;
	border: 1px solid rgba(198, 160, 83, 0.55);
	border-radius: 3px; padding: 3px 8px; text-transform: uppercase;
}

/* Microlinks da direita */
.sg-micro { font-size: 11.5px; letter-spacing: 0.05em; transition: color .2s ease; }
.sg-micro:hover { color: var(--sg-ivory) !important; }

/* Rotador de mensagens da topbar (com o JS opcional) */
.sg-rotator { position: relative; display: inline-block; min-height: 1.2em; }
.sg-rotator .sg-rotitem {
	font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px;
	color: var(--sg-mute); transition: opacity .5s ease;
}
.sg-rotator .sg-rotitem:not(.is-active) { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

/* =====================================================================
   2) HEADER  (linha logo | navegação | ações)  + STICKY/SHRINK
   ===================================================================== */
.sg-header {
	/* Estado base: vidro fumê translúcido (só funciona com header sobreposto à hero).
	   Se NÃO usar overlap, troque para: background: var(--sg-ink) !important; */
	background: rgba(10, 21, 33, 0.55) !important;
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	min-height: var(--sg-h-base);
	position: relative;
	transition: background .3s ease, min-height .3s ease, box-shadow .3s ease;
	font-family: 'Inter', sans-serif;
}

/* Fio de luz LED — 1px na borda inferior, navy → dourado → navy. Persiste sempre. */
.sg-header::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: var(--sg-grad-line); opacity: .95; pointer-events: none;
}

/* Estado STICKY: o Elementor injeta .elementor-sticky--effects → vira navy SÓLIDO. */
.sg-header.elementor-sticky--effects {
	background: var(--sg-ink) !important;
	-webkit-backdrop-filter: none; backdrop-filter: none;
	min-height: var(--sg-h-stik);
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* Logo: marfim/dourado (use a VERSÃO BRANCA do logo no header escuro). */
.sg-logo img {
	max-height: 52px; width: auto; transition: max-height .3s ease;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); /* legibilidade sobre o translúcido */
}
.sg-header.elementor-sticky--effects .sg-logo img { max-height: 40px; }

/* =====================================================================
   3) NAVEGAÇÃO  (cobre Nav Menu clássico e Mega Menu novo do Elementor)
   ===================================================================== */
.sg-nav a,
.sg-nav .elementor-item,
.sg-nav .e-n-menu-title-text {
	color: var(--sg-ivory) !important;
	font-size: 15px; font-weight: 500; letter-spacing: 0.04em;
	position: relative; transition: color .2s ease;
}

/* Underline dourado crescendo da esquerda (GPU, sem reflow) */
.sg-nav .elementor-item::after,
.sg-nav .menu-item > a::after {
	content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%;
	background: var(--sg-gold); transform: scaleX(0); transform-origin: left;
	transition: transform .22s ease;
}
.sg-nav .elementor-item:hover::after,
.sg-nav .menu-item > a:hover::after,
.sg-nav .menu-item > a:focus-visible::after,
.sg-nav .elementor-item-active::after,
.sg-nav .current-menu-item > a::after { transform: scaleX(1); }

.sg-nav a:hover,
.sg-nav .elementor-item:hover,
.sg-nav .e-n-menu-title-text:hover,
.sg-nav .elementor-item-active { color: var(--sg-gold) !important; }

/* Caret/seta dos itens com submenu */
.sg-nav .elementor-item-has-children > a::before,
.sg-nav .sub-arrow { color: var(--sg-gold); }

/* =====================================================================
   4) AÇÕES  (busca · conta · carrinho · divisor · CTA)
   ===================================================================== */
.sg-actions { display: flex; align-items: center; gap: 20px; }

.sg-icon, .sg-icon i, .sg-icon svg {
	color: var(--sg-ivory) !important; fill: var(--sg-ivory) !important;
	font-size: 19px; transition: color .2s ease, fill .2s ease;
}
.sg-icon:hover, .sg-icon:hover i, .sg-icon:hover svg {
	color: var(--sg-gold) !important; fill: var(--sg-gold) !important;
}

/* Badge do carrinho — contador de itens (badge dourado, número azul escuro), discreto */
.sg-icon { position: relative; }
.sg-cart-count {
	position: absolute; top: -7px; right: -9px;
	min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
	background: var(--sg-gold); color: var(--sg-cart-num);          /* dourado + número azul escuro */
	font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; line-height: 16px;
	text-align: center; border-radius: 10px; font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 2px var(--sg-ink); pointer-events: none;
}
/* idem se um dia usar o widget Menu Cart do WooCommerce/Elementor */
.sg-actions .elementor-menu-cart__toggle .elementor-button-icon-qty,
.sg-actions .e-cart-count {
	background: var(--sg-gold) !important; color: var(--sg-cart-num) !important;
	font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ----------  CTA "Solicitar Orçamento" — dourado metálico + sweep + hover/click  ---------- */
.sg-cta .elementor-button,
a.sg-cta, .sg-cta {
	background: var(--sg-grad-gold) !important;
	color: var(--sg-gold-ink) !important;
	border: none !important; border-radius: 6px !important;
	font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.02em;
}
.sg-cta .elementor-button, a.sg-cta {
	min-height: 40px; line-height: 1;                 /* um pouquinho mais baixo + alinhado */
	display: inline-flex !important; align-items: center; justify-content: center;
	position: relative; overflow: hidden;
	transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.sg-cta { overflow: visible !important; }             /* deixa a sombra do hover aparecer */
.sg-cta .elementor-button:hover, a.sg-cta:hover { color: var(--sg-gold-ink) !important; }

/* Reflexo branco diagonal deslizando no hover (no próprio botão) */
.sg-cta .elementor-button::before, a.sg-cta::before {
	content: ""; position: absolute; top: 0; left: 0; width: 60%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
	transform: translateX(-150%) skewX(-18deg);
	transition: transform .6s ease; pointer-events: none;
}
.sg-cta:hover .elementor-button::before, a.sg-cta:hover::before { transform: translateX(220%) skewX(-18deg); }

/* on-hover: leve elevação + brilho dourado */
.sg-cta:hover .elementor-button, a.sg-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 7px 18px rgba(198, 160, 83, 0.40);
	filter: brightness(1.05);
}
/* on-click: efeito de pressionar */
.sg-cta:active .elementor-button, a.sg-cta:active {
	transform: translateY(0) scale(0.97);
	box-shadow: 0 2px 8px rgba(198, 160, 83, 0.30);
	filter: brightness(0.98);
}

/* =====================================================================
   5) MEGA-MENU  (o painel de conteúdo de cada dropdown)
   ===================================================================== */
.sg-mega {
	background: var(--sg-ink-2) !important;
	border-top: 1px solid rgba(198, 160, 83, 0.30);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
	padding: 22px 26px 24px !important;
}

/* Colunas */
.sg-mega-col { padding: 0 4px; }
.sg-mega-h {
	font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-gold) !important;
	margin: 0 0 8px; padding-bottom: 6px;
	border-bottom: 1px solid rgba(198, 160, 83, 0.25);
	display: flex; align-items: center; gap: 6px;
}

/* Micro-etiqueta (ex.: "LED") */
.sg-tag {
	font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
	color: var(--sg-gold-ink); background: var(--sg-gold);
	border-radius: 3px; padding: 1px 5px;
}

/* Links das colunas */
.sg-mega a,
.sg-mega-col a {
	color: var(--sg-ivory) !important; font-size: 13px; line-height: 1.95;
	letter-spacing: 0.004em; display: block; transition: color .18s ease, padding-left .18s ease;
}
.sg-mega a:hover,
.sg-mega-col a:hover,
.sg-mega a:focus-visible {
	color: var(--sg-gold) !important; padding-left: 4px;
}

/* ----------  Painel de FOTOGRAFIA de obra real + legenda editorial  ---------- */
.sg-mega-photo {
	position: relative; border-radius: 8px; overflow: hidden;
	border: 1px solid rgba(198, 160, 83, 0.22); min-height: 200px;
	background: var(--sg-ink-3);
}
.sg-mega-photo img { transition: transform .35s ease; will-change: transform; }
.sg-mega:hover .sg-mega-photo img { transform: scale(1.03); } /* zoom no hover da categoria */

.sg-mega-cap {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 14px 15px;
	background: linear-gradient(180deg, transparent, rgba(10,21,33,.92));
}
.sg-mega-cap .sg-cap-kicker {
	font-size: 9.5px; letter-spacing: 0.16em; color: var(--sg-gold); text-transform: uppercase;
	display: block; margin-bottom: 4px;
}
.sg-mega-cap .sg-cap-title {
	font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px;
	color: var(--sg-ivory); line-height: 1.15; display: block;
}
.sg-mega-cap .sg-cap-sub {
	font-size: 11px; color: var(--sg-mute); letter-spacing: 0.03em;
	display: block; margin-top: 3px;
}

/* =====================================================================
   6) MOBILE  (drawer nativo do widget Menu)
   ===================================================================== */
@media (max-width: 1024px) {
	.sg-topbar { display: none !important; }

	/* Painel/drawer do menu mobile */
	.sg-nav .elementor-nav-menu--dropdown,
	.sg-nav .e-n-menu-content {
		background: var(--sg-ink) !important;
	}
	.sg-nav .elementor-nav-menu--dropdown a,
	.sg-nav .e-n-menu-content a {
		color: var(--sg-ivory) !important; font-size: 16px;
		min-height: 48px; display: flex; align-items: center;
		border-bottom: 1px solid rgba(198, 160, 83, 0.15);
	}
	.sg-nav .elementor-nav-menu--dropdown a:hover { color: var(--sg-gold) !important; }

	/* Hambúrguer e fechar em dourado */
	.sg-nav .elementor-menu-toggle,
	.sg-nav .e-n-menu-toggle { color: var(--sg-gold) !important; }

	/* CTA do header ocupa largura no mobile (alcance do polegar) */
	.sg-cta, .sg-cta .elementor-button { width: 100%; justify-content: center; }
}

/* =====================================================================
   7) Breakpoint intermediário — evita o mega de "Espelhos" (5 colunas
   + foto) quebrar feio em telas ~1366px.
   ===================================================================== */
@media (max-width: 1366px) and (min-width: 1025px) {
	.sg-mega { padding: 18px 18px 20px !important; }
	.sg-mega a, .sg-mega-col a { font-size: 12.5px; line-height: 1.85; }
}

/* =====================================================================
   8) Acessibilidade — foco visível por teclado espelhando o hover
   ===================================================================== */
.sg-nav a:focus-visible,
.sg-mega a:focus-visible,
.sg-icon:focus-visible,
.sg-cta:focus-visible {
	outline: 2px solid var(--sg-gold); outline-offset: 3px; border-radius: 3px;
}

/* =====================================================================
   9) v1.1 — OVERRIDES DE FONTE/TAMANHO/CONTRASTE (alta especificidade)
   Os widgets de Título/Menu do Elementor herdam a tipografia GLOBAL do
   tema (serifada e grande). Estas regras miram os elementos REAIS
   renderizados (.elementor-heading-title, .elementor-item) para vencer.
   ===================================================================== */
.sg-topbar .elementor-widget-heading,
.sg-header .elementor-widget-heading { margin: 0; }

.sg-topbar .elementor-heading-title { font-family: 'Inter', sans-serif !important; }

.sg-seal .elementor-heading-title {
	display: inline-block; font-family: 'Inter', sans-serif !important;
	font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important;
	letter-spacing: 0.16em !important; text-transform: uppercase;
	color: var(--sg-gold-l) !important;
	border: 1px solid rgba(198, 160, 83, 0.55); border-radius: 3px; padding: 3px 8px;
}

.sg-micro, .sg-micro a, .sg-micro .elementor-heading-title {
	font-family: 'Inter', sans-serif !important; font-size: 12px !important;
	font-weight: 400 !important; letter-spacing: 0.05em !important; line-height: 1.4 !important;
	color: var(--sg-mute) !important; text-transform: none;
}
.sg-micro a:hover, .sg-micro:hover .elementor-heading-title { color: var(--sg-ivory) !important; }

.sg-rotator .elementor-heading-title {
	font-family: 'Cormorant Garamond', serif !important; font-style: italic;
	font-size: 14px !important; font-weight: 500 !important; line-height: 1.3 !important;
	color: var(--sg-mute) !important;
}

/* Navegação principal — Nav Menu clássico e Mega Menu novo */
.sg-nav .elementor-nav-menu .elementor-item,
.sg-nav .elementor-item,
.sg-nav .e-n-menu-title-text {
	font-family: 'Inter', sans-serif !important; font-size: 15px !important;
	font-weight: 500 !important; letter-spacing: 0.04em !important; line-height: 1.4 !important;
	text-transform: none; color: var(--sg-ivory) !important;
}
.sg-nav .elementor-item:hover,
.sg-nav .elementor-item-active { color: var(--sg-gold) !important; }
.sg-nav .elementor-sub-item {
	font-family: 'Inter', sans-serif !important; font-size: 14px !important;
	font-weight: 400 !important; color: var(--sg-ivory) !important; text-transform: none;
}

/* Texto do botão CTA */
.sg-cta .elementor-button-text {
	font-family: 'Inter', sans-serif !important; font-size: 13px !important;
	font-weight: 600 !important; letter-spacing: 0.02em;
}

/* ===== v1.1b — header em 1 linha + dropdown de submenu on-brand ===== */
.sg-header { flex-wrap: nowrap !important; align-items: center; }
.sg-header > .e-con:first-child, .sg-header > .e-con-inner > .e-con:first-child { flex: 1 1 auto !important; width: auto !important; }
.sg-header > .e-con:last-child, .sg-header > .e-con-inner > .e-con:last-child { flex: 0 0 auto !important; width: auto !important; }
.sg-nav .elementor-nav-menu { flex-wrap: nowrap !important; }
.sg-nav .elementor-nav-menu > li > a.elementor-item { padding-left: 13px !important; padding-right: 13px !important; white-space: nowrap; }
.sg-nav .elementor-nav-menu--main .sub-menu,
.sg-nav .elementor-nav-menu--dropdown,
.sg-nav .sub-menu {
	background-color: var(--sg-ink-2) !important;
	border-top: 2px solid var(--sg-gold) !important;
	box-shadow: 0 20px 50px rgba(0,0,0,.45) !important;
	border-radius: 0 0 6px 6px;
}
.sg-nav .sub-menu .elementor-sub-item {
	color: var(--sg-ivory) !important; font-size: 14px !important;
	border-bottom: 1px solid rgba(198,160,83,.12);
}
.sg-nav .sub-menu .elementor-sub-item:hover { background: var(--sg-ink-3) !important; color: var(--sg-gold) !important; }

/* ===== v1.1c — encaixe do menu em 1 linha (sem overlap) ===== */
.sg-logo img { max-height: 40px !important; }   /* v1.6.7: 46→40, logo desktop um pouco menor */
.sg-header > .e-con:first-child,
.sg-header > .e-con-inner > .e-con:first-child { gap: 22px !important; min-width: 0; }
.sg-nav { min-width: 0; flex: 1 1 auto; }
.sg-nav .elementor-nav-menu { flex-wrap: nowrap !important; gap: 0; }
.sg-nav .elementor-nav-menu > li > a.elementor-item {
	padding-left: 6px !important; padding-right: 6px !important;
	font-size: 14px !important; letter-spacing: .01em !important; white-space: nowrap;
}

/* ===== v1.1d — dropdown do submenu acima do conteúdo (z-index) ===== */
.sg-header { z-index: 999 !important; }
.sg-nav, .sg-nav .elementor-nav-menu { position: relative; z-index: 1000; }
.sg-nav .sub-menu,
.sg-nav .elementor-nav-menu--main .sub-menu,
.sg-nav .elementor-nav-menu--dropdown { z-index: 9999 !important; }

/* ===== v1.1e — abertura do submenu no hover (SÓ DESKTOP) ===== */
@media (min-width: 1025px) {
	.sg-nav .elementor-nav-menu > li > .sub-menu,
	.sg-nav .elementor-nav-menu .menu-item .sub-menu { display: block; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
	.sg-nav .elementor-nav-menu li:hover > .sub-menu,
	.sg-nav .elementor-nav-menu .menu-item:hover > .sub-menu,
	.sg-nav .elementor-nav-menu li:focus-within > .sub-menu {
		opacity: 1 !important; visibility: visible !important; transition: opacity .2s ease !important;
	}
}

/* ===== v1.2 — navy sólido + submenu largura/flyout + ocultar Orçamento + mobile ===== */
/* (a) header sempre navy sólido (sem o cinza translúcido), igual ao sticky */
.sg-header { background: var(--sg-ink) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

@media (min-width: 1025px) {
	/* (b) submenu dimensiona pelo conteúdo (piso 250, teto 400) — v1.6.5:
	   evita itens longos (ex.: "Instalação de Vidros e Espelhos") ficarem apertados/cortados */
	.sg-nav .sub-menu { min-width: 250px !important; width: max-content !important; max-width: 400px !important; }
	/* (c) sub-sub-menu (3º nível) abre à DIREITA, COLADO e alinhado ao item pai.
	   Blindado (v1.6.4): position relative à prova de sobreposição + nunca recortar o flyout,
	   pra eliminar qualquer caso intermitente de "descolar". */
	.sg-nav .menu-item,
	.sg-nav .elementor-nav-menu .menu-item,
	.sg-nav li.menu-item-has-children { position: relative !important; }   /* ancora o flyout no item certo */
	/* submenu que CONTÉM flyout (2º nível pai): nunca recorta o 3º nível */
	.sg-nav .sub-menu:has(.sub-menu) { overflow: visible !important; }
	/* submenu "folha" (sem flyout dentro): rola internamente quando passa do fim da tela
	   (o JS define a max-height; scrollbar dourada via bloco 12) — v1.6.5 */
	.sg-nav .sub-menu:not(:has(.sub-menu)) { overflow-x: hidden; overflow-y: auto; }
	.sg-nav .sub-menu .sub-menu {
		left: 100% !important; top: -1px !important; right: auto !important;
		margin: 0 !important; transform: none !important;                  /* sem deslocamentos extras */
	}
	/* (d) tirar "Orçamento" do menu desktop (já existe o botão) */
	.sg-nav .elementor-nav-menu > li:has(> a[href="#sg-modal-whatsapp"]) { display: none !important; }
}

/* (e) MOBILE: cosmético do accordion (display volta ao padrão do Elementor) */
@media (max-width: 1024px) {
	.sg-nav .sub-menu { box-shadow: none !important; border-top: none !important; border-radius: 0 !important; min-width: 0 !important; }
}

/* ===== v1.2b — drawer mobile em largura cheia (ancorado no header) ===== */
@media (max-width: 1024px) {
	/* NÃO forçar relative quando sticky — senão quebra o position:fixed do sticky no mobile */
	.sg-header:not(.elementor-sticky--active) { position: relative !important; }
	/* sticky no mobile: fixo no topo — deixa o Elementor definir top/width (respeita a admin bar quando logado; top 0 pro visitante) */
	.sg-header.elementor-sticky--active { position: fixed !important; }
	.sg-nav, .sg-nav .elementor-widget-container { position: static !important; }
	.sg-nav nav.elementor-nav-menu--dropdown {
		position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
		width: 100% !important; max-width: 100% !important; overflow: visible !important;
		background: var(--sg-ink) !important; border-top: 1px solid rgba(198,160,83,.3) !important;
		box-shadow: 0 20px 40px rgba(0,0,0,.45) !important;
	}
	.sg-nav nav.elementor-nav-menu--dropdown ul.elementor-nav-menu { width: 100% !important; max-width: 100% !important; }
	.sg-nav ul.elementor-nav-menu .elementor-item,
	.sg-nav ul.elementor-nav-menu .elementor-sub-item { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ===== v1.3 — header MOBILE em 1 linha (☰ Menu + Logo | busca · conta · carrinho · CTA só ícone WhatsApp) ===== */
@media (max-width: 1024px) {
	.sg-header { flex-wrap: nowrap !important; gap: 6px !important; padding-left: 12px !important; padding-right: 12px !important; }
	.sg-header > .e-con { flex-wrap: nowrap !important; flex-direction: row !important; align-items: center !important; }
	/* causa-raiz: os widgets vinham com largura cheia (166px) e quebravam — força largura automática */
	.sg-header > .e-con > .elementor-widget,
	.sg-logo, .sg-nav, .sg-icon, .sg-cta { flex: 0 0 auto !important; width: auto !important; }
	.sg-header > .e-con:first-child { flex: 0 1 auto !important; gap: 4px !important; min-width: 0 !important; }   /* logo + hambúrguer mais próximos (v1.6.7) */
	.sg-header > .e-con:first-child .sg-nav { order: 1 !important; }   /* hambúrguer antes */
	.sg-header > .e-con:first-child .sg-logo { order: 2 !important; }  /* logo depois */
	.sg-logo img { max-height: 32px !important; }
	.sg-header > .e-con:last-child { flex: 1 1 auto !important; justify-content: flex-end !important; gap: 12px !important; }
	.sg-icon, .sg-icon i, .sg-icon svg { font-size: 20px !important; }
	/* CTA dourado só com o ícone do WhatsApp (sem texto) */
	.sg-cta, .sg-cta .elementor-button { width: 42px !important; min-width: 42px !important; height: 42px !important; padding: 0 !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
	.sg-cta .elementor-button-text { display: none !important; }
	.sg-cta .elementor-button-icon, .sg-cta i, .sg-cta svg { margin: 0 !important; }
}

/* ===== v1.4 — drawer mobile: rolagem própria + backdrop escuro/blur + trava o fundo ===== */
@media (max-width: 1024px) {
	/* o menu ganha rolagem própria — alcança TODOS os itens, mesmo com submenus abertos */
	.sg-nav nav.elementor-nav-menu--dropdown {
		max-height: calc(100dvh - 96px) !important;
		max-height: calc(100vh - 96px) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;            /* o scroll não "vaza" pra página */
		z-index: 1000 !important;
	}
	/* fundo escuro + blur quando o menu está aberto (classe posta pelo JS) */
	body.sg-menu-open::before {
		content: ""; position: fixed; inset: 0; z-index: 990;
		background: rgba(6, 13, 22, 0.55);
		-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	}
	/* trava o scroll da página atrás do menu */
	body.sg-menu-open { overflow: hidden !important; }
}

/* =====================================================================
   10) BUSCADOR — painel abaixo do header + fundo com blur (v1.5)
   ===================================================================== */
.sg-search-overlay {
	position: fixed; left: 0; right: 0; bottom: 0; top: 0;
	z-index: 1001; display: none;
	background: rgba(6, 13, 22, 0.18); /* leve: as laterais ficam com blur, vendo a página */
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	font-family: 'Inter', sans-serif;
}
.sg-search-overlay.is-open { display: block; animation: sgFade .18s ease; }
@keyframes sgFade { from { opacity: 0; } to { opacity: 1; } }
body.sg-search-open { overflow: hidden !important; }

/* painel (bloco abaixo do menu) — o fundo navy translúcido fica na coluna central (.sg-search-inner) */
.sg-search-panel {
	background: transparent; padding: 16px 26px 26px; width: 100%;
}
.sg-search-inner {
	max-width: 780px; margin: 0 auto;
	background: rgba(10, 21, 33, 0.9);            /* azul escuro com pouca transparência */
	border: 1px solid rgba(198, 160, 83, 0.18);
	border-radius: 14px; padding: 18px 18px 20px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* linha do campo */
.sg-search-row { display: flex; align-items: center; gap: 12px; }
.sg-search-row .sg-search-ico { color: var(--sg-gold); font-size: 20px; }
.sg-search-input {
	flex: 1 1 auto; height: 50px; padding: 0 16px;
	background: var(--sg-ink); color: var(--sg-ivory);
	border: 1px solid rgba(198, 160, 83, 0.35); border-radius: 8px;
	font-family: 'Inter', sans-serif; font-size: 16px; outline: none;
}
.sg-search-input::placeholder { color: var(--sg-mute); }
.sg-search-input:focus { border-color: var(--sg-gold); }
.sg-search-close {
	flex: 0 0 auto; width: 42px; height: 42px; border: none; cursor: pointer;
	background: transparent; color: var(--sg-mute); font-size: 26px; line-height: 1;
	border-radius: 8px; transition: color .2s ease, background .2s ease;
}
.sg-search-close:hover { color: var(--sg-ivory); background: var(--sg-ink-3); }

/* filtros (checkboxes) */
.sg-search-filters { display: flex; gap: 22px; margin: 14px 2px 4px; flex-wrap: wrap; }
.sg-search-filters label {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--sg-ivory); font-size: 13.5px; cursor: pointer; user-select: none;
}
.sg-search-filters input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--sg-gold); cursor: pointer; }

/* resultados */
.sg-search-results { margin-top: 12px; max-height: 56vh; overflow-y: auto; overscroll-behavior: contain; }
.sg-result {
	display: flex; align-items: center; gap: 14px; padding: 9px 11px;
	border-radius: 10px; text-decoration: none; transition: background .15s ease, border-color .15s ease;
	background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(198, 160, 83, 0.12); margin-bottom: 7px;
}
.sg-result:hover, .sg-result:focus-visible { background: rgba(198, 160, 83, 0.1); border-color: rgba(198, 160, 83, 0.35); outline: none; }
.sg-r-img {
	flex: 0 0 auto; width: 48px; height: 48px; border-radius: 6px; object-fit: cover;
	background: var(--sg-ink); border: 1px solid rgba(198, 160, 83, 0.18);
}
.sg-r-noimg { display: inline-block; }
.sg-r-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-r-title { color: var(--sg-ivory); font-size: 14.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-result:hover .sg-r-title { color: var(--sg-gold); }
.sg-r-price { color: var(--sg-gold); font-size: 13px; font-weight: 600; }
.sg-r-badge {
	flex: 0 0 auto; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
	padding: 3px 8px; border-radius: 20px;
}
.sg-r-product { color: var(--sg-gold-ink); background: var(--sg-gold); }
.sg-r-post { color: var(--sg-mute); border: 1px solid rgba(159, 170, 186, 0.4); }

.sg-search-hint { color: var(--sg-mute); font-size: 13px; margin-top: 14px; padding: 2px; }

/* mobile — mais compacto */
@media (max-width: 1024px) {
	.sg-search-panel { padding: 14px 14px 18px; }
	.sg-search-input { height: 44px; font-size: 15px; }
	.sg-search-close { width: 38px; height: 38px; font-size: 24px; }
	.sg-search-filters { gap: 16px; margin: 10px 0 2px; }
	.sg-search-results { max-height: 62vh; }
	.sg-r-img { width: 40px; height: 40px; }
	.sg-r-title { font-size: 14px; }
	.sg-r-badge { display: none; } /* compacto: esconde o selo no mobile */
}

/* ----- loader: spinner + skeleton dos 2 primeiros resultados ----- */
.sg-spin {
	display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px;
	border: 2px solid rgba(198, 160, 83, 0.3); border-top-color: var(--sg-gold);
	border-radius: 50%; animation: sgSpin .7s linear infinite;
}
@keyframes sgSpin { to { transform: rotate(360deg); } }

.sg-skel {
	display: flex; align-items: center; gap: 14px; padding: 9px 11px; margin-bottom: 7px;
	border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(198, 160, 83, 0.1);
}
.sg-skel-img { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 6px; background: rgba(255, 255, 255, 0.09); }
.sg-skel-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.sg-skel-line { height: 11px; border-radius: 6px; background: rgba(255, 255, 255, 0.09); }
.sg-skel-line.w1 { width: 70%; }
.sg-skel-line.w2 { width: 40%; }
.sg-skel-img, .sg-skel-line { -webkit-filter: blur(0.6px); filter: blur(0.6px); animation: sgPulse 1.1s ease-in-out infinite; }
@keyframes sgPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* =====================================================================
   11) TABLET (1025–1300px) — CTA só ícone do WhatsApp + menu pode quebrar
   (mais espaço pro menu; nunca sobrepõe os ícones)
   ===================================================================== */
@media (min-width: 1025px) and (max-width: 1300px) {
	.sg-cta, .sg-cta .elementor-button {
		width: 44px !important; min-width: 44px !important; height: 44px !important;
		padding: 0 !important; border-radius: 8px !important;
		display: inline-flex !important; align-items: center !important; justify-content: center !important;
	}
	.sg-cta .elementor-button-text { display: none !important; }
	.sg-cta .elementor-button-icon, .sg-cta i, .sg-cta svg { margin: 0 !important; }
	.sg-nav .elementor-nav-menu { flex-wrap: wrap !important; } /* quebra pra baixo, não sobrepõe */
	.sg-header > .e-con:first-child { gap: 18px !important; }
}

/* =====================================================================
   12) SCROLLBAR na marca (dourado/navy) — busca + menu mobile + submenu
   ===================================================================== */
.sg-search-results,
.sg-nav nav.elementor-nav-menu--dropdown,
.sg-nav .sub-menu {
	scrollbar-width: thin;                                   /* Firefox */
	scrollbar-color: rgba(198, 160, 83, 0.55) transparent;
}
.sg-search-results::-webkit-scrollbar,
.sg-nav nav.elementor-nav-menu--dropdown::-webkit-scrollbar,
.sg-nav .sub-menu::-webkit-scrollbar { width: 8px; height: 8px; }
.sg-search-results::-webkit-scrollbar-track,
.sg-nav nav.elementor-nav-menu--dropdown::-webkit-scrollbar-track,
.sg-nav .sub-menu::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.sg-search-results::-webkit-scrollbar-thumb,
.sg-nav nav.elementor-nav-menu--dropdown::-webkit-scrollbar-thumb,
.sg-nav .sub-menu::-webkit-scrollbar-thumb {
	background: rgba(198, 160, 83, 0.45); border-radius: 8px;
	border: 2px solid transparent; background-clip: padding-box;
}
.sg-search-results::-webkit-scrollbar-thumb:hover,
.sg-nav nav.elementor-nav-menu--dropdown::-webkit-scrollbar-thumb:hover,
.sg-nav .sub-menu::-webkit-scrollbar-thumb:hover { background: var(--sg-gold); }