/* Cabeçalho único, compartilhado por todas as páginas públicas
   (/loja, /canais, ver 8.95) -- injetado por js/site-header.js dentro
   de <div id="siteHeader">. Editar aqui muda em todas as páginas de
   uma vez só, não precisa duplicar por arquivo. */
/* Wrapper único que carrega a "colagem" no topo (position:sticky) --
   tanto a navbar (.site-nav) quanto a barra de filtros de cada página
   (.filters-bar, ver static/loja.html) ficam DENTRO dele, nunca cada
   uma com seu próprio sticky. Dois sticky independentes empilhados
   dependiam de acertar o "top" de um bater exatamente com a altura do
   outro -- qualquer diferença (fonte carregando, zoom, etc.) abria um
   vão em branco ao rolar. Com um wrapper só, a barra inteira sempre
   cola de uma vez, sem depender de medir nada. */
.sticky-header-group{position:sticky;top:0;z-index:30}
.site-nav{
  --sn-navy:#07101f;--sn-green:#17e978;--sn-green-deep:#0aa94e;--sn-gold:#ffbd1a;
  --sn-white:#f8fafc;--sn-muted:#8fa0bd;--sn-line:rgba(148,255,197,.14);
  position:relative;
  background:rgba(6,13,26,.82);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--sn-line);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 18px 40px -20px rgba(0,0,0,.6);
}
.site-nav:after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--sn-green) 18%,var(--sn-gold) 50%,var(--sn-green) 82%,transparent);
  opacity:.55;
}
.site-nav-inner{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
  max-width:1180px;margin:0 auto;
  padding:calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));
}
.site-brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:var(--sn-white);transition:opacity .15s ease}
.site-brand:hover{opacity:.88}
.site-brand img{width:46px;height:46px;flex-shrink:0;display:block;filter:drop-shadow(0 2px 6px rgba(23,233,120,.25))}
.site-brand-text{font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;font-weight:800;font-size:20px;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-brand-text b{color:var(--sn-gold);font-weight:800}
.site-links{display:flex;align-items:center;gap:3px;flex-shrink:0;padding:4px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.site-link{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:7px 15px;border-radius:999px;
  color:var(--sn-muted);font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:color .15s ease,background .15s ease;
}
.site-link .site-link-icon{font-size:13px;opacity:.9}
.site-link:hover{color:var(--sn-white)}
.site-link:focus-visible{outline:2px solid var(--sn-gold);outline-offset:2px}
.site-link.active{color:#07160f;background:linear-gradient(135deg,var(--sn-green),var(--sn-green-deep));box-shadow:0 4px 14px rgba(23,233,120,.3)}
/* Celular estreito (<420px): "PreçoBaixoClub" completo + 2 pills de
   nav brigando pelo mesmo espaço cortava o nome da marca em "PreçoBaixo…"
   (achado real testando responsividade, 2026-08-14). Encolhe fonte da
   marca e padding das pills o suficiente pra caber tudo sem truncar. */
@media(max-width:420px){
  .site-nav-inner{gap:6px}
  .site-brand{gap:8px}
  .site-brand img{width:38px;height:38px}
  .site-brand-text{font-size:14px}
  .site-link{padding:7px 10px}
  .site-link-icon{display:none}
}