/* ═══════════════════════════════════════════════════════════
   CABEÇALHO — marca, busca, atalhos de categoria, barra inferior
   Celular:     ☰  N  [ buscar......... ]  🛒
   Computador:  ☰  N.E.S Shop  [ buscar ..................🔍 ]  ♡  🛒
                Todas · Eletrônicos · Casa · Moda · … · Ofertas
   ═══════════════════════════════════════════════════════════ */
:root { --hdr-top-h:58px; }
@media (min-width:900px) { :root { --hdr-top-h:66px; } }

/* Âncoras não ficam escondidas atrás do cabeçalho fixo */
#produtos, #categorias { scroll-margin-top:calc(var(--hdr-top-h) + 16px); }
@media (min-width:900px) { #produtos, #categorias { scroll-margin-top:calc(var(--hdr-top-h) + 58px); } }

/* Sem backdrop-filter aqui de propósito: ele prenderia o menu (position:fixed)
   dentro do cabeçalho. O fundo é sólido. */
.hdr { position:sticky; top:0; z-index:300; background:var(--hdr); color:var(--hdr-text); transition:box-shadow 0.3s var(--ease); }
.hdr.scrolled { box-shadow:0 6px 24px rgba(0,0,0,0.18); }

.hdr-top {
  position:relative; z-index:3; background:var(--hdr);
  height:var(--hdr-top-h); display:flex; align-items:center; gap:10px;
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter) 0 calc(var(--gutter) - 6px);
}

/* ── Botão ☰ que vira ✕ (duas linhas, como na Apple) ──
   O desenho é feito pelo GSAP em js/navegacao.js; sem GSAP, a classe
   .open faz a mesma coisa só com CSS. */
.hdr-burger {
  position:relative; flex-shrink:0; width:40px; height:40px; border:none; background:none;
  border-radius:10px; color:var(--hdr-text);
}
.hdr-burger:hover { background:rgba(255,255,255,0.06); }
.hb-line {
  position:absolute; left:11px; width:18px; height:1.6px; border-radius:2px; background:currentColor;
  transition:transform 0.32s var(--ease);
}
.hb-1 { top:16px; }
.hb-2 { top:22.4px; }
.hdr.menu-open .hb-1 { transform:translateY(3.2px) rotate(45deg); }
.hdr.menu-open .hb-2 { transform:translateY(-3.2px) rotate(-45deg); }

/* ── Marca ── */
.hdr-brand { display:flex; align-items:center; gap:8px; flex-shrink:0; border:none; background:none; padding:4px 2px; color:var(--hdr-text); }
.hdr-mark { width:34px; height:34px; object-fit:contain; }
.hdr-word { display:none; font-family:var(--serif); font-weight:900; font-size:19px; letter-spacing:1.5px; color:var(--brand); line-height:1; }
.hdr-word span { color:var(--hdr-text); font-weight:700; margin-left:6px; letter-spacing:1px; }

/* ── Busca: celular = pílula que abre a tela de busca ── */
.nav-search-bar {
  flex:1; min-width:0; height:40px; display:flex; align-items:center; gap:9px;
  background:#fff; color:#6b6b74; border:none; border-radius:999px; padding:0 15px; font-size:14px; text-align:left;
}
.nav-search-bar svg { width:17px; height:17px; flex-shrink:0; color:#16161a; }
.nav-search-bar span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Busca: computador = campo de verdade + botão dourado ── */
.nav-search-wrap { position:relative; flex:1; display:none; max-width:760px; margin:0 auto; }
.nav-search { display:flex; height:44px; background:#fff; border-radius:999px; overflow:hidden; box-shadow:0 0 0 2px transparent; transition:box-shadow 0.15s; }
.nav-search:focus-within { box-shadow:0 0 0 3px rgba(232,184,74,0.55); }
.nav-search input { flex:1; min-width:0; border:none; outline:none; background:none; color:#16161a; font-size:14.5px; padding:0 20px; }
.nav-search input::placeholder { color:#7a7a84; }
.nav-search-go { width:54px; border:none; background:var(--cta); color:var(--cta-ink); display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.nav-search-go:hover { background:var(--cta-hover); }
.nav-search-go svg { width:19px; height:19px; }

/* Sugestões (autocomplete) — caixa clara, igual em qualquer tema da loja */
.search-suggest {
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:20;
  background:var(--surface); color:var(--text); border-radius:14px; padding:6px 0;
  max-height:380px; overflow-y:auto; display:none; box-shadow:var(--shadow-2);
}
.search-suggest.open { display:block; animation:popIn 0.18s var(--ease-out); }
.sug-item { display:flex; align-items:center; gap:12px; padding:9px 16px; cursor:pointer; }
.sug-item:hover { background:var(--surface-2); }
.sug-emoji { width:40px; height:40px; border-radius:8px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; overflow:hidden; }
.sug-emoji .ph-img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.sug-text { flex:1; min-width:0; }
.sug-name { display:block; font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sug-cat { display:block; font-size:12px; color:var(--text-2); }
.sug-price { font-size:14px; font-weight:600; white-space:nowrap; }
.sug-empty { padding:16px; font-size:13.5px; color:var(--text-2); text-align:center; }

/* ── Ações: favoritos e carrinho ── */
.hdr-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; margin-left:auto; }
.hdr-act {
  position:relative; display:flex; align-items:center; gap:8px; border:none; background:none;
  color:var(--hdr-text); padding:8px; border-radius:10px; font-size:13.5px; font-weight:500;
}
.hdr-act:hover { background:rgba(255,255,255,0.06); }
.hdr-act svg { width:24px; height:24px; flex-shrink:0; }
.hdr-act-label { display:none; }
.hdr-act-fav { display:none; }   /* no celular, favoritos fica na barra de baixo */
.hdr-count {
  position:absolute; top:2px; left:24px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--cta); color:var(--cta-ink); font-size:10.5px; font-weight:700;
  display:none; align-items:center; justify-content:center; line-height:1;
}
.hdr-count.show { display:flex; }
.cart-badge.pop { animation:badgePop 0.4s var(--ease-out); }
@keyframes badgePop { 0%{transform:scale(0.4)} 70%{transform:scale(1.15)} 100%{transform:scale(1)} }

/* ── Linha de categorias (só computador) ── */
.hdr-cats { display:none; position:relative; z-index:1; background:var(--hdr-2); border-top:1px solid var(--hdr-line); }
.hdr-cats-inner {
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter) 0 calc(var(--gutter) - 10px);
  height:42px; display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:none;
}
.hdr-cats-inner::-webkit-scrollbar { display:none; }
.cat-link {
  display:flex; align-items:center; gap:7px; flex-shrink:0; white-space:nowrap;
  border:none; background:none; color:#d4d4d8; font-size:13.5px; font-weight:500;
  padding:7px 12px; border-radius:8px; transition:background 0.15s, color 0.15s;
}
.cat-link:hover { background:rgba(255,255,255,0.07); color:#fff; }
.cat-link.active { color:var(--cta); }
.cat-link svg { width:17px; height:17px; }
.cat-link-all { font-weight:600; color:#fff; }
.cat-link-ofertas { margin-left:auto; color:var(--cta); font-weight:600; }

@media (min-width:900px) {
  .hdr-top { gap:16px; }
  .hdr-word { display:inline; }
  .hdr-mark { width:38px; height:38px; }
  .nav-search-bar { display:none; }
  .nav-search-wrap { display:block; }
  .hdr-act-fav { display:flex; }
  .hdr-act { padding:8px 12px; }
  .hdr-act-label { display:inline; }
  .hdr-count { top:1px; left:24px; min-width:17px; height:17px; font-size:10px; }
  .hdr-cats { display:block; }
}

/* ── Busca em tela cheia (celular) ── */
.msearch-overlay { position:fixed; inset:0; z-index:460; background:var(--bg); display:none; flex-direction:column; }
.msearch-overlay.open { display:flex; animation:fadeIn 0.15s ease; }
.msearch-bar { display:flex; align-items:center; gap:10px; padding:10px var(--gutter); background:var(--hdr); }
.msearch-bar input {
  flex:1; min-width:0; height:42px; border:none; border-radius:999px; padding:0 18px;
  background:#fff; color:#16161a; font-size:16px; outline:none;
}
.msearch-cancel { border:none; background:none; color:var(--cta); font-size:14.5px; font-weight:600; white-space:nowrap; }
.msearch-hint { color:var(--text-2); font-size:14px; padding:24px var(--gutter); text-align:center; }
.msearch-results { overflow-y:auto; background:var(--surface); }
.msearch-results .sug-item { padding:12px var(--gutter); border-bottom:1px solid var(--line); }

/* ── Barra inferior (celular): Início · Favoritos · Carrinho · Menu ── */
.bottom-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:250; display:flex;
  height:calc(60px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  background:var(--surface); border-top:1px solid var(--line);
}
.bb-item {
  flex:1; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:none; background:none; color:var(--text-2); font-size:10.5px; font-weight:500;
}
.bb-item svg { width:22px; height:22px; }
.bb-item.active { color:var(--text); }
.bb-item.active svg { color:var(--brand-ink); }
.bb-badge, .bb-fav-count {
  position:absolute; top:6px; left:calc(50% + 4px); min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  font-size:10px; font-weight:700; display:none; align-items:center; justify-content:center; line-height:1;
}
.bb-badge { background:var(--cta); color:var(--cta-ink); }
.bb-fav-count { background:var(--fav); color:#fff; }
.bb-fav-count.show { display:flex; }

body { padding-bottom:calc(60px + env(safe-area-inset-bottom)); }
@media (min-width:900px) {
  .bottom-bar { display:none; }
  body { padding-bottom:0; }
}