/* A live demo on a phone (Dasha, 22 Oct): the store, the band builder, the catalog's store and Try On do not load in the page on a
   phone, in a small frame. Their frame shows a picture of the demo's own phone layout and one button that opens it in a new tab,
   where it has the whole screen (Try On has the camera there too). The page's script skips the frame's load at this width. */
.demo-phone { display: none; }
.demo-phone .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 860px) {
  .rc-view iframe, .rc-view .wait, .vto-has-phone iframe, .vto-has-phone .vto-wait { display: none; }
  .demo-phone { position: absolute; inset: 0; z-index: 2; display: block; overflow: hidden; background: #fff; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .demo-phone img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 0; }
  .demo-phone::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
    background: linear-gradient(to top, rgba(255, 255, 255, .96) 22%, rgba(255, 255, 255, 0)); }
  .demo-phone .go { position: absolute; z-index: 1; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
    min-height: 46px; padding: 0 20px; border-radius: 999px; white-space: nowrap; background: #191826; color: #fff;
    font: 500 14.5px/1 var(--sans, system-ui, sans-serif); box-shadow: 0 14px 30px -12px rgba(25, 24, 38, .5); }
  .demo-phone .go svg { flex: none; }
  .demo-phone:active .go { transform: translateX(-50%) scale(.97); }
  .demo-phone:focus-visible { outline: 2px solid #6E72F2; outline-offset: -2px; }
}