/* Canonical 430px app frame boundary. */
html,
body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

  #shell,
  .screen,
  nav#nav-home,
  #snack-wrap,
  #np-snack-wrap,
  #home-notifications,
  .rdm-scrim {
    max-width: min(430px, 100vw) !important;
    width: min(430px, 100vw) !important;
    box-sizing: border-box !important;
  }

  #shell,
  .screen {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  #shell {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .screen {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
  }

  #shell .screen,
  #shell .screen > .scroll {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #shell .screen > .scroll {
    width: 100% !important;
    overflow-y: auto !important;
  }

  nav#nav-home {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(430px, 100vw) !important;
    max-width: 100vw !important;
    height: 60px !important;
    border-radius: 0 !important;
    background: var(--md-surface-2) !important;
    border-top: 1px solid var(--md-outline-var) !important;
  }

  #snack-wrap {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(430px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 0 8px !important;
  }

  .rdm-scrim {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(430px, 100vw) !important;
    max-width: 100vw !important;
  }

  .rdm-sheet {
    width: min(430px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
  }

  body > .sheet-bg {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    width: min(430px, 100vw) !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 100 !important;
  }

  body > .sheet-bg.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body > .sheet-bg > .sheet {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 60px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Homepage All Products: always two columns, including narrow phones. */
  #screen-home .products-grid,
  #home-products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }