/*!
 * Novedades Section CSS - Limpio y Funcional
 * Estilos específicos para la sección de productos novedades
 */

/* Sección principal */
#novedades-productos {
  position: relative;
  overflow: hidden;
}

/* Swiper Container - FORZAR HORIZONTAL */
.novedades-swiper {
  width: 100% !important;
  padding: 20px 60px !important; /* Espacio para las flechas */
  overflow: visible !important;
  display: block !important;
}

/* Swiper Wrapper - FORZAR FLEX HORIZONTAL */
.novedades-swiper .swiper-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: auto !important;
  height: auto !important;
  transform-style: preserve-3d !important;
}

/* Slides del swiper - FORZAR TAMAÑO Y POSICIÓN */
.novedades-swiper .swiper-slide {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  height: auto !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

/* Product Cards */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #e9ecef;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.product-image {
  overflow: hidden;
}

.product-image img {
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

/* Flechas de navegación personalizadas */
.novedades-next,
.novedades-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  background: #ffffff;
  border: 2px solid var(--bs-primary);
  border-radius: 50%;
  color: var(--bs-primary);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.novedades-next::after,
.novedades-prev::after {
  font-size: 16px;
  font-weight: bold;
}

.novedades-next {
  right: 10px;
}

.novedades-prev {
  left: 10px;
}

.novedades-next:hover,
.novedades-prev:hover {
  background: var(--bs-primary);
  color: white;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.4);
}

.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .novedades-swiper {
    padding: 20px 55px;
  }
  
  .novedades-swiper .swiper-slide {
    width: 250px;
  }
  
  .novedades-next,
  .novedades-prev {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  
  .novedades-next::after,
  .novedades-prev::after {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .novedades-swiper {
    padding: 20px 50px;
  }
  
  .novedades-swiper .swiper-slide {
    width: 220px;
  }
  
  .novedades-next {
    right: 5px;
  }
  
  .novedades-prev {
    left: 5px;
  }
}

/* FORZAR LAYOUT HORIZONTAL - SOBRESCRIBIR TODO */
body .novedades-swiper,
html .novedades-swiper,
.container .novedades-swiper,
.row .novedades-swiper {
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
}

body .novedades-swiper .swiper-wrapper,
html .novedades-swiper .swiper-wrapper,
.container .novedades-swiper .swiper-wrapper,
.row .novedades-swiper .swiper-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: auto !important;
  height: auto !important;
  flex-wrap: nowrap !important;
}

body .novedades-swiper .swiper-slide,
html .novedades-swiper .swiper-slide,
.container .novedades-swiper .swiper-slide,
.row .novedades-swiper .swiper-slide {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  height: auto !important;
  float: none !important;
  position: relative !important;
}

/* RESETEAR CUALQUIER ESTILO DE BOOTSTRAP QUE PUEDA INTERFERIR */
.novedades-swiper .swiper-slide.col,
.novedades-swiper .swiper-slide.col-*,
.novedades-swiper .swiper-slide[class*="col-"] {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  flex: none !important;
}

/* EVITAR QUE BOOTSTRAP GRID INTERFIERA */
.novedades-swiper .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.novedades-swiper .row > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
}