/* Header: top bar, busca e barra de categorias */

/* logo pequena e discreta — não deve competir com a busca */
.brand{ gap:10px; }
.brand img{ width:30px !important; height:30px !important; border-radius:50%; object-fit:cover; }
.brand-word{ font-size:0.98rem; letter-spacing:-0.02em; }

/* ---------- HEADER PRINCIPAL ---------- */
.nav{ flex-wrap:wrap; row-gap:10px; height:auto; min-height:52px; padding:10px 0; }

.header-search{
  display:flex; align-items:stretch; flex:1 1 480px; max-width:640px;
  margin:0 28px; border:1px solid var(--line, #E5E5E7); border-radius:100px;
  overflow:hidden; background:#fff; transition:border-color .2s ease, box-shadow .2s ease;
}
.header-search:focus-within{ border-color:var(--ink, #0A0A0A); box-shadow:0 0 0 3px rgba(17,94,245,.12); }
.header-search input{
  flex:1; border:none; outline:none; padding:0 20px; font-size:0.92rem;
  font-family:'Poppins',sans-serif; color:var(--ink, #0A0A0A); min-width:0;
}
.header-search button{
  width:46px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--blue, #115EF5); color:#fff; transition:background .2s ease;
}
.header-search button:hover{ background:var(--blue-ink, #0B3FB0); }
.header-search button svg{ width:16px; height:16px; }
.header-search, .header-search input{ height:46px; }

.nav-cta{ gap:22px; }
.nav-login{ display:flex; align-items:center; gap:7px; white-space:nowrap; position:relative; }
.nav-login svg{ width:19px; height:19px; }

/* atalho do WhatsApp (entre a conta e o carrinho) */
.nav-whatsapp{ display:flex; align-items:center; gap:7px; white-space:nowrap; position:relative; font-size:0.82rem; font-weight:500; color:#128C4A; transition:color .2s ease; }
.nav-whatsapp:hover{ color:#0B6B37; }
.nav-whatsapp svg{ width:20px; height:20px; fill:currentColor; flex-shrink:0; }

/* ---------- BARRA DE CATEGORIAS ---------- */
.cat-bar{ background:#fff; border-bottom:1px solid var(--line, #E5E5E7); }
.cat-bar-inner{ display:flex; align-items:center; gap:2px; height:46px; overflow-x:auto; scrollbar-width:none; }
.cat-bar-inner::-webkit-scrollbar{ display:none; }
.cat-item{
  flex-shrink:0; padding:0 16px; height:100%; display:flex; align-items:center;
  font-size:0.88rem; font-weight:500; color:var(--ink-soft, #4A4F58);
  border-bottom:2px solid transparent; transition:color .2s ease, border-color .2s ease;
  background:none; border-top:none; border-left:none; border-right:none; cursor:pointer; font-family:inherit;
}
.cat-item:hover, .cat-item[aria-expanded="true"]{ color:var(--ink, #0A0A0A); border-bottom-color:var(--blue, #115EF5); }

/* ---------- RESPONSIVO ---------- */
/* No desktop a navegação horizontal substitui o hambúrguer */
.menu-btn{ display:none; }

@media (max-width:980px){
  .cat-bar{ display:none; }
  .menu-btn{ display:flex; }
}

@media (max-width:760px){
  /* no celular o link da conta vira só o ícone (o texto continua para leitores de tela) */
  .nav-cta{ gap:16px; }
  .nav-whatsapp .label,
  .nav-login .label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .header-search{ order:5; flex:1 1 100%; max-width:none; margin:2px 0 6px; }
}

/* mobile: categorias dentro do drawer (mobile-panel) */
.mobile-panel .panel-cat-row{ display:flex; align-items:center; justify-content:space-between; }