feat(web): add buy-now checkout flow

apps/backend/src/domains/commerce/product/product.service.ts

@@ -117,6 +117,7 @@ const PRODUCT_OWNER_SELECT = {
 } satisfies Prisma.ProductSelect;
 
 const PRODUCT_PUBLIC_SELECT = {
+  id: true,
   productCode: true,
   name: true,
   title: true,
@@ -277,6 +278,7 @@ export interface OwnerProductResponse {
 }
 
 export interface PublicProductResponse {
+  productId: string;
   productCode: string | null;
   name: string;
   title: string | null;
@@ -1355,6 +1357,7 @@ export class ProductService {
     product: PublicProductRecord,
   ): PublicProductResponse {
     return {
+      productId: product.id,
       productCode: product.productCode,
       name: product.name,
       title: product.title,

apps/web/src/app/(public)/p/[code]/ProductDetailClient.tsx

@@ -3,6 +3,7 @@
 import { useState, useMemo } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import {
   ChevronLeft,
   ChevronRight,
@@ -208,6 +209,7 @@ interface ProductDetailClientProps {
 
 export function ProductDetailClient({ product }: ProductDetailClientProps) {
   const { toast } = useToast();
+  const router = useRouter();
 
   // ── Variant state ──────────────────────────────────────────────────────────
   const uniqueColors = useMemo(
@@ -316,8 +318,11 @@ export function ProductDetailClient({ product }: ProductDetailClientProps) {
 
   function handleBuyNow() {
     if (!validateVariantAndProceed()) return;
-    // Checkout is not available in W-06 — coming in W-09a
-    toast("Checkout coming soon", { variant: "default" });
+    const params = new URLSearchParams();
+    if (product.productCode) params.set("code", product.productCode);
+    if (selectedVariant?.id) params.set("variantId", selectedVariant.id);
+    const qs = params.toString();
+    router.push(`/buyer/checkout/${product.productId}${qs ? `?${qs}` : ""}`);
   }
 
   // ── Render ─────────────────────────────────────────────────────────────────

apps/web/src/app/(public)/p/[code]/page.tsx

@@ -46,6 +46,7 @@ export interface ProductDetail {
 }
 
 export interface PublicProduct {
+  productId: string;
   productCode: string | null;
   name: string;
   title: string | null;

apps/web/src/app/(shopper)/buyer/_components/ShopperShell.tsx

@@ -8,9 +8,28 @@ interface ShopperShellProps {
   children: ReactNode;
 }
 
+// Routes inside /buyer/* that should render without the 3-column social shell.
+// Checkout is the only focus-mode route in MVP — see TWIZRR_WEB_TASKS W-09a
+// and apps/web/AGENTS.md ("checkout/[productId]/page.tsx ← focus mode").
+const STANDALONE_ROUTE_PREFIXES = ["/buyer/checkout"];
+
+function isStandaloneRoute(pathname: string): boolean {
+  return STANDALONE_ROUTE_PREFIXES.some(
+    (prefix) => pathname === prefix || pathname.startsWith(prefix + "/"),
+  );
+}
+
 export function ShopperShell({ children }: ShopperShellProps) {
   const pathname = usePathname();
 
+  if (isStandaloneRoute(pathname)) {
+    return (
+      <div className="min-h-screen bg-[var(--color-bianca)] text-[var(--color-espresso)]">
+        {children}
+      </div>
+    );
+  }
+
   return (
     <AppShell
       mode="SHOPPING"