/* =========================================
   MÓDULO: TIENDA / E-COMMERCE (store.css)
   ========================================= */

/* Grilla general de productos */
.store-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 15px; 
  padding: 0 20px 100px 20px; 
}

/* Scroller horizontal de destacados */
.product-scroller { 
  display: flex; 
  gap: 15px; 
  overflow-x: auto; 
  padding: 0 20px 20px; 
}
.product-scroller .product-card { 
  width: 160px; /* LA CLAVE: Forzamos el ancho exacto de la tarjeta para que la imagen no la estire */
  flex-shrink: 0; 
}

/* Tarjeta de Producto */
.product-card { 
  display: flex; 
  flex-direction: column; 
  position: relative; 
  cursor: pointer; 
  overflow: hidden;
}

/* Contenedor de la imagen (El "corral") */
.product-img-wrap { 
  position: relative; 
  width: 100%;
  aspect-ratio: 1 / 1; /* Cuadrado perfecto siempre */
  background: rgba(255, 255, 255, 0.02); 
  border-bottom: 1px solid var(--border); 
}

/* La imagen domada (position: absolute) */
.product-img-wrap img { 
  position: absolute; /* Al ser absoluta, no estira la caja padre */
  top: 15px;
  left: 15px;
  width: calc(100% - 30px); /* 100% menos los 15px de padding de cada lado */
  height: calc(100% - 30px);
  object-fit: contain; /* Nunca se corta, se ajusta al cuadrado */
  transition: transform 0.3s ease; 
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)); 
}

.product-card:hover .product-img-wrap img { 
  transform: scale(1.1); 
}

/* Información del producto */
.product-info { 
  padding: 12px; 
  display: flex; 
  flex-direction: column; 
  flex: 1; 
  justify-content: space-between; 
  gap: 8px; 
}

.product-title { 
  font-size: 14px; 
  line-height: 1.2; 
  color: var(--text); 
  font-weight: 700;
}

/* Botón de Agregar (Add to cart) */
.btn-add { 
  background: rgba(204, 255, 0, 0.1); 
  color: var(--neon); 
  border: none; 
  border-radius: var(--radius); 
  width: 32px; 
  height: 32px; 
  display: grid; 
  place-items: center; 
  cursor: pointer; 
  transition: var(--transition); 
}
.btn-add:hover { 
  background: var(--neon); 
  color: #000; 
}

/* =========================================
   HERO BANNER DE LA TIENDA
   ========================================= */
.promo-hero-card {
  position: relative; 
  min-height: 160px; 
  overflow: hidden; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  padding: 20px; 
  cursor: pointer;
}

.promo-hero-img {
  position: absolute; 
  right: 15px; 
  bottom: 15px; 
  max-height: 80%; /* Límite de alto para que no rompa el banner */
  max-width: 45%;  /* Límite de ancho para no pisar el texto */
  object-fit: contain; 
  z-index: 1;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
}

.promo-hero-overlay {
  position: absolute; 
  inset: 0; 
  background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 55%, transparent 100%); 
  z-index: 2; 
  pointer-events: none;
}