/* CarouselKit v4: transform (без scroll-container) — тени не клипаются */
.carousel { position: relative; }

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

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

  border-radius: var(--car-radius);
  touch-action: pan-y;       /* ✅ вертикальный скролл страницы ок */

  /* ✅ клипаем по 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));
}

/* track двигаем transform-ом */
.carousel-track{
  display: flex;
  gap: 0;                    /* ✅ так проще математика 1слайд = 100% */
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* один слайд = 100% ширины viewport */
.carousel-item{
  flex: 0 0 100%;
  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); }

/* стрелки — круглые */
.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

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

  display: grid;
  place-items: center;

  border: 1px solid rgba(148,163,184,.55);
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);

  cursor: pointer;
  user-select: none;

  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
}
.carousel-btn:hover{
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
.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: 4px; }
.carousel-btn.next{ right: 4px; }
.carousel-btn.is-hidden{ opacity: 0; pointer-events: none; }

/* 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);
}
.dark .carousel-dots-wrap{
  background: rgba(255,255,255,.06);
  border-color: rgba(148,163,184,.22);
}
.carousel-dot{
  width: 7px;
  height: 7px;
  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; }