/* ============================================================
   app-mobile.css — native-app-style mobile shell, loaded on
   every frontend page (after base.css, before page CSS).
   Desktop is untouched; everything kicks in at ≤ 720px.
   ============================================================ */

:root{ --tabbar-h: 64px; }

/* Bottom tab bar is hidden on desktop. */
.app-tabbar{ display: none; }

/* Smooth, app-like touch behaviour everywhere. */
a, button, .btn, .app-tab{ -webkit-tap-highlight-color: transparent; }

/* ───────────────────────────────────────────────────────────
   MOBILE  (≤ 720px) — turn the site into an app shell
   ─────────────────────────────────────────────────────────── */
@media (max-width: 720px){

  html{ -webkit-text-size-adjust: 100%; }
  body{
    /* never scroll sideways; clip keeps position:sticky working */
    overflow-x: clip;
    /* room for the fixed bottom tab bar */
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }

  /* ── Compact, app-style top bar ── */
  /* Shrinking the nav height here keeps the sticky category bar (which sticks
     to top: var(--nav-height)) flush under the header too. */
  :root{ --nav-height: 60px; }
  .nav{ background: rgba(255,255,255,0.92); }
  .nav-inner{ gap: 12px; }
  .brand{ font-size: 19px; }
  .brand img{ height: 26px !important; }
  /* Download lives in the bottom tab bar — declutter the header. */
  .nav-cta .btn.btn-primary{ display: none; }

  /* Honour the notch on the sides for full-bleed sections. */
  .container{ padding-left: max(20px, env(safe-area-inset-left));
              padding-right: max(20px, env(safe-area-inset-right)); }

  /* ── Bottom tab bar (the app navigation) ── */
  .app-tabbar{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(255,255,255,0.94);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 24px -18px rgba(15,16,32,0.25);
  }
  .app-tab{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; height: var(--tabbar-h);
    color: var(--ink-3); font-weight: 700;
    position: relative;
  }
  .app-tab__ic{ font-size: 24px; line-height: 1; transition: transform .18s ease; }
  .app-tab__lb{ font-size: 10.5px; letter-spacing: -0.01em; }
  .app-tab.on{ color: var(--navy); }
  .app-tab.on .app-tab__ic{ color: var(--pink); transform: translateY(-1px); }
  .app-tab.on::before{
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--pink);
  }
  .app-tab:active .app-tab__ic{ transform: scale(0.88); }

  /* ── App-like buttons: full width, comfortable tap targets ── */
  .hero-cta, .cta, .cta-row, .store-btns{ width: 100%; }
  .hero-cta .btn, .cta .btn, .cta-row .btn{ flex: 1; min-height: 52px; }
}

/* Tiny phones — a touch tighter. */
@media (max-width: 380px){
  .app-tab__lb{ font-size: 10px; }
  .app-tab__ic{ font-size: 22px; }
}