/* viewport-fit=cover: inset only the existing mobile shells, never desktop. */
@media (max-width: 767px) {
  /* Installed app owns the top/bottom canvas; native rubber-band must never reveal white. */
  html,
  body,
  #root {
    min-height: 100%;
    background: #f1f5f8 !important;
  }

  [data-mobile-ui="root-layout"] > .sticky,
  [data-mobile-ui="account-auth-layout"] > .sticky,
  [data-mobile-ui="checkout-shell"] > .sticky,
  [data-mobile-ui="order-flow-shell"] > .sticky,
  [data-mobile-ui="product-page"] > .sticky,
  [data-mobile-ui="product-page-v2"] > .sticky,
  [data-mobile-ui="search-page-v2"] > .sticky {
    padding-top: env(safe-area-inset-top, 0px);
    background: #f1f5f8 !important;
    border-bottom: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-mobile-ui="root-layout"],
  [data-mobile-ui="account-auth-layout"] {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  header[data-mobile-ui="top-bar"] {
    height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #f1f5f8 !important;
  }

  [data-mobile-ui="root-layout"] > main {
    min-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* The existing React Suspense PageLoader uses LogoOrbitLoader; center it on the full mobile app viewport. */
  #root [class~="min-h-[40vh]"] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 40 !important;
    width: 100% !important;
    min-height: 100dvh !important;
    background: #f1f5f8 !important;
  }

  [data-mobile-ui="bottom-navigation"] {
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 !important;
    background: rgba(241, 245, 248, 0.28) !important;
    border-top: 0 !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }

  [data-mobile-ui="bottom-navigation"] > nav {
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) - 18px)) !important;
    margin: 0 auto !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    backdrop-filter: blur(24px) saturate(155%);
  }

  /* iOS/WKWebView fixed-bottom workaround: runtime pins mobile navs to the visual viewport using top coordinates. */
  html.mf-mobile-viewport-runtime-ready [data-mobile-ui="bottom-navigation"],
  html.mf-mobile-viewport-runtime-ready nav[data-mobile-dealer="bottom-nav"] {
    top: var(--mf-mobile-nav-top) !important;
    bottom: auto !important;
  }

  /* Modal state owns the safe-area canvas too; provider/React backdrops already dim the app content. */
  html.mf-mobile-modal-open,
  html.mf-mobile-modal-open body {
    background: #97a3b1 !important;
  }

  html.mf-mobile-modal-open body::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: max(env(safe-area-inset-top, 0px), var(--mf-mobile-visual-top, 0px));
    background: rgba(15, 40, 70, 0.40);
    pointer-events: none;
    z-index: 2147483646;
  }

  /* Any mobile dialog backdrop must cover the whole web-app viewport and sit above app chrome. */
  div[role="presentation"]:has([role="dialog"][aria-modal="true"]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    box-sizing: border-box;
    background: rgba(15, 40, 70, 0.40) !important;
  }

  /* Product-page related cards with Dolyami keep their complete height inside the rail. */
  [data-mobile-product-v2="related"] {
    height: 282px !important;
  }

  [data-mobile-product-v2="related"] > div:last-child {
    height: 246px !important;
  }

  /* Checkout action summary belongs to document flow; it must never cover the current step. */
  body [data-mobile-ui="checkout-shell"] .page-container {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body [data-mobile-ui="checkout-shell"] .page-container > .grid.grid-cols-1.gap-8 > div:last-child {
    position: static !important;
    width: 358px !important;
    margin: 12px auto 0 !important;
  }

  body [data-mobile-ui="checkout-shell"] .page-container > .grid.grid-cols-1.gap-8 > div:last-child > .bg-card {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    width: 358px !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  /* Orders use the page scroll, never a nested 294px scroll viewport. */
  [data-mobile-orders-content="ready"] {
    height: auto !important;
    overflow: visible !important;
  }

  [data-mobile-orders-content="ready"] > div {
    position: static !important;
    margin: 0 16px !important;
    padding-bottom: 4px !important;
  }

  [data-mobile-orders="page"] > div[aria-hidden="true"] {
    display: none !important;
  }

  [data-mobile-orders="page"] {
    padding-bottom: 28px !important;
  }

  /* Installed-app splash is geometrically centered inside the usable safe-area viewport. */
  .mobile-startup-splash {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }

  header[data-mobile-dealer="app-bar"] {
    height: calc(40px + env(safe-area-inset-top, 0px)) !important;
    background: #f1f5f8 !important;
    border-bottom: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-mobile-dealer="app-bar"] > img {
    top: calc(6px + env(safe-area-inset-top, 0px)) !important;
  }

  [data-mobile-dealer="app-bar"] > span {
    top: calc(5px + env(safe-area-inset-top, 0px)) !important;
  }

  [data-mobile-dealer="shell"] > main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  nav[data-mobile-dealer="bottom-nav"] {
    height: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(241, 245, 248, 0.76) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.48);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
  }

  nav[data-mobile-dealer="bottom-nav"] > div {
    top: 6px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    -webkit-backdrop-filter: blur(22px) saturate(155%);
    backdrop-filter: blur(22px) saturate(155%);
  }

  section[data-mobile-dealer="more-sheet"] {
    bottom: env(safe-area-inset-bottom, 0px);
  }
}