fix(ecommerce): panel de zoom dinámico y CTA móvil con revelado progresivo

- El panel de zoom lateral ahora calcula tamaño/posición contra el
  viewport real (window.innerWidth/innerHeight) en cada mousemove, en
  vez de un breakpoint fijo (lg:block) con ancho fijo -- a resoluciones
  altas con poco espacio a la derecha de la imagen terminaba
  saliéndose de la pantalla. Si no entra un panel de al menos
  PANEL_MIN_SIZE, se cae automáticamente al overlay in-place (antes
  atado a "por debajo de lg", ahora a "no hay espacio real").
- La barra fija de "Añadir al carrito" en mobile quedaba fija desde el
  primer render, tapando permanentemente parte de la imagen del
  producto. Ahora el botón real (ProductPurchase) también se muestra
  en mobile, y la barra sticky solo aparece cuando ese botón sale del
  viewport (IntersectionObserver) -- mismo patrón que el "Buy Now"
  sticky de Amazon.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_012Y4df3Z7odr9Cg8F2nw6uV

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

@@ -40,11 +40,17 @@ export function ProductPurchase({ product }: { product: Product }) {
         <strong className="text-3xl font-black">{formatMoney(product.price, product.currency)}</strong>
         {product.compareAtPrice && <del className="text-slate-400">{formatMoney(product.compareAtPrice, product.currency)}</del>}
       </div>
-      {/* oculto en mobile: MobileAddToCart (barra fija abajo, lg:hidden) ya cubre esa misma accion ahi -- sin el hidden aqui, ambos se mostraban a la vez. */}
+      {/* Visible tambien en mobile (antes quedaba oculto <lg porque
+          MobileAddToCart quedaba fijo abajo desde el primer render,
+          tapando parte de la imagen sin necesidad). id usado por
+          MobileAddToCart para saber cuando este boton real sale del
+          viewport y recien ahi mostrar su barra sticky -- mismo patron
+          que el "Buy Now" sticky de Amazon en mobile. */}
       <Button
+        id="product-buy-button"
         variant="primary"
         size="lg"
-        className="hidden w-full lg:inline-flex"
+        className="w-full"
         disabled={outOfStock}
         onClick={() => addItem(product, variantId)}
       >