/*
  Shared small-screen layout contract for the public storefront.
  This makes the actual layout shrink and wrap; it intentionally does not
  hide horizontal overflow at the document level.
*/
@media (max-width: 900px) {
  :is(.home-page, .products-page, .shipping-page, .contact-page) .sticky-header-shell,
  :is(.home-page, .products-page, .shipping-page, .contact-page) .site-header,
  :is(.home-page, .products-page, .shipping-page, .contact-page) main,
  :is(.home-page, .products-page, .shipping-page, .contact-page) .clear-bay-stage,
  :is(.home-page, .products-page, .shipping-page, .contact-page) .products-page-hero,
  :is(.home-page, .products-page, .shipping-page, .contact-page) .shipping-page-hero,
  :is(.home-page, .products-page, .shipping-page, .contact-page) .contact-page-main {
    min-width: 0;
    max-width: 100%;
  }

  :is(.home-page, .products-page, .shipping-page, .contact-page) .site-header > *,
  :is(.home-page, .products-page, .shipping-page, .contact-page) .hero-copy,
  :is(.home-page, .products-page, .shipping-page, .contact-page) .products-page-hero-copy,
  :is(.home-page, .products-page, .shipping-page, .contact-page) .shipping-page-hero-copy,
  :is(.home-page, .products-page, .shipping-page, .contact-page) .contact-hero__copy,
  :is(.home-page, .products-page, .shipping-page, .contact-page) .products-quick-links,
  :is(.home-page, .products-page, .shipping-page, .contact-page) .shipping-process,
  :is(.home-page, .products-page, .shipping-page, .contact-page) .contact-methods,
  :is(.home-page, .products-page, .shipping-page, .contact-page) .contact-form-card {
    min-width: 0;
    max-width: 100%;
  }

  :is(.home-page, .products-page, .shipping-page, .contact-page) h1,
  :is(.home-page, .products-page, .shipping-page, .contact-page) h2,
  :is(.home-page, .products-page, .shipping-page, .contact-page) p,
  :is(.home-page, .products-page, .shipping-page, .contact-page) .contact-hero__mail {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .home-page #hero-title {
    white-space: normal;
  }
}