/* assets/css/components/product-card.css */
/* Estilos compartidos para las tarjetas de producto y video */

.product-card {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
}
.product-card .card-img-top {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background: #f6f7f9;
  padding: 10px;
  border-radius: 0 !important;
}
.product-card .card-img-ph {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f1f3;
  color: #cdd2da;
}
.product-card .card-img-ph i { font-size: 2.8rem; }
.video-cover {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #000;
}
/* Las reglas de video-cover iframe están en video-covers.css */
.product-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
  min-height: 200px;
}
.card-body-content {
  flex: 0 0 auto;
}
.card-body-footer {
  margin-top: auto;
}
.btn-vermas {
  width: 100%;
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
  text-align: center;
  padding: 6px 12px;
  transition: background-color 0.3s, color 0.3s;
  font-size: 0.9rem;
  text-decoration: none;
  display: block;
}
.btn-vermas:hover {
  background-color: #000;
  color: #fff;
  text-decoration: none;
}
.promo-tag {
  background: linear-gradient(45deg, #ff6b6b, #ff4757);
  color: #fff;
  border-radius: 4px;
  padding: 2px 4px 2px 2px;
  margin-left: 6px;
  font-size: 1rem;
  font-weight: 700;
  vertical-align: middle;
}
.free-shipping {
  font-size: 0.9rem;
  color: #28a745;
  display: inline-flex;
  align-items: center;
}
.free-shipping i {
  margin-right: 4px;
}

/* Lo que una promo da sin tocar el precio de una unidad: "Regalo con tu compra", "Envío gratis",
   "3x2", "10% OFF pagando con Transferencia" (#872, #885, #902). Con la ropa de la tienda: negro
   sobre blanco, un ícono por tipo y sin cajas; el rojo es sólo del "% OFF" del precio. Se leen
   enteras: la condición va al final ("desde $X", "llevando 3") y cortarla era esconderla. En la
   ficha, debajo de un regalo, la lista de lo que se regala. */
.promo-leyendas {
  list-style: none;
  margin: 4px 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.promo-leyenda {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #111;
}
.promo-leyenda i {
  flex: 0 0 13px;
  font-size: 0.72rem;
  text-align: center;
  color: #111;
}
.promo-leyenda span {
  min-width: 0;
}
.promo-leyenda__regalos {
  list-style: none;
  margin: 3px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #6b6b6b;
  font-size: 0.8125rem;
}
.promo-leyendas--ficha {
  margin: 14px 0 6px;
  gap: 7px;
}
.promo-leyendas--ficha .promo-leyenda {
  font-size: 0.875rem;
}
.promo-leyendas--ficha .promo-leyenda i {
  flex-basis: 15px;
  font-size: 0.82rem;
}
.cuotas-subtle {
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
  color: #777;
  margin-top: 6px;
}
/* Clases para reemplazar estilos en línea */
.product-price-final {
  font-size: 1.4rem;
}
.product-price-locked {
  font-size: 0.82rem;
  color: #6c757d;
  line-height: 1.25;
}
.product-price-locked i {
  font-size: 0.75rem;
  margin-right: 2px;
}
.product-price-original {
  font-size: 0.9rem;
  text-decoration: line-through;
  margin-bottom: 4px;
}
.product-name {
  font-size: 0.9rem;
  margin-bottom: 8px;
}
/* #611: código del producto (opción de tienda) — chico, gris, tipografía de código */
.product-sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #6c757d;
  margin-bottom: 2px;
}
.product-sku--ficha {
  font-size: 0.85rem;
  margin: -4px 0 10px;
}
/* El codigo con peso propio, cuando la tienda lo pide (tienda_sku_prominencia).
   Sube a 1.05rem en negrita y en negro: por encima del precio de la ficha (1.2rem pero
   normal) y a la altura del titulo. Deja de ser monospace gris -- la tipografia de codigo
   lo hacia leer como metadato, que es exactamente lo que no queremos cuando es el dato por
   el que el cliente pide la mercaderia. El rotulo se achica y se va al gris: el numero es
   lo que importa, la palabra solo dice de que es. */
.product-sku--destacado {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #111;
}
.product-sku--ficha.product-sku--destacado {
  margin: 0.25rem 0 0.9rem;
}
/* Colgado de --destacado a proposito: en modo discreto el rotulo tiene que salir
   exactamente como salio siempre, o el default dejaria de ser "lo de hoy". */
.product-sku--destacado .product-sku__rotulo {
  font-size: 0.78rem;
  font-weight: 400;
  color: #6c757d;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 0.35rem;
}
/* Botón Agregar Rápido - mismo estilo que btn-vermas. Antes cada tarjeta lo traía con un
   style="" en línea; ahora vive acá (#1000). */
.quick-add-btn--tarjeta {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin-left: 8px;
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
.quick-add-btn:hover {
  background-color: #000 !important;
  color: #fff !important;
}
/* El renglón del precio y el agregar rápido de la tarjeta (antes en style="", #1000). Con alto
   mínimo del botón: sin stock no hay botón y las tarjetas de una misma fila se desalineaban (#1021). */
.product-card__fila-precio {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 34px;
  margin-bottom: 8px;
}
/* La disponibilidad que pide atención (sin stock, pocas, a pedido) en su propio renglón, debajo
   del precio: la misma etiqueta del KDS que la ficha y la tabla (#1021). */
.product-card__stock { margin: -2px 0 8px; }
.product-card__precio { flex-grow: 1; }