/* estilos para la vista de Productos */
.product-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.product-card .card-img-top {
  height: 180px;
  object-fit: cover;
}

/* Ajustes del badge del carrito (sobre botón) */
#cart-count {
  font-size: 0.7rem;
  padding: 0.35rem 0.45rem;
}

/* Offcanvas: estilos para lista */
.offcanvas .list-group-item {
  border: none;
  padding: 0.75rem 0;
}

@media (max-width: 576px) {
  .product-card .card-img-top {
    height: 140px;
  }
}

/* Cursor y transición para hacer más evidente que la imagen es ampliable */
.product-card img.card-img-top {
  cursor: zoom-in;
  transition: transform 160ms ease;
}

.product-card img.card-img-top:active {
  transform: scale(0.98);
}

/* Oscurecer modal background slightly for better contrast */
.modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.65);
}

/* Caption inside modal */
#imageModalCaption {
  color: #fff;
  opacity: 0.9;
}