/* ============================================================
   Shio Gourmet · "Sus favoritas"
   Foto decorativa (frutas/hierbas reales) que aparece detrás del
   frasco al hacer hover sobre cada tarjeta, recortada por los
   bordes de la tarjeta.
   - hover_romero.webp   → tarjeta naranja (naranja + ajo)
   - hover_naranja.webp  → tarjeta verde (hierbas frescas)
   - hover_hierbas.webp  → tarjeta azul (romero + mostaza)
   ============================================================ */

.sal-card {
  position: relative;
  padding: 42px 0;
  background-color: transparent !important;
  transition: background-color var(--transicion-media);
}

/* fondo de color solo al hacer hover */
.sal-card.sal-naranja:hover {
  background-color: var(--color-oro) !important;
}

.sal-card.sal-verde:hover {
  background-color: var(--bs-primary-3) !important;
}

.sal-card.sal-azul:hover {
  background-color: var(--bs-primary-2) !important;
}

/* la botella siempre por encima de la foto */
.sal-card .hover-zoom-child {
  position: relative;
  z-index: 1;
}

/* hover: zoom del frasco mas marcado que el comun (1.1) */
.sal-card.hover-zoom-parent:hover .hover-zoom-child {
  transform: scale(1.3);
}

/* ----------------------------------------------------------
   Foto decorativa: recorte por el borde de la tarjeta
   ---------------------------------------------------------- */
.sal-card .sal-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.sal-card .sal-hover {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 85%;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.sal-card:hover .sal-hover {
  opacity: 1;
}

/* Sus favoritas: frascos mas chicos (inicial y hover) */
.sal-card .vh-30 {
  height: calc(22vh - 20px) !important;
}