/* Swipe strip that replaces the single large photo; sits in the original 525x408 frame. */
.nds { position: relative; width: 525px; height: 408px; }
.nds-track { display: flex; width: 525px; height: 408px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.nds-track::-webkit-scrollbar { display: none; }
.nds-track img { flex: 0 0 525px; width: 525px; height: 408px; scroll-snap-align: start; scroll-snap-stop: always; display: block; }
.nds-dots { position: absolute; left: 0; right: 0; bottom: 8px; height: 9px; pointer-events: none; display: flex; justify-content: center; gap: 5px; }
.nds-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.4); box-shadow: 0 0 2px rgba(0,0,0,.6); cursor: pointer; pointer-events: auto; }
.nds-dots button[aria-current="true"] { background: #fff; }
.nds-arrow { position: absolute; top: 50%; margin-top: -18px; width: 28px; height: 36px; border: 0; padding: 0;
  background: rgba(0,0,0,.35); color: #fff; font: 22px/36px Arial, sans-serif; cursor: pointer; opacity: 0; transition: opacity .2s; }
.nds:hover .nds-arrow, .nds-arrow:focus-visible { opacity: 1; }
.nds-prev { left: 0; } .nds-next { right: 0; }
@media (hover: none) { .nds-arrow { display: none; } }