#vehicle-photo-dialog { padding:20px; border:1px solid #cbd7d1; border-radius:14px; background:#f5f3ec; color:#173e42; box-shadow:0 20px 80px #173e4260; }
#vehicle-photo-dialog::backdrop { background:#122f3dcc; }
#vehicle-photo-dialog .photo-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#vehicle-photo-dialog .photo-dialog-head h2 { margin:0; font-size:22px; }
#vehicle-photo-dialog .photo-close { min-height:44px; padding:8px 14px; font:600 14px/1.4 system-ui,sans-serif; background:#fff; color:#173e42; border:1px solid #70877b; border-radius:8px; }
#vehicle-photo-dialog .photo-dialog-image { display:grid; background:#e8ece6; border-radius:8px; }
/* Approved gallery presentation, scoped to the vehicle dialog. */
.vehicle-gallery { width: min(100% - 32px, 1000px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.vehicle-gallery .photo-dialog-head { margin-bottom: 12px; }
.vehicle-gallery .gallery-stage { min-height: 160px; height: min(52dvh, 540px); padding: 6px; touch-action: pan-y pinch-zoom; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
.vehicle-gallery .gallery-stage img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.vehicle-gallery .gallery-controls { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 12px; }
.vehicle-gallery .gallery-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 8px 12px; color: var(--ink, #173e42); background: #f7f8f3; border: 1px solid #70877b; border-radius: 6px; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.vehicle-gallery .gallery-controls button:hover { background: #edf2e8; }
.vehicle-gallery .gallery-controls button:disabled { cursor: default; opacity: .5; }
.vehicle-gallery button:focus-visible { outline: 2px solid #337d78; outline-offset: 3px; }
.vehicle-gallery .gallery-counter { color: var(--muted, #5e6e67); font-size: .8125rem; text-align: center; font-variant-numeric: tabular-nums; }
.vehicle-gallery .gallery-thumbnails { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 13px; padding: 3px; }
.vehicle-gallery .gallery-thumbnail { display: grid; place-items: center; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); width: 80px; height: 58px; padding: 3px; overflow: hidden; background: #eef1eb; border: 2px solid transparent; border-radius: 5px; cursor: pointer; touch-action: manipulation; }
.vehicle-gallery .gallery-thumbnail[aria-current="true"] { border-color: #226763; background: #e7eee1; }
.vehicle-gallery .gallery-thumbnail:hover { border-color: #8ba898; }
.vehicle-gallery .gallery-thumbnail img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
.vehicle-gallery > #vehicle-photo-description { margin-top: 11px; font-size: .8125rem; line-height: 1.5; }
.vehicle-gallery .gallery-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 640px) {
  .vehicle-gallery { width: calc(100% - 20px); padding: 12px; }
  .vehicle-gallery .gallery-stage { height: 43dvh; min-height: 130px; padding: 3px; }
  .vehicle-gallery .gallery-controls { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .vehicle-gallery #gallery-counter { grid-column: 1 / -1; grid-row: 1; }
  .vehicle-gallery #gallery-previous { grid-column: 1; grid-row: 2; }
  .vehicle-gallery #gallery-next { grid-column: 2; grid-row: 2; }
  .vehicle-gallery .gallery-controls button { gap: 5px; padding: 8px 7px; font-size: .8125rem; }
  .vehicle-gallery .gallery-thumbnails { gap: 6px; margin-top: 10px; }
  .vehicle-gallery .gallery-thumbnail { width: 64px; height: 48px; }
}

@media (max-height: 560px) and (min-width: 641px) {
  .vehicle-gallery .gallery-stage { height: 40dvh; min-height: 120px; }
  .vehicle-gallery .gallery-thumbnail { width: 64px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .vehicle-gallery, .vehicle-gallery * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}