.photo-viewer-trigger,
.photo-preview-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
  font: inherit;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.photo-viewer-trigger:focus-visible { outline: 3px solid var(--brand, #bf2025); outline-offset: -4px; }
.photo-viewer-trigger:active { transform: none; }
.photo-viewer-trigger ~ .photo-count,
.photo-viewer-trigger ~ .property-badge-stack { pointer-events: none; }

.photo-viewer {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border: 0;
  color: #fff;
  background: rgba(15, 16, 18, 0.96);
  font: inherit;
  overflow: hidden;
}

.photo-viewer[open] {
  display: flex;
  flex-direction: column;
}

.photo-viewer::backdrop { background: rgba(0, 0, 0, 0.75); }
.photo-viewer *, .photo-viewer *::before, .photo-viewer *::after { box-sizing: border-box; }
.photo-viewer [hidden] { display: none !important; }

.photo-viewer__header {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 18px;
  min-height: 48px;
  padding-bottom: 12px;
}

.photo-viewer__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-viewer__counter {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.photo-viewer__close,
.photo-viewer__previous,
.photo-viewer__next,
.photo-viewer__retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(20, 21, 23, 0.76);
  color: #fff;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.photo-viewer__close:hover,
.photo-viewer__previous:hover,
.photo-viewer__next:hover,
.photo-viewer__retry:hover {
  border-color: rgba(255, 255, 255, 0.65);
  background: #363739;
}

.photo-viewer button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.photo-viewer__icon {
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.photo-viewer__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0 64px;
  touch-action: pan-y pinch-zoom;
}
.photo-viewer__viewport {
  position: absolute;
  inset: 0 64px;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
.photo-viewer__track { display: flex; width: 100%; height: 100%; }
.photo-viewer__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 100%;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.photo-viewer [hidden] { display: none !important; }

.photo-viewer__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
  user-select: none;
  -webkit-user-drag: none;
}

.photo-viewer__previous,
.photo-viewer__next {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
}

.photo-viewer__previous { left: 0; }
.photo-viewer__next { right: 0; }
.photo-viewer__previous:active, .photo-viewer__next:active { transform: translateY(-50%) scale(0.97); }

.photo-viewer__message {
  position: absolute;
  inset: 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  pointer-events: none;
  text-align: center;
}

.photo-viewer__status { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 15px; }
.photo-viewer__retry { width: auto; padding: 0 20px; border-radius: 24px; pointer-events: auto; }

@media (max-width: 640px) {
  .photo-viewer__viewport { inset: 0 8px; }
  .photo-viewer { padding-right: max(10px, env(safe-area-inset-right)); padding-left: max(10px, env(safe-area-inset-left)); }
  .photo-viewer__header { gap: 10px; }
  .photo-viewer__title { font-size: 14px; }
  .photo-viewer__stage { padding: 0; }
  .photo-viewer__message { inset-inline: 8px; }
}

/* Swipe is the visible phone control, including landscape. Keep navigation
   available to screen readers and reveal it only for keyboard focus. */
@media (max-width: 640px), (max-width: 960px) and (max-height: 640px) and (pointer: coarse) {
  .photo-viewer__viewport { inset: 0 8px; }
  .photo-viewer__previous, .photo-viewer__next {
    top: 0;
    left: 0;
    right: auto;
    width: 1px;
    height: 1px;
    min-width: 1px;
    min-height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    transform: none;
  }
  .photo-viewer__previous:focus-visible, .photo-viewer__next:focus-visible {
    top: auto;
    bottom: 8px;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, .22);
    overflow: visible;
    clip-path: none;
  }
  .photo-viewer__next:focus-visible { left: auto; right: 0; }
  .photo-viewer__previous:active, .photo-viewer__next:active { transform: none; }
  .photo-viewer__stage { padding: 0; }
  .photo-viewer__message { inset-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-viewer button { transition: none; }
}

/* Preview photos keep the same frame while the cursor moves across five zones. */
.photo-preview { touch-action: pan-y pinch-zoom; }
.photo-preview .property-photo { object-fit: cover; object-position: center; }
.photo-preview__track {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  width: 300%;
  height: 100%;
  transform: translate3d(-33.333333%, 0, 0);
  pointer-events: none;
}
.photo-preview__slide {
  position: relative;
  flex: 0 0 33.333333%;
  width: 33.333333%;
  height: 100%;
  overflow: hidden;
}
.photo-preview__slide .property-photo { width: 100%; height: 100%; }
.photo-preview--embla .photo-preview__track {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  transform: none;
  will-change: transform;
}
.photo-preview--embla .photo-preview__slide {
  flex: 0 0 100%;
  width: 100%;
  background: #f1f1ef;
}
.photo-preview--embla .photo-preview__slide .property-photo {
  position: absolute;
  inset: 0;
}
.photo-preview [hidden] { display: none !important; }
.photo-preview__loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: #f1f1ef;
  pointer-events: none;
}
.photo-preview__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #c9c9c5;
  border-top-color: #151515;
  border-radius: 50%;
  animation: photo-preview-spin .8s linear infinite;
}
@keyframes photo-preview-spin { to { transform: rotate(360deg); } }
.photo-preview__status.is-loading {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .photo-preview__spinner { animation: none; border-color: #151515; }
}
.photo-preview__status {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  max-width: calc(100% - 24px);
  padding: 6px 9px;
  border-radius: 8px;
  color: #fff;
  background: rgba(20, 21, 23, .76);
  font-size: 12px;
  line-height: 1.3;
  pointer-events: none;
}
.photo-preview__dots {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transform: translateX(-50%);
  pointer-events: none;
}
.photo-preview__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.photo-preview__dot.is-active { width: 16px; background: #fff; }
.photo-preview__more {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 32px;
  color: #fff;
  background: rgba(0, 0, 0, .48);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 650;
  line-height: 1.25;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  pointer-events: none;
}
/* Native catalog navigation covers the photo too; previews listen on the card. */
.catalog-card--linked { touch-action: pan-y pinch-zoom; }
.catalog-card--linked .photo-preview-media { cursor: pointer; }
.catalog-card--linked .photo-count,
.catalog-card--linked .property-badge-stack { z-index: 3; }
.object-detail-main-image { object-fit: cover; object-position: center; }
.object-detail-carousel { touch-action: pan-y pinch-zoom; }
.object-detail-carousel__track { display: flex; width: 100%; height: 100%; }
.object-detail-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f1f1ef;
}
.object-detail-carousel__slide .object-detail-main-image { width: 100%; height: 100%; }
.object-detail-carousel__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #f1f1ef;
  pointer-events: none;
}
.object-detail-carousel__status {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 9px;
  border-radius: 8px;
  color: #fff;
  background: rgba(20, 21, 23, .76);
  font-size: 12px;
  pointer-events: none;
}
.object-detail-carousel [hidden] { display: none !important; }
.object-thumb img { object-fit: cover; object-position: center; background: #f3f3f1; }
.object-detail-media { isolation: isolate; }