/* Mega-menu de categorias (docs/categorias-mega-menu Fase 2).
   CSS estrutural compartilhado pelos 5 conjuntos de tema (default athos +
   bemmequer/giuliana/lash/tortas) — cor/tipografia herdadas do link do
   próprio tema (`.g-navlink`/`.bmq-navlink`/`.l-navlink`/`.t-navlink`/
   `.mega-navlink`, aplicadas via `class="{{ navlink_class }} mega-menu-toggle"`
   no partial `templates/loja/_mega_menu_nav.html`) — não fixamos paleta aqui,
   só estrutura/posicionamento. Usa var(--brand) com fallback quando precisa
   de 1 acento próprio (foco do teclado).

   Painel é `position:absolute` sob o item (DESKTOP) — o container pai
   (`.mega-menu-lista`) fica DENTRO de um `<nav>` que NÃO tem overflow-x-auto
   (esse overflow só existe na barra mobile de pais, `_barra_categorias.html`,
   elemento diferente) — corta o risco "overflow-x do pai também corta
   overflow-y do painel absoluto" descrito no plano.

   Mobile (docs/loja-menu-mobile-busca-ocasiao — BLOCO A): o atributo
   `data-menu-mobile` em `.mega-menu-lista` (setado pelo partial a partir de
   `menu_mobile_estilo`, vindo do context processor `storefront`) decide a
   UI abaixo do breakpoint 768px:
   - "accordion": o painel vira BLOCO no fluxo (não absolute), revelado por
     `[data-mega-aberto]` — o MESMO atributo que o JS de clique
     (`loja-mega-menu.js`) já alterna para o desktop, sem JS novo.
   - "hamburguer": a `<ul class="mega-menu-lista">` inteira some no mobile
     (fica só desktop) e o botão `.menu-mobile-hamb-btn` + drawer
     `.menu-mobile-drawer*` (renderizados por `_mega_menu_nav.html` só neste
     modo) assumem a navegação — mecânica de overlay/slide igual ao mini-cart
     (`loja-carrinho.js`), JS próprio em `static/js/loja-menu-mobile.js`. */

.mega-menu-lista{
  display:flex; align-items:center; gap:1.25rem; list-style:none;
  margin:0; padding:0;
}
/* overflow-x só em telas pequenas (onde o painel do mega-menu nem existe,
   ver breakpoint abaixo) — em desktop a lista fica `visible` de propósito:
   `overflow-x:auto` no ancestral corta `overflow-y` do painel `position:
   absolute` também (regra CSS: overflow-x != visible força overflow-y a
   um valor computado, nunca "visible") — é exatamente o risco anotado no
   plano ("overflow-x cortando o painel absoluto"). */
@media (max-width: 767.98px){
  .mega-menu-lista{ overflow-x:auto; }
}
.mega-menu-item{ position:relative; }
.mega-menu-toggle{
  display:inline-flex; align-items:center; gap:.3rem;
  background:none; border:0; padding:.4rem .25rem; margin:0;
  font:inherit; cursor:pointer;
}
.mega-menu-seta{ transition:transform .15s ease; flex:none; }

.mega-menu-painel{
  display:none;
  position:absolute; top:100%; left:0; z-index:40;
  min-width:22rem; margin-top:.5rem;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:.75rem;
  box-shadow:0 20px 45px -18px rgba(15,23,42,.35);
  padding:1rem 1.25rem;
}

/* Desktop (>=768px): hover/focus abre o painel absoluto, igual antes desta
   fase — intocado. Abaixo do breakpoint o botão do pai vira link simples de
   navegação por padrão; o modo accordion (regra seguinte) é quem reabre o
   painel no mobile via `data-mega-aberto`. */
@media (min-width: 768px){
  .mega-menu-item:hover > .mega-menu-painel,
  .mega-menu-item:focus-within > .mega-menu-painel,
  .mega-menu-painel[data-mega-aberto]{
    display:block;
  }
  .mega-menu-item:hover > .mega-menu-toggle .mega-menu-seta,
  .mega-menu-item:focus-within > .mega-menu-toggle .mega-menu-seta{
    transform:rotate(180deg);
  }
}
@media (max-width: 767.98px){
  /* Bloqueio default (causa-raiz original, docs/loja-menu-mobile-busca-ocasiao
     §A1): sem isto, um clique deixado "aberto" ao redimensionar a tela vazaria
     o painel `position:absolute` por cima do conteúdo mobile. */
  .mega-menu-painel{ display:none !important; }

  /* Modo "accordion" (`data-menu-mobile="accordion"` em .mega-menu-lista):
     reabre o painel, mas como BLOCO NO FLUXO (não position:absolute) —
     empurra o conteúdo abaixo do pai tocado, como um accordion nativo. O
     `!important` acima é vencido pela maior especificidade do atributo aqui.
     O clique que seta/tira `data-mega-aberto` já existe (loja-mega-menu.js);
     nenhum JS novo é necessário para este modo. */
  .mega-menu-lista[data-menu-mobile="accordion"] .mega-menu-painel[data-mega-aberto]{
    display:block !important;
    position:static;
    top:auto; left:auto; z-index:auto;
    min-width:0; width:100%; margin-top:0;
    border-radius:0; box-shadow:none;
    border:0; border-top:1px solid rgba(0,0,0,.08);
    padding:.75rem 1rem;
  }
  .mega-menu-lista[data-menu-mobile="accordion"] .mega-menu-item:has(> .mega-menu-painel[data-mega-aberto]) > .mega-menu-toggle .mega-menu-seta{
    transform:rotate(180deg);
  }
  /* Grade mobile (decisão do dono 2026-07-31): as subcategorias, que antes
     empilhavam numa coluna só (accordion virava lista longa que "estende o menu
     para baixo"), agora fluem em MÚLTIPLAS COLUNAS via CSS multi-column — o
     navegador distribui os itens automaticamente e quebra em quantas colunas
     couberem na largura, cortando a altura. `column-width` estreito → ~2 colunas
     em 390px, mais em telas maiores. Os agrupamentos semânticos (por Ocasião /
     para Família) são ACHATADOS (display:contents) para virar um fluxo único de
     itens — o dono aceitou perder os títulos de grupo em favor da compactação. */
  .mega-menu-lista[data-menu-mobile="accordion"] .mega-menu-colunas{
    display:block;            /* sai do flex; multi-column age no bloco */
    columns:9rem;             /* largura-alvo por coluna → nº de colunas é automático */
    column-gap:1.25rem;
    gap:0;
  }
  /* achata os grupos: o container do grupo e seu <ul> deixam de ser caixas —
     os <li> passam a ser filhos diretos do fluxo multi-column. */
  .mega-menu-lista[data-menu-mobile="accordion"] .mega-menu-coluna,
  .mega-menu-lista[data-menu-mobile="accordion"] .mega-menu-coluna ul{
    display:contents;
  }
  /* esconde os títulos de grupo no mobile (a grade é lista corrida) e evita que
     um item quebre no meio entre duas colunas. */
  .mega-menu-lista[data-menu-mobile="accordion"] .mega-menu-coluna-titulo{
    display:none;
  }
  .mega-menu-lista[data-menu-mobile="accordion"] .mega-menu-coluna li{
    break-inside:avoid;
  }
  /* o "Ver tudo em X" ocupa a largura toda, acima da grade. */
  .mega-menu-lista[data-menu-mobile="accordion"] .mega-menu-vertudo{
    column-span:all;
  }

  /* Modo "hamburguer": a lista de pais (que no accordion vira a própria
     navegação) some no mobile — o botão + drawer abaixo assumem. */
  .mega-menu-lista[data-menu-mobile="hamburguer"]{
    display:none;
  }
}

.mega-menu-colunas{
  display:flex; flex-wrap:wrap; gap:1.5rem 2rem;
}
.mega-menu-coluna{ min-width:9rem; }
.mega-menu-coluna-titulo{
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#94a3b8; margin-bottom:.5rem;
}
.mega-menu-coluna ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.mega-menu-coluna a{
  display:block; font-size:.85rem; color:#334155; text-decoration:none;
  padding:.15rem 0; white-space:nowrap;
}
.mega-menu-coluna a:hover{ color:var(--brand, #15803d); text-decoration:underline; }
.mega-menu-vertudo{
  display:block; width:100%; margin-bottom:.75rem; padding-bottom:.75rem;
  border-bottom:1px solid rgba(0,0,0,.08);
  font-size:.8rem; font-weight:600; color:var(--brand, #15803d); text-decoration:none;
}
.mega-menu-vertudo:hover{ text-decoration:underline; }

.mega-menu-toggle:focus-visible,
.mega-menu-coluna a:focus-visible,
.mega-menu-vertudo:focus-visible{
  outline:2px solid var(--brand, #15803d); outline-offset:2px;
}

/* ---------------------------------------------------------------------
   Menu hambúrguer mobile (docs/loja-menu-mobile-busca-ocasiao BLOCO A3).
   Botão só existe no DOM quando `menu_mobile_estilo == "hamburguer"`
   (`_mega_menu_nav.html`) — mesmo assim, escondido acima do breakpoint:
   no desktop o mega-menu normal (hover/clique) continua valendo sempre,
   a config de menu mobile não afeta desktop.
   Drawer reusa a MESMA mecânica visual do mini-cart (`loja-carrinho.js`/
   temas giuliana|bemmequer|lash|tortas): overlay fixo + painel lateral que
   desliza (aqui via classe `.is-aberto`, ver `.menu-mobile-drawer-painel`
   abaixo). Classes próprias (não Tailwind) porque este CSS é compartilhado
   pelos 5 temas sem depender de Tailwind estar disponível de forma idêntica
   em todos.

   IMPORTANTE — containing block do `position:fixed`: o botão/drawer nascem
   no HTML dentro do `<header>` (partial `_mega_menu_nav.html`, incluído no
   `<nav>` do header em todos os temas), e o `<header>` usa a classe Tailwind
   `backdrop-blur` em todo tema. `backdrop-filter` cria um novo containing
   block para descendentes `position:fixed` (spec CSS Filter Effects) — sem
   correção, o overlay/painel `fixed` ficaria confinado à altura do header
   em vez de cobrir a viewport inteira (bug real encontrado na validação
   visual desta fase). Por isso `loja-menu-mobile.js` reparenta o drawer
   para `document.body` no load, ANTES de qualquer abertura. --------------------- */
.menu-mobile-hamb-btn{
  display:none;
  align-items:center; justify-content:center;
  background:none; border:0; padding:.4rem; margin:0; cursor:pointer;
  border-radius:9999px;
}
@media (max-width: 767.98px){
  .menu-mobile-hamb-btn{ display:inline-flex; }
}
.menu-mobile-hamb-btn:focus-visible{
  outline:2px solid var(--brand, #15803d); outline-offset:2px;
}

.menu-mobile-drawer[hidden]{ display:none; }
.menu-mobile-drawer-overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(15,23,42,.4);
  opacity:0; transition:opacity .2s ease;
}
.menu-mobile-drawer.is-aberto .menu-mobile-drawer-overlay{ opacity:1; }
.menu-mobile-drawer-painel{
  position:fixed; top:0; left:0; z-index:51;
  height:100dvh; width:100%; max-width:22rem;
  background:#fff; box-shadow:20px 0 45px -18px rgba(15,23,42,.35);
  display:flex; flex-direction:column;
  transform:translateX(-100%);
  transition:transform .2s ease;
}
.menu-mobile-drawer.is-aberto .menu-mobile-drawer-painel{ transform:translateX(0); }
.menu-mobile-drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid rgba(0,0,0,.08); flex:none;
}
.menu-mobile-drawer-titulo{ font-weight:700; font-size:1rem; }
.menu-mobile-drawer-fechar{
  display:grid; place-items:center; height:2.25rem; width:2.25rem;
  border-radius:9999px; border:0; background:none; color:inherit; cursor:pointer;
}
.menu-mobile-drawer-fechar:hover{ background:rgba(0,0,0,.06); }
.menu-mobile-drawer-lista{
  overflow-y:auto; padding:.5rem 0 1.5rem;
}
.menu-mobile-drawer-link{
  display:block; padding:.7rem 1.25rem; font-size:.95rem; color:#334155;
  text-decoration:none;
}
.menu-mobile-drawer-link:hover{ background:rgba(0,0,0,.04); }
.menu-mobile-drawer-inicio{ font-weight:600; border-bottom:1px solid rgba(0,0,0,.06); }
.menu-mobile-drawer-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:.7rem 1.25rem; font-size:.95rem; font-weight:600; color:#334155;
  background:none; border:0; cursor:pointer; text-align:left;
}
.menu-mobile-drawer-toggle:hover{ background:rgba(0,0,0,.04); }
.menu-mobile-drawer-seta{ transition:transform .15s ease; flex:none; }
.menu-mobile-drawer-grupo[data-aberto] .menu-mobile-drawer-seta{ transform:rotate(180deg); }
.menu-mobile-drawer-filhas{ display:none; padding-bottom:.35rem; }
.menu-mobile-drawer-grupo[data-aberto] .menu-mobile-drawer-filhas{ display:block; }
.menu-mobile-drawer-filhas .menu-mobile-drawer-link{
  padding-left:2.25rem; font-size:.9rem; color:#475569;
}
.menu-mobile-drawer-vertudo{ font-weight:600; color:var(--brand, #15803d); }
/* F1: titulo da coluna no drawer mobile — mesmo tratamento visual do
   `.mega-menu-coluna-titulo` do desktop (maiusculas, peso e cor de rotulo),
   com o recuo do proprio drawer. Da contexto a nomes de filha repetidos em
   ramos diferentes ("Aniversario" sob Arranjos e sob Buques). */
.menu-mobile-drawer-coluna-titulo{
  padding:.55rem 1.25rem .2rem 2.25rem;
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#94a3b8;
}

.menu-mobile-drawer-fechar:focus-visible,
.menu-mobile-drawer-toggle:focus-visible,
.menu-mobile-drawer-link:focus-visible{
  outline:2px solid var(--brand, #15803d); outline-offset:-2px;
}

@media (min-width: 768px){
  .menu-mobile-drawer{ display:none !important; }
}