/* Standard Carousel — classic single-slide track, dot pagination, swipe/drag. */

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

.std-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;
}
.std-viewport:active { cursor: grabbing; }

.std-track {
  display: flex; width: 100%; height: 100%;
  transition: transform .45s cubic-bezier(.22,.9,.35,1);
}
.std-slide { flex: 0 0 100%; height: 100%; }

.std-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; }

.std-dots { display: flex; gap: 8px; }
.std-dot {
  position: relative;
  width: 9px; height: 9px; border-radius: 50%; padding: 0; border: none;
  background: rgba(255,255,255,.25); cursor: pointer; transition: .18s;
}
/* Enlarge the tap hit-area without changing the visible dot size.
   Inset kept to -4px horizontally so adjacent hit-boxes meet at the
   midpoint of the 8px gap instead of overlapping/misfiring. */
.std-dot::before {
  content: ''; position: absolute; inset: -12px -4px;
}
.std-dot.active {
  width: 22px; border-radius: 5px;
  background: var(--shell-accent); box-shadow: 0 0 10px rgba(0,207,255,.6);
}