/* CarouselKit v5: transform (без scroll-container) — тени не клипаются */
.carousel{
  position: relative;
  --car-pad-x: 4px;        /* боковые отступы у слайда */
}

/* ───────────────────────── viewport ───────────────────────── */

.carousel-viewport{
  position: relative;
  overflow: visible;         /* ✅ тени живут */

  --car-radius: 16px;
  --car-safe-y: 22px;        /* запас под тень (НЕ padding, не меняет layout) */

  border-radius: var(--car-radius);

  /* Разрешаем вертикальный скролл страницы, а горизонталь берём под контроль JS */
  touch-action: pan-y;
  overscroll-behavior-x: contain;

  /* ✅ клипаем по X, но расширяем по Y под тени */
  -webkit-clip-path: inset(
    calc(-1 * var(--car-safe-y)) 0
    calc(-1 * var(--car-safe-y)) 0
    round var(--car-radius)
  );
  clip-path: inset(
    calc(-1 * var(--car-safe-y)) 0
    calc(-1 * var(--car-safe-y)) 0
    round var(--car-radius)
  );

  -webkit-tap-highlight-color: transparent;
}

/* ───────────────────────── track/items ───────────────────────── */

.carousel-track{
  display: flex;
  gap: 0;                    /* ✅ 1 слайд = 100% */
  will-change: transform;
  transform: translate3d(0,0,0);
}

.carousel-item{
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;              /* ✅ ключ: даём айтему реально ужиматься */
  padding: 0 var(--car-pad-x);
  box-sizing: border-box;
  scroll-snap-align: center;
  will-change: transform;
  transition: transform 220ms ease;
}

.carousel-item[data-active="1"]{ transform: scale(1); }
.carousel-item[data-active="0"]{ transform: scale(0.985); }

/* ───────────────────────── dragging states ───────────────────────── */

.carousel.is-dragging .carousel-track{
  transition: none !important;
}

.carousel.is-dragging,
.carousel.is-dragging *{
  user-select: none;
  -webkit-user-select: none;
}

/* ───────────────────────── arrows/buttons ───────────────────────── */

.carousel-btn{
  position: absolute;
  top: var(--car-btn-top, 50%);
  transform: translateY(-50%);
  z-index: 10;

  width: 32px;
  height: 32px;
  border-radius: 9999px;     /* ✅ круг */
  flex-shrink: 0;

  display: grid;
  place-items: center;

  /* reset */
  padding: 0;
  margin: 0;
  line-height: 0;
  font-size: 0;
  border: 1px solid rgba(148,163,184,.55);
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;

  cursor: pointer;
  user-select: none;

  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
}

.carousel-btn:hover{
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}

.carousel-btn:active{
  transform: translateY(-50%) scale(0.98);
}

.carousel-btn:focus-visible{
  outline: none;
  box-shadow:
    0 10px 26px rgba(0,0,0,.16),
    0 0 0 3px rgba(59,130,246,.35);
}

.dark .carousel-btn{
  background: rgba(31,41,55,.55);
  border-color: rgba(148,163,184,.30);
  color: rgba(255,255,255,.92);
}

/* чуть выносим за край */
.carousel-btn.prev{ left: calc(var(--car-vp-left, 0px) - 4px); }
.carousel-btn.next{ right: calc(var(--car-vp-right, 0px) - 4px); }

.carousel-btn.is-hidden{
  opacity: 0;
  pointer-events: none;
}

/* ───────────────────────── svg icons inside arrows ───────────────────────── */

.carousel-btn--icon svg{
  display: block;
  pointer-events: none;
}

/* правая */
.carousel-btn.next svg{
  transform: translateX(1px);
  transform-origin: 50% 50%;
}

/* левая — поворот + сдвиг */
.carousel-btn.prev svg{
  transform: rotate(180deg);
  transform-origin: 50% 50%;
  position: relative;
  left: 1px;
}

/* ───────────────────────── dots ───────────────────────── */

.carousel-dots{
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}

.carousel-dots-wrap{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 9999px;
  background: rgba(0,0,0,.08);
  border: 1px solid rgba(148,163,184,.35);
  backdrop-filter: blur(8px);

  /* NEW: ограничиваем видимую “ширину на N точек”, остальное — свайпом */
  max-width: var(--car-dots-maxw, 100%);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  /* чтобы не прыгало при инерции */
  overscroll-behavior-x: contain;

  /* скрыть скроллбар */
  scrollbar-width: none;
}
.carousel-dots-wrap::-webkit-scrollbar{
  display: none;
}

.dark .carousel-dots-wrap{
  background: rgba(255,255,255,.06);
  border-color: rgba(148,163,184,.22);
}

.carousel-dot{
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  border: 0;
  padding: 0;
  background: rgba(148,163,184,.65);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.carousel-dot:hover{ transform: scale(1.15); }
.carousel-dot.is-active{ background: #fff; }

/* ───────────────────────── mobile swipe fix ───────────────────────── */
/* touch-action НЕ наследуется. На мобиле палец часто стартует на вложенном узле.
   Держим одинаковое поведение везде внутри viewport. */

.carousel-viewport,
.carousel-viewport .carousel-track,
.carousel-viewport .carousel-item,
.carousel-viewport *{
  touch-action: pan-y pinch-zoom;
}