/* Menu do site (scripts/header-template.cjs): vidro, preso no topo e igual em
   todas as páginas. As cores são próprias do menu porque cada tipo de página
   troca de tema de um jeito: data-tema="escuro" (home, só escura), "classe"
   (catálogo, html.dark) e "atributo" (páginas internas, html[data-theme]). */
:root{--mo-altura:71px}
html{scroll-padding-top:calc(var(--mo-altura) + 16px)}

.mo-header{
  --mo-fundo:18 19 19;--mo-tinta:#f4f1e9;--mo-apagado:#a6a89e;--mo-linha:rgba(255,255,255,.1);
  --mo-chip:rgba(255,255,255,.06);--mo-chip-borda:rgba(255,255,255,.12);--mo-menu:#1a1b1a;--mo-sombra:rgba(0,0,0,.55);
  position:sticky;top:0;z-index:60;color:var(--mo-tinta);background:rgb(var(--mo-fundo) / .62);
  -webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);
  border-bottom:1px solid var(--mo-linha);font-family:var(--ods-sans,Satoshi,Arial,sans-serif);font-size:14px;line-height:1.4
}
html:not(.dark) .mo-header[data-tema=classe],html[data-theme=light] .mo-header[data-tema=atributo]{
  --mo-fundo:244 241 233;--mo-tinta:#121313;--mo-apagado:#5b5d59;--mo-linha:rgba(18,19,19,.12);
  --mo-chip:rgba(18,19,19,.05);--mo-chip-borda:rgba(18,19,19,.14);--mo-menu:#fff;--mo-sombra:rgba(18,19,19,.2)
}
/* Com o painel do celular aberto, o fundo fecha mais para o texto não brigar com a página. */
.mo-header:has(.mo-painel:not([hidden])){background:rgb(var(--mo-fundo) / .95)}
.mo-header *{box-sizing:border-box}
.mo-header :focus-visible{outline:2px solid #899a00;outline-offset:3px}

.mo-header .mo-bar{max-width:1440px;margin:0 auto;padding:15px 48px;display:flex;align-items:center;gap:28px}
.mo-header .mo-brand{flex:none;color:inherit;text-decoration:none}
.mo-header .mo-logo-claro{display:none}
html:not(.dark) .mo-header[data-tema=classe] .mo-logo-claro,html[data-theme=light] .mo-header[data-tema=atributo] .mo-logo-claro{display:block}
html:not(.dark) .mo-header[data-tema=classe] .mo-logo-escuro,html[data-theme=light] .mo-header[data-tema=atributo] .mo-logo-escuro{display:none}

/* ---- Navegação e menus suspensos ---- */
.mo-header .mo-nav{flex:1;min-width:0;display:flex;align-items:center;gap:26px}
.mo-header .mo-nav>a,.mo-header .mo-drop-botao{
  display:inline-flex;align-items:center;gap:5px;padding:6px 0;background:none;border:0;cursor:pointer;white-space:nowrap;
  font:500 14px/1.4 var(--ods-sans,Satoshi,Arial,sans-serif);letter-spacing:0;text-transform:none;text-decoration:none;color:var(--mo-apagado)
}
.mo-header .mo-nav>a:hover,.mo-header .mo-drop-botao:hover,.mo-header .mo-drop-botao[aria-expanded=true]{color:var(--mo-tinta)}
.mo-header .mo-nav>a[aria-current=page]{color:var(--mo-tinta);font-weight:700}
.mo-header .mo-drop-botao svg{width:14px;height:14px;transition:transform .2s ease}
.mo-header .mo-drop-botao[aria-expanded=true] svg{transform:rotate(180deg)}
.mo-header .mo-drop{position:relative;display:flex}
.mo-header .mo-menu{
  position:absolute;top:calc(100% + 14px);left:-14px;z-index:5;min-width:310px;padding:8px;display:grid;gap:2px;
  border-radius:14px;background:var(--mo-menu);border:1px solid var(--mo-linha);box-shadow:0 24px 50px -20px var(--mo-sombra)
}
.mo-header .mo-menu[hidden]{display:none}
.mo-header .mo-menu>a{display:grid;gap:2px;padding:10px 12px;border-radius:10px;color:var(--mo-tinta);text-decoration:none;white-space:normal}
.mo-header .mo-menu>a:hover,.mo-header .mo-item:hover{background:var(--mo-chip)}
.mo-header .mo-menu>a strong{font-size:14px;font-weight:700}
.mo-header .mo-menu>a span{font-size:12.5px;line-height:1.45;color:var(--mo-apagado)}

/* ---- Busca em pílula ---- */
.mo-header .mo-busca{flex:none;width:232px;height:40px;margin:0;padding:0 5px 0 16px;display:flex;align-items:center;border-radius:999px;background:var(--mo-chip);border:1px solid var(--mo-chip-borda)}
.mo-header .mo-busca:focus-within{border-color:#899a00}
.mo-header .mo-busca input{flex:1;min-width:0;height:100%;padding:0;background:none;border:0;outline:0;color:var(--mo-tinta);font:500 14px/1 var(--ods-sans,Satoshi,Arial,sans-serif)}
.mo-header .mo-busca input::placeholder{color:var(--mo-apagado);opacity:1}
.mo-header .mo-busca input::-webkit-search-cancel-button{display:none}
.mo-header .mo-busca button{flex:none;width:30px;height:30px;padding:0;display:grid;place-items:center;background:none;border:0;border-radius:50%;color:var(--mo-apagado);cursor:pointer}
.mo-header .mo-busca button:hover{color:var(--mo-tinta)}
.mo-header .mo-busca button svg{width:17px;height:17px}

/* ---- Botões redondos e conta ---- */
.mo-header .mo-acoes{flex:none;display:flex;align-items:center;gap:10px}
.mo-header .mo-round{width:38px;height:38px;flex:none;padding:0;display:grid;place-items:center;border-radius:50%;background:var(--mo-chip);border:1px solid var(--mo-chip-borda);color:var(--mo-tinta);text-decoration:none;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.mo-header .mo-round:hover{border-color:var(--mo-apagado)}
.mo-header .mo-round svg{width:18px;height:18px}
.mo-header .mo-round-lima{background:#f4ff71;border-color:#f4ff71;color:#121313}
.mo-header .mo-round-lima:hover{background:#e8f363;border-color:#e8f363}
.mo-header .mo-round-coroa{color:#d9a520}
.mo-header .mo-simbolo{display:none;width:38px;height:38px;background:currentColor;-webkit-mask:url('/assets/img/odessa-simbolo.svg') center/contain no-repeat;mask:url('/assets/img/odessa-simbolo.svg') center/contain no-repeat}
/* Com sessão aberta, o avatar troca o boneco pelo logo azul da ODESSA (o azul do
   ícone do site), com o símbolo em branco. Pedido do dono: azul, não preto e limão. */
.mo-header .mo-avatar[data-sessao]{background:linear-gradient(145deg,#4a84ec 0%,#2f6bd8 45%,#2157c8 100%);border-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.mo-header .mo-avatar[data-sessao] svg{display:none}
.mo-header .mo-avatar[data-sessao] .mo-simbolo{display:block}
.mo-header .mo-menu-conta{left:auto;right:0;min-width:250px}
.mo-header .mo-conta-topo{margin:0 0 6px;padding:8px 12px 12px;display:grid;gap:2px;border-bottom:1px solid var(--mo-linha)}
.mo-header .mo-conta-topo strong{font-size:15px;font-weight:700;color:var(--mo-tinta)}
.mo-header .mo-conta-topo span{font-size:12.5px;color:var(--mo-apagado);overflow-wrap:anywhere}
.mo-header .mo-item{width:100%;padding:9px 12px;display:flex;align-items:center;gap:12px;border-radius:10px;background:none;border:0;cursor:pointer;text-align:left;text-decoration:none;color:var(--mo-tinta);font:500 14px/1.4 var(--ods-sans,Satoshi,Arial,sans-serif)}
.mo-header .mo-item svg{width:17px;height:17px;flex:none;color:var(--mo-apagado)}
.mo-header .mo-menu hr{width:100%;margin:6px 0;border:0;border-top:1px solid var(--mo-linha)}
.mo-header .mo-sanduiche{display:none}

/* ---- Painel do celular ---- */
.mo-header .mo-painel{padding:10px 16px 18px;display:grid;gap:2px;border-top:1px solid var(--mo-linha);max-height:calc(100dvh - var(--mo-altura));overflow:auto}
.mo-header .mo-painel[hidden]{display:none}
.mo-header .mo-painel>a,.mo-header .mo-painel>button{padding:12px 8px;display:flex;align-items:center;gap:10px;border-radius:10px;background:none;border:0;cursor:pointer;text-align:left;text-decoration:none;color:var(--mo-tinta);font:500 16px/1.3 var(--ods-sans,Satoshi,Arial,sans-serif)}
.mo-header .mo-painel>a[aria-current=page]{font-weight:700}
.mo-header .mo-painel>p{margin:10px 8px 2px;font:400 11px/1.4 var(--ods-mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--mo-apagado)}
.mo-header .mo-painel>.mo-sub{padding:9px 8px 9px 20px;font-size:15px;color:var(--mo-apagado)}
.mo-header .mo-painel>button svg{width:18px;height:18px}

/* Abaixo de 1240 px a navegação vai para o sanduíche e a busca ocupa o meio. */
@media(min-width:1240px){.mo-header .mo-painel{display:none}}
@media(max-width:1239px){
  .mo-header .mo-nav{display:none}
  .mo-header .mo-sanduiche{display:grid}
  .mo-header .mo-bar{padding:14px 32px;gap:16px}
  .mo-header .mo-busca{flex:1;width:auto;max-width:420px;margin-left:auto}
}
/* No celular: marca e botões em cima, busca na linha de baixo. O tema vai para o painel. */
@media(max-width:699px){
  :root{--mo-altura:115px}
  .mo-header .mo-bar{padding:12px 16px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"marca acoes" "busca busca";gap:12px}
  .mo-header .mo-brand{grid-area:marca;justify-self:start}
  .mo-header .mo-acoes{grid-area:acoes;gap:8px}
  .mo-header .mo-busca{grid-area:busca;width:100%;max-width:none;margin:0}
  .mo-header .mo-tema{display:none}
  .mo-header .mo-menu-conta{right:-46px}
}
@media(prefers-reduced-motion:reduce){.mo-header .mo-drop-botao svg,.mo-header .mo-round{transition:none}}