/* ALUMINAÇO — menu interativo de categorias
   HORIZONTAL: família e grupo.  HOVER: submenu VERTICAL com os subgrupos.
   Sem número em lugar nenhum (pedido do Lauro).
   PC e celular: mesma estrutura; no toque, tap abre em vez de hover.
   ========================================================================= */

.bh{margin:0 0 20px;display:flex;flex-direction:column;gap:8px}

.bh-l{
  display:flex;align-items:center;gap:8px;
  overflow-x:auto;overflow-y:visible;      /* visible: o submenu não pode ser cortado */
  -webkit-overflow-scrolling:touch;
  padding:2px 0
}
/* Só existe UMA linha horizontal agora: as famílias. Grupo e subgrupo desceram
   pro painel vertical. (Sem flex-wrap: uma parede de chips aparecendo aos 700ms
   custou CLS 0,42, medido. E o overflow-x:auto CORTA filho absolute — por isso
   o painel é position:FIXED, posicionado pelo JS.) */

.bh-t{
  flex:0 0 auto;padding:7px 12px 7px 0;
  font:700 11px/1 var(--fhead);letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);white-space:nowrap
}

.bh-c{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;min-height:38px;
  border:1px solid var(--line);border-radius:100px;background:var(--card);
  font:600 13px/1 var(--fbody);color:var(--muted);white-space:nowrap;
  text-decoration:none;transition:.15s
}
.bh-c:hover{border-color:var(--red);color:var(--ink)}
.bh-c:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.bh-c.on{background:color-mix(in srgb,var(--red) 22%,var(--card));border-color:var(--red);color:#fff}
.bh-c.all{color:var(--red);font-weight:700}
.bh-c.all.on{background:var(--red);color:#fff;border-color:var(--red)}

/* setinha do grupo que tem submenu */
.bh-ar{
  width:6px;height:6px;flex:0 0 auto;margin-left:1px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.6;transition:.18s
}
.bh-w.open .bh-ar{transform:rotate(-135deg) translateY(-2px);opacity:1}

/* =========================================================================
   O SUBMENU VERTICAL — flutua SOBRE o conteúdo (position:absolute).
   Isso é o que garante CLS zero: ele não ocupa espaço no fluxo, então abrir
   e fechar não empurra nada. (Estamos em 0,0117; não se devolve isso.)
   ========================================================================= */
.bh-w{display:inline-flex;flex:0 0 auto}
.bh-d{
  /* FIXED (não absolute): 1) não é cortado pelo overflow-x da linha;
     2) não entra no scrollWidth do documento. Com visibility:hidden o dropdown
     AINDA ocupava layout e estourava 15px de largura no 390px — medido.
     display:none mata as duas coisas de vez. Posição: calculada pelo JS. */
  position:fixed;z-index:58;display:none;
  min-width:250px;max-width:min(340px,90vw);
  max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain;
  background:#101013;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.6);padding:6px
}
.bh-w.open .bh-d{display:block;animation:bhIn .16s ease-out}
@keyframes bhIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- GRUPO (nível 2, dentro do painel vertical) ---- */
.bh-g{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:11px 12px;border:0;border-radius:8px;background:none;cursor:pointer;
  font:700 12.5px/1.3 var(--fhead);color:var(--ink);text-align:left;
  text-decoration:none;min-height:42px;transition:background .12s
}
.bh-g:hover{background:#17171b}
.bh-g:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.bh-g.on{color:#fff;background:color-mix(in srgb,var(--red) 18%,transparent)}
.bh-g .bh-ar{border-color:var(--steel);opacity:.8}
.bh-gr.open > .bh-gt .bh-ar{transform:rotate(-135deg) translateY(-2px);border-color:var(--red)}
.bh-gr{border-bottom:1px solid rgba(255,255,255,.05)}
.bh-gr:last-child{border-bottom:0}

/* ---- SUBGRUPO (nível 3): fecha por padrão, senão vira parede de texto ---- */
.bh-sub{display:none;padding:2px 0 8px 10px;border-left:2px solid var(--line);margin-left:12px}
.bh-gr.open > .bh-sub{display:block}

.bh-i{
  display:block;padding:9px 12px;border-radius:8px;min-height:38px;
  font:500 12.5px/1.35 var(--fbody);color:var(--muted);text-decoration:none;
  transition:background .12s,color .12s
}
.bh-i:hover{background:#17171b;color:#fff}
.bh-i:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.bh-i.on{background:color-mix(in srgb,var(--red) 20%,transparent);color:#fff;font-weight:600}
.bh-i.all{color:var(--red);font-weight:700;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:4px}
.bh-i.out{opacity:.7}

@media(max-width:820px){
  .bh{margin-bottom:16px;gap:6px}
  .bh-c{padding:8px 13px;font-size:12.5px;min-height:36px}
  .bh-t{font-size:10px;padding-right:9px;width:100%;padding-bottom:0}
  .bh-d{min-width:200px;max-width:min(280px,84vw);max-height:50vh}
  .bh-i{min-height:44px;font-size:13px}   /* alvo de toque no celular */
}
@media(prefers-reduced-motion:reduce){
  .bh-c,.bh-ar{transition:none}
  .bh-w.open .bh-d{animation:none}
}


/* =========================================================================
   BARRINHA DE SCROLL NO TEMA (pedido do Lauro: "validar layout da barrinha
   de scroll — colocar no tema")
   -------------------------------------------------------------------------
   A barra padrão do navegador é cinza-claro e destoa do preto/vermelho.
   Firefox usa scrollbar-color; Chrome/Safari usam ::-webkit-scrollbar.
   Discreta: o trilho quase some no fundo e o polegar acende no vermelho da
   marca ao passar o mouse — sinaliza "dá pra rolar" sem gritar.
   ========================================================================= */
.bh-l, .bh-d{
  scrollbar-width:thin;                          /* Firefox */
  scrollbar-color:#3a3a42 transparent;
}
.bh-l:hover, .bh-d:hover{scrollbar-color:var(--red) transparent}

.bh-l::-webkit-scrollbar{height:6px}
.bh-d::-webkit-scrollbar{width:6px}
.bh-l::-webkit-scrollbar-track,
.bh-d::-webkit-scrollbar-track{background:transparent;border-radius:100px}
.bh-l::-webkit-scrollbar-thumb,
.bh-d::-webkit-scrollbar-thumb{
  background:#3a3a42;border-radius:100px;
  transition:background .18s
}
.bh-l:hover::-webkit-scrollbar-thumb,
.bh-d:hover::-webkit-scrollbar-thumb{background:#4a4a54}
.bh-l::-webkit-scrollbar-thumb:hover,
.bh-d::-webkit-scrollbar-thumb:hover{background:var(--red)}
/* celular: a barrinha nativa some sozinha; não ocupa espaço à toa */
@media(hover:none){
  .bh-l::-webkit-scrollbar{height:3px}
  .bh-l{scrollbar-width:none}
  .bh-l::-webkit-scrollbar-thumb{background:#2c2c33}
}