Redesign not-found and error states with clean black/white text

Replace red alert boxes, icons, borders, and buttons with simple
centered text for product/collection not-found, load-failure, and
empty states.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

components/shopify/product-detail/index.tsx

@@ -8,9 +8,6 @@ import { useShopifyCart } from '@/hooks/use-shopify-cart';
 import ProductDetailGallery from './product-detail-gallery';
 import ProductDetailInfo from './product-detail-info';
 import ProductRecommendations from '../product-recommendations';
-import { Button } from '@/components/ui/button';
-import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
-import { RiErrorWarningLine } from '@remixicon/react';
 import {
   Breadcrumb,
   BreadcrumbList,
@@ -128,22 +125,14 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) =>
 
   if (error || !product) {
     return (
-      <div className="container mx-auto px-4 py-8 text-center">
-        <Alert variant="destructive" className="max-w-md mx-auto p-8">
-          <RiErrorWarningLine size={36} />
-          <AlertTitle className="text-lg font-medium">
-            Product Not Found
-          </AlertTitle>
-          <AlertDescription className="mb-4">
-            {error || 'The requested product could not be found.'}
-          </AlertDescription>
-          <Button
-            onClick={() => window.history.back()}
-            variant="destructive"
-          >
-            Go Back
-          </Button>
-        </Alert>
+      <div className="container mx-auto px-4 py-32 text-center">
+        <h2 className="text-2xl font-medium tracking-tight text-gray-900 font-heading mb-3">
+          Product Not Found
+        </h2>
+        <p className="text-gray-500 max-w-md mx-auto">
+          The product you are looking for does not exist or is no longer
+          available.
+        </p>
       </div>
     );
   }