/* =========================================================================
   OS MEGAMENUS DE PRODUTO
   -------------------------------------------------------------------------
   Dois menus, duas estruturas, duas técnicas. Vale explicar por quê, porque
   a diferença não é escolha de estilo: é o que cada menu permite.

   O Woodmart tem um mecanismo de "mega menu por bloco HTML". Ele só
   renderiza o bloco quando o item NÃO TEM FILHOS:

       if ( $block && ! $args->walker->has_children )

   · MENU 9 "Principal" é o do CELULAR. Os itens de categoria lá têm
     filhos, um por produto, mantidos no painel. Para usar bloco eu teria
     que apagar esses filhos, e o celular perderia a lista.
     Então para ele a PARTE 1 deste arquivo: os itens continuam lá, cada
     um com a foto do produto para o qual aponta (`nav-menu-images`, que é
     recurso do tema), e o CSS reorganiza em grade.

   · MENU 1300 é o do DESKTOP. Os seis itens de topo NÃO têm filhos e já
     vinham com `design=full-width` e um bloco cada, de 2023. Ali o
     mecanismo do tema funciona, e é o caminho melhor: o conteúdo fica num
     HTML Block editável no painel, sem depender de estrutura de menu.
     Para ele a PARTE 2.

   Se este arquivo sumir, os dois menus voltam a ser listas de links que
   funcionam. Nenhuma navegação depende de aparência.

   ESCOPO

   Toda regra está presa a `.dx-mega-item` (parte 1) ou `.dx-mega`
   (parte 2), que existem só onde eu preparei. Nenhum outro menu do site
   é alcançado, e isso importa porque o mesmo header serve páginas que
   não foram revisadas.
   ========================================================================= */

/* =========================================================================
   PARTE 1 · O MENU DO CELULAR (menu 9, itens com filhos)
   ========================================================================= */

/* ---------- O painel ----------
   Preto, para o megamenu ser a continuação do header e não uma caixa
   branca colada nele. As fotos são PNG recortado, conferidas uma a uma:
   sobre preto elas flutuam; sobre branco seria indiferente. */
.dx-mega-item > ul.wd-sub-menu,
.dx-mega-item > .wd-dropdown-menu,
.dx-mega-item > .wd-dropdown {
  background: #0B0B0A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.92);
  padding: 22px 20px 18px;
}

/* ---------- A grade ----------
   `auto-fit` com mínimo de 184px: cinco produtos dão cinco colunas numa
   tela larga e quebram sozinhos nas estreitas. Coluna fixa deixaria um
   vão na última linha quando a contagem não fecha, que é o defeito que
   a grade do resumo técnico tinha. */
/* A estrutura real e `li.dx-mega-item > ul.wd-sub-menu`, SEM invólucro
   `.wd-dropdown-menu` no meio. Minha primeira versao mirava
   `.wd-dropdown-menu > .wd-sub-menu` e `.sub-menu`, e nenhuma das duas
   casava: a grade nunca pegou e o dropdown continuou `display:none`.

   Conferir a arvore antes de escrever seletor evita exatamente isso. */
.dx-mega-item > ul.wd-sub-menu,
.dx-mega-item .wd-dropdown-menu > ul.wd-sub-menu {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: min(1180px, 92vw);
}

/* ---------- Cada produto ---------- */
.dx-mega-item > ul.wd-sub-menu > li {
  margin: 0;
  padding: 0;
  border: 0;
}

.dx-mega-item > ul.wd-sub-menu > li > a {
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
  height: 100%;
  padding: 16px 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  color: #F4F1EC;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dx-mega-item > ul.wd-sub-menu > li > a:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(254, 92, 33, 0.42);
  transform: translateY(-2px);
  color: #fff;
}

/* ---------- A foto ----------
   Altura fixa e `contain`: os produtos têm proporções diferentes, e sem
   isso os cartões saem de alturas distintas, que é o que faz um menu
   parecer improvisado.

   `drop-shadow`, não `box-shadow`: a imagem é recortada, então a sombra
   precisa seguir a silhueta e não o retângulo. */
.dx-mega-item .wd-nav-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 104px;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dx-mega-item > ul.wd-sub-menu > li > a:hover .wd-nav-img { transform: scale(1.045); }

/* O nome. O tema costuma embrulhar o texto num <span>. */
.dx-mega-item > ul.wd-sub-menu > li > a > span:not(.wd-nav-img) {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.012em;
}

/* ---------- O preço ----------
   Escrito pelo JavaScript a partir do que o gerador guardou no item.
   Âmbar porque é o dado que decide, e precisa ser achado sem procurar. */
.dx-mega-item .dx-mega-preco {
  display: block;
  margin-top: 5px;
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: normal;
  color: #FE5C21;
  font-variant-numeric: tabular-nums;
}

/* ---------- No celular ----------
   A grade vira lista, com a foto pequena ao lado do nome. Cartão de
   produto empilhado num menu de telefone obrigaria a rolar demais para
   ver cinco itens. */
@media (max-width: 1024px) {
  .dx-mega-item > ul.wd-sub-menu {
    display: block !important;
    min-width: 0;
  }
  .dx-mega-item > ul.wd-sub-menu > li > a {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
  }
  .dx-mega-item .wd-nav-img { height: 48px; }
  .dx-mega-item .dx-mega-preco { margin-top: 2px; }
}

/* =========================================================================
   PARTE 2 · O MENU DO DESKTOP (menu 1300, bloco HTML)
   -------------------------------------------------------------------------
   SEGUNDA VERSÃO, e a primeira valeu a lição.

   A primeira era uma grade de cartões: retângulo com borda, fundo levemente
   claro, foto dentro, nome, preço. Cinco iguais lado a lado. Funcionava e
   era genérica, que é o pior lugar para um menu estar. Caixa repetida não
   constrói hierarquia: ela achata tudo no mesmo peso, e aí o lançamento vale
   o mesmo que o item de catálogo antigo.

   O que menu de marca grande faz, e esta versão faz:

     1. NÃO TEM CAIXA. O produto fica sobre o painel, não dentro de um
        quadrado. A separação entre colunas é um fio de 1px, não uma moldura
        por item. Com isso o olho vê produtos, não molduras.

     2. TEM PALCO. Cada foto fica sobre um foco radial suave, como peça em
        vitrine iluminada por baixo. É o que faz o recorte parecer colocado
        ali de propósito em vez de colado.

     3. TEM DESTAQUE. O primeiro produto ocupa mais largura, foto maior, e
        ganha a descrição curta dele. Hierarquia é o que separa menu de
        lista.

     4. O MOVIMENTO É DIRIGIDO. No hover a peça sobe, o foco acende e um fio
        âmbar cresce da esquerda sob o nome. Um gesto por item, não três.

   DOIS ARRANJOS

     `--vitrine`  destaque + fileira. Para listas curtas: lançamentos e
                  elétricas. A foto é o assunto.

     `--linhas`   colunas com rótulo de linha e produtos em fileira
                  horizontal compacta. Para catálogo: as onze a gás e os
                  dezoito acessórios.

                  Isto também resolveu um defeito medido: na primeira versão
                  o painel de gás tinha 909px de altura, um muro que passava
                  da dobra. Com a fileira horizontal ele cabe em cerca de um
                  terço disso.
   ========================================================================= */

/* ---------- O painel ----------
   `:has()` troca o fundo APENAS no dropdown que contém um megamenu nosso.
   Qualquer outro dropdown do site segue exatamente como estava. */
.wd-dropdown-menu:has(.dx-mega),
.wd-dropdown:has(.dx-mega) {
  background: #0B0B0A !important;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
  padding: 0 !important;
}

.wd-dropdown-menu:has(.dx-mega) .container,
.wd-dropdown:has(.dx-mega) .container {
  padding-top: 0;
  padding-bottom: 0;
}

/* `wpautop` costuma deixar um `<p>` vazio antes ou depois do bloco, e ele
   abre um vão de uma linha dentro do painel. */
.wd-dropdown-menu:has(.dx-mega) p:empty,
.dx-mega p:empty { display: none; }

.dx-mega {
  --dx-fio:    rgba(255, 255, 255, 0.085);
  --dx-ambar:  #FE5C21;
  --dx-texto:  #F4F1EC;
  --dx-fraco:  rgba(244, 241, 236, 0.44);

  padding: 34px 0 32px;
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  color: var(--dx-texto);
  text-align: left;
}

/* ---------- O cabeçalho ----------
   Na primeira versão isto era um rótulo minúsculo em caixa alta, do tamanho
   de uma legenda. Num painel de 1480px aquilo some. Agora é um título de
   verdade, e o painel passa a ter começo. */
.dx-mega-topo {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
}

.dx-mega-titulo {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--dx-texto);
}

/* A contagem de modelos. Dado, não enfeite: ela diz de cara o tamanho da
   família, que é a primeira pergunta de quem abre uma categoria. */
.dx-mega-conta {
  margin: 0;
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--dx-fraco);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   ARRANJO 1 · VITRINE
   ========================================================================= */

/* FLEX, E NÃO GRADE, e isto foi correção de um defeito medido.
 *
 * A primeira tentativa foi `grid-template-columns: 1.55fr repeat(auto-fit,
 * minmax(0, 1fr))`. Isso é declaração INVÁLIDA: `auto-fit` precisa de um
 * mínimo definido para calcular quantas faixas cabem, e `minmax(0, ...)`
 * não dá mínimo nenhum. O navegador descarta a propriedade inteira, a lista
 * volta a ser bloco, e os cinco produtos empilham. Medido na tela: painel de
 * 1522px de altura.
 *
 * `repeat()` também não aceita `calc()` na contagem, então passar o número
 * de produtos por variável CSS não resolveria.
 *
 * Flex resolve sem contagem: todos pesam 1, o destaque pesa 1,55, e o
 * `flex-wrap` dá uma saída decente quando a largura aperta. */
.dx-mega--vitrine .dx-mega-corpo {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dx-mega--vitrine .dx-mega-corpo > li {
  flex: 1 1 0;
  min-width: 158px;   /* abaixo disso o nome quebra palavra: melhor quebrar linha */
}
.dx-mega--vitrine .dx-mega-corpo > li.dx-mega-destaque { flex: 1.55 1 0; }

/* O FIO, não a moldura.
   Uma divisória de 1px entre colunas faz o trabalho que a borda do cartão
   fazia, sem fechar cada produto numa caixa. E some no primeiro item, senão
   o painel começa com um risco solto. */
.dx-mega--vitrine .dx-mega-corpo > li { position: relative; }
.dx-mega--vitrine .dx-mega-corpo > li + li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--dx-fio);
}

.dx-mega-peca {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  height: 100%;
  padding: 10px 26px 14px;
  color: var(--dx-texto);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
}

/* ---------- O palco ----------
   Foco radial por baixo da peça. Sem ele o recorte flutua sem referência de
   chão; com ele a peça parece apoiada e iluminada.

   O foco mora num elemento próprio, e não no fundo do link, porque ele
   precisa acender no hover sem arrastar junto o texto. */
/* ALTURA FIXA, não mínima, e isso foi correção de algo visível na tela.
   Com `min-height` cada palco crescia até a altura da sua foto, e os nomes
   saíam em linhas de base diferentes: na medição, "e-DXX 300" ficava 10px
   abaixo de "e-DXX Plug n' Joy". Numa fileira, texto desalinhado é o que
   denuncia que ninguém olhou. */
.dx-mega-palco {
  position: relative;
  display: grid;
  place-items: center;
  height: 124px;
}
.dx-mega-palco::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 78%;
  height: 72%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%,
              rgba(255, 255, 255, 0.085) 0%,
              rgba(255, 255, 255, 0.03) 42%,
              transparent 72%);
  opacity: 0.9;
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.dx-mega-destaque .dx-mega-palco { height: 186px; }

/* ---------- A foto ----------
   `contain` e altura fixa: os produtos vão de grelha chata a churrasqueira
   vertical, e sem isso a fileira sai irregular.

   `drop-shadow`, não `box-shadow`: a imagem é PNG recortado, então a sombra
   tem que seguir a silhueta e não o retângulo. */
.dx-mega-foto {
  position: relative;
  display: block;
  width: auto;
  max-width: 100%;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.6));
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dx-mega-destaque .dx-mega-foto { height: 172px; }

.dx-mega-peca:hover .dx-mega-foto { transform: translateY(-6px) scale(1.04); }
.dx-mega-peca:hover .dx-mega-palco::before { opacity: 1; transform: translateX(-50%) scale(1.06); }

/* ---------- O texto ---------- */
.dx-mega-dados { align-self: end; }

.dx-mega-nome {
  display: block;
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.014em;
  transition: color 200ms ease;
}
.dx-mega-destaque .dx-mega-nome { font-size: 1.3rem; letter-spacing: -0.026em; }
.dx-mega-peca:hover .dx-mega-nome { color: #fff; }

/* O FIO ÂMBAR que cresce da esquerda. Um gesto só, e ele diz "este aqui"
   sem precisar de cor de fundo nem de borda. */
.dx-mega-nome::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  margin-top: 7px;
  border-radius: 2px;
  background: var(--dx-ambar);
  transition: width 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dx-mega-peca:hover .dx-mega-nome::after { width: 34px; }

.dx-mega-nota {
  display: block;
  margin-top: 6px;
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.012em;
  color: var(--dx-fraco);
}

/* O resumo só existe no destaque: é a frase do próprio produto, vinda da
   descrição curta dele no WooCommerce. Em todos os itens seria ruído. */
.dx-mega-resumo {
  display: block;
  margin-top: 10px;
  max-width: 30ch;
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(244, 241, 236, 0.62);
}

.dx-mega-preco {
  display: block;
  margin-top: 11px;
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dx-ambar);
  font-variant-numeric: tabular-nums;
}
.dx-mega-destaque .dx-mega-preco { font-size: 0.95rem; }

/* ---------- O selo ----------
   Canto do palco, pequeno. Ele informa, não grita. */
.dx-mega-selo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--dx-ambar);
  color: #0B0B0A;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* =========================================================================
   ARRANJO 2 · LINHAS
   ========================================================================= */

/* 240px de mínimo, e isso veio de defeito medido na tela.
   Com 176px a faixa de preço quebrava em duas linhas ("R$8.690,00 a" numa,
   "R$11.220,00" na outra) e o nome "Essential DXX300" também. Preço partido
   ao meio é o tipo de coisa que faz a pessoa reler para ter certeza do
   valor. */
.dx-mega--linhas .dx-mega-corpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  align-items: start;
}

.dx-mega-grupo {
  position: relative;
  padding: 0 18px;
}
.dx-mega-grupo + .dx-mega-grupo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--dx-fio);
}

/* O rótulo da linha. Vem do nome real da categoria do produto: Linha Glass,
   Linha Unique, Linha Classic. Nenhum rótulo foi inventado aqui. */
.dx-mega-rotulo {
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--dx-fio);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dx-fraco);
}

.dx-mega-itens {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A fileira horizontal. Foto pequena à esquerda, nome e preço à direita.
   Foi o que derrubou o painel de gás de 909px para cerca de 300px. */
.dx-mega-fileira {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 8px 9px;
  border-radius: 10px;
  color: var(--dx-texto);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  transition: background 200ms ease;
}
.dx-mega-fileira:hover { background: rgba(255, 255, 255, 0.045); color: #fff; }

.dx-mega-fileira .dx-mega-foto {
  height: 44px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}
.dx-mega-fileira:hover .dx-mega-foto { transform: scale(1.07); }

/* Na fileira o nome precisa ser inline, senão a nota cai para a linha de
   baixo e a fileira deixa de ser fileira. */
.dx-mega-fileira .dx-mega-nome { display: inline; font-size: 0.85rem; }
.dx-mega-fileira .dx-mega-nome::after { display: none; }   /* o fio é gesto de vitrine */
.dx-mega-fileira .dx-mega-nota {
  display: inline;
  margin: 0 0 0 6px;
  font-size: 0.68rem;
}
.dx-mega-fileira .dx-mega-preco {
  margin-top: 2px;
  font-size: 0.74rem;
  text-wrap: nowrap;   /* faixa de preço partida ao meio faz reler para ter certeza */
}

/* =========================================================================
   O LADRILHO CLARO
   -------------------------------------------------------------------------
   Para os produtos cuja foto não é recorte, e sim produto branco sobre fundo
   branco: os dois depuradores e o Rotary Speto.

   Sem isso o JPEG vira uma lápide branca no painel preto. Com o ladrilho
   vira um chip: a foto ocupa um retângulo branco de canto arredondado, e lê
   como decisão em vez de falha.

   BRANCO PURO, e isto foi correção de algo visível na tela: a primeira
   versão usou o off-white da marca e aparecia um retângulo mais claro DENTRO
   do ladrilho, porque o fundo do JPEG é branco puro. O ladrilho tem que ser
   da mesma cor do fundo da foto para a emenda sumir.

   A foto perde a sombra de silhueta aqui: sobre fundo claro ela não tem
   silhueta para seguir, só suja o branco. O palco também sai, pelo mesmo
   motivo.

   Quando a fábrica mandar o PNG recortado, basta apontar `foto` no catálogo
   e o ladrilho sai sozinho. */
.dx-mega-claro .dx-mega-foto {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  filter: none;
  box-sizing: border-box;
}
.dx-mega-claro .dx-mega-palco::before { opacity: 0; }
.dx-mega-fileira.dx-mega-claro .dx-mega-foto { padding: 4px; border-radius: 7px; }

/* =========================================================================
   TELAS MENOS LARGAS
   -------------------------------------------------------------------------
   "Desktop" vai de 1024px a 1920px. Abaixo de 1366px o destaque de 1.55fr
   come largura demais dos outros, então ele volta a pesar como os demais.
   ========================================================================= */
@media (max-width: 1365px) {
  .dx-mega--vitrine .dx-mega-corpo > li.dx-mega-destaque { flex: 1.2 1 0; }
  .dx-mega-peca { padding: 10px 18px 14px; }
  .dx-mega-foto { height: 92px; }
  .dx-mega-destaque .dx-mega-foto { height: 136px; }
  .dx-mega-palco { height: 104px; }
  .dx-mega-destaque .dx-mega-palco { height: 150px; }
  .dx-mega-destaque .dx-mega-nome { font-size: 1.12rem; }
  .dx-mega-resumo { display: none; }   /* o espaço virou largura de produto */
  .dx-mega--linhas .dx-mega-corpo { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
  .dx-mega-grupo { padding: 0 12px; }
}

/* Quem pediu menos movimento não recebe o salto nem o fio que cresce. */
@media (prefers-reduced-motion: reduce) {
  .dx-mega-foto,
  .dx-mega-palco::before,
  .dx-mega-nome,
  .dx-mega-nome::after { transition: none; }
  .dx-mega-peca:hover .dx-mega-foto { transform: none; }
  .dx-mega-peca:hover .dx-mega-palco::before { transform: translateX(-50%); }
  .dx-mega-peca:hover .dx-mega-nome::after { width: 34px; }
}