/* ==========================================================================
   Header: barra do topo, linha principal (logo, busca, orçamento), menu,
   dropdown de categorias e menu lateral (celular)
   ========================================================================== */

/* ---------- Barra do topo ---------- */
.topbar { background: var(--jj-topbar); color: #b5d6d8; font-size: .8rem; min-height: 38px; }
.topbar a { color: inherit; opacity: .9; }
.topbar a:hover { opacity: 1; text-decoration: underline; }

/* ---------- Linha principal ---------- */
.site-header {
    background: rgba(13, 48, 54, .95);
    border-bottom: 1px solid rgba(160, 235, 228, .10);
    backdrop-filter: saturate(160%) blur(10px);
}
.site-header-linha { min-height: 92px; }

.marca { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; color: var(--jj-text); }
.marca:hover { color: var(--jj-text); }
.marca img { height: 79px; width: auto; }
.marca-texto { line-height: 1.1; }
.marca-texto strong { display: block; font-size: 1.44rem; letter-spacing: -.01em; }
.marca-texto span { font-size: .96rem; color: var(--jj-muted); }
@media (max-width: 767.98px) { .marca img { height: 64px; } }

.busca { position: relative; flex: 1; max-width: 620px; }
.busca .form-control { height: 54px; border-radius: 999px; padding: 0 3.6rem 0 1.25rem; }
.busca .btn-buscar {
    position: absolute; right: 6px; top: 6px; width: 42px; height: 42px; padding: 0;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
@media (max-width: 991.98px) { .busca { flex-basis: 100%; max-width: none; } }

.btn-carrinho { height: 54px; display: inline-flex; align-items: center; gap: .6rem; border-radius: 999px; padding: 0 1.25rem 0 1rem; }
.btn-carrinho .badge { background: #fff; color: var(--jj-cta); min-width: 22px; }

.btn-icone {
    width: 42px; height: 42px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--jj-surface-2); color: var(--jj-text); border: 1px solid var(--jj-border);
}
.btn-icone:hover { border-color: var(--jj-primary); color: var(--jj-primary-text); }

/* ---------- Menu ---------- */
.site-nav { background: var(--jj-nav); border-bottom: 1px solid rgba(160, 235, 228, .10); }
.site-nav .container { min-height: 52px; }
.nav-link-jj { position: relative; padding: .9rem 1rem; font-size: .9rem; font-weight: 500; color: #dcf0f1; opacity: .85; }
.nav-link-jj:hover, .nav-link-jj.active { opacity: 1; color: var(--jj-primary-text); }
.nav-link-jj.active::after {
    content: ''; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 3px;
    border-radius: 3px 3px 0 0; background: var(--jj-primary-text);
}
.nav-extra { font-size: .82rem; color: var(--jj-muted); white-space: nowrap; }

/* Dropdown de categorias: popup com rolagem interna */
.menu-categorias { width: 320px; overflow: hidden; }
.menu-categorias .dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid var(--jj-border); padding: 12px 16px 8px; }
.menu-categorias-lista { max-height: min(420px, calc(100vh - 220px)); overflow-y: auto; padding: 6px; overscroll-behavior: contain; }

/* Link de categoria (dropdown, menu lateral e barra lateral da categoria) */
.cat-link {
    display: flex; align-items: center; gap: .75rem; padding: .45rem .6rem; border-radius: 10px;
    color: var(--jj-text); font-size: .88rem; transition: background .15s, color .15s;
}
.cat-link:hover { background: var(--jj-primary-soft); color: var(--jj-primary-text); }
.cat-link.active { background: var(--jj-primary); color: var(--jj-primary-contrast); }
.cat-link.active .cat-ico { background: rgba(11, 42, 46, .15); }
.cat-link.active .cat-ico img { filter: brightness(0) opacity(.8); }

/* ---------- Menu lateral (celular) ---------- */
.menu-mobile { width: 320px; }
.menu-mobile .links a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--jj-border); font-weight: 500; color: var(--jj-text); }
.menu-mobile h6 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--jj-muted); margin: 1.5rem 0 .5rem; }

/* Indicador de modo ADM */
#modoAdm { position: absolute; top: 0; left: 4px; z-index: 1040; font-size: 8px; opacity: .5; cursor: pointer; }