/* iPhone PWA, both orientations: keep the header's upper edge opaque and crisp.
   Keep the existing header dimensions and menu positioning. */
@media (display-mode: standalone) and (orientation: portrait) and (max-width: 768px) and (pointer: coarse),
       (display-mode: standalone) and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  html:root body > header.site-header,
  html:root body > header.store-header#top {
    background: #111 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    isolation: isolate !important;
  }
}

/* In the iPhone portrait viewport used by the home page, iOS already reserves
   the status-bar area. Do not add env(safe-area-inset-top) a second time.
   The class also covers navigator.standalone when the media query differs. */
@media (orientation: portrait) and (max-width: 768px) {
  html:root.pg-iphone-contained-viewport body > header.site-header,
  html:root.pg-iphone-contained-viewport body > header.store-header#top {
    top: 0 !important;
    background: #111 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
  }

  html:root.pg-iphone-contained-viewport body > header.site-header {
    padding-top: 0 !important;
  }
}

/* Keep the system area outside the header in portrait. Moving the safe-area
   padding to top avoids painting the header over the status bar or counting
   the inset twice. Album layout uses the header's bottom for content spacing. */
@media (display-mode: standalone) and (orientation: portrait) and (max-width: 768px) and (pointer: coarse) {
  html:root body > header.site-header,
  html:root body > header.store-header#top {
    top: env(safe-area-inset-top, 0px) !important;
  }

  html:root body > header.site-header {
    padding-top: 0 !important;
  }
}

/* Mobile browser tabs: leave vertical scrolling with the root document.
   Repeated :root outranks the legacy Edge/iOS viewport locks. */
html:root:root.pg-native-browser-scroll,
html:root:root.pg-native-browser-scroll body {
  position: static !important;
  inset: auto !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  overscroll-behavior: auto !important;
  touch-action: auto !important;
}
html:root:root.pg-native-browser-scroll body:not(.album-page) > main {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 0 !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  touch-action: auto !important;
  padding-top: var(--pg-browser-header-h, 90px) !important;
  padding-bottom: calc(var(--store-footer-h, 60px) + env(safe-area-inset-bottom, 0px) + 24px) !important;
}

/* Keep intentional scroll locks while a menu or dialog is open. */
html:root:root.pg-native-browser-scroll body.menu-open,
html:root:root.pg-native-browser-scroll body.modal-open {
  overflow: hidden !important;
}