/* ============================================================================
   POOD — CABECALHO
   Depende de pood-tokens.css. Cor e medida saem de var(--pood-*). */
/* Cabecalho na Direcao A: utilitaria apagada, faixa principal ESCURA com a
   busca como maior elemento, faixa de menu logo abaixo.
   Tokens: var(--pood-fundo) fundo · var(--pood-bloco) bloco · #FFFFFF superficie · var(--pood-tinta) tinta ·
   var(--pood-tinta-2) tinta-2 · var(--pood-linha) linha · var(--pood-acento) acento (pontuacao).
   var(--pood-escuro-2) e derivado: duas faixas escuras empilhadas precisam de dois degraus.
   Sem sombra em nada. Controles em pilula (raio 999); o resto raio 0. */

/* ---------------- DESKTOP ---------------- */
@media (min-width: 992px) {

  /* --- A) faixa utilitaria --- */
  /* A borda VOLTOU: o card tem "border-bottom:1px solid var(--pood-linha)" e a intencao e
     ficar igual a ele. O que o Will viu como "linha azul" nao era esta borda
     sozinha — eram DUAS linhas empilhadas, porque o .panel.wrapper branco
     terminava 1px acima do fim da faixa e deixava uma tira de var(--pood-fundo) antes da
     borda. Com o wrapper transparente sobra uma linha so, limpa. */
  .page-header.type2 .main-panel-top {
    background: var(--pood-fundo); border-bottom: 1px solid var(--pood-linha); box-shadow: none;
    min-height: 0; height: 34px;
  }
  /* o Porto pinta .panel.wrapper de BRANCO. Como o wrapper e o container de
     1216px centrado, sobravam 345px de var(--pood-fundo) de cada lado: a faixa saia
     bicolor, com emenda vertical visivel. Transparente = faixa uniforme. */
  .page-header.type2 .main-panel-top .panel.wrapper {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 0; height: 34px; padding: 0; background: transparent;
  }
  /* a linha azul e os icones foram para o bloco SEM media query, no fim do
     arquivo: valem em qualquer largura */
  .page-header.type2 .main-panel-top .header-left {
    display: flex; align-items: center; font-size: 11px; color: var(--pood-tinta);
  }
  /* A marca "pood" e preta e a faixa e var(--pood-fundo). A 55% ela resolve em ~#6D6D6E,
     que e praticamente o var(--pood-tinta-2) do texto secundario da propria faixa: em vez
     de ser o elemento mais escuro da barra, passa a ter o mesmo peso do resto.
     A logo de verdade e a da barra escura logo abaixo; esta aqui e assinatura,
     nao identidade, e nao deve competir com aquela. */
  .page-header.type2 .main-panel-top .pood-marca {
    opacity: .55; display: inline-block; vertical-align: -3px; margin-right: 10px;
  }
  .page-header.type2 .main-panel-top .header-right {
    display: flex; align-items: center; gap: 14px;
  }
  .page-header.type2 .main-panel-top,
  .page-header.type2 .main-panel-top a,
  .page-header.type2 .main-panel-top .header.links > li {
    font-size: 11px; color: var(--pood-tinta-2);
  }
  .page-header.type2 .main-panel-top .header.links {
    display: flex; align-items: center; gap: 14px; margin: 0; padding: 0;
  }
  .page-header.type2 .main-panel-top .header.links > li { margin: 0; padding: 0; }
  .page-header.type2 .main-panel-top .header.links > li.greet.welcome {
    color: var(--pood-tinta); font-weight: 600;
  }
  .page-header.type2 .main-panel-top a:hover { color: var(--pood-tinta); text-decoration: none; }
  /* o separador vertical do Porto some: o respiro ja separa */
  .page-header.type2 .main-panel-top .separator,
  .page-header.type2 .main-panel-top .gap { display: none; }
  .page-header.type2 .main-panel-top .share-links { display: flex; gap: 10px; }
  .page-header.type2 .main-panel-top .share-links a {
    width: 20px; height: 20px; display: grid; place-items: center;
    color: var(--pood-tinta-2); background: none; border: 0; font-size: 13px;
  }
  .page-header.type2 .main-panel-top .share-links a:hover { color: var(--pood-tinta); }

  /* --- B) faixa principal, escura --- */
  .page-header.type2 .header-main {
    background: var(--pood-tinta); border: 0; box-shadow: none;
  }
  .page-header.type2 .header-main .header-row {
    display: flex; align-items: center; min-height: 100px; gap: 24px;
  }
  /* a coluna da logo usava 195px para um wordmark de 86px: 109px que a busca
     nao tinha. A busca so cresce se as duas colunas laterais encolherem — ela
     ja absorve 100% da folga que sobra. */
  .page-header.type2 .header-main .header-left {
    flex: 0 0 auto; padding: 0; margin: 0; min-width: 0;
  }
  .page-header.type2 .header-main .header-left .logo { margin: 0; padding: 0; }
  /* base 0%: com flex-basis auto a coluna cresce a partir do conteudo e para
     onde ele acaba; com 0% ela absorve toda a folga da faixa */
  /* padding: 0 e OBRIGATORIO. O Porto entrega "24px 0 8px" — assimetrico —, e
     esses 16px de diferenca empurram a busca 8px para baixo do centro da faixa.
     Medido: faixa 42..142 (centro 92), logo centro 92, busca centro 100. A logo
     estava certa; era a busca que descia, e por comparacao a logo PARECIA alta.
     A folga lateral de 34px e a do card, separando busca de logo e de conta. */
  .page-header.type2 .header-main .header-center {
    flex: 1 1 0%; min-width: 0; display: flex; align-items: center; max-width: none; width: auto;
    padding: 0; margin: 0 34px;
  }
  .page-header.type2 .header-main .header-center .search-area {
    flex: 1 1 auto; width: 100%; min-width: 0;
  }
  /* mesmo "24px 0 8px" assimetrico do .header-center — a coluna da direita
     descia os mesmos 8px. Uma causa so para os dois desalinhamentos. */
  .page-header.type2 .header-main .header-right {
    flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 0;
  }
  /* a logo agora e um PNG branco de verdade (pood branco.png, recortado):
     nao precisa mais do filter de inversao */
  /* 32px, nao 34: no card a logo e deliberadamente MENOR que a pilula de busca
     (42px). E a diferenca de altura entre as duas que faz a busca ler como o
     elemento principal da faixa. */
  .page-header.type2 .header-main .logo img {
    height: 32px; width: auto; max-height: 32px;
  }
  /* tudo que e texto ou icone na faixa escura vira claro */
  .page-header.type2 .header-main,
  .page-header.type2 .header-main a,
  .page-header.type2 .header-main .header-contact,
  .page-header.type2 .header-main .header-contact a { color: #FFFFFF; }

  /* --- B1) busca em pilula --- */
  /* o Porto limita a busca a 490px; solto para ela tomar a folga da faixa e
     virar o maior elemento, como na referencia */
  .page-header.type2 .search-area { padding-left: 0; max-width: none; width: 100%; }
  .page-header.type2 .search-area .block.block-search {
    /* NADA de overflow:hidden aqui: o painel do autocomplete vive dentro deste
       elemento e seria RECORTADO — o DOM o reporta visivel e a tela nao mostra.
       O arredondamento vem do radius nos filhos das pontas. */
    background: #FFFFFF; border: 0; border-radius: 999px;
    max-width: none; width: 100%; float: none;
  }
  .page-header.type2 .search-area .block-search .block-content { margin: 0; }
  .page-header.type2 .search-area .minisearch { display: flex; align-items: center; }
  .page-header.type2 .search-area .field.search { flex: 1 1 auto; min-width: 0; margin: 0; }
  /* o .control nasce display:block: sem isto o seletor de categoria empilha
     ABAIXO do campo e a pilula vira um blocao de 92px de altura */
  .page-header.type2 .search-area .field.search .control {
    display: flex; align-items: center; border: 0; margin: 0; padding: 0;
    position: relative;
  }
  /* 42px e 13px sao os valores do card. A pilula de 46px com corpo 13,5px
     engordava a faixa e aproximava a busca da altura da logo, achatando a
     hierarquia que o card estabelece. Recuo 18px a esquerda / 6px a direita,
     como no card — o lado direito e curto porque a lupa ocupa aquele espaco. */
  .page-header.type2 .search-area .block-search input {
    height: 42px; border: 0; background: transparent; padding: 0 6px 0 18px;
    font-size: 13px; color: var(--pood-tinta); box-shadow: none;
    flex: 1 1 auto; width: auto; min-width: 0; margin: 0; position: relative;
  }
  .page-header.type2 .search-area .block-search input::placeholder { color: var(--pood-tinta-2); opacity: 1; }
  /* O seletor "Todas as Categorias" do Mageplaza sai da barra: com o
     autocomplete mostrando produto, foto e preco enquanto se digita, filtrar
     por categoria antes de buscar deixou de fazer sentido. A busca continua
     sendo a do modulo do Porto — so o seletor some da tela. */
  .page-header.type2 .search-area .search-category { display: none !important; }
  .page-header.type2 .search-area .minisearch .actions { flex: 0 0 auto; position: static; }
  /* o botao nasce position:absolute; static devolve ele ao fluxo do flex e a
     pilula se fecha sem depender de numeros magicos de "right" */
  /* 42px acompanha a nova altura do campo; 44px de largura e a "lupa" de 32px
     do card mais o recuo de 6px de cada lado */
  .page-header.type2 .search-area .minisearch .actions button {
    position: static; width: 44px; height: 42px; background: transparent;
    color: var(--pood-tinta); border: 0; opacity: 1; margin: 0; padding: 0;
  }
  .page-header.type2 .search-area .minisearch .actions button:hover { background: var(--pood-fundo); }
  .page-header.type2 .search-area .nested { display: none; }

  /* --- B2) bloco da direita: WhatsApp, conta, carrinho --- */
  .page-header.type2 .header-main .header-contact {
    display: flex; align-items: center; gap: 14px;
  }
  /* o icone de conta duplica o "Entrar / Registrar" do bloco ao lado, mesmo destino */
  .page-header.type2 .header-main .header-contact a.my-account { display: none; }
  /* O bloco CMS do WhatsApp/conta traz <style> proprio com #f26100 e #128c3e —
     a divida de laranja do §10.4 do CLAUDE.md. Sobre a faixa escura o texto
     saia #222529, ilegivel. Aqui ele e vestido na Direcao A sem editar o bloco,
     que continua livre para voce mexer no admin. */
  .page-header.type2 .header-main .pood-hdr__val,
  .page-header.type2 .header-main .pood-hdr__item:hover .pood-hdr__val { color: #FFFFFF; }
  .page-header.type2 .header-main .pood-hdr__rot { color: rgba(255,255,255,.6); }
  .page-header.type2 .header-main .pood-hdr__ico--zap,
  .page-header.type2 .header-main .pood-hdr__ico--conta {
    background: rgba(255,255,255,.12); color: #FFFFFF;
  }
  .page-header.type2 .header-main .pood-hdr__inicial { color: #FFFFFF; }
  /* compactacao: cada item vinha em DUAS linhas (rotulo pequeno + valor), o que
     custava 184px no WhatsApp e 192px na conta. Uma linha so devolve ~150px a
     busca, que e o maior elemento da faixa na Direcao A. */
  .page-header.type2 .header-main .pood-hdr { gap: 2px; }
  .page-header.type2 .header-main .pood-hdr__rot { display: none; }
  .page-header.type2 .header-main .pood-hdr__val { font-size: 12.5px; font-weight: 600; }
  .page-header.type2 .header-main .pood-hdr__item {
    gap: 8px; padding: 5px 10px 5px 5px;
  }
  .page-header.type2 .header-main .pood-hdr__ico { width: 30px; height: 30px; }
  /* O card NAO usa um tamanho unico: WhatsApp 18, conta 19, carrinho 20. A
     graduacao existe porque as tres artes tem densidades diferentes — o glifo
     do WhatsApp e cheio, o da conta e de traco fino e o do carrinho e o mais
     vazado. Igualar tudo em 16px, como estava, faz o carrinho — que e o icone
     mais importante da faixa — parecer o menor dos tres. */
  .page-header.type2 .header-main .pood-hdr__zap .pood-hdr__ico svg { width: 18px; height: 18px; }
  .page-header.type2 .header-main .pood-hdr__conta .pood-hdr__ico svg { width: 19px; height: 19px; }
  .page-header.type2 .header-main .pood-hdr__retirada .pood-hdr__ico svg { width: 17px; height: 17px; }
  .page-header.type2 .header-main .pood-hdr__ico svg { width: 18px; height: 18px; }
  .page-header.type2 .header-main .minicart-wrapper .action.showcart:before { font-size: 20px; }
  .page-header.type2 .header-main .pood-hdr__item::before { background: #FFFFFF; }
  .page-header.type2 .header-main .pood-hdr__item:focus-visible { outline-color: var(--pood-acento); }
  /* ---- icones de carrinho e desejos: SVG no lugar da fonte porto-icons ----
     O carrinho e o coracao eram GLIFOS da fonte "porto-icons", desenhados
     cheios e com peso diferente do resto da faixa. O card usa traco de 1.5px.
     Fonte de icone nao se ajusta: ou se troca a fonte ou se troca por SVG.
     Tecnica: mask-image + background-color currentColor. Com background-image
     a cor ficaria presa no arquivo e o hover nao poderia mudar nada. */
  /* SEM ".header-main" no seletor, de proposito. Ao rolar a pagina o Porto faz
     detach() do .minicart-wrapper e append() dentro da .navigation (§29.12) —
     preso a .header-main, o icone novo valia so no topo e o cabecalho fixo
     continuava com o glifo antigo da fonte. Ancorar em .page-header.type2
     cobre as duas posicoes sem precisar duplicar as regras. */
  .page-header.type2 .minicart-wrapper .action.showcart .minicart-icon::before,
  .page-header.type2 .header-contact a.wishlist > i::before {
    content: none;
  }
  .page-header.type2 .header-main .minicart-wrapper { margin: 0; }
  .page-header.type2 .header-main .minicart-wrapper .action.showcart,
  .page-header.type2 .header-main .minicart-wrapper .action.showcart:before,
  .page-header.type2 .header-main .minicart-wrapper .action.showcart .counter-number { color: #FFFFFF; }
  .page-header.type2 .header-main .minicart-wrapper .counter.qty {
    color: #FFFFFF; font-weight: 700;
  }

  /* --- C) faixa de menu --- */
  /* A faixa media 60px com o menu de 48px COLADO NO TOPO — 12px vazios so
     embaixo. Nao era centralizacao errada, era altura sobrando: o Porto reserva
     espaco para uma segunda linha que este menu nao usa. 48px cravados, igual
     ao card, e a faixa passa a ser exatamente o menu. */
  .page-header.type2 .nav-sections {
    background: var(--pood-escuro-2); border-top: 0; border-bottom: 0; box-shadow: none;
    min-height: 48px; height: 48px; margin-bottom: 0;
  }
  .page-header.type2 .nav-sections .nav-sections-item-content { padding-bottom: 0; }
  .page-header.type2 .navigation:not(.side-megamenu) > ul { gap: 0; }
  /* 8px, como no card. Com 16px os sete rotulos pediam 1168px dos 1216 e o
     menu ficava sem respiro; e no cabecalho fixo nem cabia.
     O seletor precisa do ">" e do "a": o bloco M3 usa
       .navigation:not(.side-megamenu) .level0 .level-top   -> (0,6,0)
     e a versao curta desta regra, (0,4,1), PERDIA — media em 12/08 mostrava
     16px mesmo com a regra publicada. Com :not + ul + a esta vale (0,6,2). */
  .page-header.type2 .navigation:not(.side-megamenu) > ul > li.level0 > a.level-top {
    height: 48px; padding: 0 8px; font-size: 13px; font-weight: 500;
    letter-spacing: .005em; text-transform: none; color: rgba(255,255,255,.86);
    border-bottom: 1px solid transparent;
  }
  .page-header.type2 .navigation li.level0:hover > .level-top,
  .page-header.type2 .navigation li.level0 > .level-top:hover,
  .page-header.type2 .navigation li.level0 > .level-top.ui-state-active {
    color: #FFFFFF; background: transparent; border-bottom-color: var(--pood-acento);
  }
  /* o M3 desenha um filete animado com ::after; a borda acima ja cumpre isso */
  .page-header.type2 .navigation:not(.side-megamenu) .level0 .level-top::after { display: none; }
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 991px) {

  /* ===== ARRANJO DO CARD: barra escura -> busca -> faixa clara =====
     No Porto a ordem e o inverso: a faixa clara vem primeiro e a busca nao
     existe na tela, so uma lupa que a abre. O .page-header e um bloco comum,
     entao vira coluna flex e a ordem se resolve por 'order', sem tocar em
     template nenhum. */
  .page-header.type2 { display: flex; flex-direction: column; }
  .page-header.type2 .header-main    { order: 1; }
  .page-header.type2 .main-panel-top { order: 2; }
  .page-header.type2 .sections.nav-sections { order: 3; }

  /* ---- barra escura: 56px, com a busca descendo para a linha de baixo ---- */
  .page-header.type2 .header-main { background: var(--pood-tinta); padding: 0; }
  .page-header.type2 .header-main .header.content {
    display: flex; flex-wrap: wrap; align-items: center; padding: 0 14px;
    max-width: none; width: 100%;
  }
  .page-header.type2 .header-main .header-left {
    order: 1; flex: 1 1 auto; display: flex; align-items: center; gap: 8px;
    height: 56px; padding: 0; margin: 0;
  }
  .page-header.type2 .header-main .header-right {
    order: 2; flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
    height: 56px; padding: 0; margin: 0;
  }
  /* flex-basis 100% e o que joga a busca para a propria linha */
  .page-header.type2 .header-main .header-center {
    order: 3; flex: 0 0 100%; max-width: none; width: 100%;
    margin: 0 0 12px; padding: 0;
  }
  .page-header.type2 .header-main .logo { margin: 0; padding: 0; }
  .page-header.type2 .header-main .logo img { height: 22px; width: auto; max-height: 22px; }
  .page-header.type2 .header-main .action.nav-toggle { margin: 0; padding: 0; }

  /* ---- a busca deixa de ser uma lupa e passa a viver na tela ----
     O Porto entrega .search-toggle-icon com o .block-search em display:none
     ate alguem tocar. Busca escondida atras de um toque e busca menos usada, e
     no mobile ela e o caminho mais curto para o produto. */
  .page-header.type2 .header-main .search-toggle-icon { display: none !important; }
  .page-header.type2 .header-main .search-area { padding: 0; width: 100%; max-width: none; }
  .page-header.type2 .header-main .search-area .block.block-search {
    display: block !important; position: static; float: none;
    width: 100%; max-width: none; margin: 0; padding: 0;
    background: #FFFFFF; border: 0; border-radius: 999px; box-shadow: none;
  }
  .page-header.type2 .header-main .search-area .block-search .block-content { margin: 0; }
  .page-header.type2 .header-main .search-area .minisearch {
    display: flex; align-items: center; height: 38px;
  }
  .page-header.type2 .header-main .search-area .field.search {
    flex: 1 1 auto; min-width: 0; margin: 0;
  }
  .page-header.type2 .header-main .search-area .field.search .control {
    display: flex; align-items: center; border: 0; margin: 0; padding: 0; position: relative;
  }
  .page-header.type2 .header-main .search-area .block-search input {
    height: 38px; border: 0; background: transparent; padding: 0 4px 0 16px;
    font-size: 12.5px; color: var(--pood-tinta); box-shadow: none; margin: 0;
    flex: 1 1 auto; width: auto; min-width: 0;
  }
  .page-header.type2 .header-main .search-area .block-search input::placeholder { color: var(--pood-tinta-2); }
  .page-header.type2 .header-main .search-area .minisearch .actions { flex: 0 0 auto; position: static; }
  .page-header.type2 .header-main .search-area .minisearch .actions button {
    position: static; width: 38px; height: 38px; background: transparent;
    color: var(--pood-tinta); border: 0; opacity: 1; margin: 0; padding: 0;
  }
  .page-header.type2 .header-main .search-area .nested { display: none; }

  /* ---- faixa clara: 32px, so a assinatura, centralizada ---- */
  .page-header.type2 .main-panel-top {
    background: var(--pood-fundo); height: 32px; min-height: 0;
    border-top: 1px solid var(--pood-linha); border-bottom: 1px solid var(--pood-linha);
  }
  .page-header.type2 .main-panel-top .panel.wrapper {
    height: 32px; min-height: 0; justify-content: center; background: transparent;
  }
  .page-header.type2 .main-panel-top .header-left {
    justify-content: center; font-size: 10.5px; color: var(--pood-tinta);
  }
  /* "Entrar", "Fale Conosco", "Criar Conta" e as redes nao cabem em 375px, e
     todas ja tem caminho pela gaveta ou pelo rodape */
  .page-header.type2 .main-panel-top .header-right { display: none; }
  .page-header.type2 .header-main,
  .page-header.type2 .header-main a,
  .page-header.type2 .header-main .action.nav-toggle,
  .page-header.type2 .header-main .action.nav-toggle:before { color: #FFFFFF; }
  .page-header.type2 .header-main .search-toggle-icon,
  .page-header.type2 .header-main .search-toggle-icon i { color: #FFFFFF; }
  .page-header.type2 .header-main .minicart-wrapper .action.showcart,
  .page-header.type2 .header-main .minicart-wrapper .action.showcart:before { color: #FFFFFF; }
  .page-header.type2 .header-main .minicart-wrapper .counter.qty {
    color: #FFFFFF; font-weight: 700;
  }

  /* a gaveta */
  .nav-open .nav-sections { background: var(--pood-tinta); box-shadow: none; }
  .nav-sections .section-item-title { background: var(--pood-escuro-2); border: 0; }
  .nav-sections .section-item-title > a { color: rgba(255,255,255,.86); }
  .nav-sections .section-item-title.active > a { color: #FFFFFF; }
  .nav-sections-item-content { background: var(--pood-tinta); }

  .page-header.type2 .navigation li.level0 > .level-top {
    height: 50px; display: flex; align-items: center;
    padding: 0 18px; font-size: 13px; font-weight: 500; text-transform: none;
    letter-spacing: .01em; color: rgba(255,255,255,.88);
    border-bottom: 1px solid rgba(255,255,255,.08); background: transparent;
  }
  .page-header.type2 .navigation li.level1 > a {
    min-height: 44px; display: flex; align-items: center;
    padding: 0 18px 0 32px; font-size: 12px; font-weight: 400;
    text-transform: none; color: rgba(255,255,255,.66);
    background: rgba(0,0,0,.28); border: 0;
  }
  /* o botao de abrir subnivel e um div VAZIO: todo o desenho e por pseudo */
  .page-header.type2 .navigation .open-children-toggle {
    width: 50px; height: 50px; color: rgba(255,255,255,.45);
  }

  /* SEM MINIATURA na gaveta — e a decisao do card. Eu tinha reintroduzido uma
     de 36px como identificacao da linha; ela some.
     Motivo: numa gaveta de 375px cada miniatura empurra o rotulo 48px para a
     direita, e "Sandbags, Trenos e Strongman" passa a quebrar em duas linhas.
     Numa lista vertical o rotulo ja identifica; a foto so encurta o texto.
     O Porto ja esconde .menu-thumb-img em <=991px por conta propria — basta
     nao reativar. */
  .page-header.type2 .navigation li.level1 > a { padding-left: 32px; }
}

/* ---------------- AUTOCOMPLETE DO MAGEPLAZA (modulo do Porto) ----------------
   Fora de media query: vale nos dois breakpoints.
   A biblioteca (devbridge) mede a altura do painel e o vira PARA CIMA quando
   ele nao cabe abaixo do campo. Com 9 produtos, imagem e preco, ele passa de
   1.300px e abre em y NEGATIVO — fora da tela. Limitar a altura devolve o
   painel para baixo do campo. Isto e estilo: a busca continua sendo a do
   modulo, com produto, foto e preco. */
.autocomplete-suggestions {
  /* !important porque a biblioteca escreve a altura como atributo style */
  max-height: 62vh !important; overflow-y: auto !important; overflow-x: hidden;
  background: #FFFFFF; border: 1px solid var(--pood-linha); border-radius: 4px;
  box-shadow: none;
}
.autocomplete-suggestions .autocomplete-suggestion { border-bottom: 1px solid var(--pood-fundo); }
.autocomplete-suggestions .autocomplete-suggestion:last-child { border-bottom: 0; }

/* O painel do Mageplaza nao recebe "top" inline — ele so ganha position,
   max-height, z-index e width. A posicao vertical vinha do posicionamento
   ESTATICO dentro do .control. Ao transformar o .control em flex com
   align-items:center, o painel absoluto passou a ser centralizado e, com
   565px de altura num controle de 46px, abria em y NEGATIVO.
   Ancorar explicitamente resolve — e a biblioteca segue com orientation:bottom. */
.page-header.type2 .search-area .field.search .control > .autocomplete-suggestions {
  top: calc(100% + 8px); left: 0; right: auto; bottom: auto;
  width: 100% !important;
}

/* arredondamento das pontas sem recortar o painel do autocomplete */
@media (min-width: 992px) {
  .page-header.type2 .search-area .minisearch .actions button {
    border-top-right-radius: 999px; border-bottom-right-radius: 999px;
  }
}

/* ============ ESTRUTURA DO BLOCO CMS DO CABECALHO ============
   O bloco porto_custom_block_for_header_18 perdeu o <style> proprio (tinha
   #f26100 e #128c3e). Todo o desenho dele vive aqui agora. */
.page-header.type2 .header-main .pood-hdr {
  display: flex; align-items: center; gap: 4px;
}
.page-header.type2 .header-main .pood-hdr__item {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  text-decoration: none !important; color: inherit !important;
  position: relative; transition: background-color .18s ease;
}
.page-header.type2 .header-main a.pood-hdr__item:hover { background: rgba(255,255,255,.08); }
.page-header.type2 .header-main .pood-hdr__ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: #FFFFFF;
}
.page-header.type2 .header-main .pood-hdr__ico svg { display: block; }
.page-header.type2 .header-main .pood-hdr__txt {
  display: flex; flex-direction: column; line-height: 1.2;
}
.page-header.type2 .header-main .pood-hdr__val {
  font-size: 12.5px; font-weight: 600; color: #FFFFFF; white-space: nowrap;
}
.page-header.type2 .header-main .pood-hdr__sub {
  font-size: 10.5px; font-weight: 400; color: rgba(255,255,255,.6); white-space: nowrap;
}
.page-header.type2 .header-main .pood-hdr__retirada .pood-hdr__ico { background: transparent; color: var(--pood-acento); }
.page-header.type2 .header-main .pood-hdr__inicial {
  font-size: 14px; font-weight: 700; line-height: 1; text-transform: uppercase; color: #FFFFFF;
}
@media (prefers-reduced-motion: reduce) {
  .page-header.type2 .header-main .pood-hdr__item { transition: none; }
}

/* ============ MENU: COR E TIPOGRAFIA ============
   O bloco POOD-MENU-M3 usa ".navigation:not(.side-megamenu) .level0 .level-top",
   que vale (0,6,0) — mais que a minha regra anterior, (0,4,1). Ele vencia, e por
   isso a fonte e a cor do menu continuavam as dele. Aqui a especificidade e
   igualada com a mesma forma de seletor. */
@media (min-width: 992px) {
  .page-header.type2 .nav-sections,
  .page-header.type2 .sections.nav-sections {
    background: var(--pood-escuro-2); border-top: 0; border-bottom: 0; box-shadow: none;
  }
  .page-header.type2 .navigation:not(.side-megamenu) li.level0 > .level-top,
  .page-header.type2 .navigation:not(.side-megamenu) .level0 .level-top {
    height: 48px; padding: 0 16px;
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 13px; font-weight: 500; letter-spacing: .005em;
    text-transform: none; color: rgba(255,255,255,.86);
    background: transparent; border-bottom: 1px solid transparent;
  }
  .page-header.type2 .navigation:not(.side-megamenu) li.level0:hover > .level-top,
  .page-header.type2 .navigation:not(.side-megamenu) li.level0 > .level-top:hover,
  .page-header.type2 .navigation:not(.side-megamenu) li.level0 > .level-top.ui-state-active,
  .page-header.type2 .navigation:not(.side-megamenu) li.level0.active > .level-top {
    color: #FFFFFF; background: transparent; border-bottom-color: var(--pood-acento);
  }
  .page-header.type2 .navigation:not(.side-megamenu) .level0 .level-top::after,
  .page-header.type2 .navigation:not(.side-megamenu) .level0 .level-top::before { display: none; }
}

/* O <ul> do menu recebe fundo BRANCO de porto_design/header/header_menu_bgcolor,
   emitido em design_default.css. Ele pintava por cima do var(--pood-escuro-2) do .nav-sections
   e o texto branco sumia. Medido em 12/08/2026: ul bg=rgb(255,255,255).
   Aqui o <ul> fica transparente e quem pinta e a faixa. */
@media (min-width: 992px) {
  .page-header.type2 .navigation:not(.side-megamenu) > ul,
  .page-header.type2 .navigation:not(.side-megamenu) > ul > li.level0 {
    background: transparent;
  }
}
@media (max-width: 991px) {
  .page-header.type2 .navigation > ul,
  .page-header.type2 .navigation ul.ui-menu { background: transparent; }
}

/* ============ MOBILE: COR DO TEXTO DA GAVETA ============
   Mesma armadilha do desktop. O texto saia rgb(51,51,51) sobre o fundo
   var(--pood-tinta) — cinza escuro sobre escuro. As regras que venciam vinham do
   design_default.css (header_menu_color) e do bloco M3, ambas com
   ".navigation:not(.side-megamenu)". Aqui a forma do seletor e igualada. */
@media (max-width: 991px) {
  .page-header.type2 .navigation:not(.side-megamenu) li.level0 > .level-top,
  .page-header.type2 .navigation:not(.side-megamenu) .level0 .level-top {
    color: rgba(255,255,255,.9) !important; background: transparent !important;
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: .01em;
  }
  .page-header.type2 .navigation:not(.side-megamenu) li.level0:hover > .level-top,
  .page-header.type2 .navigation:not(.side-megamenu) li.level0 > .level-top.ui-state-active {
    color: #FFFFFF !important; background: rgba(255,255,255,.06) !important;
  }
  .page-header.type2 .navigation:not(.side-megamenu) li.level1 > a,
  .page-header.type2 .navigation:not(.side-megamenu) .level1 > a {
    color: rgba(255,255,255,.7) !important; background: rgba(0,0,0,.28) !important;
    font-size: 12px; font-weight: 400; text-transform: none;
  }
  .page-header.type2 .navigation:not(.side-megamenu) li.level1 > a:hover { color: #FFFFFF !important; }
  .page-header.type2 .navigation:not(.side-megamenu) .submenu,
  .page-header.type2 .navigation:not(.side-megamenu) .subchildmenu { background: transparent; }

  /* a faixa utilitaria quebrava em duas linhas no celular: o texto numa e os
     icones sociais noutra. Uma linha so, com os sociais ao lado. */
  .page-header.type2 .main-panel-top .panel.wrapper {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: nowrap; gap: 8px; min-height: 32px;
  }
  .page-header.type2 .main-panel-top .header-left {
    flex: 1 1 auto; min-width: 0; font-size: 10.5px; color: var(--pood-tinta);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .page-header.type2 .main-panel-top .header-right { flex: 0 0 auto; gap: 10px; }
  .page-header.type2 .main-panel-top .panel.header,
  .page-header.type2 .main-panel-top .top-links-icon,
  .page-header.type2 .main-panel-top .header.links { display: none; }
  .page-header.type2 .main-panel-top .share-links { display: flex; gap: 12px; }

  /* faixa principal mais baixa, como no card */
  .page-header.type2 .header-main .header-row { min-height: 56px; }
/* as abas "Menu" e "Conta" da gaveta: a ativa vinha com o vermelho do tema.
     !important pelo mesmo motivo das cores do menu — o M3 usa !important aqui. */
  .nav-sections .section-item-title,
  .nav-sections .nav-sections-item-title {
    background: var(--pood-escuro-2) !important; border: 0 !important; box-shadow: none !important;
  }
  .nav-sections .section-item-title.active,
  .nav-sections .nav-sections-item-title.active {
    background: var(--pood-tinta) !important;
  }
  .nav-sections .section-item-title > a,
  .nav-sections .nav-sections-item-title > a,
  .nav-sections .nav-sections-item-title strong {
    color: rgba(255,255,255,.68) !important; font-size: 12.5px; font-weight: 600;
    text-transform: none; letter-spacing: .02em;
  }
  .nav-sections .section-item-title.active > a,
  .nav-sections .nav-sections-item-title.active > a,
  .nav-sections .nav-sections-item-title.active strong {
    color: #FFFFFF !important;
  }
}
/* ============ CABECALHO FIXO AO ROLAR ============
   O Porto, no sticky >=992px, faz duas mutacoes no DOM (lidas no head.phtml):
     1. detach() do .minicart-wrapper de .header-main e append() dentro da
        .page-header .navigation;
     2. prepend de uma .sticky-logo na .navigation.
   Como a .navigation nao e flex e o <ul> ocupa a largura toda, o carrinho
   caia POR CIMA dos itens do menu, e a sticky-logo entrava com a arte
   original, escura, sobre a barra escura.
   Aqui a .navigation vira uma linha flex: logo, menu e carrinho lado a lado.

   ATENCAO — este bloco ficou por dias sem efeito nenhum porque a linha abaixo
   estava escrita como " (min-width: 992px) {", SEM o @media. Regra invalida faz
   o navegador descartar TUDO ate a chave de fechamento, sem erro em lugar
   nenhum. O sintoma era o sticky continuar quebrado por mais que eu editasse. */
@media (min-width: 992px) {
  /* escopado em .sticky-header: so quando o Porto de fato mutou o DOM. Fora do
     sticky a .navigation tem um filho so e nao precisa virar flex. */
  /* padding 0: no sticky o Porto poe "padding: 10px 80px" na .navigation — os
     80px da direita sao a reserva para o minicart, que ele posiciona ABSOLUTO.
     Aqui o minicart esta no fluxo flex, entao a reserva vira espaco morto e
     rouba 90px do menu. Medido em 1195px: a <ul> recebia 823px para 887 de
     conteudo, e o menu passava por baixo do carrinho mesmo com a logo oculta. */
  .page-header.type2.sticky-header .navigation:not(.side-megamenu) {
    display: flex; align-items: center; padding-left: 0; padding-right: 0;
  }
  /* min-width: 0 e o que permite a <ul> encolher dentro do flex: sem ele o
     item flex nunca fica menor que o conteudo e o menu empurra o carrinho para
     fora da barra. Medido depois do encurtamento dos rotulos, na faixa
     apertada de 992-1199px: 827px disponiveis para 742 de menu. */
  .page-header.type2.sticky-header .navigation:not(.side-megamenu) > ul {
    flex: 1 1 auto; min-width: 0;
  }
  /* float:left do Porto tirado: com ele a logo sai do fluxo flex e volta a
     encostar no primeiro item do menu (media: cobria "Racks, Gaiolas e Rigs") */
  .page-header.type2.sticky-header .navigation .sticky-logo {
    order: -1; flex: 0 0 auto; display: flex; align-items: center;
    float: none; padding-right: 22px; margin: 0;
  }
  /* a arte apontada por sticky_header_logo_src agora e a mesma PNG branca do
     cabecalho principal — nada de filter de inversao, que so mascararia uma
     arte errada. 26px numa barra de 48px. */
  .page-header.type2.sticky-header .navigation .sticky-logo img {
    height: 26px; width: auto; max-height: 26px; display: block;
  }
  .page-header.type2.sticky-header .navigation > .minicart-wrapper {
    flex: 0 0 auto; margin: 0 0 0 18px; position: static;
  }
}
/* AQUI HAVIA DOIS REMENDOS, e os dois SAIRAM em 12/08/2026:
     1. a logo do cabecalho fixo escondida abaixo de 1400px;
     2. o recuo do link apertado de 8px para 5px na mesma faixa.
   Eram consequencia dos rotulos longos, nao do layout. Com "Racks, Gaiolas e
   Rigs" e "Ginastica e Mobilidade" encurtados na exibicao do menu pelo
   PoodModulos_Menu (o nome da categoria e a URL seguem inteiros), o menu passou
   a pedir 742px onde pedia 887.

   Medido no cabecalho FIXO, ja sem os dois remendos:

     largura    container   disponivel   menu pede   folga
     992-1199     960px        827px        742px     85px   <- faixa apertada
     1280        1200px       1067px        742px    325px

   A faixa 992-1199 e a pior porque o container do Porto e fixo em 960px ali:
   1024 e 1195 medem exatamente igual. Em nenhuma delas o menu invade o
   carrinho, e a <ul> continua com 48px, ou seja, em UMA linha.

   O "padding-left/right: 0" na .navigation, logo acima, NAO era remendo e fica:
   os 80px que o Porto reserva ali sao para um minicart posicionado absoluto, e
   aqui ele esta no fluxo flex. */
@media (min-width: 992px) {
  .page-header.type2.sticky-header .navigation > .minicart-wrapper .action.showcart,
  .page-header.type2.sticky-header .navigation > .minicart-wrapper .action.showcart:before { color: #FFFFFF; }
  .page-header.type2.sticky-header .navigation > .minicart-wrapper .counter.qty {
    color: #FFFFFF; font-weight: 700;
  }
  /* o marcador que o Porto deixa no lugar de origem nao pode ocupar espaco */
  .page-header.type2 .header-main .minicart-place { display: none; }
}

/* ============ SEM MEDIA QUERY: vale em QUALQUER largura ============
   Tudo aqui embaixo estava dentro do bloco @media (min-width: 992px) e por
   isso valia so no desktop. Medido em 375px em 12/08/2026: a linha azul
   voltava, o carrinho e o coracao eram os glifos cheios da fonte porto-icons,
   a setinha reaparecia, e a lista de desejos ficava visivel para quem NAO
   estava logado — quatro defeitos de uma vez, todos por escopo de media query.

   Regra que passa a valer: identidade visual (icone, cor de marca, elemento
   que some por regra de negocio) NAO pertence a um breakpoint. Media query e
   para o que muda com o espaco disponivel — tamanho, arranjo, quantidade de
   colunas. Se a regra vale nas duas larguras, ela fica fora. */

/* a linha azul do Porto: .panel.wrapper::after com border-bottom #0e95d8 */
.page-header.type2 .main-panel-top .panel.wrapper::after,
.page-header.type2 .main-panel-top .panel.wrapper::before { display: none; }

/* a setinha para baixo ao lado do carrinho — glifo de 17px no ::after do link */
.page-header.type2 .minicart-wrapper .action.showcart::after { display: none; }

/* carrinho e desejos em SVG, no traco de 1,5px do card */
.page-header.type2 .minicart-wrapper .action.showcart .minicart-icon::before,
.page-header.type2 .header-contact a.wishlist > i::before { content: none; }
.page-header.type2 .minicart-wrapper .action.showcart .minicart-icon,
.page-header.type2 .header-contact a.wishlist > i {
  display: block; width: 21px; height: 21px; background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain;   mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.page-header.type2 .minicart-wrapper .action.showcart .minicart-icon {
  -webkit-mask-image: url(https://pood.com.br/media/pood/icons/carrinho.svg);
  mask-image: url(https://pood.com.br/media/pood/icons/carrinho.svg);
}
.page-header.type2 .header-contact a.wishlist > i {
  -webkit-mask-image: url(https://pood.com.br/media/pood/icons/desejos.svg);
  mask-image: url(https://pood.com.br/media/pood/icons/desejos.svg);
}

/* Lista de desejos SO para quem esta logado. Nasce escondida e aparece com a
   classe pood-logado no <body>, escrita pelo JS a partir da secao customer do
   customer-data. O caminho inverso piscaria o icone em toda carga de visitante,
   porque a pagina vem do FPC sem saber quem e o cliente (§3.5). */
.page-header.type2 .header-contact a.wishlist {
  width: 34px; height: 34px; display: none; place-items: center;
  color: #FFFFFF; font-size: 19px; margin: 0;
}
body.pood-logado .page-header.type2 .header-contact a.wishlist { display: grid; }

/* o icone de conta duplica o "Entrar / Registrar" do bloco ao lado */
.page-header.type2 .header-contact a.my-account { display: none; }

/* A marca na faixa utilitaria precisa de ar ate a bandeira: com 10px as duas
   artes se tocavam e liam como um simbolo so. 16px separa sem afastar. */
.page-header.type2 .main-panel-top .pood-marca { margin-right: 16px; }

/* As faixas do cabecalho vao de borda a borda. O Porto aplica o container de
   conteudo no proprio .header-main em alguns tipos de cabecalho, e o fundo
   escuro parava antes da borda da tela. */
.page-header.type2 .main-panel-top,
.page-header.type2 .header-main { width: 100%; max-width: none; margin: 0; }

/* Contagem do carrinho: numero AO LADO do icone, em branco - nao um badge.

   O Porto entrega um circulo de 16px posicionado absoluto sobre o icone
   (top:-5px, right:18px, left:-13px, raio 8). O design system poe o numero em
   fluxo, ao lado do icone, branco e 700, com tabular-nums para nao dancar ao
   trocar de 9 para 10 (.hs-conta .qt).

   Fora de @media de proposito: e identidade visual, vale nas duas larguras. Foi
   a licao do §29.17 - seis regras somiram no mobile por estarem so no bloco de
   desktop.

   O .empty importa: com o carrinho vazio o Magento mantem o elemento com "0"
   dentro. Como badge sobreposto isso ja aparecia; em fluxo apareceria do mesmo
   jeito, e um "0" permanente ao lado do icone e ruido. */
.page-header.type2 .minicart-wrapper .action.showcart {
  display: inline-flex;
  align-items: center;
}
.page-header.type2 .minicart-wrapper .counter.qty {
  position: static;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0 0 0 6px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.page-header.type2 .minicart-wrapper .counter.qty.empty { display: none; }