/* ============================================================
   Navigation additions — current page, cart count, mobile menu.
   Self-contained: loaded after style.css, no dependency on edits there.
   Mobile menu shows at <= 900px (7 links + brand + CTA don't fit below that).
   ============================================================ */
.nav-links a[aria-current="page"] { color: var(--accent); }
.nav-links a[aria-current="page"]::after { width: 100%; }

.nav-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; margin-left: 0.45rem;
  border-radius: 100px; background: var(--accent); color: var(--bg-deeper);
  font-family: var(--sans); font-size: 0.64rem; font-weight: 600; letter-spacing: 0;
  line-height: 1; vertical-align: 0.1em;
}

/* desktop: toggle and menu don't exist */
.nav-toggle, .mobile-menu { display: none; }

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }

  .nav-toggle {
    display: block; position: relative; flex: none; width: 46px; height: 46px; padding: 0;
    border: 1px solid var(--glass-brd); border-radius: 50%;
    background: rgba(29, 45, 51, 0.6);          /* no backdrop-filter: cheaper while scrolling */
    cursor: pointer; transition: border-color .4s;
  }
  .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { border-color: var(--accent); }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .nav-toggle span {
    position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px;
    background: var(--tree); border-radius: 2px;
    transform: translate(-50%, calc(-50% + var(--y, 0px))) rotate(var(--r, 0deg));
    transition: transform .55s var(--ease), background .3s;
  }
  .nav-toggle span:nth-child(1) { --y: -4px; }
  .nav-toggle span:nth-child(2) { --y: 4px; }
  .nav-toggle[aria-expanded="true"] span { background: var(--accent); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { --y: 0px; --r: 45deg; }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { --y: 0px; --r: -45deg; }

  /* no blur layers on the nav controls (even if an older style.css still defines them) */
  .nav-toggle, .mobile-menu { backdrop-filter: none; -webkit-backdrop-filter: none; }

  .nav.menu-open {
    background: transparent; border-bottom-color: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  html.menu-open, html.menu-open body { overflow: hidden; }

  .mobile-menu {
    display: flex; flex-direction: column; justify-content: space-between;
    position: fixed; inset: 0; z-index: 990; overflow-y: auto; overscroll-behavior: contain;
    padding: 6.5rem clamp(1.4rem, 7vw, 3rem) max(2rem, env(safe-area-inset-bottom));
    background:
      radial-gradient(90% 55% at 85% 0%, rgba(230, 199, 154, 0.13) 0%, transparent 70%),
      rgb(28, 44, 49);                          /* opaque: no backdrop blur needed */
    opacity: 0; transition: opacity .45s var(--ease);
  }
  /* closed = not rendered at all, so it costs nothing while scrolling */
  .mobile-menu[hidden] { display: none; }
  .mobile-menu.open { opacity: 1; }

  .mm-list { display: flex; flex-direction: column; }
  .mm-list a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.95rem 0; border-bottom: 1px solid var(--glass-brd);
    font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 9.5vw, 2.7rem);
    line-height: 1.1; letter-spacing: 0.01em; color: var(--tree);
    opacity: 0; transform: translateY(16px);
    transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s;
  }
  .mm-list a::after { display: none; }
  .mm-list a:active { color: var(--accent); }
  .mm-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .mm-list a[aria-current="page"] { color: var(--accent); font-style: italic; }
  .mm-list .nav-count { margin-left: 0; font-size: 0.78rem; min-width: 1.6rem; height: 1.6rem; }

  .mobile-menu.open .mm-list a { opacity: 1; transform: none; }
  .mobile-menu.open .mm-list a:nth-child(1) { transition-delay: .08s; }
  .mobile-menu.open .mm-list a:nth-child(2) { transition-delay: .12s; }
  .mobile-menu.open .mm-list a:nth-child(3) { transition-delay: .16s; }
  .mobile-menu.open .mm-list a:nth-child(4) { transition-delay: .20s; }
  .mobile-menu.open .mm-list a:nth-child(5) { transition-delay: .24s; }
  .mobile-menu.open .mm-list a:nth-child(6) { transition-delay: .28s; }
  .mobile-menu.open .mm-list a:nth-child(7) { transition-delay: .32s; }

  .mm-foot { margin-top: 2.2rem; }
  .mm-cta {
    display: block; text-align: center; padding: 1rem 1.5rem; border-radius: 100px;
    background: var(--accent); color: var(--bg-deeper);
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  }
  .mm-foot p { margin: 1.4rem 0 0; text-align: center; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--faint); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mm-list a, .nav-toggle span { transition: none !important; }
  .mm-list a { opacity: 1; transform: none; }
}