/* neimarker/static/neimarker/assets/css/product-carousel.css */

.tilt-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* Если товаров много, они перенесутся на новую строку */
  width: 100%;
  transform-style: preserve-3d;
  gap: 40px; /* Отступы между карточками */
  padding: 20px 0 60px 0;
}

.tilt-box {
  position: relative;
  width: 300px;
  height: 400px;
  border-radius: 20px;
  transform-style: preserve-3d;
  background: #ffffff;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); /* Легкая тень */
  cursor: pointer;
}

/* Красивая граница (Градиент) вокруг карточки */
.tilt-box::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  z-index: -1;
  border: 2px solid transparent;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

/* Фоновый текст при наведении */
.tilt-box::after {
  content: "STORE";
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 4em;
  font-weight: 900;
  font-style: italic;
  opacity: 0;
  transition: 0.5s;
  z-index: 1;
}

.tilt-box:hover::after {
  opacity: 0.05; /* Еле заметный текст на фоне */
}

/* Заголовок товара */
.tilt-box .name {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  color: #1a1a1a;
  width: 100%;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 75px);
  transition: 0.5s;
  opacity: 0;
  z-index: 10;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0 15px;
}

.tilt-box:hover .name {
  top: 30px;
  opacity: 1;
}

/* Кнопка "Подробнее" */
.tilt-box .buy {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate3d(-50%, 0, 75px);
  color: #fff;
  padding: 10px 30px;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.5s;
  opacity: 0;
  z-index: 10;
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.tilt-box:hover .buy {
  bottom: 35px;
  opacity: 1;
}

/* Центральный круг */
.tilt-box .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  transition: 0.5s;
  transform-style: preserve-3d;
  z-index: 2;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0px);
}

.tilt-box:hover .circle {
  transform: translate3d(-50%, -50%, 35px);
}

/* Изображение товара */
.tilt-box .product {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;
  height: 210px;
  object-fit: cover;
  border-radius: 12px; /* У фотографий будут скругленные края */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: 0.5s;
  z-index: 11;
  transform-style: preserve-3d;
  transform: translate3d(-50%, -50%, 0px);
}

.tilt-box:hover .product {
  /* При наведении фото "вылетает" вперед на зрителя */
  transform: translate3d(-50%, -50%, 100px); 
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* =========================================
   ЦВЕТОВЫЕ СХЕМЫ ДЛЯ ЧЕРЕДОВАНИЯ КАРТОЧEK
   ========================================= */

/* Цвет 1: Фирменный Фиолетовый */
.tilt-color-1 { background: radial-gradient(ellipse at right top, rgba(118, 81, 230, 0.1) 0%, #ffffff 47%, #ffffff 100%); }
.tilt-color-1::before { background: linear-gradient(45deg, #ffffff, #ffffff, #ffffff, #ffffff, #7651E6) border-box; }
.tilt-color-1::after { color: #7651E6; }
.tilt-color-1 .circle, .tilt-color-1 .buy { background: #7651E6; }

/* Цвет 2: Розовый (из вашей палитры) */
.tilt-color-2 { background: radial-gradient(ellipse at left bottom, rgba(242, 109, 196, 0.1) 0%, #ffffff 47%, #ffffff 100%); }
.tilt-color-2::before { background: linear-gradient(225deg, #ffffff, #ffffff, #ffffff, #ffffff, #F26DC4) border-box; }
.tilt-color-2::after { color: #F26DC4; }
.tilt-color-2 .circle, .tilt-color-2 .buy { background: #F26DC4; }

/* Цвет 3: Темно-фиолетовый / Индиго */
.tilt-color-3 { background: radial-gradient(ellipse at right bottom, rgba(90, 59, 194, 0.1) 0%, #ffffff 47%, #ffffff 100%); }
.tilt-color-3::before { background: linear-gradient(135deg, #ffffff, #ffffff, #ffffff, #ffffff, #5a3bc2) border-box; }
.tilt-color-3::after { color: #5a3bc2; }
.tilt-color-3 .circle, .tilt-color-3 .buy { background: #5a3bc2; }

/* Мобильная адаптация */
@media (max-width: 768px) {
  .tilt-container { gap: 20px; }
  .tilt-box { width: 100%; max-width: 320px; }
}