/* ===== TARJETAS DE PRODUCTO UNIFICADAS ===== */
/* Variables de color están definidas en variables.css */

/* Asegurar que el contenido principal no quede oculto */
.container {
    margin-top: 0 !important;
    padding-top: 20px !important;
}

#content {
    margin-top: 0 !important;
    padding-top: 20px !important;
}

/* ----- Tarjeta ----- */
.product-card {
  position: relative; 
  background: var(--color-white);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 20px 20px 16px;
  display: flex; 
  flex-direction: column; 
  gap: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

/* Badges */
.pc-badges { 
  position: absolute; 
  left: 16px; 
  top: 16px; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
  z-index: 2;
}

.pc-pill {
  background: var(--color-badge-pill); 
  color: var(--color-white); 
  font-weight: 800; 
  letter-spacing: .3px;
  padding: 10px 14px; 
  border-radius: 12px; 
  font-size: 14px; 
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  text-transform: uppercase;
}

.pc-badge {
  /* Solo propiedades básicas de layout, sin estilos visuales */
  display: flex; 
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  text-align: center;
  /* Los estilos visuales (background, width, height, position) 
     se definen solo en las clases específicas (.pc-badge-descuento, etc.) */
}

/* Imagen */
.pc-media { 
  display: block; 
  width: 100%; 
  text-decoration: none;
}

.pc-media img {
  display: block; 
  width: 100%; 
  height: 260px; 
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.18));
  transition: transform 0.2s ease;
}

.pc-media:hover img {
  transform: scale(1.02);
}

/* Marca */
.pc-brand {
  text-align: center; 
  color: var(--color-text-muted); 
  font-weight: 700; 
  letter-spacing: .04em; 
  opacity: .8;
  font-size: 14px;
  text-transform: uppercase;
}

/* Título */
.pc-title {
  margin: 0; 
  color: var(--color-text-primary); 
  font-size: 18px; 
  font-weight: 600; 
  line-height: 1.25; 
  text-align: center;
  text-decoration: none;
  /* Forzar siempre 3 líneas de altura */
  min-height: calc(1.25em * 3); /* 3 líneas basadas en line-height */
  height: calc(1.25em * 3); /* Altura fija de 3 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-title a {
  display: block;
  /* Asegurar que el enlace ocupe todo el espacio disponible */
  min-height: inherit;
  height: inherit;
}

.pc-title:hover {
  color: var(--color-secondary);
}

/* Precios */
.pc-prices { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12px; 
}

.pc-old {
  color: var(--color-text-muted); 
  text-decoration: line-through; 
  font-weight: 600; 
  opacity: .8;
  font-size: 16px;
}

.pc-price {
  color: var(--color-dark); 
  font-weight: 900; 
  font-size: 26px; 
  letter-spacing: .3px;
}

/* Botones */
.pc-actions { 
  display: flex; 
  gap: 16px; 
  margin-top: 4px; 
}

.pc-btn {
  flex: 1; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  min-height: 48px; 
  border-radius: 999px; 
  font-weight: 800; 
  text-decoration: none;
  border: 2px solid var(--color-dark);
  transition: all 0.2s ease;
  font-size: 14px;
  text-transform: uppercase;
}

.pc-buy { 
  background: var(--color-dark); 
  color: var(--color-white); 
}

.pc-buy:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  filter: brightness(1.05);
}

.pc-view { 
  background: var(--color-white); 
  color: var(--color-dark); 
}

.pc-view:hover { 
  background: #f6f6f6; 
}

.pc-eye {
  inline-size: 18px; 
  block-size: 18px; 
  margin-right: 8px;
  border: 2px solid currentColor; 
  border-radius: 50%;
  position: relative;
}

.pc-eye::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 50%;
}

/* Hover/Focus */
.pc-btn:focus { 
  outline: 3px solid var(--color-primary); 
  outline-offset: 2px; 
}

/* ===== CATÁLOGO - GRILLA 4 COLUMNAS ===== */

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

/* Responsive */
@media (max-width: 1280px) { 
  .catalog-grid { 
    grid-template-columns: repeat(3, 1fr);
  } 
}

@media (max-width: 960px) { 
  .catalog-grid { 
    grid-template-columns: repeat(2, 1fr);
  } 
}

/* En mobile mostrar 1 columna */
@media (max-width: 767px) { 
  .catalog-grid { 
    grid-template-columns: 1fr;
    gap: 12px;
  } 
  
  /* Reducir tamaño de tarjetas en mobile */
  .product-card {
    padding: 12px 12px 10px;
    gap: 10px;
  }
  
  .pc-media img {
    height: 180px;
  }
  
  .pc-title {
    font-size: 14px;
    /* Ajustar altura para 3 líneas en mobile (14px * 1.25 * 3 = 52.5px) */
    min-height: calc(1.25em * 3);
    height: calc(1.25em * 3);
  }
  
  .pc-price {
    font-size: 20px;
  }
  
  .pc-old {
    font-size: 14px;
  }
  
  .pc-btn {
    min-height: 40px;
    font-size: 12px;
  }
}

/* ===== OFERTAS - CARRUSEL INFINITO ===== */

.offers { 
  position: relative; 
  margin: 0;
}

/* Reducir espacio en contenedores de carruseles */
#oferts .offers,
#destacados .offers {
  margin: 0 !important;
}

.box .offers {
  margin: 0 !important;
}

.customtab .offers {
  margin: 0 !important;
}

/* Reducir márgenes de contenedores cuando contienen carruseles */
#oferts,
#destacados {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.tab-content .box {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.customtab {
  margin-bottom: 0 !important;
}

/* Reducir margen del hr antes de los carruseles */
.customtab hr {
  margin-bottom: 10px !important;
  margin-top: 10px !important;
}

/* Eliminar espacios entre filas que contienen carruseles */
.homepage-content .row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.homepage-content .row + .row {
  margin-top: 0 !important;
}

/* Eliminar márgenes de #content cuando contiene carruseles */
.homepage-content #content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Eliminar márgenes de .customtab-wrapper si existe */
.customtab-wrapper {
  margin-bottom: 0 !important;
}

/* Asegurar que no haya espacio extra en .tab-content */
.tab-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* Fix para contenedores padres */
.tab-content .box,
#tab-ofertas,
#tab-destacados,
.offers-tab-content,
.tab-pane {
  min-height: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Fix adicional para contenedores de carruseles */
.offers-tab-content,
.offers-tab-content .tab-pane {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

/* Eliminar márgenes de .box dentro de carruseles */
#oferts.box,
#destacados.box {
  margin: 0 !important;
  padding: 0 !important;
}

/* Reducir espacio del hr */
.customtab hr {
  margin-bottom: 5px !important;
  margin-top: 5px !important;
}

/* Fix para eliminar altura extra en carruseles */
section.offers,
section.offers .offers-swiper,
section.offers .swiper,
section.offers .swiper-wrapper,
section.offers .swiper-slide,
section.offers .product-card {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.offers,
.offers .offers-swiper,
.offers .swiper,
.offers .swiper-wrapper,
.offers .swiper-slide,
.offers .product-card {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Eliminar espacio en blanco debajo de las tarjetas - selectores específicos de Swiper */
section.offers .swiper-horizontal > .swiper-wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

section.offers .offers-swiper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

section.offers .product-card {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

section.offers .product-card > *:last-child {
    margin-bottom: 0 !important;
}

/* Fix para contenedores tipo .offers-tab-content o .tab-pane */
.offers-tab-content,
.offers-tab-content .tab-pane {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

.offers .swiper { 
  overflow: visible; 
  padding: 5px 0;
}

/* Card spacing and consistent width */
.offers .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

/* ===== ANCHO DE SLIDES IGUAL AL CATÁLOGO ===== */
/* Calcular ancho basado en el grid del catálogo: (100% - gaps) / número de columnas */

/* Desktop: 4 columnas, gap 20px */
.offers .swiper-slide,
.featured .swiper-slide,
.swiper-slide {
  /* Ancho igual a 1 columna del grid: (100% - 60px) / 4 = calc((100% - 60px) / 4) */
  width: calc((100% - 60px) / 4) !important; /* 4 columnas, 3 gaps de 20px */
  min-width: 0 !important;
  max-width: none !important;
  /* No permitir flex-grow ni width: 100% */
  flex: 0 0 calc((100% - 60px) / 4) !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: auto !important;
  display: flex !important;
  align-items: stretch !important;
  position: relative !important;
}

/* Tablet grande: 3 columnas, gap 20px */
@media (max-width: 1280px) {
  .offers .swiper-slide,
  .featured .swiper-slide,
  .swiper-slide {
    width: calc((100% - 40px) / 3) !important; /* 3 columnas, 2 gaps de 20px */
    flex: 0 0 calc((100% - 40px) / 3) !important;
  }
}

/* Tablet: 2 columnas, gap 20px */
@media (max-width: 960px) {
  .offers .swiper-slide,
  .featured .swiper-slide,
  .swiper-slide {
    width: calc((100% - 20px) / 2) !important; /* 2 columnas, 1 gap de 20px */
    flex: 0 0 calc((100% - 20px) / 2) !important;
  }
}

/* Mobile: 1 slide visible (100% del ancho) */
@media (max-width: 768px) {
  .offers .swiper-slide,
  .featured .swiper-slide,
  .swiper-slide {
    width: 100% !important; /* 1 slide visible = 100% del ancho */
    flex: 0 0 100% !important;
  }
}

/* Cards en carruseles: mismo ancho y alto que en catálogo */
.offers .swiper-slide .product-card,
.featured .swiper-slide .product-card,
.swiper-slide .product-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  /* NO cambiar padding - usar el mismo del catálogo (20px 20px 16px) */
  height: 100% !important; /* Altura completa del slide */
  min-height: 0 !important;
  /* No permitir que la card crezca más allá del slide */
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  /* Asegurar layout vertical como en catálogo */
  position: relative !important;
  /* NO cambiar gap - usar el mismo del catálogo (14px) */
  overflow: visible !important; /* Visible para que badges se vean, pero controlado por slide */
}

/* ===== FIXES ESPECÍFICOS PARA CARRUSELES ===== */

/* Asegurar que las cards en carruseles tengan el mismo layout que en catálogo */
.offers .swiper-slide .product-card,
.swiper-slide .product-card {
  /* Layout vertical estable */
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  overflow: hidden !important; /* Ocultar overflow - badges estarán en el contenedor de imagen */
  flex-grow: 0 !important; /* No crecer más allá del slide */
  flex-shrink: 0 !important;
}

/* Contenedor de imagen: position relative con overflow hidden para badges */
.offers .swiper-slide .product-card .pc-media,
.swiper-slide .product-card .pc-media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  overflow: visible !important; /* Visible para que badges se vean */
  z-index: 1 !important;
}

/* Contenedor de slideshow: position relative para badges */
.offers .swiper-slide .product-card .pc-image-slider,
.swiper-slide .product-card .pc-image-slider {
  position: relative !important;
  width: 100% !important;
  height: 260px !important;
  overflow: hidden !important; /* Ocultar overflow de imágenes */
  z-index: 1 !important;
}

/* Badges: posicionados respecto a la card, sobre la imagen */
.offers .swiper-slide .product-card .pc-badges,
.swiper-slide .product-card .pc-badges {
  position: absolute !important;
  left: 16px !important;
  /* Top: padding-top de card (20px) para que quede sobre la imagen */
  top: 20px !important; /* Al inicio del área de contenido (después del padding) */
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  z-index: 100 !important; /* Alto z-index para que esté por encima de la imagen */
  pointer-events: none; /* No interferir con clicks en la imagen */
  margin: 0 !important;
  padding: 0 !important;
  /* Asegurar que no salga del contenedor del slide */
  max-width: calc(100% - 32px) !important; /* 16px left + 16px right */
  /* Asegurar que esté dentro de los límites del slide */
  right: auto !important;
}

/* Badges individuales con z-index */
.offers .swiper-slide .product-card .pc-badge,
.swiper-slide .product-card .pc-badge {
  position: relative !important;
  z-index: 101 !important;
  pointer-events: auto; /* Permitir clicks en badges */
}

/* Imagen dentro del media - debajo de badges */
.offers .swiper-slide .product-card .pc-media img,
.swiper-slide .product-card .pc-media img {
  position: relative !important;
  z-index: 1 !important; /* Debajo de badges */
}

/* Acciones: flex centrado - margin-top auto para que quede abajo */
.offers .swiper-slide .product-card .pc-actions,
.featured .swiper-slide .product-card .pc-actions,
.swiper-slide .product-card .pc-actions {
  display: flex !important;
  gap: 16px !important;
  margin-top: auto !important; /* Empujar footer hacia abajo - sobrescribe margin-top: 4px */
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

/* Botones: flex centrado */
.offers .swiper-slide .product-card .pc-btn,
.swiper-slide .product-card .pc-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
}

/* Precios: centrado */
.offers .swiper-slide .product-card .pc-prices,
.swiper-slide .product-card .pc-prices {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

/* Título: altura fija como en catálogo */
.offers .swiper-slide .product-card .pc-title,
.swiper-slide .product-card .pc-title {
  min-height: calc(1.25em * 3) !important;
  height: calc(1.25em * 3) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Asegurar que los slides tengan ancho definido y no se superpongan */
.offers .swiper-slide,
.swiper-slide {
  box-sizing: border-box !important;
  /* El ancho será controlado por Swiper, pero asegurar que no haya overflow */
  overflow: hidden !important;
}

/* Imágenes del slideshow - dentro del contenedor relative */
.offers .swiper-slide .product-card .pc-slide-image,
.swiper-slide .product-card .pc-slide-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 260px !important;
  object-fit: contain !important;
  z-index: 1 !important; /* Debajo de badges */
}

/* Badges específicos en carruseles - ya están dentro de .pc-badges que está en .pc-media */
.offers .swiper-slide .product-card .pc-badge-sin-stock,
.swiper-slide .product-card .pc-badge-sin-stock {
  position: relative !important; /* Relativo a .pc-badges */
  z-index: 1000 !important;
}

.offers .swiper-slide .product-card .pc-badge-descuento,
.swiper-slide .product-card .pc-badge-descuento {
  position: relative !important; /* Relativo a .pc-badges */
  z-index: 1000 !important;
}

.offers .swiper-slide .product-card .pc-badge-destacado,
.swiper-slide .product-card .pc-badge-destacado,
.offers .swiper-slide .product-card .pc-badge-destacado-small,
.swiper-slide .product-card .pc-badge-destacado-small {
  position: relative !important; /* Relativo a .pc-badges */
  z-index: 1001 !important;
}

/* Mobile: ajustar alturas mínimas para que cards queden parejas */
@media (max-width: 767px) {
  .offers .swiper-slide .product-card,
  .swiper-slide .product-card {
    padding: 12px 12px 10px !important;
    gap: 10px !important;
  }
  
  .offers .swiper-slide .product-card .pc-image-slider,
  .swiper-slide .product-card .pc-image-slider {
    height: 180px !important;
  }
  
  .offers .swiper-slide .product-card .pc-slide-image,
  .swiper-slide .product-card .pc-slide-image {
    height: 180px !important;
  }
  
  .offers .swiper-slide .product-card .pc-title,
  .swiper-slide .product-card .pc-title {
    font-size: 14px !important;
    min-height: calc(1.25em * 3) !important;
    height: calc(1.25em * 3) !important;
  }
  
  .offers .swiper-slide .product-card .pc-price,
  .swiper-slide .product-card .pc-price {
    font-size: 20px !important;
  }
  
  .offers .swiper-slide .product-card .pc-btn,
  .swiper-slide .product-card .pc-btn {
    min-height: 40px !important;
    font-size: 12px !important;
  }
}

.offers-prev, .offers-next {
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%);
  inline-size: 40px; 
  block-size: 40px; 
  border-radius: 999px; 
  border: none;
  background: var(--color-dark); 
  color: var(--color-white); 
  font-size: 22px; 
  font-weight: 900; 
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Hide arrows when not needed */
.offers-prev.hidden, .offers-next.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.offers-prev:hover, .offers-next:hover {
  background: var(--color-secondary);
  transform: translateY(-50%) scale(1.1);
}

.offers-prev { 
  left: -12px; 
}

.offers-next { 
  right: -12px; 
}

/* Mobile: ocultar flechas y ajustar layout */
@media (max-width: 768px) {
  /* Ocultar flechas en mobile */
  .offers-prev, 
  .offers-next,
  .featured-prev,
  .featured-next {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* NOTA: La clase offers-mobile ya no se usa - Swiper se inicializa siempre con breakpoints */
  /* Estos estilos se mantienen por compatibilidad pero no deberían aplicarse */
}

/* ===== COMPATIBILIDAD CON ESTILOS EXISTENTES ===== */

/* Ocultar estilos antiguos de tarjetas */
.product-list .product-thumb,
.product-grid .product-thumb,
.product-slider .product-thumb {
  display: none !important;
}

/* Mostrar nuevas tarjetas */
.product-card {
  display: flex !important;
}

/* Ajustar contenedores existentes */
#content .product-list,
#content .product-grid,
#content .product-slider {
  display: contents;
}

/* Para el carrusel de ofertas */
#latest-slidertab {
    display: none !important;
}

.offers-swiper {
    display: block !important;
}

/* Asegurar que las ofertas se muestren */
.offers {
    display: block !important;
    visibility: visible !important;
}

.offers .swiper-wrapper {
    display: flex !important;
}

.offers .swiper-slide {
    display: block !important;
    visibility: visible !important;
}

/* Debug: mostrar elementos de ofertas */
#oferts {
    display: block !important;
    visibility: visible !important;
}

#oferts .offers {
    display: block !important;
    visibility: visible !important;
}