/* The configuration grid is the sticky boundary. Options use the page scroll. */
@media (min-width: 801px) {
  body .wheel-photos .wp-visual {
    position: sticky;
    top: var(--wp-sticky-top, 100px);
    align-self: start;
  }
}

@media (min-width: 741px) {
  body :is(.bmw-configurator, .porsche-configurator) .visual {
    position: sticky;
    top: var(--wheel-sticky-top, 88px);
    align-self: start;
  }
  body :is(.bmw-configurator, .porsche-configurator) .visual > .stage {
    width: var(--wheel-stage-size, min(100%, calc(100dvh - 320px)));
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1;
    margin-inline: auto;
  }
}

@media (min-width: 761px) {
  body .wheel-brand-page .wheel-brand-visual {
    position: sticky;
    top: var(--wheel-sticky-top, 88px);
    align-self: start;
  }
  body .wheel-brand-page .wheel-brand-visual:has(.expanded) {
    z-index: 10000;
  }
  body .wheel-brand-page .wheel-brand-stage:not(.expanded) {
    width: var(--wheel-stage-size, min(100%, calc(100dvh - 280px)));
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1;
    margin-inline: auto;
  }
}

/* A single-column phone layout keeps the preview in normal reading order. */
@media (max-width: 740px) {
  body :is(.bmw-configurator, .porsche-configurator) .visual {
    position: static;
    top: auto;
  }
}
@media (max-width: 760px) {
  body .wheel-brand-page .wheel-brand-visual {
    position: static;
    top: auto;
  }
}
@media (max-width: 800px) {
  body .wheel-photos .wp-visual {
    position: static;
    top: auto;
  }
}