.lot-tour {
  margin-block: clamp(26px, 4.6vw, 58px);
  color: #f2f8fc;
}

.lot-tour-start,
.lot-tour-viewer {
  overflow: hidden;
  border: 1px solid #28495e;
  border-radius: 13px;
  background: #102b3e;
  box-shadow: 0 12px 32px #0b344518;
}

.lot-tour-start {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(255px, 25vw, 340px);
  isolation: isolate;
}

.lot-tour-start::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(92deg, #092639 8%, #0d2c40f2 32%, #102b3e93 67%, #102b3e38);
}

.lot-tour-preview {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 49%;
}

.lot-tour-intro {
  max-width: 630px;
  padding: clamp(25px, 4.7vw, 56px);
}

.lot-tour-eyebrow {
  margin-bottom: 8px;
  color: #aee1f7;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.lot-tour-intro h2 {
  margin-bottom: 10px;
  color: #fff;
}

.lot-tour-intro p:not(.lot-tour-eyebrow) { color: #d8e9f1; }

.lot-tour-launch {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 20px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid #d6f1fd;
  border-radius: 6px;
  background: #dcf3ff;
  color: #092c43;
  font-weight: 750;
  transition: background .17s ease, transform .17s ease;
}

.lot-tour-launch:hover {
  transform: translateY(-2px);
  background: #fff;
}

.lot-tour :is(button, a, canvas):focus-visible {
  outline: 2px solid #9ce4ff;
  outline-offset: 3px;
}

.lot-tour-viewer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  scroll-margin-top: 12px;
}

.lot-tour-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 12px;
  padding: 9px clamp(10px, 2vw, 18px);
  min-height: 55px;
}

.lot-tour-location {
  font-size: .93rem;
  font-weight: 750;
}

.lot-tour-tools,
.lot-tour-points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.lot-tour-viewer button:not(.lot-tour-arrow) {
  min-height: 42px;
  padding: 5px 11px;
  border: 1px solid #517087;
  border-radius: 5px;
  background: #153348;
  color: #f3faff;
  font-size: .82rem;
  font-weight: 650;
}

.lot-tour-viewer button:not(.lot-tour-arrow):hover { background: #28516a; }

.lot-tour-points button[aria-pressed="true"] {
  border-color: #b7e8ff;
  background: #d9effa;
  color: #092c43;
}

.lot-tour-points button[aria-pressed="true"]:hover { background: #f2faff; }

.lot-tour-stage {
  position: relative;
  isolation: isolate;
  height: clamp(320px, 55vw, 660px);
  height: clamp(320px, min(55vw, calc(100svh - 178px)), 660px);
  overflow: hidden;
  background: #091a27;
}

.lot-tour-canvas,
.lot-tour-flat,
.lot-tour-flat img {
  display: block;
  width: 100%;
  height: 100%;
}

.lot-tour-canvas {
  cursor: grab;
  touch-action: none;
}

.lot-tour-canvas:focus-visible,
.lot-tour-flat:focus-visible { outline-offset: -4px !important; }
.lot-tour-canvas:active { cursor: grabbing; }
.lot-tour-flat img { object-fit: contain; }

.lot-tour-arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lot-tour-arrow {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid #f3fbff;
  border-radius: 50%;
  background: #0b2b3ded;
  color: #f6fcff;
  box-shadow: 0 4px 14px #0007, 0 0 0 5px #e1f7ff57;
  pointer-events: auto;
  transition: background .16s ease, box-shadow .16s ease;
}

.lot-tour-arrow::before {
  content: "";
  width: 22px;
  height: 19px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 72%, 86% 91%, 50% 46%, 14% 91%, 0 72%);
}

.lot-tour-arrow:hover,
.lot-tour-arrow:focus-visible {
  background: #c6edff;
  color: #0b2b3d;
  box-shadow: 0 4px 14px #0007, 0 0 0 6px #e1f7ff77;
}

.lot-tour-arrow span {
  position: absolute;
  z-index: 1;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(150px, 28vw);
  width: max-content;
  padding: 4px 8px;
  border-radius: 4px;
  background: #0b2638f5;
  color: #f6fcff;
  font-size: .76rem;
  line-height: 1.3;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.lot-tour-arrow:hover span,
.lot-tour-arrow:focus-visible span { opacity: 1; }

.lot-tour-notice {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 6px 10px;
  border-radius: 5px;
  background: #092437ee;
  color: #fff;
  text-align: center;
  font-size: .83rem;
  pointer-events: none;
}

.lot-tour-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 5px;
}

.lot-tour-zoom button[data-zoom] {
  min-width: 42px;
  font-size: 1.1rem !important;
}

.lot-tour-navigation { padding: 12px clamp(10px, 2vw, 18px); }

.lot-tour-navigation p {
  margin-top: 8px;
  color: #c1d9e8;
  font-size: .81rem;
}

.lot-tour-viewer:fullscreen {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

.lot-tour-viewer:fullscreen .lot-tour-stage {
  height: auto;
  min-height: 0;
}

@media (max-width: 600px) {
  .lot-tour-start::after {
    background: linear-gradient(90deg, #092639f5, #102b3e88);
  }
  .lot-tour-preview { object-position: center 43%; }
  .lot-tour-stage {
    height: clamp(300px, 112vw, 470px);
    height: clamp(300px, min(112vw, calc(100svh - 200px)), 470px);
  }
  .lot-tour-toolbar { align-items: flex-start; }
  .lot-tour-arrow {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lot-tour :is(button, span) { transition: none; }
}