/*
 * Android WebView paint/layout guard.
 *
 * A few devices composed the sticky header and fixed navigation correctly but
 * failed to paint the normal document layers. These final rules keep the
 * catalogue in the normal flow, remove accidental transforms and pin the
 * navigation to the actual visual viewport.
 */
html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
  margin: 0;
}

@media (max-width: 800px) {
  body > main#appMain {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 0 76px !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body > main#appMain > section:not([hidden]) {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #home.hero {
    display: block !important;
    min-height: 330px !important;
  }

  #home .hero-copy,
  #home .hero-art,
  .category-section,
  .collection-section,
  #categoryGrid,
  #productGrid {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #categoryGrid {
    display: flex !important;
  }

  #productGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .app-bottom-nav {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .checkout-modal,
  .tracking-modal,
  .product-detail-modal,
  .account-modal,
  .help-modal {
    transform: none !important;
  }
}