/* ═══════════════════════════════════════════════════════════
   MENU ☰ — abre como o menu da loja da Apple e mostra as categorias
   em janelas de foto retangulares, como a Farfetch.

   • O painel "desce" de baixo da linha da marca (cortina), na mesma cor
     do cabeçalho, como se o cabeçalho crescesse.
   • O resto da página fica desfocado atrás.
   • Os itens entram em cascata, de cima pra baixo, um logo após o outro.
   • O ☰ vira ✕ no mesmo lugar.

   A animação é feita com GSAP (js/navegacao.js). Se o GSAP não carregar,
   as transições em CSS abaixo fazem o mesmo efeito, só que mais simples.
   ═══════════════════════════════════════════════════════════ */
.menu {
  position:fixed; left:0; right:0; top:var(--hdr-top-h); bottom:0; z-index:2;
  visibility:hidden; pointer-events:none;
}
.menu.open { visibility:visible; pointer-events:auto; }

.menu-scrim {
  position:absolute; inset:0; opacity:0;
  background:rgba(10,10,12,0.32);
  -webkit-backdrop-filter:blur(18px) saturate(1.1); backdrop-filter:blur(18px) saturate(1.1);
}
.menu-panel {
  position:absolute; left:0; right:0; top:0; bottom:0;
  background:var(--hdr); color:var(--hdr-text);
  overflow-y:auto; overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);
}
.menu-inner { max-width:var(--wrap); margin:0 auto; padding:8px var(--gutter) 40px; }

/* Sem GSAP: transições simples em CSS */
.menu:not(.gsap) .menu-scrim { transition:opacity 0.3s var(--ease); }
.menu:not(.gsap) .menu-panel { transition:clip-path 0.4s var(--ease); }
.menu:not(.gsap) .mi { opacity:0; transform:translateY(-8px); transition:opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.menu.open:not(.gsap) .menu-scrim { opacity:1; }
.menu.open:not(.gsap) .menu-panel { clip-path:inset(0 0 0 0); }
.menu.open:not(.gsap) .mi { opacity:1; transform:none; transition-delay:0.12s; }

.menu-label {
  font-size:12px; font-weight:500; color:var(--hdr-mute); letter-spacing:0.2px;
  margin:10px 0 12px;
}

/* ── Janelas de categoria (Farfetch) ── */
.menu-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.menu-tile {
  position:relative; aspect-ratio:4/3; border:none; padding:0; border-radius:12px; overflow:hidden;
  background:var(--hdr-2); color:#fff; text-align:left; isolation:isolate;
}
.menu-tile img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform 0.9s var(--ease-out);
}
.menu-tile::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.12) 55%, rgba(0,0,0,0) 100%);
}
.menu-tile:hover img { transform:scale(1.05); }
.menu-tile-txt { position:absolute; left:12px; right:12px; bottom:11px; }
.menu-tile-name { display:block; font-size:15px; font-weight:600; line-height:1.2; letter-spacing:-0.1px; }
.menu-tile-meta { display:block; font-size:12px; color:rgba(255,255,255,0.75); margin-top:2px; }
.menu-tile.sem-foto { background:var(--tile-bg, var(--hdr-2)); }
.menu-tile .tile-glyph { position:absolute; top:42%; left:50%; transform:translate(-50%,-50%); width:38%; max-width:64px; color:rgba(255,255,255,0.28); z-index:-3; }

/* ── Links grandes (Apple) ── */
.menu-links { display:flex; flex-direction:column; margin-top:26px; }
.menu-link {
  border:none; background:none; color:var(--hdr-text); text-align:left;
  font-size:26px; font-weight:600; letter-spacing:-0.4px; line-height:1.15; padding:7px 0;
}
.menu-link:hover { color:#fff; opacity:0.75; }
.menu-sub { display:flex; flex-wrap:wrap; gap:4px 22px; margin-top:26px; padding-top:18px; border-top:1px solid var(--hdr-line); }
.menu-sub button { border:none; background:none; color:var(--hdr-mute); font-size:14px; padding:6px 0; text-align:left; }
.menu-sub button:hover { color:#fff; }

/* ── Computador: painel desce até a metade, janelas à esquerda, links à direita ── */
@media (min-width:900px) {
  .menu-panel { bottom:auto; max-height:calc(100vh - var(--hdr-top-h) - 40px); box-shadow:0 24px 50px rgba(0,0,0,0.35); }
  .menu-inner {
    display:grid; grid-template-columns:minmax(0,1fr) 260px; grid-template-rows:auto 1fr;
    column-gap:56px; padding:22px var(--gutter) 40px;
  }
  .menu-label { grid-column:1; margin-top:0; }
  .menu-tiles { grid-column:1; grid-template-columns:repeat(3,1fr); gap:14px; }
  .menu-tile { aspect-ratio:16/10; }
  .menu-tile-name { font-size:16px; }
  .menu-links { grid-column:2; grid-row:1 / span 2; margin-top:28px; align-self:start; }
  .menu-link { font-size:22px; padding:6px 0; }
  .menu-sub { grid-column:2; grid-row:auto; flex-direction:column; gap:2px; margin-top:22px; }
}

/* Página parada atrás do menu */
body.menu-aberto { overflow:hidden; }