/* Draw the page's current theme behind transparent system bars. Android's
   opaque native bars remain controlled by the browser, not by this stylesheet. */
:root {
  --app-system-bar-color: #f3efe5;
  --app-safe-top: 0px;
  --app-safe-bottom: 0px;
}
html[data-theme="dark"] { --app-system-bar-color: #151612; }
html[data-installed-app="true"] {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  background-color: var(--app-system-bar-color);
}
html[data-installed-app="true"] body {
  min-height: 100dvh;
  padding-block-start: var(--app-safe-top);
}
html[data-installed-app="true"] body::before {
  content: "";
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  height: var(--app-safe-top);
  background: var(--app-system-bar-color);
  pointer-events: none;
}
html[data-installed-app="true"] .cart-drawer { padding-block-start: var(--app-safe-top); }
html[data-installed-app="true"] dialog:not(.photo-viewer) {
  max-height: calc(100dvh - 2 * max(var(--app-safe-top), var(--app-safe-bottom)) - 1rem);
}
/* Keep the bottom controls above the gesture area without dynamic padding. */
.mobile-actions { bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
.floating-cart { bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 820px) {
  .floating-cart { bottom: calc(5.35rem + env(safe-area-inset-bottom, 0px)); }
}