/* ==========================================================
   WAWAY — ENCUADRE VISUAL CENTRADO DE PRODUCTOS
   Las fotos fuente son cuadradas; object-position por sí solo
   no cambia el encuadre. Se usa zoom suave + origen desplazado
   para centrar visualmente el producto dentro de cada tarjeta.
   ========================================================== */

.producto-galeria-hover {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
}

.producto-galeria-imagen,
.grid-mas-vendidos .producto-galeria-imagen,
.grid-productos .producto-galeria-imagen,
.grid-resultados-productos .producto-galeria-imagen,
.grid-resultados .producto-galeria-imagen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;

    /* El producto de las fotos de catálogo está visualmente
       cargado hacia la derecha. Este recorte lo recentra. */
    transform: scale(1.12) translateX(-3.2%) !important;
    transform-origin: center center !important;
}

.producto-galeria-imagen.activa {
    opacity: 1 !important;
    transform: scale(1.12) translateX(-3.2%) !important;
}

.producto:hover .producto-galeria-imagen.activa {
    transform: scale(1.16) translateX(-3.2%) !important;
}

/* Mantener el mismo encuadre en tablet y móvil. */
@media (max-width: 720px) {
    .producto-galeria-imagen,
    .grid-mas-vendidos .producto-galeria-imagen,
    .grid-productos .producto-galeria-imagen,
    .grid-resultados-productos .producto-galeria-imagen,
    .grid-resultados .producto-galeria-imagen {
        transform: scale(1.12) translateX(-3.2%) !important;
    }

    .producto:hover .producto-galeria-imagen.activa {
        transform: scale(1.12) translateX(-3.2%) !important;
    }
}