/**
 * WooCommerce Product Showcase - Versión 3.0 (Golden Master)
 * CSS unificado, sin conflictos y ajustado al diseño de referencia.
 * por tu Mentor de IA.
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* ===== ESTRUCTURA GENERAL Y TÍTULOS ===== */
.wc-product-showcase {
  font-family: 'Poppins', Arial, sans-serif !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.wc-product-showcase * {
  box-sizing: border-box;
}
.showcase-section {
  margin-bottom: 60px;
}
.showcase-title {
  font: 600 32px/1.2 'Poppins', Arial, sans-serif !important;
  color: #fff !important;
  text-align: center !important;
  margin: 0 0 40px 0 !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
}

/* ===== SECCIÓN BEST SELLERS (SLIDER) ===== */
.products-slider {
  position: relative;
}
.slider-container {
  overflow: hidden;
}
.slider-track {
  display: flex !important;
  flex-wrap: nowrap !important; /* Importante: para que no salte de línea */
  gap: 24px !important;
  transition: transform 0.5s ease-in-out;
}

/* 1.1: Tarjeta de producto con dimensiones correctas */
.showcase-product-item {
  position: relative;
  flex: 0 0 auto !important; /* No se estira ni encoge, mantiene su tamaño */
  width: 240px !important;
  height: 240px !important; /* <<< CAMBIO AQUÍ: Tarjetas más altas y cuadradas */
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 3px solid rgba(204,183,84,0.35) !important;
  background: rgba(0,0,0,.15) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-product-item:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,.4) !important;
}

/* 1.2: Imagen que llena COMPLETAMENTE la tarjeta */
.product-image,
.category-image {
  width: 100%;
  height: 100%;
}
.product-image img,
.category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* La clave para que la imagen cubra todo sin deformarse */
  transition: transform 0.4s ease;
  border-radius: 14px; /* Redondeo interior */
}
.showcase-product-item:hover img,
.category-item:hover img {
    transform: scale(1.08);
}

/* 1.3: Overlay SIEMPRE visible con el gradiente correcto */
.product-overlay {
  position: absolute;
  inset: 0;
  padding: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.85) 100%) !important;
  display: flex;
  align-items: flex-end; /* Pega el contenido (el botón) abajo */
  justify-content: center; /* Centra el contenido horizontalmente */
  opacity: 1 !important;
}

/* 1.4: Botón "Explorar Productos" con texto CENTRADO y buen diseño */
.explore-btn,
.category-btn {
  display: inline-flex; /* Permite centrar el texto interior */
  align-items: center;
  justify-content: center;
  padding: 10px 18px !important;
  border-radius: 18px !important;
  font-family: 'Poppins', sans-serif !important;
  color: #fff !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, #ccb754, #75662b) !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
  transition: all 0.2s ease-out;
  cursor: pointer;
}
.explore-btn {
  font-size: 13px !important;
  font-weight: 500 !important;
}
.explore-btn:hover,
.category-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
  border-color: rgba(255,255,255,0.6) !important;
  background: linear-gradient(135deg, #d4c666, #7d6e2f) !important;
}

/* Flechas del Slider */
.slider-btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    width: 40px; height: 40px; border-radius: 50%; background: #ccb754; border: none;
}
.slider-btn-prev { left: -20px; }
.slider-btn-next { right: -20px; }


/* ===== SECCIÓN CATEGORÍAS ===== */
/* ===== SECCIÓN CATEGORÍAS ===== */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px !important;
  justify-items: center;
  /* --- CAMBIOS AQUÍ: Para centrar todo el bloque --- */
  max-width: calc(260px * 5 + 24px * 4); /* Calcula el ancho exacto para 5 items y sus espacios */
  margin-left: auto; /* Centrado mágico */
  margin-right: auto; /* Centrado mágico */
}

/* 2.1: Tarjeta de categoría con dimensiones EXACTAS y borde */
.category-item {
  position: relative;
  width: 210px !important;   /* <<< CAMBIO: Reducido de 260px */
  height: 530px !important;   /* <<< CAMBIO: Reducido de 630px */
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 3px solid rgba(255,255,255,0.18) !important;
  background: rgba(0,0,0,0.15) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category-item:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.4) !important;
}

/* Overlay de la categoría */
.category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 45%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0.85) 100%) !important;
}

/* 2.2: Texto vertical "Concentrados" PERFECTAMENTE CENTRADO */
.category-name {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(-90deg) !important; /* El truco mágico del centrado */
  font: 600 32px/1 'Poppins', Arial, sans-serif !important; /* <<< CAMBIO AQUÍ: Fuente más grande */
  color: #fff !important;
  white-space: nowrap !important;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.85) !important;
}

/* 2.3: Botón "VER" con borde y diseño correcto */
.category-btn {
  position: absolute !important;
  left: 50% !important;
  bottom: 20px !important;
  transform: translateX(-50%) !important; /* Centrado horizontal */
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  /* Reutiliza el estilo de .explore-btn pero sobreescribe el borde si es necesario */
  border: 2px solid rgba(255,255,255,0.5) !important;
}


/* ===== RESPONSIVE ===== */

@media (max-width: 1200px) {
  .categories-grid { grid-template-columns: repeat(3, 1fr); }
  .category-item { width: 220px !important; height: 520px !important; }
}
@media (max-width: 768px) {
  .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 16px !important; }
  .category-item { width: 200px !important; height: 480px !important; }
  .slider-track { gap: 16px !important; }
  .showcase-product-item { width: 200px !important; height: 150px !important; }
}
@media (max-width: 480px) {
  .categories-grid { grid-template-columns: 1fr; }
  .category-item { width: 90% !important; max-width: 260px; height: 520px !important; }
  .slider-track { padding: 0 10px; } /* Evita que se pegue a los bordes */
  .showcase-product-item { width: 100% !important; height: 180px !important; }
}

/* ================================================================
   AJUSTE DE CENTRADO FINAL Y DEFINITIVO PARA EL GRID DE CATEGORÍAS
   ================================================================ */
.wc-product-showcase .categories-section {
  display: flex;
  flex-direction: column;
  align-items: center; /* <<< La clave. Centra horizontalmente a los hijos (el título y el grid) */
}