Improve debug logging for checkout flow

Add emoji-prefixed logs to make debugging easier:
- 💳 Checkout button clicked
- ✓ Flag set/skipped actions
- 🚪 LogoutOnUnload handler
- 📡 API fetch
- 📦 API response
- 🔗 Stripe redirect
- 🗑️ Cart clearing

This makes it much easier to see the flow in the console.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/app/checkout/client.tsx

@@ -122,29 +122,31 @@ export default function CheckoutPageClient({ isLoggedIn, customer }: CheckoutPag
               <p className="mt-2 text-sm text-muted">Logged in as {customer?.email}</p>
               <button
                 onClick={async () => {
+                  console.log('💳 Checkout button clicked, cart items:', items.length);
                   setCheckingOut(true);
                   setCheckoutError(null);
                   try {
                     // Mark that we're checking out so LogoutOnUnload doesn't clear cart
                     if (typeof window !== 'undefined') {
                       sessionStorage.setItem('isCheckingOut', 'true');
-                      console.log('Checkout button clicked: isCheckingOut flag set');
+                      console.log('✓ Set isCheckingOut flag in sessionStorage');
                     }
 
+                    console.log('📡 Fetching /api/checkout with', items.length, 'items');
                     const res = await fetch('/api/checkout', {
                       method: 'POST',
                       headers: { 'Content-Type': 'application/json' },
                       body: JSON.stringify({ items, customerId: customer.id }),
                     });
                     const data = await res.json();
-                    console.log('Checkout response:', { status: res.status, ok: res.ok, data });
+                    console.log('📦 Checkout response:', { status: res.status, ok: res.ok, hasUrl: !!data.url });
                     if (!res.ok || !data.url) {
                       if (typeof window !== 'undefined') {
                         sessionStorage.removeItem('isCheckingOut');
                       }
                       throw new Error(data.error ?? 'Something went wrong starting checkout.');
                     }
-                    console.log('Redirecting to Stripe:', data.url);
+                    console.log('🔗 Redirecting to Stripe');
                     window.location.href = data.url;
                   } catch (err) {
                     const errorMsg = err instanceof Error ? err.message : 'Something went wrong.';

src/components/LogoutOnUnload.tsx

@@ -10,20 +10,21 @@ import { useCart } from '@/lib/cartStore';
  */
 export default function LogoutOnUnload() {
   const clearCart = useCart((s) => s.clear);
+  const cartItems = useCart((s) => s.items);
 
   useEffect(() => {
     const handleUnload = () => {
       // Don't logout if we're in the middle of checkout (navigating to Stripe)
       // The checkout component sets this flag before making the API call
       const isCheckingOut = typeof window !== 'undefined' && sessionStorage.getItem('isCheckingOut');
-      console.log('LogoutOnUnload handleUnload called, isCheckingOut flag:', isCheckingOut);
+      console.log('🚪 LogoutOnUnload handleUnload - cart items:', cartItems.length, 'isCheckingOut:', isCheckingOut);
       if (isCheckingOut) {
-        console.log('Skipping logout because isCheckingOut is set');
+        console.log('✓ Skipping logout - checkout in progress');
         return;
       }
 
       // Clear cart on logout
-      console.log('Clearing cart and logging out');
+      console.log('🗑️ Clearing cart and logging out');
       clearCart();
       // Use sendBeacon to reliably send logout even when page is closing
       // This doesn't wait for a response, which is fine for logout