/* Улучшенная анимация для категорий - быстрее, плавнее и заметнее */

.collection-preview {
  position: relative;
  z-index: 1;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), z-index 0.01s, box-shadow 0.2s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.collection-preview:hover {
  transform: scale(1.18);
  z-index: 10;
  box-shadow: 0 10px 20px rgba(255, 9, 182, 0.3);
}

/* Если предыдущий вариант не работает, попробуйте этот */
.collection-preview-elem {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.collection-preview-elem:hover {
  transform: scale(1.18);
}

/* Анимация для изображения */
.img-ratio__inner {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.collection-preview:hover .img-ratio__inner {
  transform: scale(1.22);
}

/* Дополнительно для заголовка */
.collection-preview__title {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
}

.collection-preview:hover .collection-preview__title {
  transform: scale(1.18);
  color: #FF09B6 !important; /* Розовый цвет для заголовка */
}

/* Дополнительные стили для решения проблемы обрезки */
.js-collections .splide__slide {
  overflow: visible !important;
}

.js-collections .splide__list {
  overflow: visible !important;
  padding: 18px 0 !important;
}

.js-collections .splide__track {
  overflow: visible !important;
  margin: 0 18px !important;
}

.js-collections.collections {
  overflow: visible !important;
  padding: 18px !important;
}

.js-collections .js-collections-slider {
  overflow: visible !important;
}