/* ============================================================================
   POOD — MENU
   Depende de pood-tokens.css. Cor e medida saem de var(--pood-*). */
/* Mega menu fullwidth: trilho vertical + imagem revelada por hover/foco + bloco
   de promocao a direita. Escopo: desktop >=992px. Abaixo disso vale a gaveta do
   Porto, que ja esconde .menu-thumb-img sozinho.
   Depende de sw_menu_type=fullwidth e sw_menu_cat_columns=1 nas 7 categorias de
   topo. Enquanto estiverem em classic, este bloco e inerte.
   Sem !important: o sw_megamenu.js nao escreve style inline em fullwidth. */
@media (min-width: 992px) {

  /* CORRECAO DE DEFEITO PRE-EXISTENTE — nada a ver com o mega menu novo.
     O bloco POOD-MENU-M3 acima tenta deixar a barra horizontal com
       .page-header.type2 .navigation > ul            -> (0,3,1)
     mas o Porto (type2.css) tem
       .page-header.type2 .navigation:not(.side-megamenu) > ul {display:block}
     que vale (0,4,1), porque :not() soma a especificidade do argumento.
     O Porto vencia: o <ul> ficava block e os <li>, que o M3 poe em
     display:flex, viravam blocos de largura total e EMPILHAVAM NA VERTICAL.
     Medido em 12/08/2026: 7 itens de 1181px, um por linha.
     Aqui a regra e reescrita com a mesma especificidade do Porto. */
  /* space-around, nao center+gap: e o que o card usa. A diferenca importa —
     com gap fixo o menu fica num bloco compacto no meio e a folga toda vai
     para as pontas; com space-around o espaco se reparte entre os itens e a
     linha ocupa a faixa inteira, que e o desenho do card. Como a folga das
     pontas e metade da folga entre itens, o conjunto tambem fica simetrico
     sozinho, sem depender de conta. */
  .page-header.type2 .navigation:not(.side-megamenu) > ul {
    display: flex; flex-wrap: nowrap; justify-content: space-around;
    align-items: stretch; gap: 0; padding: 0;
  }
  /* Os <li> vinham com margin: 0 35px 0 -3.3px. Dois problemas de uma vez:
     (a) 7 x 35px = 245px de margem, que somados ao padding estouravam a barra
         do cabecalho FIXO (precisava 1168px, tinha 980) e jogavam o primeiro
         item sob a logo e o ultimo sob o carrinho;
     (b) a margem e ASSIMETRICA — 35px so a direita —, entao o ultimo item
         carrega 35px de sobra e a linha inteira fica deslocada para a esquerda
         do centro real. Era a queixa de "o menu nao esta no centro".
     Espacamento simetrico e trabalho do gap do flex, nao de margem lateral. */
  .page-header.type2 .navigation:not(.side-megamenu) > ul > li.level0 {
    margin: 0;
  }
  /* O Porto ainda poe margin-left:-3.3px em "li.level0 + li.level0" — truque
     para colapsar o espaco em branco de inline-block, que num container flex
     nao existe mais. A regra acima nao alcanca: o combinador irmao soma
     especificidade. Sobravam 6 x -3,3px = -19,8px SO do lado esquerdo, e a
     metade disso e exatamente o desvio de 9px do centro que ficou medido. */
  .page-header.type2 .navigation:not(.side-megamenu) > ul > li.level0 + li.level0 {
    margin-left: 0;
  }
  /* O CLEARFIX DO PORTO DESCENTRALIZA O MENU. ul::after tem content:"" e
     display:table; num container flex isso deixa de ser clearfix e vira um
     ITEM DE VERDADE, de largura zero — que ainda assim consome um gap inteiro
     no fim da linha. Resultado: tudo desloca meio gap para a esquerda.
     Medido: desvio de -9px com gap 18 (descanso) e -4px com gap 8 (fixo), ou
     seja gap/2 nos dois casos. Escondendo os pseudos o desvio vai a ZERO.
     Nao aparece em children[] nem no inspetor de elementos — so na conta. */
  .page-header.type2 .navigation:not(.side-megamenu) > ul::before,
  .page-header.type2 .navigation:not(.side-megamenu) > ul::after {
    display: none;
  }

  /* referencia de posicionamento da imagem revelada.
     min-height porque a altura natural vem do trilho (44px x n de itens) e
     "Parede e Teto" tem so 2 subcategorias: sem isto o painel abriria com
     88px de altura e a imagem de 260px vazaria para fora. */
  .page-header.type2 .level0.fullwidth > .submenu .row {
    position: relative; min-height: 300px;
  }
  /* o <ul> do Porto e position:relative (styles-m.css: ".navigation ul").
     Enquanto for, ele — e nao a .row — e o bloco contentor da miniatura, e
     "left:280px + right:326px" dentro de uma caixa de 280px colapsa a
     largura para ZERO. Medido: miniatura 0x240, imagem 0px. */
  .page-header.type2 .level0.fullwidth > .submenu ul.subchildmenu { position: static; }

  /* Em fullwidth o Porto poe position:static no <li>, entao o bloco contentor
     do painel passa a ser o <ul> da BARRA (que e position:relative). Com o
     top:0 herdado, o painel abria em cima da propria barra e a escondia.
     top:100% = imediatamente abaixo da barra. Medido: barra 218..267,
     painel passa de 218..538 para 267..587, folga de 0px. */
  .page-header.type2 .level0.fullwidth > .submenu { margin-top: 0; top: 100%; }
  .page-header.type2 .level0.fullwidth > .submenu::before {
    content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
  }

  /* ---- A) trilho: coluna de 280px, sobrepondo o col-md-8 do Bootstrap ---- */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.mega-columns.columns1 {
    box-sizing: border-box; flex: 0 0 280px; max-width: 280px; width: 280px;
    margin: 0; padding: 10px 0; list-style: none;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 {
    box-sizing: border-box; display: block; position: static; padding: 0;
    border-left: 2px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:hover,
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:focus-within {
    background-color: var(--pood-fundo); border-left-color: var(--pood-acento);
  }
  /* space-between empurra a seta para a direita do trilho, como no card.
     border-bottom:0 e text-decoration:none sao explicitos porque o ".submenu a"
     generico do Porto sublinha e risca uma linha embaixo no hover — era a
     "linha em baixo" relatada, no lugar do negrito + seta do card. */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > a {
    box-sizing: border-box; display: flex; align-items: center;
    justify-content: space-between; height: 44px;
    padding: 0 18px; font-size: 13px; font-weight: 400; line-height: normal;
    text-transform: none; text-decoration: none; color: var(--pood-tinta);
    border-bottom: 0; background: transparent;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > a:hover,
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > a:focus {
    text-decoration: none; border-bottom: 0; background: transparent; color: var(--pood-tinta);
  }
  /* O SUBLINHADO VIVE NO <span>, NAO NO <a>. Medido com o mouse de verdade
     sobre o item: o <a> ja saia com text-decoration-line "none" e o <span>
     dentro dele com "underline". Zerar so o <a> nao adianta, e por isso a
     correcao anterior nao surtiu efeito nenhum na tela.
     Licao: text-decoration nao e herdada como cor — ela se PROPAGA da caixa que
     a declara para as linhas de texto dentro dela, e um filho que declara a sua
     propria vence. Sempre confirmar em qual elemento a propriedade esta. */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > a span,
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > a:hover span,
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > a:focus span,
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:hover > a span {
    text-decoration: none;
  }
  /* negrito e seta coral: no card os dois so aparecem no item ativo — sao o que
     diz "e daqui que veio a imagem ao lado". A seta entra por ::after para nao
     depender de markup que o Porto nao emite. */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:hover > a,
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:focus-within > a {
    font-weight: 600;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > a::after {
    content: '\203A'; color: var(--pood-acento); font-size: 15px; line-height: 1;
    opacity: 0; margin-left: 10px; flex: 0 0 auto;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:hover > a::after,
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:focus-within > a::after {
    opacity: 1;
  }
  /* o "Ver tudo em X" nao e uma subcategoria: sem seta */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1.pood-vertudo > a::after {
    content: none;
  }

  /* ---- B) imagem revelada: entre o trilho e a promocao ---- */
  /* largura da promocao fixada em 326px (ver item C) para que este 'right'
     nao dependa da fracao col-md-N gravada no admin */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > .menu-thumb-img {
    box-sizing: border-box; position: absolute; top: 0; bottom: 0;
    left: 280px; right: 326px; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 9px;
    opacity: 0; z-index: 1; pointer-events: none; transition: opacity .18s ease;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:first-child > .menu-thumb-img {
    opacity: 1; pointer-events: auto;
  }
  /* ...e some assim que o mouse entra em QUALQUER item do trilho. Sem isto a
     primeira fica visivel por baixo, e como titulo e chamada tem fundo
     transparente os dois textos se sobrepoem na tela. O hover no <ul> vale
     tambem quando o cursor esta sobre a imagem: ela e descendente do <li>. */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1:hover > li.level1:first-child > .menu-thumb-img {
    opacity: 0; pointer-events: none;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:hover > .menu-thumb-img,
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1:focus-within > .menu-thumb-img {
    opacity: 1; z-index: 2; pointer-events: auto;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > .menu-thumb-img .menu-thumb-link {
    display: block; line-height: 0;
  }
  /* a imagem ja vem 400x400 sobre var(--pood-bloco): o bloco cinza e ela, nao a zona */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > .menu-thumb-img img {
    display: block; width: 210px; height: 210px; max-width: 100%; object-fit: contain;
  }
  /* titulo e chamada, injetados por PoodModulos_Menu/js/menu-titulo a partir do
     alt da imagem — o Porto nao emite texto por subcategoria */
  .page-header.type2 .level0.fullwidth .submenu .menu-thumb-img .pood-thumb-nome {
    font-size: 15px; font-weight: 600; color: var(--pood-tinta); text-align: center;
    line-height: 1.3; max-width: 300px;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-thumb-img .pood-thumb-cta {
    font-size: 12px; font-weight: 400; color: var(--pood-tinta-2); text-decoration: none;
    text-transform: none; padding: 0;
  }
  /* sem sublinhado: era a unica regra de text-decoration do submenu inteiro, e
     o card nao tem nenhuma. O retorno visual do hover vem da cor. */
  .page-header.type2 .level0.fullwidth .submenu .menu-thumb-img .pood-thumb-cta:hover {
    color: var(--pood-acento); text-decoration: none;
  }

  /* ---- C) promocao: bloco CMS por categoria de topo ---- */
  /* margin-left:auto e obrigatorio: como item flex, o bloco encostaria no
     trilho e ficaria EMBAIXO da miniatura, que e absoluta de left:280px a
     right:326px. Medido em 12/08/2026: banner e miniatura sobrepostos. */
  /* padding 18px, nao 22: o conteudo da promocao media 411px e era ELE que
     definia a altura do painel (431px), arrastando o trilho junto. O card fecha
     em ~324px. Nao era a imagem da subcategoria, como parecia — ela tem 210px e
     cabe folgada no minimo de 300px da zona. */
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block {
    box-sizing: border-box; flex: 0 0 326px; max-width: 326px; margin-left: auto;
    border-left: 1px solid var(--pood-linha); padding: 18px 24px;
    color: var(--pood-tinta); font-size: 14px;
  }
  /* desfaz o '.submenu a' generico do Porto, que sairia 12px maiusculo cinza */
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block a {
    font-size: inherit; font-weight: inherit; text-transform: none;
    padding: 0; color: inherit;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block img {
    display: block; max-width: 100%; height: auto;
  }

  /* ---- C2) o banner de destaque, montado pelo bloco CMS ---- */
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 6px; text-decoration: none;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo__tag {
    background: var(--pood-acento); color: var(--pood-tinta); font-size: 9.5px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo__img {
    width: 100%; max-width: 150px; margin: 0;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo__nome {
    font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--pood-tinta);
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo__de {
    font-size: 11.5px; color: var(--pood-tinta-2); text-decoration: line-through;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo__por {
    font-size: 18px; font-weight: 700; color: var(--pood-tinta); line-height: 1.1;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo__cta {
    margin-top: 5px; height: 32px; padding: 0 18px; border: 1px solid var(--pood-linha);
    border-radius: 999px; font-size: 11.5px; font-weight: 500; color: var(--pood-tinta);
    display: inline-flex; align-items: center;
  }
  .page-header.type2 .level0.fullwidth .submenu .menu-right-block .pood-promo:hover .pood-promo__cta {
    background: var(--pood-tinta); border-color: var(--pood-tinta); color: #FFFFFF;
  }

  /* ---- D) defesa: no dia em que existir 3o nivel, ele abriria sobre o trilho ---- */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1 > .subchildmenu {
    display: none;
  }

  /* ---- E) "Ofertas": ultimo item da barra, em coral ---- */
  /* Renderizado no servidor pela sobrescrita de topmenu.phtml no subtema — a
     config staticblock_after do Porto existe mas nenhum template desta versao
     a consome, entao ela nao servia. Coral e o unico uso de acento na barra:
     e o item que deve puxar o clique. */
  .page-header.type2 .navigation:not(.side-megamenu) > ul > li.level0.pood-ofertas > a.level-top,
  .page-header.type2 .navigation:not(.side-megamenu) > ul > li.level0.pood-ofertas > a.level-top span {
    color: var(--pood-acento); font-weight: 600;
  }
  .page-header.type2 .navigation:not(.side-megamenu) > ul > li.level0.pood-ofertas > a.level-top:hover,
  .page-header.type2 .navigation:not(.side-megamenu) > ul > li.level0.pood-ofertas > a.level-top:hover span {
    color: #FFFFFF;
  }
  .page-header.type2 .navigation:not(.side-megamenu) > ul > li.level0.pood-ofertas:hover > a.level-top {
    border-bottom-color: var(--pood-acento);
  }
  /* nao tem submenu: a seta do Porto nao pode aparecer */
  .page-header.type2 .navigation:not(.side-megamenu) > ul > li.level0.pood-ofertas > a.level-top::after {
    display: none;
  }

  /* "Ver tudo em X" ao fim do trilho, injetado pelo JS. Existe porque 64 dos
     280 produtos visiveis nao estao em nenhuma subcategoria. */
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1.pood-vertudo {
    margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--pood-linha);
    border-left-color: transparent;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1.pood-vertudo:hover {
    background: transparent; border-left-color: transparent;
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1.pood-vertudo > a {
    height: 34px; font-size: 12px; color: var(--pood-tinta-2);
  }
  .page-header.type2 .level0.fullwidth .submenu .subchildmenu.columns1 > li.level1.pood-vertudo > a:hover {
    color: var(--pood-acento);
  }

}