Add a Shop menu that lists the store's collections

The header now carries a "Shop" dropdown that fetches the collection list
the first time it's opened and links each entry to its collection page.

Fetching is deferred so the request only happens on open: useCollections
loads on mount, which would put a collections query on every page. The new
useCollectionsOnDemand holds off until load() runs, keeps the result for
later opens, and clears its guard on failure so a retry can go through.

Rendered in the desktop nav as a floating panel and in the mobile menu as
an inline section, following the hand-rolled pattern in account-menu.

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

components/shopify/header.tsx

@@ -6,6 +6,7 @@ import { useCartStore } from '@/hooks/use-shopify-cart';
 import CartDrawer from '@/components/shopify/cart-drawer';
 import SearchDialog from '@/components/shopify/search-dialog';
 import AccountMenu from '@/components/shopify/account-menu';
+import ShopMenu from '@/components/shopify/shop-menu';
 import { RiShoppingBagLine, RiCloseLine, RiMenu3Line } from '@remixicon/react';
 import { Button } from '@/components/ui/button';
 import Logo from '@/components/logo';
@@ -88,6 +89,7 @@ const Header: React.FC<HeaderProps> = ({
 
           {/* Desktop Navigation */}
           <div className="hidden md:flex items-center gap-x-8 text-sm">
+            <ShopMenu />
             {links.map((link, index) => (
               <Link
                 key={index}
@@ -127,6 +129,7 @@ const Header: React.FC<HeaderProps> = ({
       {menuOpen && (
         <div className="md:hidden bg-background">
           <div className="max-w-screen-2xl mx-auto px-8 pb-6 flex flex-col gap-y-4 text-sm">
+            <ShopMenu mobile onNavigate={() => setMenuOpen(false)} />
             {links.map((link, index) => (
               <Link
                 key={index}