.mower-360 {
  --viewer-max-width: 1000px;
  --viewer-aspect-ratio: 4 / 3;
  --viewer-background: #fff;
  position: relative;
  width: 100%;
  max-width: var(--viewer-max-width);
  margin-inline: auto;
  aspect-ratio: var(--viewer-aspect-ratio);
  overflow: hidden;
  background: var(--viewer-background);
  border-radius: 12px;
  user-select: none;
  touch-action: pan-y;
  cursor: grab;
}

.mower-360.is-dragging { cursor: grabbing; }

.mower-360__stage,
.mower-360__image {
  width: 100%;
  height: 100%;
}

.mower-360__stage {
  position: relative;
  display: grid;
  place-items: center;
}

.mower-360__image {
  display: block;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

.mower-360__loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.86);
  z-index: 3;
  transition: opacity .25s ease, visibility .25s ease;
}

.mower-360.is-ready .mower-360__loader {
  opacity: 0;
  visibility: hidden;
}

.mower-360__loader-inner {
  width: min(260px, 70%);
  text-align: center;
  font: 600 14px/1.4 system-ui, sans-serif;
  color: #222;
}

.mower-360__progress {
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7e7e7;
}

.mower-360__progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transition: width .15s linear;
}

.mower-360__toolbar {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.mower-360__button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(20,20,20,.82);
  color: #fff;
  cursor: pointer;
}

.mower-360__button:hover { background: rgba(20,20,20,.95); }
.mower-360__button:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

.mower-360__hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #222;
  font: 600 12px/1 system-ui, sans-serif;
  pointer-events: none;
  transition: opacity .25s ease;
}

.mower-360.has-interacted .mower-360__hint { opacity: 0; }

@media (max-width: 600px) {
  .mower-360 { border-radius: 8px; }
  .mower-360__hint { bottom: 12px; }
  .mower-360__toolbar { right: 8px; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mower-360__loader,
  .mower-360__hint,
  .mower-360__progress-bar { transition: none; }
}