/* Clip mobile scrolling below the header. Telegram iOS exposes root-scroll
   content above its WKWebView frame, beyond the reach of fixed backgrounds. */
@media (max-width: 1023px) {
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --mobile-header-height: calc(var(--header) + var(--safe-top));
    --mobile-header-gutter: 24px;
  }

  html, body {
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    overscroll-behavior-y: none;
  }

  body {
    height: 100dvh;
    padding-top: var(--mobile-header-height);
  }

  main,
  .catalog-page main.catalog-main {
    position: fixed;
    inset: var(--mobile-header-height) 0 0;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    scroll-snap-type: none;
    contain: paint;
  }

  .site-header,
  .catalog-page .site-header {
    position: fixed;
    inset: 0 0 auto;
    height: var(--mobile-header-height);
    padding-top: var(--safe-top);
    padding-bottom: 0;
    padding-left: max(var(--mobile-header-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--mobile-header-gutter), env(safe-area-inset-right, 0px));
    background: var(--bg);
    z-index: 50;
    transform: translateZ(0);
  }

  .screen {
    scroll-margin-top: 0;
  }

  .catalog-page-heading h1 {
    scroll-margin-top: 24px;
  }

  .mobile-nav:not([hidden]) {
    max-height: calc(100dvh - var(--mobile-header-height) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 639px) {
  :root { --mobile-header-gutter: 20px; }
}