/* ============================================================
   IBIZZI · product-card.css
   Tarjeta de producto reutilizable
   ============================================================ */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Llena la celda del grid: en una fila todas las cards quedan igual de
     altas, así los botones se pueden alinear al fondo. */
  height: 100%;
  background-color: transparent;
  transition: var(--transition-base);
}
.product-card.is-sold {
  opacity: 0.65;
}

.product-card-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--color-bg-card);
  margin-bottom: var(--space-3);
}

.product-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.product-card-img-2 {
  opacity: 0;
}

@media (hover: hover) {
  .product-card-media:hover .product-card-img-1 {
    opacity: 0;
  }
  .product-card-media:hover .product-card-img-2 {
    opacity: 1;
  }
}

.product-card-badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 2;
  pointer-events: none;
}
.product-card-badges .label {
  background-color: rgba(20,20,20,0.75);
  backdrop-filter: blur(4px);
}

.product-card-fav {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(20,20,20,0.6);
  backdrop-filter: blur(4px);
  color: var(--color-text-primary);
  z-index: 2;
  transition: var(--transition-color);
}
.product-card-fav:hover { color: var(--color-text-secondary); }
.product-card-fav.is-active { color: var(--color-text-primary); }

.product-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-inline: 2px;
  /* Ocupa el alto sobrante para que las acciones puedan ir al fondo. */
  flex: 1;
}

.product-card-brand {
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.product-card-name {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--color-text-primary);
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
  min-height: 2.5em;
  transition: var(--transition-color);
}
.product-card-name:hover { color: var(--color-text-secondary); }

.product-card-prices {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.product-card-price {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}
.product-card-old {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.product-card-transfer {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  margin-top: 3px;
}
.product-card-transfer strong {
  color: var(--color-text-primary);
  font-weight: var(--fw-bold);
}
.transfer-badge {
  font: inherit;
  color: inherit;
}

.product-card-delivery {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-success);
  margin-top: 3px;
}
.product-card-delivery.is-made-to-order {
  color: var(--color-error);
}

.product-card-installments {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-text-secondary);
}

.product-card-actions {
  /* auto empuja las acciones al fondo (alinea los botones entre cards);
     el padding garantiza un mínimo de aire sobre el botón. */
  margin-top: auto;
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* .btn trae nowrap: acá lo soltamos para que un texto largo baje de línea
   dentro de la card en vez de desbordar la columna en pantallas chicas. */
.product-card-actions .btn {
  white-space: normal;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .product-card-actions .btn-sm { font-size: 10px; }
}
/* Teléfonos chicos: la grilla de 2 columnas deja celdas de ~150px.
   Textos como "RESERVÁ EL TUYO" (nowrap) desbordan si no se comprimen. */
@media (max-width: 479px) {
  .product-card-actions .btn {
    padding-inline: var(--space-2);
    font-size: 10px;
    letter-spacing: 0.08em;
    min-height: 40px;
  }
}

/* ---------- Preventa ---------- */

/* El badge de preventa es sólido: tiene que ganarle al fondo oscuro
   que comparten los demás badges de la card. */
.product-card-badges .label-preorder {
  background-color: var(--color-warning);
  color: var(--color-text-inverse);
  backdrop-filter: none;
}
.product-card-badges .label-gift {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  backdrop-filter: none;
}

.product-card.is-preorder .product-card-media {
  outline: 1px solid color-mix(in srgb, var(--color-warning) 55%, transparent);
  outline-offset: -1px;
}

/* Cartel que aparece sobre la foto al pasar el mouse (solo en preventa). */
.product-card-preorder-banner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3);
  background-color: rgba(20,20,20,0.72);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.product-card-preorder-banner span {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  border: 1px solid var(--color-warning);
  padding: var(--space-2) var(--space-3);
}
@media (hover: hover) {
  .product-card-media:hover .product-card-preorder-banner {
    opacity: 1;
  }
}
/* Sin hover (táctil): el cartel aparece cuando la card entra en pantalla
   al deslizar (products.js le pone .is-inview con IntersectionObserver). */
@media (hover: none) {
  .product-card-preorder-banner {
    opacity: 0;
    background-color: rgba(20,20,20,0.55);
    transition: opacity var(--dur-slow) var(--ease-out);
  }
  .product-card-preorder-banner span {
    transform: translateY(10px);
    transition: transform var(--dur-slower) var(--ease-out);
  }
  .product-card.is-inview .product-card-preorder-banner {
    opacity: 1;
  }
  .product-card.is-inview .product-card-preorder-banner span {
    transform: translateY(0);
  }
}

.product-card-preorder-note {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-warning);
  letter-spacing: 0.01em;
}

.product-card-preorder-tag {
  font-family: var(--font-sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-warning);
  border: 1px solid color-mix(in srgb, var(--color-warning) 60%, transparent);
  padding: 2px 6px;
  align-self: center;
}

/* ---------- Carrusel (Completá tu look / Recomendados) ---------- */

.carousel {
  position: relative;
}
.carousel-scroller {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-3);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-scroller::-webkit-scrollbar { display: none; }

.carousel-scroller > .product-card {
  flex: 0 0 calc(50% - var(--space-2));
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .carousel-scroller > .product-card { flex-basis: calc(33.333% - var(--space-3)); }
}
@media (min-width: 1024px) {
  .carousel-scroller > .product-card { flex-basis: calc(25% - var(--space-3)); }
}

.carousel-prev,
.carousel-next {
  display: none;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background-color: rgba(20,20,20,0.75);
  color: var(--color-text-primary);
  z-index: 3;
  border: 1px solid var(--color-border-soft);
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}
.carousel-prev:hover,
.carousel-next:hover {
  background-color: var(--color-text-primary);
  color: var(--color-text-inverse);
}
.carousel-prev { left: -22px; }
.carousel-next { right: -22px; }
@media (min-width: 1024px) {
  .carousel-prev, .carousel-next { display: inline-flex; }
}