/* ===== Stack Carousel ===== */
.stack-carousel {
  position: relative;
  overflow: visible;
  touch-action: pan-y; /* чтобы вертикальный скролл страницы работал */
}

.stack-carousel .stack-card {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: center center;
  will-change: transform, opacity;
  transition: transform 420ms ease, opacity 420ms ease;
  cursor: pointer;
}

/* Позиции стопки (JS назначает классы pos0..pos4) */
.stack-carousel .pos0 { transform: translate(0px, 0px) scale(1);    opacity: 1;    z-index: 50; }
.stack-carousel .pos1 { transform: translate(14px, 12px) scale(0.94); opacity: 0.88; z-index: 40; }
.stack-carousel .pos2 { transform: translate(28px, 24px) scale(0.88); opacity: 0.72; z-index: 30; }
.stack-carousel .pos3 { transform: translate(42px, 36px) scale(0.82); opacity: 0.56; z-index: 20; }
.stack-carousel .pos4 { transform: translate(56px, 48px) scale(0.78); opacity: 0.40; z-index: 10; }

/* Всё что дальше хвоста — прячем (но держим в DOM для цикла) */
.stack-carousel .is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(56px, 48px) scale(0.78);
  z-index: 1;
}

/* Стрелки поверх */
.stack-carousel .stack-prev,
.stack-carousel .stack-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  cursor: pointer;
  user-select: none;
}

.stack-carousel .stack-prev { left: -56px; }
.stack-carousel .stack-next { right: -56px; }

/* Мобилка: меньше смещения, чтобы не вылезало */
@media (max-width: 640px) {
  .stack-carousel .pos1 { transform: translate(10px, 10px) scale(0.95); }
  .stack-carousel .pos2 { transform: translate(20px, 20px) scale(0.90); }
  .stack-carousel .pos3 { transform: translate(30px, 30px) scale(0.85); }
  .stack-carousel .pos4,
  .stack-carousel .is-hidden { transform: translate(40px, 40px) scale(0.82); }
  .stack-carousel .stack-prev { left: -40px; }
  .stack-carousel .stack-next { right: -40px; }
}