@tokenoftrust/storefront-runner 0.1.0

package/apps/storefront/src/pages/products/[handle].astro

@@ -0,0 +1,443 @@
+---
+/**
+ * PDP — the conversion centerpiece (brief §5). Gallery + variant selector
+ * islands, breadcrumbs, structured specs from metafields, related products,
+ * badges, review-stars placeholder, disabled buy CTA (no cart in Phase 1),
+ * Product + BreadcrumbList JSON-LD.
+ */
+import Layout from "@/layouts/Layout.astro";
+import Breadcrumbs from "@/components/Breadcrumbs.astro";
+import Badge from "@/components/Badge.astro";
+import ProductCard from "@/components/ProductCard.astro";
+import Section from "@/components/Section.astro";
+import ImageGallery from "@/components/islands/ImageGallery.tsx";
+import VariantSelector from "@/components/islands/VariantSelector.tsx";
+import RecentlyViewed from "@/components/islands/RecentlyViewed.tsx";
+import NicotineWarning from "@/components/compliance/NicotineWarning.astro";
+import { isOnSale, isNew, isAvailable, fromPrice } from "@/lib/tot/query";
+import { buildVariantCartPayload } from "@tot/public-runtime";
+import type { VariantCartPayload } from "@tot/public-runtime";
+import { readCartSecret } from "@/lib/foxyCommerce";
+import { truncate } from "@/lib/format";
+import { productLd, breadcrumbLd } from "@/lib/jsonld";
+import { isUsableImageUrl } from "@/lib/placeholder";
+import { withBase } from "@/lib/basePath";
+
+const { handle } = Astro.params;
+const { tenant, tot, canonicalBase, basePath, commerce } = Astro.locals;
+// Commerce-only route: marketing tenants have no product detail pages.
+if (!Astro.locals.features.catalog) return new Response(null, { status: 404 });
+const compliance = tenant.compliance;
+
+if (!handle) return Astro.redirect(withBase(basePath, "/404"));
+const product = await tot.getProductByHandle(handle);
+
+// Draft canary: drafts resolve by handle (preview/direct link) but are noindex.
+if (!product || product.status === "archived") {
+  return new Response(null, { status: 404 });
+}
+const isDraft = product.status !== "active";
+
+// Related: same collection first, then shared-tag fallback, exclude self+drafts.
+const related = await (async () => {
+  const out = new Map<string, typeof product>();
+  for (const colHandle of product.collections) {
+    const { products } = await tot.listProducts({ collection: colHandle, pageSize: 12 });
+    for (const p of products) if (p.handle !== product.handle) out.set(p.handle, p);
+  }
+  if (out.size < 4 && product.tags.length) {
+    const { products } = await tot.listProducts({ pageSize: 50 });
+    for (const p of products) {
+      if (p.handle === product.handle) continue;
+      if (p.tags.some((t) => product.tags.includes(t))) out.set(p.handle, p);
+    }
+  }
+  return [...out.values()].slice(0, 4);
+})();
+
+const crumbs = [
+  { label: tenant.displayName, href: "/" },
+  ...(product.collections[0]
+    ? [{ label: titleCase(product.collections[0]), href: `/collections/${product.collections[0]}` }]
+    : []),
+  { label: product.title, href: `/products/${product.handle}` },
+];
+
+function titleCase(s: string) {
+  return s.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+// Metafield reader.
+const mf = (ns: string, key: string) =>
+  product.metafields.find((m) => m.namespace === ns && m.key === key)?.value;
+
+// Reviews — REAL data from the store's reviews app (Stamped), pulled as metafields.
+const reviewCount = Number(mf("stamped", "reviews_count") ?? mf("reviews", "count") ?? "0");
+const reviewAvg = Number(mf("stamped", "reviews_average") ?? mf("reviews", "rating") ?? "0");
+
+// Short description (merchant's concise summary) shown high on the PDP, like the
+// source store. The longer description_html still renders below the buy column.
+const shortDescription = mf("my_fields", "short_description") ?? mf("specs", "short_description");
+
+// OG image = the real product image (Shopify CDN supports ?width=), sized for
+// social. Falls back to the tenant brand OG only when there's no usable image.
+const ogPrimary = product.images[0];
+const ogImage =
+  ogPrimary && isUsableImageUrl(ogPrimary.url, ogPrimary.rehosted)
+    ? `${ogPrimary.url}${ogPrimary.url.includes("?") ? "&" : "?"}width=1200`
+    : undefined;
+
+// Product attributes shown the way the SOURCE STORE presents them: plain
+// "Label: value" lines below the description (Flavors / VG % / Bottle Type),
+// sourced from F:-prefixed tags + merchant my_fields. The compliance.* metafields
+// are ToT-internal sync data and are NOT displayed — the source store doesn't
+// show them either (they gate shipping/eligibility, not merchandising).
+// Each flavor links to that flavor filtered within the product's collection —
+// mirrors the source store's /collections/<handle>/<tag> pattern using our
+// existing ?tag= PLP filter. General: any tag → a filtered listing; only the
+// "F: " flavor-tag convention is merchant-specific (same as the display above).
+const flavorCollection = product.collections[0];
+const flavorTags = (product.tags ?? [])
+  .filter((t) => t.startsWith("F: "))
+  .map((t) => ({
+    label: t.slice(3).trim(),
+    href: flavorCollection
+      ? `/collections/${flavorCollection}?tag=${encodeURIComponent(t)}`
+      : undefined,
+  }))
+  .filter((f) => f.label);
+const vgPercentage = mf("my_fields", "vg_percentage");
+const bottleType = mf("my_fields", "bottle_type");
+
+// State sales restrictions (ToT compliance sync). Where this can't ship/sell.
+let restrictedStates: string[] = [];
+const restrictedRaw = mf("compliance", "restricted_states");
+if (restrictedRaw) {
+  try {
+    const parsed = JSON.parse(restrictedRaw);
+    restrictedStates = Array.isArray(parsed) ? parsed : Object.keys(parsed);
+  } catch {
+    /* not JSON — ignore */
+  }
+}
+
+// Legal/safety disclaimer (scraped from the store's own PDP by the migration),
+// per product category — sub-ohm on salts, battery on devices, etc. Selected by
+// product_type (or the compliance.product_category metafield); default fallback.
+const chrome = await Astro.locals.content.getChrome();
+const productCategory = product.product_type || mf("compliance", "product_category");
+const disclaimer =
+  (productCategory && chrome.disclaimers?.[productCategory]) || chrome.disclaimer;
+
+// Full review content (migrated from the store's reviews app). The aggregate
+// (reviewAvg/reviewCount above) comes from metafields; this is the per-review text.
+const reviews = await tot.getReviews(product.handle);
+function reviewDate(iso?: string): string {
+  if (!iso) return "";
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime())
+    ? ""
+    : d.toLocaleDateString(tenant.locale, { year: "numeric", month: "short", day: "numeric" });
+}
+
+const onSale = isOnSale(product);
+const available = isAvailable(product);
+
+// FoxyCart add-to-cart (Track A). Pre-build each variant's cart payload server-
+// side so the island can render a signed, tamper-proof form. In `signed` mode a
+// missing secret means we render NO cart (never a tamperable form); the
+// `unsigned-demo` mode needs no secret. Drafts still get a cart (preview links).
+let foxyCart:
+  | { action: string; byVariantId: Record<string, VariantCartPayload> }
+  | undefined;
+if (commerce) {
+  const secret = await readCartSecret(commerce);
+  if (commerce.mode !== "signed" || secret) {
+    const entries = await Promise.all(
+      product.variants.map(
+        async (v) =>
+          [
+            v.id,
+            await buildVariantCartPayload(product, v, {
+              mode: commerce.mode,
+              secret,
+            }),
+          ] as const,
+      ),
+    );
+    foxyCart = { action: commerce.cartUrl, byVariantId: Object.fromEntries(entries) };
+  }
+}
+
+const snapshot = {
+  handle: product.handle,
+  title: product.title,
+  price: fromPrice(product),
+  currency: product.price_range.currency,
+  vendor: product.vendor,
+  img: product.images[0]?.url,
+  rehosted: product.images[0]?.rehosted,
+  seed: product.images[0]?.id ?? product.handle,
+};
+
+const productJsonLd: Record<string, unknown> = productLd(product, tenant, canonicalBase);
+// Enrich with real aggregate rating + reviews for rich results (SEO).
+if (reviewCount > 0 && reviewAvg > 0) {
+  productJsonLd.aggregateRating = {
+    "@type": "AggregateRating",
+    ratingValue: reviewAvg,
+    reviewCount,
+  };
+}
+if (reviews.length > 0) {
+  productJsonLd.review = reviews.slice(0, 10).map((r) => ({
+    "@type": "Review",
+    reviewRating: { "@type": "Rating", ratingValue: r.rating, bestRating: 5 },
+    author: { "@type": "Person", name: r.author },
+    ...(r.title ? { name: r.title } : {}),
+    reviewBody: r.body,
+    ...(r.date ? { datePublished: r.date } : {}),
+  }));
+}
+const jsonLd = [productJsonLd, breadcrumbLd(crumbs, canonicalBase)];
+---
+
+<Layout
+  title={product.seo.title || product.title}
+  description={product.seo.description || truncate(product.description_text, 160)}
+  path={`/products/${product.handle}`}
+  ogType="product"
+  ogImage={ogImage}
+  noindex={isDraft}
+  jsonLd={jsonLd}
+>
+  <div class="container-prose pt-6">
+    <Breadcrumbs crumbs={crumbs} />
+  </div>
+
+  {isDraft && (
+    <div class="container-prose">
+      <p class="mt-4 rounded-[var(--radius-md)] border border-[var(--color-accent)] bg-[color-mix(in_srgb,var(--color-accent)_8%,transparent)] px-4 py-3 text-sm text-[var(--color-text)]">
+        Draft preview — this product isn't published and won't appear in listings or search.
+      </p>
+    </div>
+  )}
+
+  <div class="container-prose grid gap-10 py-8 md:grid-cols-2 lg:gap-16">
+    {/* Gallery (island) */}
+    <div>
+      <ImageGallery
+        client:idle
+        images={product.images}
+        title={product.title}
+        productHandle={product.handle}
+      />
+    </div>
+
+    {/* Buy column */}
+    <div class="md:pt-2">
+      <div class="flex flex-wrap items-center gap-2">
+        {onSale && <Badge variant="sale" label="Sale" />}
+        {!onSale && isNew(product) && <Badge variant="new" label="New" />}
+        {!available && <Badge variant="soldout" label="Sold out" />}
+      </div>
+
+      {product.vendor && (
+        <p class="eyebrow mt-4">{product.vendor}</p>
+      )}
+      <h1 class="display-md mt-1.5">
+        {product.title}
+      </h1>
+
+      {/* Review badge — REAL aggregate (rating + count) from the store's reviews
+          app, mirrored to product metafields. Individual review content is not
+          migrated in Phase 1 (see LIMITATIONS.md / bonus round). */}
+      {reviewCount > 0 && reviewAvg > 0 && (
+        <div class="mt-3 flex items-center gap-2 text-sm text-[var(--color-muted)]">
+          <span class="text-[var(--color-accent)]" aria-hidden="true">
+            {"★".repeat(Math.round(reviewAvg))}{"☆".repeat(5 - Math.round(reviewAvg))}
+          </span>
+          <span>{reviewAvg.toFixed(1)} · {reviewCount} {reviewCount === 1 ? "review" : "reviews"}</span>
+        </div>
+      )}
+
+      {shortDescription && (
+        <p class="mt-4 max-w-prose text-[1.02rem] leading-relaxed text-[var(--color-text)]">
+          {shortDescription}
+        </p>
+      )}
+
+      {compliance?.nicotineWarning && (
+        <div class="mt-6">
+          <NicotineWarning variant="block" />
+        </div>
+      )}
+
+      {restrictedStates.length > 0 && (
+        <div class="mt-4 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3 text-sm" role="note">
+          <p class="font-display font-medium text-[var(--color-text)]">Where we can ship this</p>
+          <p class="mt-1 text-[var(--color-muted)]">
+            Due to state laws, this product can't ship to: {restrictedStates.join(", ")}.
+          </p>
+        </div>
+      )}
+
+      {/* Variant selector island owns live price/SKU/availability + buy CTA. */}
+      <div class="mt-7">
+        <VariantSelector
+          client:load
+          variants={product.variants}
+          options={product.options}
+          currency={product.price_range.currency}
+          locale={tenant.locale}
+          foxyCart={foxyCart}
+        />
+        <button
+          type="button"
+          class="wishlist-toggle group mt-3 inline-flex w-full items-center justify-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] py-2.5 font-display text-sm font-medium transition-colors hover:border-[var(--color-sale)] hover:text-[var(--color-sale)] aria-pressed:border-[var(--color-sale)] aria-pressed:text-[var(--color-sale)]"
+          aria-pressed="false"
+          aria-label={`Save ${product.title}`}
+          data-wishlist={JSON.stringify(snapshot)}
+        >
+          <svg class="wishlist-heart h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
+            <path d="M12 21s-7.5-4.6-10-9.2C.4 8.6 2 5 5.5 5 8 5 9.4 6.6 12 9c2.6-2.4 4-4 6.5-4C22 5 23.6 8.6 22 11.8 19.5 16.4 12 21 12 21z" />
+          </svg>
+          <span class="wl-label">Save for later</span>
+        </button>
+      </div>
+
+      {/* Rich description + attribute lines — matches the source store's PDP:
+          the longer description, then plain "Label: value" lines (no spec table). */}
+      <div class="mt-9 border-t border-[var(--color-border)] pt-7">
+        <div class="rte text-[var(--color-text)]" set:html={product.description_html} />
+        {(flavorTags.length > 0 || vgPercentage || bottleType) && (
+          <div class="mt-5 space-y-1.5 text-sm leading-relaxed">
+            {flavorTags.length > 0 && (
+              <p>
+                <span class="text-[var(--color-muted)]">Flavors:</span>{" "}
+                {flavorTags.map((f, i) => (
+                  <>
+                    {i > 0 && <span class="text-[var(--color-border)]"> | </span>}
+                    {f.href ? (
+                      <a href={withBase(basePath, f.href)} class="link-accent">{f.label}</a>
+                    ) : (
+                      <span>{f.label}</span>
+                    )}
+                  </>
+                ))}
+              </p>
+            )}
+            {vgPercentage && (
+              <p><span class="text-[var(--color-muted)]">VG Percentage:</span> {vgPercentage}</p>
+            )}
+            {bottleType && (
+              <p><span class="text-[var(--color-muted)]">Bottle Type:</span> {bottleType}</p>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Safety & legal (scraped disclaimer) + Shipping & returns. The source
+          store shows no attribute/spec table — attributes appear as lines above. */}
+      <div class="mt-8 border-t border-[var(--color-border)]">
+        {disclaimer && (
+          <details class="accordion group">
+            <summary class="accordion__summary">
+              <span>Safety &amp; legal</span>
+              <span class="accordion__chevron" aria-hidden="true">+</span>
+            </summary>
+            <div class="accordion__body rte text-sm leading-relaxed text-[var(--color-muted)]" set:html={disclaimer} />
+          </details>
+        )}
+
+        <details class="accordion group">
+          <summary class="accordion__summary">
+            <span>Shipping &amp; returns</span>
+            <span class="accordion__chevron" aria-hidden="true">+</span>
+          </summary>
+          <div class="accordion__body text-sm leading-relaxed text-[var(--color-text)]">
+            <p>
+              Delivery times, rates, and returns are covered in our policy —
+              including the adult-signature (21+) requirement on every order.
+            </p>
+            <a
+              href={withBase(basePath, "/shipping-returns")}
+              class="link-accent mt-3 inline-block font-medium"
+            >
+              Shipping &amp; returns policy
+            </a>
+          </div>
+        </details>
+      </div>
+    </div>
+  </div>
+
+  {/* Customer reviews — real content migrated from the store's reviews app. */}
+  {reviews.length > 0 && (
+    <Section
+      title="Customer reviews"
+      eyebrow={`${reviewAvg.toFixed(1)} ★ · ${reviewCount || reviews.length} review${(reviewCount || reviews.length) === 1 ? "" : "s"}`}
+    >
+      <ul class="grid gap-5 md:grid-cols-2">
+        {reviews.map((r) => (
+          <li class="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] p-5">
+            <div class="flex items-center justify-between gap-3">
+              <span class="text-[var(--color-accent)]" aria-label={`${r.rating} out of 5 stars`}>
+                {"★".repeat(Math.round(r.rating))}<span class="text-[var(--color-border)]">{"★".repeat(5 - Math.round(r.rating))}</span>
+              </span>
+              {r.verifiedBuyer && (
+                <span class="font-mono text-[0.6rem] uppercase tracking-[0.12em] text-[var(--color-success)]">
+                  Verified buyer
+                </span>
+              )}
+            </div>
+            {r.title && <p class="mt-2.5 font-display font-semibold leading-snug">{r.title}</p>}
+            <p class="mt-1.5 text-sm leading-relaxed text-[var(--color-text)]">{r.body}</p>
+            <p class="mt-3 text-xs text-[var(--color-muted)]">
+              {r.author}{reviewDate(r.date) ? ` · ${reviewDate(r.date)}` : ""}
+            </p>
+          </li>
+        ))}
+      </ul>
+    </Section>
+  )}
+
+  {/* Related */}
+  {related.length > 0 && (
+    <Section title="You may also like" eyebrow="More from the line" tone="surface">
+      <div class="grid grid-cols-2 gap-5 lg:grid-cols-4">
+        {related.map((p, i) => (
+          <ProductCard product={p} position={i} list="related" />
+        ))}
+      </div>
+    </Section>
+  )}
+
+  {/* Recently viewed (client island; records this product, shows the rest). */}
+  <RecentlyViewed
+    client:idle
+    locale={tenant.locale}
+    current={{
+      handle: product.handle,
+      title: product.title,
+      price: fromPrice(product),
+      currency: product.price_range.currency,
+      vendor: product.vendor,
+      img: product.images[0]?.url,
+      rehosted: product.images[0]?.rehosted,
+      seed: product.images[0]?.id ?? product.handle,
+    }}
+  />
+
+  {/* PDP-view analytics event. Phase 1: dispatched to a window event that the
+      no-op sink (or a Phase 2 real sink) can subscribe to. No-op by default. */}
+  <script type="application/json" id="pdp-meta" set:html={JSON.stringify({ type: "pdp_view", handle: product.handle })}></script>
+  <script is:inline nonce={Astro.locals.cspNonce}>
+    try {
+      const el = document.getElementById("pdp-meta");
+      if (el?.textContent) {
+        window.dispatchEvent(new CustomEvent("tot:analytics", { detail: JSON.parse(el.textContent) }));
+      }
+    } catch {}
+  </script>
+</Layout>

package/apps/storefront/src/pages/robots.txt.ts

@@ -0,0 +1,24 @@
+/**
+ * Per-tenant robots.txt. Allow all, keep crawlers out of the parameterized
+ * /search results, and point at this tenant's sitemap (canonical base is
+ * resolved per-request from the Host).
+ */
+import type { APIContext } from "astro";
+
+export async function GET(context: APIContext): Promise<Response> {
+  const base = context.locals.canonicalBase.replace(/\/$/, "");
+
+  const body = `User-agent: *
+Allow: /
+Disallow: /search
+
+Sitemap: ${base}/sitemap.xml
+`;
+
+  return new Response(body, {
+    headers: {
+      "content-type": "text/plain; charset=utf-8",
+      "cache-control": "public, max-age=3600",
+    },
+  });
+}

package/apps/storefront/src/pages/saved.astro

@@ -0,0 +1,35 @@
+---
+/**
+ * /saved — the wishlist page. Content is client-rendered from localStorage
+ * (SavedList island); noindex since it's per-device and has no stable content.
+ */
+import Layout from "@/layouts/Layout.astro";
+import Breadcrumbs from "@/components/Breadcrumbs.astro";
+import SavedList from "@/components/islands/SavedList.tsx";
+
+const { tenant } = Astro.locals;
+// Commerce-only route: marketing tenants have no saved-items surface.
+if (!Astro.locals.features.savedItems) return new Response(null, { status: 404 });
+const crumbs = [
+  { label: tenant.displayName, href: "/" },
+  { label: "Saved", href: "/saved" },
+];
+---
+
+<Layout
+  title="Saved items"
+  description="Products you've saved for later."
+  path="/saved"
+  noindex
+>
+  <div class="container-prose pt-6">
+    <Breadcrumbs crumbs={crumbs} />
+  </div>
+  <div class="container-prose py-8">
+    <header class="mb-8" data-reveal>
+      <p class="eyebrow eyebrow--tick mb-3">Your list</p>
+      <h1 class="display-xl">Saved</h1>
+    </header>
+    <SavedList client:only="preact" locale={tenant.locale} />
+  </div>
+</Layout>

package/apps/storefront/src/pages/search.astro

@@ -0,0 +1,150 @@
+---
+/**
+ * /search — dual-purpose route (brief §5 Search).
+ *
+ * 1. `?format=json` — returns `{ products: TypeaheadDoc[] }` for the header
+ *    typeahead island. Search runs through the ToTClient (D1 FTS5 when bound, else
+ *    a Fuse index over the snapshot) over ACTIVE products only (drafts never surface).
+ * 2. Otherwise — the full results page: a no-JS <form>, the echoed query, a
+ *    result count, and a product grid. Results pages are `noindex` (standard
+ *    practice — thin, parameterized, duplicative).
+ */
+import Layout from "@/layouts/Layout.astro";
+import Breadcrumbs from "@/components/Breadcrumbs.astro";
+import ProductCard from "@/components/ProductCard.astro";
+import EmptyState from "@/components/EmptyState.astro";
+import Section from "@/components/Section.astro";
+import { toTypeaheadDoc } from "@/lib/search";
+import { breadcrumbLd } from "@/lib/jsonld";
+import { withBase } from "@/lib/basePath";
+
+const { tenant, tot, canonicalBase, basePath } = Astro.locals;
+// Commerce-only route (page + typeahead JSON): off for marketing tenants.
+if (!Astro.locals.features.productSearch) return new Response(null, { status: 404 });
+const url = new URL(Astro.request.url);
+const q = (url.searchParams.get("q") ?? "").trim();
+const isJson = url.searchParams.get("format") === "json";
+
+// Search goes through the ToTClient: D1 FTS5 when a D1 binding is wired, else a
+// Fuse index over the bundled snapshot (FixtureToTClient). It returns full
+// products, so the HTML grid renders directly and the typeahead just projects to
+// the compact shape. See epics/edge-read-replica.md.
+
+// --- JSON path: powers the header typeahead island. Must return BEFORE render.
+if (isJson) {
+  const docs = (await tot.search(q, 8)).map(toTypeaheadDoc);
+  return new Response(JSON.stringify({ products: docs }), {
+    headers: { "content-type": "application/json" },
+  });
+}
+
+// --- HTML path.
+const results = q ? await tot.search(q, 24) : [];
+const featured = q ? [] : await tot.getFeatured(8);
+
+const crumbs = [
+  { label: tenant.displayName, href: "/" },
+  { label: "Search", href: "/search" },
+];
+---
+
+<Layout
+  title={q ? `Search: ${q}` : "Search"}
+  description={`Search the ${tenant.displayName} catalog.`}
+  path="/search"
+  noindex={true}
+  jsonLd={breadcrumbLd(crumbs, canonicalBase)}
+>
+  <div class="container-prose pt-6">
+    <Breadcrumbs crumbs={crumbs} />
+  </div>
+
+  {/* Search hero + no-JS form (works without the island). */}
+  <header class="container-prose pb-2 pt-8">
+    <p class="eyebrow eyebrow--tick mb-3">Search</p>
+    <h1 class="display-xl">
+      {q ? <>Results for “{q}”</> : "What are you after?"}
+    </h1>
+    <form
+      method="get"
+      action={withBase(basePath, "/search")}
+      role="search"
+      class="mt-7 flex max-w-xl items-center gap-2 rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-2 focus-within:border-[var(--color-primary)]"
+    >
+      <svg
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        aria-hidden="true"
+        class="shrink-0 text-[var(--color-muted)]"
+      >
+        <circle cx="11" cy="11" r="7"></circle>
+        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+      </svg>
+      <label class="sr-only" for="search-input">Search products</label>
+      <input
+        id="search-input"
+        type="search"
+        name="q"
+        value={q}
+        autocomplete="off"
+        placeholder="Search products"
+        class="w-full min-w-0 bg-transparent font-body text-text placeholder:text-muted focus:outline-none"
+      />
+      <button
+        type="submit"
+        class="shrink-0 rounded-full bg-[var(--color-primary)] px-5 py-1.5 font-display text-sm font-medium text-[var(--color-primary-contrast)] transition-transform hover:-translate-y-0.5"
+      >
+        Search
+      </button>
+    </form>
+    {q && (
+      <p class="mt-4 text-sm text-[var(--color-muted)]">
+        {results.length} {results.length === 1 ? "result" : "results"}
+      </p>
+    )}
+  </header>
+
+  {q ? (
+    results.length === 0 ? (
+      <EmptyState
+        title={`No matches for “${q}”`}
+        body="Nothing in the catalog answers to that — yet. Try a broader word, a category, or browse the full range."
+        ctaLabel="Browse collections"
+        ctaHref="/collections"
+      />
+    ) : (
+      <section class="bg-[var(--color-bg)] py-[clamp(2rem,5vw,3.5rem)]">
+        <div class="container-prose">
+          <div class="grid grid-cols-2 gap-5 sm:grid-cols-2 lg:grid-cols-4">
+            {results.map((p, i) => (
+              <ProductCard product={p} position={i} list="search" />
+            ))}
+          </div>
+        </div>
+      </section>
+    )
+  ) : (
+    <>
+      <EmptyState
+        title="Start with a word"
+        body="Search by name, maker, or material. Or wander through the collections below."
+        ctaLabel="Browse collections"
+        ctaHref="/collections"
+      />
+      {featured.length > 0 && (
+        <Section title="While you're here" eyebrow="Featured" tone="surface">
+          <div class="grid grid-cols-2 gap-5 lg:grid-cols-4">
+            {featured.map((p, i) => (
+              <ProductCard product={p} position={i} list="search-featured" />
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )}
+</Layout>