/* Topbar institucional compartilhada (logo + nav) — usada em /meulogin e na
   home (/inicio). Fonte original: bloco inline de meulogin.html, extraído aqui
   para as duas páginas usarem o mesmo componente.
   As cores usam fallback porque só meulogin declara --primary/--accent/etc. */

/* Barra com a logo, referência: topo do claude.ai/login — pequena, à
   esquerda, acima das duas colunas (não dentro da coluna centralizada). */
.site-header-bar {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; max-width: 1440px; margin: 0 auto;
    /* Respiro no topo (enquadramento de marketplace): a barra não encosta na
       borda da janela. */
    padding: 10px 1.5rem 8px;
    /* Tipografia fixa (a mesma dos títulos): cada página declara a sua no body
       e o cabeçalho tem que sair igual em todas. */
    font-family: var(--ap-display, 'Bricolage Grotesque', sans-serif);
    box-sizing: border-box;
}
.site-header-logo-link { display: inline-flex; flex-shrink: 0; }
.site-header-logo { display: block; width: 100px; height: 100px; object-fit: contain; }
.site-header-bar .site-header-logo { width: 60px; height: 60px; }
/* Desktop: três colunas simétricas — logo+CEP à esquerda, busca no centro
   exato da página, carrinho e login à direita. As laterais são 1fr para que o
   meio caia no centro mesmo com conteúdos de larguras diferentes. */
@media (min-width: 1000px) {
    .site-header-bar {
        display: grid; grid-template-columns: 1fr auto 1fr;
        align-items: center; gap: 16px; padding: 16px 2rem 10px;
    }
    .hb-left { display: flex; align-items: center; gap: 12px; justify-self: start; min-width: 0; }
    .site-header-bar > .hb-search { justify-self: center; }
    .site-header-nav { justify-self: end; }
}

/* Nav institucional acima do vídeo (mesmo lugar do menu do
   claude.ai/login) — conteúdo espelhado do rodapé da loja
   (partials/site-footer.html), só que em dropdowns curtos. Some no
   celular: a tela de login ali é só o formulário. */
.site-header-nav { display: none; }
@media (min-width: 1000px) {
    .site-header-nav {
        display: flex; align-items: center; gap: 6px; position: relative;
    }
}
.hb-brand { display: flex; align-items: center; gap: 8px; }
/* CEP da topbar — blindado contra o CSS de cabeçalho de cada página
   (site-store-chrome.css pinta label/valor de branco e o pin com a cor do
   header). Por isso os seletores levam `body` e classes extras: a topbar tem
   que ficar idêntica em todas as páginas. */
.site-header-bar .header-location {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; margin: 0; border: 0; border-radius: 8px;
    background: none; cursor: pointer; font: inherit; text-align: left;
}
.site-header-bar .header-location:hover { background: var(--border, #e5e5e5); opacity: 1; }
.site-header-bar .header-location-lines { display: flex; flex-direction: column; line-height: 1.2; gap: 0; min-width: 0; }
body .site-header-bar .header-location-label {
    font-size: 11px; font-weight: 500; white-space: nowrap;
    color: #888 !important; -webkit-text-fill-color: #888 !important;
}
body .site-header-bar .header-location-value {
    font-size: 12px; font-weight: 600; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis;
    color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important;
}
body.has-site-header-shell .site-header-bar .header-location .header-location-pin,
body .site-header-bar .header-location .header-location-pin {
    font-size: 15px; color: #f5c518 !important; -webkit-text-fill-color: #f5c518 !important;
}
.site-header-nav .site-header-logo-link { display: inline-flex; }
.site-header-nav .site-header-logo { width: 60px; height: 60px; }

/* Entre 769px e 999px a nav some: sobra logo (e o CEP fica com o cabeçalho
   mobile da loja, para não repetir o seletor). */
@media (max-width: 999px) {
    .site-header-bar > .header-location { display: none; }
}

.hb-item { position: relative; }
.hb-item summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
    color: var(--text, #333); white-space: nowrap;
}
.hb-item summary::-webkit-details-marker { display: none; }
.hb-item summary:hover { background: var(--border, #e5e5e5); }
.hb-item summary i { font-size: 10px; color: var(--text-muted, #888); transition: transform .15s ease; }
.hb-item[open] summary i { transform: rotate(180deg); }
/* Abre no hover (desktop, via JS) — ponte invisível cobre o vão até o painel. */
@media (min-width: 1000px) {
    .hb-item::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }
    .hb-item:hover > summary { background: var(--border, #e5e5e5); }
}
.hb-panel {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 30;
    min-width: 220px; background: #fff; border: 1px solid var(--border, #e5e5e5);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.14);
    padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.hb-panel a {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border-radius: 6px; color: var(--text, #333); font-size: 13px;
    text-decoration: none; white-space: nowrap;
}
.hb-panel a:hover { background: #f5f5f5; }
.hb-panel--address { max-width: 260px; }
.hb-panel--address > a { white-space: normal; align-items: flex-start; }
.hb-panel--address > a i { margin-top: 3px; }
/* Redes sociais dentro do dropdown Contato */
.hb-social-row { display: flex; justify-content: center; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border, #e5e5e5); }
.hb-social-row a { padding: 6px; border-radius: 50%; }

/* Carrinho: só o ícone (o texto virava mais um item de menu e competia com a
   nav). O badge espelha o contador do cabeçalho da loja. */
.hb-cart {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; margin: 0 2px;
    border: 0; border-radius: 8px; background: none; cursor: pointer;
    color: var(--text, #333); font-size: 16px; line-height: 1;
}
.hb-cart:hover { background: var(--border, #e5e5e5); }
/* Mesmo ícone do cabeçalho mobile (/img/header-cart.png). Lá ele é invertido
   para branco; aqui o fundo é claro, então vale o desenho original. */
.hb-cart-icon { display: block; width: 24px; height: 24px; object-fit: contain; }
.hb-cart-badge {
    position: absolute; top: -1px; right: -2px;
    display: flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    border-radius: 999px; background: #ef4444;
    color: #fff; -webkit-text-fill-color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
}

/* Entrar: único botão sólido da barra — é a ação que queremos destacada. */
.hb-login {
    display: inline-flex; align-items: center; margin-left: 6px;
    padding: 8px 16px; border-radius: 8px;
    background: #1a1a1a; color: #fff !important; -webkit-text-fill-color: #fff;
    font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.hb-login:hover { background: #333; }
.hb-login--active { background: #333; }

/* Dropdown Produtos — todas as categorias/subcategorias, painel centralizado na tela.
   Seletor com 2 classes pra vencer o .hb-panel base (position:absolute;
   left:50%), senão o painel ancorava no <details> lá na esquerda. */
.hb-panel.hb-panel--products {
    position: fixed; left: 50%; right: auto; transform: translateX(-50%); top: 140px;
    width: min(680px, calc(100vw - 32px));
    max-height: min(72vh, 540px); overflow-y: auto; overscroll-behavior: contain;
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px;
    padding: 10px 12px;
}
.hb-panel--products .hb-catcol { display: flex; flex-direction: column; min-width: 0; }
.hb-panel--products .hb-catcol--extra { border-left: 1px solid var(--border, #e5e5e5); padding-left: 12px; }
.hb-panel--products a { font-size: 12.5px; padding: 4px 8px; white-space: normal; line-height: 1.25; border-radius: 6px; }
.hb-panel--products .hb-cathead {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-muted, #888); padding: 7px 8px 3px; white-space: nowrap; display: block;
}
a.hb-cathead:hover { text-decoration: underline; }
.hb-panel--products .hb-cathead--gap { margin-top: 12px; }
.hb-panel--products .hb-catlink-all { margin-top: 12px; font-weight: 700; color: var(--accent, #10b981); }


/* Busca da topbar (desktop). No mobile a barra some junto com a nav. */
body .site-header-bar .hb-search {
    /* Coluna do meio do header: largura própria, centrada na página. */
    width: min(520px, 40vw); min-width: 200px; height: auto;
    padding: 8px 12px; border: 1px solid var(--border, #e5e5e5); border-radius: 8px;
    background: #fff; color: var(--text, #333);
    font: inherit; font-size: 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body .site-header-bar .hb-search::placeholder { color: #888; -webkit-text-fill-color: #888; }
body .site-header-bar .hb-search:focus {
    outline: none;
    border-color: var(--primary, #1a1a1a);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}


/* ===== Barra de navegação abaixo do cabeçalho =====
   Mesma família tipográfica do título do hero (--ap-display). Some no mobile
   junto com o cabeçalho desktop; lá vale o drawer da loja. */
.site-navbar { display: none; }
@media (min-width: 1000px) {
    .site-navbar {
        display: block; width: 100%;
        border-top: 1px solid var(--border, #e5e5e5);
        border-bottom: 1px solid var(--border, #e5e5e5);
        background: rgba(255, 255, 255, .72);
        font-family: var(--ap-display, 'Bricolage Grotesque', sans-serif);
        margin-bottom: 0.75rem;
    }
    .site-navbar-inner {
        max-width: 1440px; margin: 0 auto; padding: 0 2rem;
        display: flex; align-items: center; justify-content: center; gap: 4px;
    }
}
.nb-item { position: relative; }
.nb-item > summary,
.nb-link {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    padding: 10px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: -.01em;
    color: var(--text, #1a1a1a); text-decoration: none; white-space: nowrap;
}
.nb-item > summary::-webkit-details-marker { display: none; }
.nb-item > summary:hover,
.nb-item[open] > summary,
.nb-link:hover { background: var(--border, #e5e5e5); }
.nb-item > summary i { font-size: 9px; color: var(--text-muted, #888); transition: transform .15s ease; }
.nb-item[open] > summary i { transform: rotate(180deg); }
/* ponte invisível até o painel, para o hover não cair no vão */
.nb-item::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }

.nb-panel {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
    min-width: 240px; max-height: min(70vh, 520px); overflow-y: auto;
    background: #fff; border: 1px solid var(--border, #e5e5e5);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.14);
    padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.nb-panel--cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
    width: max-content; max-width: min(680px, calc(100vw - 32px));
}
.nb-panel a {
    padding: 6px 10px; border-radius: 6px;
    color: var(--text, #333); font-size: 12.5px; line-height: 1.25;
    text-decoration: none;
}
.nb-panel a:hover { background: #f5f5f5; }
.nb-panel .nb-all {
    grid-column: 1 / -1; margin-top: 6px; padding-top: 8px;
    border-top: 1px solid var(--border, #e5e5e5);
    font-weight: 700; color: var(--accent, #10b981);
}

/* Cabeçalho e barra usam a tipografia dos títulos (mesma do hero). */
.site-header-bar { font-family: var(--ap-display, 'Bricolage Grotesque', sans-serif); }

/* Ícone de usuário dentro do botão Entrar */
.hb-login .mobile-drawer-account-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: 7px; font-size: 12px; line-height: 1;
}