/* Keep the image and its hotspot coordinate system identical at every width. */
body .c4-explorer .c4-product-stage { aspect-ratio: auto; align-self: start; }
body .c4-explorer .c4-product-stage > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #f5efe5; }
body .c4-explorer .c4-hotspots { bottom: 52px; }
body .c4-explorer .c4-hotspot { transform: translate(-16px, -50%); }
body .c4-explorer .c4-stage-toolbar { position: relative; inset: auto; box-sizing: border-box; height: 52px; min-height: 52px; padding: 4px 12px; background: #f3edf3; color: #4c285f; }
@media (max-width: 480px) {
  body .c4-explorer .c4-hotspot { gap: 3px; }
  body .c4-explorer .c4-hotspot > span + span { padding: 4px 6px; font-size: 10px; }
  body .c4-explorer .c4-stage-toolbar > span { font-size: 10px; }
}

body .c4-explorer .c4-stage-toolbar > span { color: #4c285f; }