/* =========================================================================
   MENU DO CELULAR · a folha de vidro
   -------------------------------------------------------------------------
   O corpo deste arquivo é o protótipo `menu.css` da Black November, copiado
   sem alteração de desenho. O que foi acrescentado está nas duas pontas:
   os tokens, aqui em cima, e a integração com o tema, lá embaixo.

   POR QUE OS TOKENS VÊM JUNTO

   O protótipo vivia numa página que carregava o design system inteiro.
   Aqui a folha roda em QUALQUER página do site, e o sistema da Black
   November não está carregado. Sem os tokens, `var(--ambar)` não resolve
   e o menu sai sem cor, sem fonte e sem espaçamento.

   Eles ficam presos a `.bn-menu`, e não em `:root`, de propósito: solto no
   `:root` eu estaria despejando um segundo design system por cima do tema
   em todas as páginas da loja, e qualquer colisão de nome viraria defeito
   em lugar nenhum relacionado a menu.
   ========================================================================= */

.bn-menu {
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 20px;  --e6: 24px;  --e7: 32px;  --e8: 40px;

  --ambar:       #FE5C21;
  --off-white:   #F4F1EC;
  --inox-fundo:  #6E6F6C;

  --t-micro:     0.64rem;
  --tr-rotulo:   0.16em;

  --fonte-ui:      'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --c-saida:  cubic-bezier(0.16, 1, 0.30, 1);
  --c-dupla:  cubic-bezier(0.65, 0, 0.35, 1);
  --d-rapido: 200ms;

  font-family: var(--fonte-ui);
}

/* O tema estiliza `a` e `button` no escopo global. Dentro da folha nada
   disso vale: ela é superfície própria. */
.bn-menu a { text-decoration: none; }
.bn-menu button { font: inherit; cursor: pointer; }
.bn-menu *, .bn-menu *::before, .bn-menu *::after { box-sizing: border-box; }

/* ============ daqui para baixo, o protótipo, sem mudança de desenho ============ */
/* =========================================================================
   MENU MOBILE · folha de vidro que sobe
   -------------------------------------------------------------------------
   O vidro aqui não é blur e pronto. Três camadas, na ordem em que o olho
   lê um material real:

     1. o MEIO     · backdrop-filter, que distorce o que está atrás;
     2. a LUZ      · um halo que segue o dedo, em mix-blend-mode, então
                     acende o que está embaixo em vez de pintar por cima;
     3. o BRILHO   · o reflexo especular da borda superior, que é o que
                     faz o olho reconhecer vidro e não plástico fosco.

   Sem a terceira camada o resultado é um painel escuro translúcido, que
   é o que a maioria dos sites chama de glass. O reflexo da borda é
   barato e é o que muda tudo.
   ========================================================================= */

.bn-menu {
  position: fixed;
  inset: 0;
  /* Acima do botao flutuante do WhatsApp, que o site inteiro carrega em
     z-index 9000. Em 200 ele boiava por cima da folha aberta. */
  z-index: 9600;
  display: flex;
  align-items: flex-end;
}
.bn-menu[hidden] { display: none; }

/* ---------- O fundo ----------
   Escurece e desfoca a página, para a folha ter de onde tirar o vidro. */
.bn-menu__fundo {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 5, 0.58);
  backdrop-filter: blur(3px) saturate(0.92);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
  opacity: 0;
  transition: opacity 440ms var(--c-saida);
}
.bn-menu[data-aberto] .bn-menu__fundo { opacity: 1; }

/* ---------- A folha ---------- */
.bn-menu__folha {
  position: relative;
  width: 100%;
  max-height: 92svh;
  display: flex;
  flex-direction: column;
  border-radius: 26px 26px 0 0;
  overflow: hidden;
  isolation: isolate;

  /* O meio. saturate acima de 1 é o que impede o vidro escuro de virar
     cinza: ele devolve a cor da página que está por trás. */
  background: linear-gradient(176deg, rgba(26,25,23,0.80) 0%, rgba(10,10,9,0.92) 100%);
  backdrop-filter: blur(34px) saturate(1.5) brightness(1.04);
  -webkit-backdrop-filter: blur(34px) saturate(1.5) brightness(1.04);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 -30px 80px -24px rgba(0,0,0,0.9);

  transform: translateY(102%);
  /* Mola curta. Entrada de baixo pede chegada com peso, não frenagem
     linear: a folha passa um fio do destino e assenta. */
  transition: transform 560ms cubic-bezier(0.17, 0.84, 0.26, 1.03);
  will-change: transform;
}
.bn-menu[data-aberto] .bn-menu__folha { transform: none; }

/* ---------- A luz que segue o dedo ----------
   screen acende o que está embaixo. Com background normal ela mancharia
   o vidro de laranja; em screen ela REVELA o vidro, que é o efeito que
   a página inteira já usa no cursor. */
.bn-menu__luz {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(260px 260px at var(--x, 50%) var(--y, 0px),
    rgba(255, 186, 120, 0.22) 0%,
    rgba(254, 120, 40, 0.11) 34%,
    transparent 70%);
  opacity: 0;
  transition: opacity 620ms var(--c-saida);
}
.bn-menu__luz[data-on] { opacity: 1; }

/* ---------- O reflexo da borda ----------
   Uma elipse achatada encostada no topo, apagando nas pontas pela
   máscara. É o brilho que corre pela quina curva do vidro. Sem a
   máscara vira uma barra branca e o material volta a ser plástico. */
.bn-menu__brilho {
  position: absolute;
  z-index: 2;
  top: 0; left: 6%; right: 6%;
  height: 92px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(60% 100% at 50% 0%,
    rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.08) 42%, transparent 74%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}

/* ---------- A pega ----------
   O risco que diz "me puxe". Área de toque de 34px, desenho de 4px. */
.bn-menu__pega {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  height: 34px;
  flex: 0 0 auto;
  touch-action: none;
  cursor: grab;
}
.bn-menu__risco {
  width: 42px; height: 4px;
  border-radius: 99px;
  background: rgba(244,241,236,0.3);
}

.bn-menu__topo {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: 0 var(--e5) var(--e4);
  flex: 0 0 auto;
}
/* A marca: simbolo da Dinoxx com o nome da campanha ao lado, separados
   por um fio. O simbolo diz de quem e a loja, o texto diz onde a pessoa
   esta. Os dois juntos custam a mesma altura que o rotulo sozinho. */
.bn-menu__marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-width: 0;
}
.bn-menu__marca img {
  width: 34px; height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
}
.bn-menu__marca i {
  font-style: normal;
  padding-left: var(--e3);
  border-left: 1px solid rgba(244,241,236,0.16);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  color: var(--ambar);
  white-space: nowrap;
}

.bn-menu__rot {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  color: var(--ambar);
}
.bn-menu__x {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(244,241,236,0.16);
  border-radius: 50%;
  background: rgba(255,255,255,0.045);
  color: var(--off-white);
  transition: background var(--d-rapido) var(--c-saida),
              transform  var(--d-rapido) var(--c-saida);
}
.bn-menu__x:active { background: rgba(254,92,33,0.9); transform: rotate(90deg); }
.bn-menu__x svg { width: 17px; height: 17px; }

/* ---------- O corpo ---------- */
.bn-menu__corpo {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--e5) calc(var(--e7) + env(safe-area-inset-bottom));
  scrollbar-width: none;
}
.bn-menu__corpo::-webkit-scrollbar { display: none; }

.bn-menu__secao {
  margin: var(--e5) 0 var(--e3);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
  color: var(--inox-fundo);
}
.bn-menu__secao:first-child { margin-top: 0; }

/* ---------- Atalhos desta página ----------
   Maiores e com número, porque são o motivo de alguém abrir este menu
   numa landing. O catálogo da loja vem depois, menor. */
.bn-menu__atalhos { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }

.bn-menu__atalhos li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--c-saida), transform 520ms var(--c-dupla);
  transition-delay: calc(var(--i) * 42ms + 140ms);
}
.bn-menu[data-aberto] .bn-menu__atalhos li { opacity: 1; transform: none; }

.bn-menu__atalhos a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e4);
  min-height: 56px;
  padding: var(--e3) var(--e4);
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  color: var(--off-white);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--d-rapido) var(--c-saida),
              background   var(--d-rapido) var(--c-saida);
}

/* A iluminação do botão: um halo que nasce no ponto tocado e cresce.
   É o mesmo vocabulário da luz do cursor, agora dentro de um botão. */
.bn-menu__atalhos a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 120px at 22% 50%,
    rgba(254,146,70,0.26) 0%, transparent 68%);
  opacity: 0;
  transition: opacity 360ms var(--c-saida);
}
.bn-menu__atalhos a:active::before,
.bn-menu__atalhos a:focus-visible::before { opacity: 1; }
.bn-menu__atalhos a:active,
.bn-menu__atalhos a:focus-visible { border-color: rgba(254,92,33,0.52); }

.bn-menu__n {
  position: relative;
  flex: 0 0 auto;
  font-family: var(--fonte-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}

.bn-menu__txt { position: relative; display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.bn-menu__txt b {
  font-family: var(--fonte-display);
  font-size: 1.02rem;
  font-weight: 700;
  font-stretch: 104%;
  letter-spacing: -0.012em;
  line-height: 1.15;
}
.bn-menu__txt i {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--inox-fundo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bn-menu__atalhos svg {
  position: relative;
  flex: 0 0 auto;
  width: 20px; height: 8px;
  color: rgba(244,241,236,0.46);
  overflow: visible;
}

/* ---------- Comunidade ---------- */
.bn-menu__zap {
  display: flex;
  align-items: center;
  gap: var(--e4);
  min-height: 56px;
  margin-top: var(--e4);
  padding: var(--e3) var(--e4);
  border: 1px solid rgba(37,211,102,0.3);
  border-radius: 14px;
  background: rgba(37,211,102,0.08);
  color: var(--off-white);
  -webkit-tap-highlight-color: transparent;
}
.bn-menu__zap svg { width: 22px; height: 22px; color: #25D366; flex: 0 0 auto; }
.bn-menu__zap span { display: grid; gap: 1px; min-width: 0; }
.bn-menu__zap b { font-size: 0.92rem; font-weight: 700; }
.bn-menu__zap i {
  font-style: normal;
  font-size: 0.73rem;
  color: rgba(244,241,236,0.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- A loja ---------- */
.bn-menu__loja { list-style: none; margin: 0; padding: 0; }
.bn-menu__loja li { border-bottom: 1px solid rgba(255,255,255,0.055); }

.bn-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  width: 100%;
  min-height: 50px;
  padding: var(--e3) 2px;
  border: 0;
  background: none;
  color: rgba(244,241,236,0.86);
  font-family: var(--fonte-ui);
  font-size: 0.92rem;
  font-weight: 500;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--d-rapido) var(--c-saida);
}
/* O hover/toque aqui CLAREIA, nao pinta de ambar. O ambar ja e o
   estado ABERTO do grupo: usar a mesma cor para as duas coisas fazia
   parecer que tocar no item ja tinha aberto a gaveta. Agora sao dois
   sinais diferentes para dois estados diferentes. */
.bn-menu__item:active,
.bn-menu__item:focus-visible { color: var(--off-white); }
.bn-menu__item:active svg,
.bn-menu__item:focus-visible svg { color: rgba(244,241,236,0.8); }

.bn-menu__item svg {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  color: rgba(244,241,236,0.4);
  transition: transform 420ms var(--c-dupla), color var(--d-rapido) var(--c-saida);
}
/* O mais vira menos. Um traço gira, o outro fica: é o que faz a pessoa
   entender que fechou, não que virou outro botão. */
.bn-menu__item[aria-expanded='true'] svg { transform: rotate(135deg); color: var(--ambar); }
.bn-menu__item[aria-expanded='true'] { color: var(--off-white); }

.bn-menu__gaveta {
  height: 0;
  overflow: hidden;
  transition: height 440ms var(--c-dupla);
}
.bn-menu__gaveta > div { padding: 2px 0 var(--e4) var(--e4); display: grid; gap: 1px; }
.bn-menu__gaveta a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 2px var(--e3);
  border-left: 1px solid rgba(254,92,33,0.32);
  color: rgba(244,241,236,0.66);
  font-size: 0.86rem;
  -webkit-tap-highlight-color: transparent;
}
.bn-menu__gaveta a:active { color: var(--off-white); border-left-color: rgba(254,92,33,0.75); }

/* ---------- Acima do celular ----------
   A folha vira painel centrado. O gesto de arrastar perde o sentido com
   mouse, mas o botão de fechar e o Esc continuam. */
@media (min-width: 861px) {
  .bn-menu { align-items: center; justify-content: center; padding: var(--e7); }
  .bn-menu__folha {
    max-width: 460px;
    max-height: 86svh;
    border-radius: 22px;
    transform: translateY(24px) scale(0.97);
    opacity: 0;
    transition: transform 520ms var(--c-saida), opacity 340ms var(--c-saida);
  }
  .bn-menu[data-aberto] .bn-menu__folha { transform: none; opacity: 1; }
  .bn-menu__pega { display: none; }
  .bn-menu__topo { padding-top: var(--e5); }
  .bn-menu__atalhos a:hover { border-color: rgba(254,92,33,0.52); }
  .bn-menu__atalhos a:hover::before { opacity: 1; }
  .bn-menu__item:hover { color: var(--off-white); }
  .bn-menu__item:hover svg { color: rgba(244,241,236,0.8); }
  .bn-menu__gaveta a:hover { color: var(--off-white); border-left-color: rgba(254,92,33,0.75); }
}

@media (prefers-reduced-motion: reduce) {
  .bn-menu__folha,
  .bn-menu__fundo,
  .bn-menu__atalhos li,
  .bn-menu__gaveta { transition: none; }
  .bn-menu__luz { display: none; }
}

/* =========================================================================
   A INTEGRAÇÃO COM O TEMA
   -------------------------------------------------------------------------
   Acrescentado aqui, fora do protótipo, porque é o que o protótipo não
   tinha: ele rodava sozinho numa página, sem Woodmart em volta.
   ========================================================================= */

/* ---------- O painel lateral do tema sai de cena ----------
   SÓ depois que o JavaScript confirma que montou a folha, marcando o
   `<html>`. Essa ordem é a rede de segurança inteira deste trabalho: se o
   script não rodar, se o arquivo não carregar, se der erro no meio, a
   marca não aparece e o menu do tema abre como sempre abriu.

   Esconder primeiro e torcer depois deixaria o site sem menu nenhum no
   celular, que é pior do que qualquer defeito de aparência. */
html.dx-folha-pronta .mobile-nav.wd-side-hidden-nav { display: none !important; }

/* ---------- A página para de rolar atrás da folha ----------
   `overflow: hidden` no body sozinho não segura iOS. `position: fixed`
   segura, e o `top` negativo que o JavaScript escreve preserva a altura
   de rolagem, para a página não saltar para o começo ao fechar. */
html.dx-folha-aberta body {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

/* ---------- O item que é só rótulo ----------
   Categoria sem destino e sem filhos. Não é botão nem link: não deve
   acender ao toque nem sugerir que leva a algum lugar. */
.bn-menu__item[aria-disabled='true'] {
  color: rgba(244, 241, 236, 0.4);
  cursor: default;
}

/* ---------- "Ver tudo em ..." ----------
   Âmbar para se separar da lista de produtos logo abaixo: é outro tipo de
   destino, não mais um item.

   CLASSE PRÓPRIA, e não `:first-child`, porque a primeira versão usava a
   posição e errava. Categoria sem página própria não imprime o "Ver
   tudo", então o PRIMEIRO PRODUTO herdava o âmbar: na tela, "e-DXX Smart
   Play" aparecia destacado como se fosse outra coisa. Posição não é
   semântica. */
.bn-menu__gaveta .bn-menu__tudo {
  color: var(--ambar);
  font-weight: 600;
}

/* ---------- A seta dos itens sem gaveta ----------
   O protótipo só previa o mais que vira menos. Categoria sem filhos leva
   direto, e precisa dizer isso. */
.bn-menu__item > svg[viewBox='0 0 20 8'] {
  width: 20px;
  height: 8px;
}

/* =========================================================================
   O BOTÃO DO TEMA NÃO ENTRA AQUI
   -------------------------------------------------------------------------
   DEFEITO MEDIDO NA FOLHA ABERTA: as categorias saíram como caixas
   brancas com texto escuro centralizado, e o X virou um quadrado branco.
   Medido: `background rgb(243,243,243)`, `color rgb(62,62,62)`,
   `text-align: center`, `width: 350px`.

   O protótipo escrevia `.bn-menu__item { background: none }`, que é
   especificidade (0,1,0). O Woodmart veste `button` no escopo global com
   peso maior, e ganha. Não é bug do protótipo: ele nunca conviveu com um
   tema, rodava sozinho numa página.

   Então os valores do protótipo são reafirmados aqui com `html body` na
   frente. É repetição, e repetição é ruim, mas a alternativa era editar o
   protótipo e perder a correspondência com o desenho aprovado. Aqui a
   duplicação fica visível, comentada, e num bloco só.

   Qualquer mudança de desenho continua sendo feita no protótipo; este
   bloco só precisa acompanhar se mudar COR, CAIXA ou TIPOGRAFIA de
   `.bn-menu__item` ou `.bn-menu__x`.
   ========================================================================= */

html body .bn-menu button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  min-width: 0;
}

html body .bn-menu .bn-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  width: 100%;
  min-height: 50px;
  padding: var(--e3) 2px;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(244, 241, 236, 0.86);
  font-family: var(--fonte-ui);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}

html body .bn-menu .bn-menu__item[aria-expanded='true'] { color: var(--off-white); }
html body .bn-menu .bn-menu__item[aria-disabled='true'] { color: rgba(244, 241, 236, 0.4); }

html body .bn-menu .bn-menu__x {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(244, 241, 236, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
  color: var(--off-white);
}

/* A gaveta herda o mesmo problema nos links, que o tema pinta de azul. */
html body .bn-menu .bn-menu__gaveta a { color: rgba(244, 241, 236, 0.66); }
html body .bn-menu .bn-menu__gaveta .bn-menu__tudo { color: var(--ambar); }
html body .bn-menu .bn-menu__atalhos a { color: var(--off-white); }

/* =========================================================================
   AJUSTES PEDIDOS NA TELA
   ========================================================================= */

/* ---------- O nome da categoria acende no hover ----------
   O protótipo só tinha `:active`, que no telefone é o toque. Com mouse
   não havia resposta nenhuma ao passar por cima, e uma lista de quinze
   linhas sem retorno não deixa claro em qual delas o clique vai cair.

   Fora da media query de 861px de propósito: quem usa mouse numa tela
   estreita também merece o retorno. */
html body .bn-menu .bn-menu__item:hover { color: var(--ambar); }
html body .bn-menu .bn-menu__item:hover > svg { color: var(--ambar); }
html body .bn-menu .bn-menu__gaveta a:hover { color: var(--off-white); }

/* ---------- O mais, mais claro ----------
   Estava em 40% de opacidade sobre o vidro escuro, e sumia. Em 66% ele
   aparece sem competir com o nome da categoria, que continua sendo o
   que se lê primeiro. */
html body .bn-menu .bn-menu__item > svg { color: rgba(244, 241, 236, 0.66); }
html body .bn-menu .bn-menu__item[aria-expanded='true'] > svg { color: var(--ambar); }