/* Mobile Menu — Legacy styles
   The mobile menu now uses Dynamic Island style (expanding header bar).
   Styles are in header.css under the MENU MODE section.
   This file is kept for backward compatibility with other sites
   that may still use the old slide-in panel. */

/* Old slide-in panel (only visible if .mobile-menu element exists) */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 85vw);
  z-index: 200;
  background: var(--bg);
  border-left: 1px solid var(--hairline);
  padding: var(--space-8) var(--space-6);
  transform: translateX(100%);
  transition: transform var(--duration-normal) cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mobile-menu[aria-hidden="false"] {
  transform: translateX(0);
}

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(58, 53, 46, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.mobile-menu-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  align-self: flex-end;
  color: var(--text);
  margin-bottom: var(--space-6);
}

.mobile-menu__close:hover { color: var(--heading); }
.mobile-menu__close svg { width: 20px; height: 20px; }

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-8);
}

.mobile-menu__link {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--heading);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.mobile-menu__link:hover { color: var(--text); }
.mobile-menu__link--active { font-weight: 500; }

.mobile-menu__sep {
  border: none;
  border-top: 1px solid var(--text);
  opacity: 0.1;
  margin: var(--space-2) 0;
}

.mobile-menu__cart-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mobile-menu__cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--bg);
  background: var(--heading);
  border-radius: var(--radius-full);
}

.mobile-menu__secondary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
}

.mobile-menu__secondary a {
  font-size: var(--text-sm);
  color: var(--meta);
  text-decoration: none;
}

.mobile-menu__secondary a:hover { color: var(--text); }