/* Fotos de producto sin recortes: la foto completa (contain) sobre un fondo difuminado de la misma foto.
   Asi un flyer horizontal o una foto vertical se ven enteros y el recuadro nunca queda con bandas vacias. */

/* ---------- Tarjeta ---------- */
.product-image .product-image-fondo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:blur(18px) saturate(1.15); transform:scale(1.2); opacity:.55;
  pointer-events:none;
}
.product-image .product-image-foto{ position:relative; width:100%; height:100%; object-fit:contain; }
/* El zoom al pasar el mouse es solo para la foto; el fondo se queda quieto. */
.product-card:hover .product-image .product-image-fondo{ transform:scale(1.2); }
.product-card.is-agotado .product-image .product-image-fondo{ filter:blur(18px) grayscale(.85); }

/* ---------- Pagina del producto ---------- */
.product-gallery-main{
  position:relative; overflow:hidden; background:#f3e7e7;
  height:min(65vh,570px);
}
.product-gallery-main .product-image-fondo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:blur(24px) saturate(1.15); transform:scale(1.2); opacity:.5;
  pointer-events:none;
}
.product-gallery-main .product-image-foto{ position:relative; display:block; width:100%; height:100%; object-fit:contain; }

.thumbnail-row .thumbnail{ padding:0; border:2px solid transparent; background:none; cursor:pointer; line-height:0; }
.thumbnail-row .thumbnail.is-active{ border-color:var(--rose-deep); }
.thumbnail-row .thumbnail img{ width:75px; height:75px; object-fit:cover; }

@media (max-width:768px){
  /* En celular la foto entera necesita mas alto que antes (antes se recortaba a 320px). */
  .product-gallery-main{ height:min(100vw,440px); }
}