:root {
  --app-shell-surface: #0c0c0c;
  --app-shell-line: rgba(255, 255, 255, .11);
  --app-nav-height: calc(58px + env(safe-area-inset-bottom));
}

.appNav {
  display: none;
}

@media (max-width: 1049px) {
  .appNav {
    position: fixed;
    inset: auto 0 0;
    z-index: 180;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: var(--app-nav-height);
    padding: 4px max(8px, env(safe-area-inset-right))
             max(3px, env(safe-area-inset-bottom))
             max(8px, env(safe-area-inset-left));
    border-top: 1px solid var(--app-shell-line);
    background: var(--app-shell-surface);
  }

  html.keyboard-open .appNav { display: none; }

  .appNavItem {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 50px;
    padding: 2px 4px;
    border: 0;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    background: transparent;
    color: rgba(255,255,255,.52);
    text-decoration: none;
    font: 600 10px/1 Inter, -apple-system, "SF Pro Text", system-ui, sans-serif;
    letter-spacing: .01em;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease, transform .16s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .appNavItem.is-active,
  .appNavItem[aria-current="page"] {
    background: rgba(255,255,255,.07);
    color: #fff;
  }

  .appNavItem:active {
    background: rgba(255,255,255,.07);
    transform: scale(.96);
  }

  .appNavItem:disabled {
    opacity: .42;
    cursor: default;
  }

  .appNavItem:disabled:active {
    background: transparent;
    transform: none;
  }

  .appNavIcon {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    background: var(--app-nav-icon) center / contain no-repeat;
    opacity: .5;
    transition: opacity .16s ease;
  }

  .appNavItem.is-active .appNavIcon,
  .appNavItem[aria-current="page"] .appNavIcon { opacity: 1; }

  .appNavIconHome { --app-nav-icon: url('/nav-icons/thin/home.svg?v=2'); }
  .appNavIconShop { --app-nav-icon: url('/nav-icons/thin/shop.svg?v=2'); }
  .appNavIconInfo { --app-nav-icon: url('/nav-icons/thin/info.svg?v=2'); }
  .appNavIconMedia { --app-nav-icon: url('/nav-icons/thin/news.svg?v=2'); }
}

@media (prefers-reduced-motion: reduce) {
  .appNavItem { transition: none; }
}