Render Shopify imagery through next/image

Turn the optimizer back on by dropping images.unoptimized, and widen the
Shopify remote pattern to **.shopify.com so any image subdomain resolves.
With the optimizer live, remotePatterns is now actually enforced.

Convert the seven Shopify CDN call sites: the product/collection cards and
the gallery carousel size with fill + sizes, while the cart, order and
search thumbnails carry explicit dimensions. The avatar, markdown,
attachment, assistant and logo images stay plain <img> — they take
blob:/data: or arbitrary hosts that next/image cannot process.

The lightbox needs w-auto h-auto: the width and height attributes
next/image requires make both axes definite, so max-w/max-h clamp them
independently instead of preserving the ratio. object-contain masked that,
but the stretched element covered the overlay and ate the backdrop clicks
that close the dialog.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015uSQQNWrmiYDRW9L9VnsGC

components/shopify/product-card.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import { truncate } from '@/lib/utils';
 
 interface ProductImage {
@@ -68,10 +69,12 @@ const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
       {/* Product Image */}
       <div className="relative aspect-square overflow-hidden">
         {firstImage ? (
-          <img
+          <Image
             src={firstImage.url}
             alt={firstImage.altText || product.title}
-            className="w-full h-full object-contain transition-transform duration-500 group-hover:scale-[1.04]"
+            fill
+            sizes="(min-width: 1280px) 20vw, (min-width: 1024px) 25vw, (min-width: 640px) 33vw, 50vw"
+            className="object-contain transition-transform duration-500 group-hover:scale-[1.04]"
           />
         ) : (
           <div className="absolute inset-0 flex items-center justify-center text-zinc-300">