/* Desktop keeps document scrolling. Mobile has one bounded content scroller
   and a separate dock in normal flow, outside the iOS fixed-position layer. */
#app-scroll, #mobile-dock { display: contents; }
#mobile-context:empty { display: none; }
@media (max-width: 760px) {
  html { height: 100%; overflow: hidden; }
  body {
    height: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
  }
  #app-scroll {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-block: 16px;
  }
  #main { padding-bottom: 24px; }
  #mobile-dock {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    position: relative;
    min-width: 0;
    background: #121212;
  }
  #mobile-dock .bottom-nav,
  #mobile-dock #mini-cart,
  #mobile-dock .mix-mobile-summary {
    position: static;
    inset: auto;
    flex-shrink: 0;
    transform: none;
    backdrop-filter: none;
  }
  #mobile-dock .bottom-nav {
    padding-left: max(5px, env(safe-area-inset-left, 0px));
    padding-right: max(5px, env(safe-area-inset-right, 0px));
  }
  #mobile-dock #mini-cart,
  #mobile-dock .mix-mobile-summary {
    margin: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  }
  #mobile-dock #toast { position: absolute; bottom: calc(100% + 8px); }
}