/* ═══════════════════════════════════════════════════
   MOBILE NAV — Shared drawer + hamburger trigger
   ─────────────────────────────────────────────────
   New capability shared by product.html and home.html.
   Uses existing product.css tokens (--bg/--panel/--line/
   --text/--accent/--shadow) — no new color values.
   Reuses html.has-fullscreen for scroll-lock (already
   defined in product.css) instead of duplicating it.

   Load order: main.css → product.css → nav-mobile.css → (page.css)
═══════════════════════════════════════════════════ */

/* ── Hamburger trigger ──
   Lives inside .header-actions, inherits the existing
   40x40 / border / background rule from product.css
   (`.header-actions button`). Only the icon + active
   state are defined here. */
.nav-toggle {
  display: none;
  position: relative;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px;
  background: var(--text); border-radius: 1px;
  transition: transform 200ms cubic-bezier(.65,0,.35,1),
              opacity 160ms ease;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
}

/* ── Overlay backdrop ── */
.nav-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
}
.nav-overlay.visible { opacity: 1; pointer-events: auto; }

/* ── Drawer panel ──
   Slides in from the left edge — matches the hamburger's
   position inside .header-actions (end of the RTL flex
   row = visually top-left) so the motion direction lines
   up with where the user tapped. */
.mobile-nav-drawer {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: min(84vw, 340px);
  background: var(--panel);
  border-inline-end: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 260ms cubic-bezier(.16,.84,.44,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mobile-nav-drawer.open { transform: translateX(0); }

.mobile-nav-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.mobile-nav-drawer__header .logo { font-size: 1rem; font-weight: 900; letter-spacing: .08em; }
.mobile-nav-drawer__header button {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line); background: transparent; color: var(--text);
  cursor: pointer; font-size: .95rem;
}

.mobile-nav-drawer__links {
  display: flex; flex-direction: column;
  padding: 8px 8px 20px;
}
.mobile-nav-drawer__links a {
  padding: 14px 12px; font-size: .98rem; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: color 160ms ease, background 160ms ease;
}
.mobile-nav-drawer__links a:hover { color: var(--accent); background: var(--panel-2); }
.mobile-nav-drawer__links a:last-child { border-bottom: none; }