/* ==========================================================================
   Header / Announcement / Mobile Nav
   Visual language comes from public/theme.css; this file owns only the
   header-scoped geometry and the mobile drawer.
   ========================================================================== */

/* ---------- Mobile drawer ---------- */
.mobile-nav {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 320;
  width: min(360px, 88vw);
  background: var(--c-bg);
  transform: translateX(-102%);
  transition: transform 0.34s var(--ease-out);
  display: flex; flex-direction: column;
  box-shadow: 0 0 60px rgba(28,26,24,.16);
}
.mobile-nav.is-open { transform: translateX(0); }

.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--c-line);
}
.mobile-nav__body { flex: 1; overflow-y: auto; padding: 4px 16px 20px; -webkit-overflow-scrolling: touch; }
.mobile-nav__item { border-bottom: 1px solid var(--c-line); }

.mobile-nav__link,
.mobile-nav__toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 15px 0;
  font-size: 0.8125rem; letter-spacing: 0.06em; text-align: left;
}
.mobile-nav__toggle span:last-child {
  font-size: 1rem; font-weight: 300; color: var(--c-ink-soft);
  transition: transform 0.28s var(--ease);
}
.mobile-nav__toggle.is-open span:last-child { transform: rotate(45deg); }

.mobile-nav__sub {
  max-height: 0; overflow: hidden;
  transition: max-height 0.34s var(--ease);
  padding-left: 12px;
}
.mobile-nav__sub a {
  display: block; padding: 9px 0;
  font-size: 0.75rem; color: var(--c-ink-soft); font-weight: 300;
}
.mobile-nav__sub a:hover { color: var(--c-ink); }

.mobile-nav__foot { padding: 16px; border-top: 1px solid var(--c-line); }

/* ---------- Transparent header over a hero ---------- */
.header--transparent {
  background: transparent;
  border-bottom-color: transparent;
}
.header--transparent .nav__link,
.header--transparent .header__logo,
.header--transparent .icon-btn { color: #fff; }
.header--transparent .cart-count { background: var(--c-brass); color: #fff; }
.header--transparent .header__logo a { color: #fff; }

@media (min-width: 900px) {
  .mobile-nav { display: none; }
}