/* Thumbnail Slider — dots swapped for a horizontal strip of preview thumbnails. */

.thumb-carousel { max-width: 720px; margin: 0 auto; }

.thumb-viewport {
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  touch-action: pan-y;
  cursor: grab;
}
.thumb-viewport:active { cursor: grabbing; }
.thumb-track {
  display: flex; width: 100%; height: 100%;
  transition: transform .45s cubic-bezier(.22,.9,.35,1);
}
.thumb-slide { flex: 0 0 100%; height: 100%; }

.thumb-strip {
  display: flex; gap: 10px; margin-top: 14px;
  overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.thumb-strip::-webkit-scrollbar { height: 5px; }
.thumb-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }

.thumb-item {
  flex: 0 0 78px; height: 52px; border-radius: 8px; overflow: hidden;
  cursor: pointer; opacity: .45; border: 2px solid transparent;
  transition: .18s; padding: 0;
}
.thumb-item:hover { opacity: .75; }
.thumb-item.active {
  opacity: 1; border-color: var(--shell-accent);
  box-shadow: 0 0 12px rgba(0,207,255,.45);
}