Merge branch 'fix/gallery-zoom-url-spaces-2026-09-20'

workloads/ecommerce/components/product/product-gallery.tsx

@@ -179,7 +179,18 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin
                 className="pointer-events-none absolute inset-0 bg-slate-50 transition-opacity duration-150 ease-out"
                 style={{
                   opacity: hoverZoom && !hoverZoom.showPanel ? 1 : 0,
-                  backgroundImage: `url(${selected})`,
+                  // Comillas dentro de url() a proposito: sin ellas, un
+                  // espacio o parentesis literal en el nombre de archivo
+                  // (ej. "descarga (4)-xxx.png", el patron por defecto de
+                  // Chrome al descargar una imagen sin renombrarla -- asi
+                  // quedan las subidas manuales, a diferencia de las
+                  // importadas por CSV) rompe la sintaxis de url() sin
+                  // comillas -- el navegador descarta el valor completo en
+                  // silencio (backgroundImage queda "none"). Confirmado en
+                  // vivo 2026-09-20: reportado por el usuario como "el zoom
+                  // interactivo no se visualiza" solo en fotos subidas a
+                  // mano por el admin, nunca en las de CSV.
+                  backgroundImage: `url("${selected}")`,
                   backgroundRepeat: "no-repeat",
                   backgroundSize: `${HOVER_ZOOM_SCALE * 100}%`,
                   backgroundPosition: hoverZoom ? `${hoverZoom.bgX}% ${hoverZoom.bgY}%` : "center",
@@ -217,7 +228,9 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin
               top: hoverZoom.panelTop,
               width: hoverZoom.panelSize,
               height: hoverZoom.panelSize,
-              backgroundImage: `url(${selected})`,
+              // Ver el comentario en el overlay in-place de arriba -- mismo
+              // fix, mismo motivo (comillas necesarias dentro de url()).
+              backgroundImage: `url("${selected}")`,
               backgroundRepeat: "no-repeat",
               backgroundSize: `${HOVER_ZOOM_SCALE * 100}%`,
               backgroundPosition: `${hoverZoom.bgX}% ${hoverZoom.bgY}%`,