/* css/productos.css */

/* Section styling */
.section-productos {
  padding: 4rem 0;
  background-color: #fafafa;
}
.section-productos .section-title {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  position: relative;
}
.section-productos .section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background-color: var(--color-acento);
  margin: 0.5rem auto 0;
}


/* Product card */
.producto-item {
  background-color: #fff;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition), box-shadow var(--transition);
  padding: 1rem; /* increased padding */
}

.producto-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.producto-item img {
  width: 100%;
  height: auto;                 /* altura fluida */
  aspect-ratio: 4 / 5;          /* proporción estable (prendas) */
  object-fit: cover;            /* recorte agradable sin deformar */
  background: #fff;             /* fallback */
}

.producto-item h3 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  line-height: 1.3;
}

.producto-item .price {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.producto-item .btn-secondary {
  margin: 0 1rem 1rem;
}

.producto-item .add-to-cart-btn {
  width: 100%;
  padding: 0.75rem;
  margin-top: auto;
  background-color: var(--color-principal);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  font-size: 1rem;
  cursor: pointer;
  transition: filter var(--transition), transform var(--transition);
}

.producto-item .add-to-cart-btn:hover {
  filter: brightness(0.9);
  transform: translateY(-2px);
}

/* Container consistency */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .grid-productos {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* --------------------------------------------------
   Layout y estilos para filtros y ordenamiento
-------------------------------------------------- */
.productos-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* Sidebar de filtros */
.product-filters {
  width: 260px;
  background-color: #fff;
  padding: 1rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.product-filters .filter-group {
  margin-bottom: 1.5rem;
}
.product-filters .filter-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.product-filters .filter-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.product-filters .filter-group ul li {
  margin-bottom: 0.5rem;
}
.product-filters input[type="number"] {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
}

/* Contenido principal de productos */
.productos-main {
  flex: 1;
}

/* Ordenamiento */
.sorting {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1.5rem;
}
.sorting label {
  margin-right: 0.5rem;
  font-weight: 500;
}
.sorting select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
  font-family: var(--fuente-base);
}

/* Adaptaciones responsive */
@media (max-width: 768px) {
  .productos-layout {
    flex-direction: column;
  }
  .product-filters {
    width: 100%;
    margin-bottom: 2rem;
  }
  .sorting {
    justify-content: flex-start;
  }
  .filtros-selects {
    grid-template-columns: 1fr;
  }
}
/* --------------------------------------------------
   Modern Product Page Styles
-------------------------------------------------- */
/* Hero section */
.productos-hero {
  background-color: var(--color-principal);
  color: #fff;
  padding: 4rem 0;
  text-align: center;
}
.productos-hero .hero-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.productos-hero .hero-subtitle {
  font-size: 1rem;
  opacity: 0.9;
}

/* Filtros y orden bar */
.productos-filtros-bar {
  background-color: #fff;
  padding: 1rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}
.filtros-selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}
.filtros-selects select {
  width: 100%;
  height: 3rem;
  padding: 0 1rem;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  font-family: var(--fuente-base);
  font-size: 1rem;
  color: var(--color-principal);
  background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 1rem center;
  background-size: 0.65rem auto;
  appearance: none;
  box-sizing: border-box;
  transition: border-color var(--transition);
}

/* Modern grid layout */
.modern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 1fr; /* ensure equal-height rows */
  gap: 1.5rem;
}
.modern-grid .producto-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background-color: #fff;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  padding: 1rem;
  height: 100%; /* fill the auto row */
}
.modern-grid .producto-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;          /* consistente con resto del catálogo */
  object-fit: cover;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.modern-grid .producto-item h3 {
  margin: 0.75rem 0 0.25rem;
  font-size: 1.1rem;
}
.modern-grid .producto-item .price {
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--color-acento);
}


/* Ensure add-to-cart button styling in modern grid */
.modern-grid .add-to-cart-btn {
  margin-top: auto;
  width: 100%;
  padding: 0.75rem;
  background-color: var(--color-principal);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: transform var(--transition), filter var(--transition);
}
.modern-grid .add-to-cart-btn:hover {
  filter: brightness(0.9);
  transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .filtros-selects {
    grid-template-columns: 1fr;  /* una sola columna en mobile */
    gap: 0.75rem;
  }
  .modern-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* --------------------------------------------------
   Product Card Enhancements
-------------------------------------------------- */
/* Add "Destacado" badge based on data attribute */
.producto-item[data-destacado="true"] {
  position: relative;
}
.producto-item[data-destacado="true"]::before {
  content: 'DESTACADO';
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--color-acento);
  color: #fff;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  border-radius: var(--border-radius);
  z-index: 2;
}

/* Darken overlay on hover */
.producto-item {
  position: relative;
  overflow: hidden;
}
.producto-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 1;
  pointer-events: none;
}
.producto-item:hover::after {
  opacity: 1;
  /* keep pointer-events none to continue allowing clicks */
  pointer-events: none;
}

/* Ensure content above overlay */
.producto-item img,
.producto-item h3,
.producto-item .price {
  position: relative;
  z-index: 2;
}

/* Add smooth scale on hover for image */
.producto-item img {
  transition: transform var(--transition);
}
.producto-item:hover img {
  transform: scale(1.05);
}

/* Action button reveal (if you add one later) */
.producto-item .btn-primary {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 2;
}
.producto-item:hover .btn-primary {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tighter grid gap for modern layout */


@media (max-width: 480px) {
  .modern-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* --------------------------------------------------
   Secciones por categoría de producto
-------------------------------------------------- */
.product-category {
  padding: 3rem 0;
}
.product-category .category-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  position: relative;
}
.product-category .category-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--color-acento);
  margin: 0.5rem auto 0;
}

/* Reutiliza el layout moderno para cada grid de categoría */
.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.5rem;
}

/* Performance: permite saltear pintura off-screen */
.grid-products,
.modern-grid {
  content-visibility: auto;
  contain-intrinsic-size: 800px; /* altura virtual para evitar saltos */
}

/* --------------------------------------------------
   Icono "+" para añadir al carrito
-------------------------------------------------- */
.add-to-cart-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-principal);
  border-radius: 50%;
  background: #fff;
  color: var(--color-principal);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), color var(--transition);
  margin-top: 0.75rem;
}
.add-to-cart-icon:hover {
  background: var(--color-principal);
  color: #fff;
  transform: scale(1.05);
}

/* Para que los dos botones queden uno encima de otro en móvil */
@media (max-width: 480px) {
  .add-to-cart-btn {
    width: 100%;
  }
}


/* ---------- PRODUCT MODAL (heredado de style.css, se duplica aquí por si se carga este CSS de forma independiente) ---------- */
.product-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.product-modal.show {
  display: flex;
}

.product-modal-content {
  background: #fff;
  width: 90%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  position: relative;
  padding: 1rem;
}

.product-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  color: #333;
  cursor: pointer;
  z-index: 2;
}

.product-gallery {
  margin-bottom: 1rem;
}

.product-info h3 {
  margin: 0.5rem 0;
}

.product-info .price {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* --- Ajuste imágenes producto (móvil) --- */
@media (max-width: 768px) {
  .producto-item img,
  .modern-grid .producto-item img {
    width: 100%;
    height: auto !important;   /* evita recortes verticales */
    max-height: none !important;
    object-fit: cover;         /* llena la tarjeta sin bordes blancos */
    aspect-ratio: 4 / 5;       /* proporción 4:5 uniforme */
  }
}

/* Las nuevas imágenes y combos usan las mismas reglas de .producto-item y grid-products */

/* ======= MOBILE POLISH (PRODUCTOS) ======= */

/* Cards más “shop” */
.producto-item{
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  padding:14px;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.producto-item:active{ transform:scale(.99); }
.producto-item h3{
  font-size:1.05rem;
  line-height:1.2;
  margin:10px 0 6px;
}
.producto-item .price{
  color:#e91e63;
  font-weight:700;
  font-size:1.05rem;
  margin-bottom:10px;
  display:block;
}

/* IMAGEN CONSISTENTE EN CELU
   – alto fluido entre 260 y 420, recorte elegante */
.producto-item img{
  width:100%;
  height:clamp(260px, 62vw, 420px);
  object-fit:cover;
  border-radius:12px;
  display:block;
  background:#f4f5f7; /* evita parpadeo al cargar */
}

/* Botón principal full-width */
.producto-item .btn{
  width:100%;
  border-radius:12px;
  padding:14px 16px;
  font-weight:600;
}

/* Grid respirando en móvil */
.grid-products{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  padding-bottom:84px; /* espacio para que el FAB no tape botones */
}

/* 2 columnas cuando hay ancho */
@media (min-width:560px){
  .grid-products{ grid-template-columns:repeat(2,1fr); gap:20px; }
}
@media (min-width:900px){
  .grid-products{ grid-template-columns:repeat(3,1fr); gap:22px; }
}

/* Título de categoría más compacto en móvil */
.category-title{
  margin:18px 0 12px;
}

/* FAB: que no invada contenidos y respete safe-area iOS */
.cart-fab{
  right:16px;
  bottom:calc(env(safe-area-inset-bottom, 0) + 16px);
  z-index:50;
}
/* === FIX visualización mobile === */

/* 1) Grilla: 2 tarjetas por fila en celulares chicos */
.grid-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* 2) Escalonar cantidad de columnas según ancho */
@media (min-width: 560px) {
  .grid-products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 900px) {
  .grid-products { grid-template-columns: repeat(4, 1fr) !important; }
}

/* 3) Imágenes: altura controlada por relación de aspecto, sin “clamp” alto */
.producto-item img,
.grid-products .producto-item img {
  width: 100%;
  height: auto !important;      /* anulamos alturas previas */
  aspect-ratio: 4 / 5;          /* alto proporcionado al ancho */
  object-fit: cover;
  max-height: none !important;  /* evita otros topes */
  border-radius: 12px;
}

/* 4) Tarjeta un poco más compacta en mobile */
.producto-item h3 { font-size: 1rem; }
.producto-item .price { margin-bottom: 0.5rem; }
.producto-item .btn { padding: 12px; }
/* Oculta secciones sin resultados */
.product-category.is-hidden { display: none; }

/* Mensaje de "sin resultados" */
.empty-state {
  margin: 2rem 0;
  text-align: center;
  color: var(--color-acento-sec);
  font-weight: 500;
}
.search-empty {
  display: none;
  text-align: center;
  margin: 2.5rem 0 1rem;
}
.search-empty p {
  margin: .25rem 0;
  font-size: 1.05rem;
}
.search-empty .hint {
  color: #777;
  font-size: .95rem;
}
/* base (en todas las páginas) */
.back-to-top{
  position: fixed;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 60; /* por detrás del FAB si este tiene >60 */
}

/* en productos.html, levantalo para que no se tape con el FAB */
.productos-page .back-to-top{
  /* si tu FAB mide ~64px y tiene 16px de margen, despejá ~80px */
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 80px);
}
/* Contenedor del botón + texto */
.producto-item .add-to-cart-wrapper{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .5rem;
  white-space: nowrap;          /* que no se corte en dos líneas */
}

/* El botón con el + (mejor área táctil) */
.producto-item .add-to-cart-icon{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--accent, #111);
  background: #fff;
  line-height: 1;
  font-size: 20px;
  cursor: pointer;
  touch-action: manipulation;    /* mejora taps en mobile */
}

/* El texto al lado */
.producto-item .add-to-cart-label{
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-strong, #222);
}
/* --- Filtros: layout claro y compacto en mobile --- */
.productos-filtros-bar {
  position: sticky;
  /* queda bajo el announcement y el header; si no hay var, usa ~64px */
  top: calc(var(--ann-h, 0px) + var(--hdr-h, 64px));
  z-index: 30;
  background: #fff;
}

/* Móvil: 3 columnas, cada una con su label arriba y el select abajo */
@media (max-width: 768px) {
  .productos-filtros-bar .filtros-selects{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 10px 8px;
    align-items: end;
    max-width: 100%;
  }

  /* Mostramos los labels (pequeños y claros) */
  .productos-filtros-bar .filtros-selects label{
    position: static !important;
    width: auto; height: auto; margin: 0;
    padding: 0;
    overflow: visible; clip: auto; white-space: normal; border: 0;
    display: block;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 600;
    color: #6b6b6b;
    margin-left: 4px;
  }

  /* Pareo explícito de cada label y select en la misma columna */
  label[for="filter-tipo"]  { grid-column: 1; grid-row: 1; }
  #filter-tipo              { grid-column: 1; grid-row: 2; }

  label[for="filter-talle"] { grid-column: 2; grid-row: 1; }
  #filter-talle             { grid-column: 2; grid-row: 2; }

  label[for="sort-by"]      { grid-column: 3; grid-row: 1; }
  #sort-by                  { grid-column: 3; grid-row: 2; }

  .productos-filtros-bar .filtros-selects select{
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    height: 42px;
    padding: 0 0.75rem;
    font-size: 15px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    box-sizing: border-box;
  }
}

/* Pantallas muy pequeñas: texto un poco más chico pero manteniendo el layout */
@media (max-width: 380px) {
  .productos-filtros-bar .filtros-selects label{
    font-size: 11px;
  }
  .productos-filtros-bar .filtros-selects select{
    font-size: 14px;
    padding-right: 28px; /* espacio para la flechita del select */
  }
}