/* ============================================================
   mobile-nav.css — bottom tab bar (mobile) / top nav (desktop)
   + age-gate modal + splash loader
   Breakpoint: 782px (matches Storefront's own handheld breakpoint)
   ============================================================ */

:root { --nt-bp-mobile: 782px; }

/* ── Show/hide chrome by breakpoint ─────────────────────────── */
.nt-topnav { display: none; }
.nt-bottom-nav { display: flex; }

@media (min-width: 783px) {
  .nt-topnav { display: block; }
  .nt-bottom-nav { display: none; }
  main.nt-main { padding-bottom: 0; }
}

/* ── BOTTOM TAB BAR ───────────────────────────────────────── */
.nt-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  align-items: center;
  justify-content: space-around;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-top: 0.5px solid rgba(26, 21, 35, 0.08);
  box-shadow: rgba(26, 21, 35, 0.08) 0px -8px 24px;
}
.nt-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 56px;
  padding: 4px 0;
  color: var(--nt-ink-faint);
  position: relative;
}
.nt-bottom-nav__item svg { width: 22px; height: 22px; }
.nt-bottom-nav__label { font-size: 10.5px; font-weight: 700; }
.nt-bottom-nav__item.is-active { color: var(--nt-purple-dark); }
.nt-bottom-nav__badge {
  position: absolute;
  top: -2px; right: 10px;
  min-width: 16px; height: 16px;
  border-radius: 99px;
  background: var(--nt-gradient);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.nt-bottom-nav__badge:empty,
.nt-bottom-nav__badge[data-count="0"] { display: none; }

/* ── AGE GATE ─────────────────────────────────────────────── */
.nt-age-gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(26, 21, 35, 0.55);
  backdrop-filter: blur(4px);
}
.nt-age-gate[hidden] { display: none; }
body.nt-gate-open { overflow: hidden; }

.nt-age-gate__card {
  width: 100%;
  max-width: 420px;
  margin-bottom: 16px;
  padding: 32px 28px 28px;
  border-radius: 28px;
  background: var(--nt-white);
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 30px 60px;
}
.nt-age-gate__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: var(--nt-gradient);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 15px;
}
.nt-age-gate__title { font-size: 20px; margin-bottom: 10px; }
.nt-age-gate__copy {
  font-size: 14px;
  line-height: 1.5;
  color: var(--nt-ink-soft);
  margin: 0 0 22px;
}
.nt-age-gate__confirm { margin-bottom: 12px; }
.nt-age-gate__exit {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--nt-ink-faint);
  margin-bottom: 16px;
}
.nt-age-gate__legal {
  font-size: 11.5px;
  color: var(--nt-ink-faint);
  line-height: 1.5;
  margin: 0;
}

@media (min-width: 480px) {
  .nt-age-gate { align-items: center; }
}

/* ── SPLASH LOADER (brief, first paint only) ─────────────── */
.nt-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nt-gradient);
  transition: opacity 0.4s ease;
}
.nt-splash.nt-splash--hide { opacity: 0; pointer-events: none; }
.nt-splash__mark {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 32px;
  color: #fff;
  letter-spacing: 1px;
}