Add page metadata across every route

The root layout exported no metadata, so routes without their own export
rendered no title at all, and no route had a description. Add a root
metadata block with a title template, Open Graph and Twitter defaults,
and fill in the routes that were missing tags.

- config/site.ts: description and env-driven absolute url for metadataBase
- home, /collections and /shop/collections: titles and descriptions
- products/[handle] and collections/[handle]: generateMetadata off the
  existing catalog fetchers, with canonical and OG image
- existing titles: drop the hand-written " — Shop" suffix now that the
  root template appends it

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

app/collections/[handle]/page.tsx

@@ -1,4 +1,52 @@
+import type { Metadata } from 'next';
 import CollectionDetail from '@/components/shopify/collection-detail';
+import { getCollectionProductsPage } from '@/services/shopify/catalog';
+import { truncate } from '@/lib/utils';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ handle: string }>;
+}): Promise<Metadata> {
+  const { handle } = await params;
+
+  // No collection-only query exists, so ask for the smallest page of products
+  // and use just the collection node off it.
+  const { collection } = await getCollectionProductsPage(handle, {
+    first: 1,
+  }).catch(() => ({ collection: null }));
+
+  if (!collection) return { title: 'Collection' };
+
+  const description = collection.description
+    ? truncate(collection.description, 160)
+    : `Shop the ${collection.title} collection.`;
+
+  return {
+    title: collection.title,
+    description,
+    alternates: { canonical: `/collections/${collection.handle}` },
+    openGraph: {
+      title: collection.title,
+      description,
+      url: `/collections/${collection.handle}`,
+      images: collection.image
+        ? [
+            {
+              url: collection.image.url,
+              alt: collection.image.altText ?? collection.title,
+            },
+          ]
+        : undefined,
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: collection.title,
+      description,
+      images: collection.image ? [collection.image.url] : undefined,
+    },
+  };
+}
 
 export default function Page() {
   return <CollectionDetail />;

app/collections/page.tsx

@@ -1,5 +1,11 @@
+import type { Metadata } from 'next';
 import Collections from '@/components/shopify/collections';
 
+export const metadata: Metadata = {
+  title: 'Collections',
+  description: 'Browse every collection in the store.',
+};
+
 export default function Page() {
   return <Collections title="Our Collections" />;
 }