/* Keep the mobile home page on the same inner scroller used by navigation and
   scroll restoration. Category cards and typography remain unchanged. */
@media (max-width: 600px) {
  html,
  body {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  #app {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #app > .app.route-home,
  #app > .app.route-home.route-fixed {
    position: relative !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #app > .app.route-home > .home-page {
    height: auto !important;
    min-height: max-content !important;
    overflow: visible !important;
  }
}