/* Kontener całego slidera */
.my-product-slider {
  width: 100%;
  padding: 5px 0 20px; /* Zmniejszony padding z 10px 0 40px */
  position: relative;
  overflow: visible; /* Kluczowe - pozwala na widoczność nawigacji poza kontenerem */
  margin: 15px 0; /* Zmniejszony margin z 30px 0 */
}

/* Wrapper slidera */
.swiper-wrapper {
  display: flex;
  transition-property: transform;
}

/* SLIDE – każdy pojedynczy produkt */
.swiper-slide {
  height: auto;
  text-align: left; 
  background: transparent; 
  border: none;
  padding: 0;
  box-shadow: none;
  transition: none;
  position: relative;
  flex-shrink: 0;
  width: 225px; /* Stała szerokość produktu */
  margin-right: 20px;
}

/* Container dla zdjęcia produktu z proporcją 4:5 */
.product-image-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5; /* Proporcja 4:5 */
  background-color: transparent;
  margin-bottom: 5px; /* Zmniejszony margin z 10px */
  width: 100%;
}

/* Zdjęcie produktu */
.product-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Zapewnia właściwe wypełnienie kontenera */
  display: block;
  transition: transform 0.3s ease;
}

/* Efekt hover na zdjęciu */
.product-image-container:hover img {
  transform: scale(1.05);
}

/* Nazwa produktu */
.product-title,
.swiper-slide h3 {
  font-size: 14px;
  font-weight: 400;
  color: #000; 
  margin: 0 0 3px; /* Zmniejszony bottom margin z 6px na 3px */
  line-height: 1.3;
  min-height: 28px; /* Zmniejszona minimalna wysokość z 36px na 28px */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit do 2 linii */
  -webkit-box-orient: vertical;
}

/* Cena produktu */
.product-price,
.swiper-slide p {
  font-size: 14px;
  color: #000;
  font-weight: 700; 
  margin: 0;
}

/* Strzałki nawigacyjne Swipera */
.swiper-button-next,
.swiper-button-prev {
  color: #000;
  background: white;
  width: 35px; /* Zmniejszona szerokość z 40px */
  height: 35px; /* Zmniejszona wysokość z 40px */
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  top: 35%; /* Zmienione z 40% dla lepszego pozycjonowania */
  z-index: 10;
}

/* Dostosowanie wielkości ikony wewnątrz przycisków */
.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 18px;
  font-weight: bold;
}

/* Strzałka "następny slajd" */
.swiper-button-next {
  right: 0;
}

/* Strzałka "poprzedni slajd" */
.swiper-button-prev {
  left: 0;
}

/* Podstawowe style dla obu przycisków (ulubione i koszyk) */
.add-to-favorites,
.add-to-cart-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  padding: 0;
}

/* Przycisk "Dodaj do ulubionych" - prawy górny róg */
.add-to-favorites {
  top: 10px;
  right: 10px;
  background-color: #759ecb; /* Główny kolor dla przycisku ulubione */
  border-color: #759ecb;
}

.add-to-favorites .favorite-icon {
  color: white; /* Biała ikona dla lepszego kontrastu */
}

/* Przycisk koszyka - lewy dolny róg */
.add-to-cart-button {
  bottom: 10px;
  left: 10px;
}

/* Efekty hover dla przycisków */
.add-to-favorites:hover,
.add-to-cart-button:hover {
  transform: scale(1.1);
}

.add-to-favorites:hover {
  background-color: #6389b6; /* Ciemniejszy odcień przy najechaniu */
}

.add-to-cart-button:hover {
  background: white;
}

/* Style dla ikon FontAwesome */
.favorite-icon,
.cart-icon {
  color: #444;
  transition: all 0.2s ease;
  font-size: 16px;
}

/* Kiedy ulubione są aktywne */
.add-to-favorites.active {
  background-color: #8a5ba4; /* Kolor fioletowy dla aktywnych ulubionych */
  border-color: #8a5ba4;
}

.add-to-favorites.active .favorite-icon {
  color: #fff;
}

/* Kiedy przycisk koszyka jest aktywny (produkt dodany) */
.add-to-cart-button.added {
  background-color: #8a5ba4 !important;
  border-color: #8a5ba4 !important;
}

.add-to-cart-button.added .cart-icon {
  color: #fff;
}

/* Animacja dla przycisku */
@keyframes buttonPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.button-animate {
  animation: buttonPulse 0.3s ease;
}

/* Responsywne style dla różnych urządzeń */
@media (max-width: 1366px) {
  .swiper-slide {
    width: 210px;
    margin-right: 20px;
  }
}

@media (max-width: 1024px) {
  .swiper-slide {
    width: 200px;
    margin-right: 15px;
  }
}

@media (max-width: 768px) {
  .swiper-slide {
    width: 180px;
    margin-right: 15px;
  }
  
  .swiper-button-next,
  .swiper-button-prev {
    width: 35px;
    height: 35px;
  }
  
  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 16px;
  }
}

/* Tablets (landscape phones and smaller tablets) */
@media (max-width: 580px) {
  .swiper-slide {
    width: 47%; /* Show exactly 2 products side by side */
    margin-right: 10px;
  }
  
  .my-product-slider {
    padding: 0 10px 15px; /* Zmniejszony padding dla urządzeń mobilnych */
    margin: 10px 0; /* Mniejszy margines dla urządzeń mobilnych */
  }
  
  .product-title,
  .swiper-slide h3 {
    font-size: 13px;
    min-height: 26px; /* Zmniejszona wysokość tytułu */
  }
}

/* Mobile phones */
@media (max-width: 480px) {
  .swiper-slide {
    width: 47%; /* Still 2 products but slightly wider */
    margin-right: 8px;
  }
  
  .add-to-favorites,
  .add-to-cart-button {
    width: 30px; /* Zmniejszone z 32px */
    height: 30px; /* Zmniejszone z 32px */
  }
  
  .favorite-icon,
  .cart-icon {
    font-size: 14px;
  }
  
  .swiper-button-next,
  .swiper-button-prev {
    width: 30px;
    height: 30px;
    top: 30%; /* Niżej pozycjonowane strzałki */
  }
}

/* Small mobile phones */
@media (max-width: 360px) {
  .swiper-slide {
    width: 85%; /* Only 1 product visible at a time */
    margin-right: 8px;
  }
  
  .swiper-button-next,
  .swiper-button-prev {
    width: 28px; /* Jeszcze mniejsze strzałki */
    height: 28px;
    top: 25%; /* Jeszcze niżej */
  }
  
  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 12px; /* Mniejsze ikony strzałek */
  }
  
  .product-title,
  .swiper-slide h3 {
    min-height: 24px; /* Jeszcze mniejsza wysokość tytułu */
  }
}