diff --git a/AGENTS.md b/AGENTS.md
index e7aa5a8..4846407 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -96,8 +96,8 @@ MCP servers: Supabase (connected), Stripe (connected), Vercel (connected), Playw
 ## Context files
 
 - [emails/AGENTS.md](emails/AGENTS.md): React Email templates sent through Resend
-- [src/features/catalog/AGENTS.md](src/features/catalog/AGENTS.md): products, variants, images, stock history, the admin create, edit and arrange pages, cached storefront reads
-- [src/features/categories/AGENTS.md](src/features/categories/AGENTS.md): admin category pages, product links, category reordering
+- [src/features/catalog/AGENTS.md](src/features/catalog/AGENTS.md): products, variants, images, stock history, the admin create, edit and arrange pages, cached storefront reads, the home, search and category listings with filters
+- [src/features/categories/AGENTS.md](src/features/categories/AGENTS.md): admin category pages, product links, category reordering, arranging products inside a category, the storefront nav and category pages
 - [src/features/cart/AGENTS.md](src/features/cart/AGENTS.md): the signed cart cookie, cart actions and caps, the expired cart cron
 - [src/features/checkout/AGENTS.md](src/features/checkout/AGENTS.md): the checkout form, `startCheckout` and the Stripe session, the confirmation page
 - [src/features/orders/AGENTS.md](src/features/orders/AGENTS.md): the Stripe webhook, order transitions, the reconcile cron, the expired order PII purge cron, admin orders
diff --git a/app/(store)/categories/[slug]/page.tsx b/app/(store)/categories/[slug]/page.tsx
new file mode 100644
index 0000000..6c2464b
--- /dev/null
+++ b/app/(store)/categories/[slug]/page.tsx
@@ -0,0 +1,71 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+
+import { storeContainer } from "@/components/layout/container";
+import { ListingSkeleton } from "@/features/catalog/listing/components/listing-skeleton";
+import { ListingView } from "@/features/catalog/listing/components/listing-view";
+import {
+  CategoryHeader,
+  CategoryHeaderSkeleton,
+} from "@/features/categories/components/category-header";
+import { categoryPath } from "@/features/categories/paths";
+import { getCategoryBySlug, getPrerenderedCategorySlugs } from "@/features/categories/queries";
+import { env } from "@/lib/env";
+import { cn } from "@/lib/utils";
+
+// Cannot match the slug pattern, so it renders the 404 page. Cache Components refuses an empty
+// list, and a store with no visible category has no slugs to give.
+const NO_CATEGORY_SLUG = "__none__";
+
+export async function generateStaticParams() {
+  const slugs = await getPrerenderedCategorySlugs();
+  return slugs.length > 0 ? slugs.map((slug) => ({ slug })) : [{ slug: NO_CATEGORY_SLUG }];
+}
+
+// spec 0013, AC-24: never reads the search params, so filters never reach the metadata.
+export async function generateMetadata({
+  params,
+}: PageProps<"/categories/[slug]">): Promise<Metadata> {
+  const category = await getCategoryBySlug((await params).slug);
+  if (!category) return { title: "Page not found" };
+  return {
+    title: category.metaTitle ?? category.name,
+    description: category.metaDescription ?? category.description ?? undefined,
+    alternates: {
+      canonical: new URL(categoryPath(category.slug), env.NEXT_PUBLIC_SITE_URL).toString(),
+    },
+  };
+}
+
+// The page joins the two features: the category from categories, the listing from catalog.
+async function CategoryListing({
+  params,
+  searchParams,
+}: Pick<PageProps<"/categories/[slug]">, "params" | "searchParams">) {
+  const category = await getCategoryBySlug((await params).slug);
+  // The header shows the not found page.
+  if (!category) return null;
+  return (
+    <ListingView
+      scope={{ kind: "category", categoryId: category.id }}
+      path={categoryPath(category.slug)}
+      searchParams={searchParams}
+      heading={{ text: "Products", visible: false }}
+    />
+  );
+}
+
+// spec 0013, AC-1 to AC-3. The header reads only the path (static for prerendered slugs); the
+// results read the search params, so they render per request.
+export default function CategoryPage({ params, searchParams }: PageProps<"/categories/[slug]">) {
+  return (
+    <div className={cn(storeContainer, "flex flex-col gap-10 py-12 md:gap-12 md:py-16")}>
+      <Suspense fallback={<CategoryHeaderSkeleton />}>
+        <CategoryHeader params={params} />
+      </Suspense>
+      <Suspense fallback={<ListingSkeleton />}>
+        <CategoryListing params={params} searchParams={searchParams} />
+      </Suspense>
+    </div>
+  );
+}
diff --git a/app/(store)/layout.tsx b/app/(store)/layout.tsx
index e1e2560..3c10c80 100644
--- a/app/(store)/layout.tsx
+++ b/app/(store)/layout.tsx
@@ -3,12 +3,22 @@ import { Suspense } from "react";
 import { StoreShell } from "@/components/layout/store-shell";
 import { AccountLink } from "@/features/account/components/account-link";
 import { CartLink, CartLinkView } from "@/features/cart/components/cart-link";
+import { HeaderSearch } from "@/features/catalog/listing/components/search-box";
+import { categoryPath } from "@/features/categories/paths";
+import { getNavCategories } from "@/features/categories/queries";
 
-export default function StoreLayout({ children }: LayoutProps<"/">) {
+// The nav is a cached read tagged `categories`, so the shell stays static (spec 0013, AC-3).
+export default async function StoreLayout({ children }: LayoutProps<"/">) {
+  const categories = await getNavCategories();
   return (
     <StoreShell
+      navItems={categories.map((category) => ({
+        href: categoryPath(category.slug),
+        label: category.name,
+      }))}
       actions={
         <>
+          <HeaderSearch />
           <AccountLink />
           <Suspense fallback={<CartLinkView count={0} />}>
             <CartLink />
diff --git a/app/(store)/page.tsx b/app/(store)/page.tsx
index c7397ef..d139c7b 100644
--- a/app/(store)/page.tsx
+++ b/app/(store)/page.tsx
@@ -1,13 +1,23 @@
+import type { Metadata } from "next";
 import { Suspense } from "react";
 
 import { storeContainer } from "@/components/layout/container";
 import { AccountDeletedNotice } from "@/features/account/components/account-deleted-notice";
-import { ProductGrid } from "@/features/catalog/components/product-grid";
+import { ListingSkeleton } from "@/features/catalog/listing/components/listing-skeleton";
+import { ListingView } from "@/features/catalog/listing/components/listing-view";
+import { homePath } from "@/features/catalog/paths";
 import { brand } from "@/lib/brand/brand";
+import { env } from "@/lib/env";
 import { cn } from "@/lib/utils";
 
-// Served from the cache: the grid's read is tagged `catalog` (spec 0005, AC-6).
-export default function StoreHomePage() {
+// spec 0013, AC-24: the home title stays; paged and filtered views point at the plain path.
+export const metadata: Metadata = {
+  alternates: { canonical: new URL(homePath, env.NEXT_PUBLIC_SITE_URL).toString() },
+};
+
+// spec 0013, AC-4: every listable product, with filters, sorts and paging. The heading is the
+// static shell; the results read the search params, so they render behind Suspense.
+export default function StoreHomePage({ searchParams }: PageProps<"/">) {
   return (
     <div className={cn(storeContainer, "flex flex-col gap-12 py-12 md:gap-16 md:py-16")}>
       <Suspense fallback={null}>
@@ -19,7 +29,14 @@ export default function StoreHomePage() {
           Everything we sell, in one place.
         </p>
       </header>
-      <ProductGrid />
+      <Suspense fallback={<ListingSkeleton />}>
+        <ListingView
+          scope={{ kind: "home" }}
+          path={homePath}
+          searchParams={searchParams}
+          heading={{ text: "Shop all", visible: true }}
+        />
+      </Suspense>
     </div>
   );
 }
diff --git a/app/(store)/search/page.tsx b/app/(store)/search/page.tsx
new file mode 100644
index 0000000..294ac07
--- /dev/null
+++ b/app/(store)/search/page.tsx
@@ -0,0 +1,51 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+
+import { storeContainer } from "@/components/layout/container";
+import { ListingSkeleton } from "@/features/catalog/listing/components/listing-skeleton";
+import { ListingView } from "@/features/catalog/listing/components/listing-view";
+import { SearchForm } from "@/features/catalog/listing/components/search-box";
+import { searchQuery } from "@/features/catalog/listing/params";
+import { searchPath } from "@/features/catalog/paths";
+import { cn } from "@/lib/utils";
+
+// spec 0013, AC-24: the query never reaches the title or any metadata; results are not indexed.
+export const metadata: Metadata = {
+  title: "Search",
+  robots: { index: false, follow: true },
+};
+
+async function SearchResults({ searchParams }: Pick<PageProps<"/search">, "searchParams">) {
+  const query = searchQuery(await searchParams);
+  return (
+    <div className="flex flex-col gap-10">
+      {/* Keyed by the query, so a new search shows its own text in the box. */}
+      <SearchForm
+        key={query}
+        id="search-query"
+        label="Search products"
+        defaultValue={query}
+        className="max-w-xl"
+      />
+      <ListingView
+        scope={{ kind: "search" }}
+        path={searchPath}
+        searchParams={searchParams}
+        heading={{ text: "Results", visible: false }}
+      />
+    </div>
+  );
+}
+
+// spec 0013, AC-6 to AC-9: the box and the results both read the query, so both sit behind
+// Suspense; the heading is the static shell.
+export default function SearchPage({ searchParams }: PageProps<"/search">) {
+  return (
+    <div className={cn(storeContainer, "flex flex-col gap-8 py-12 md:py-16")}>
+      <h1 className="font-heading text-4xl md:text-5xl">Search</h1>
+      <Suspense fallback={<ListingSkeleton />}>
+        <SearchResults searchParams={searchParams} />
+      </Suspense>
+    </div>
+  );
+}
diff --git a/docs/scope/scope.md b/docs/scope/scope.md
index ba6a43d..b38f490 100644
--- a/docs/scope/scope.md
+++ b/docs/scope/scope.md
@@ -26,7 +26,7 @@ _These are recommendations to keep your build orderly, not requirements. Skip an
 | 10 | Admin order management | Slice 4 | done |
 | 11 | Order emails | Slice 5 | done |
 | 12 | Customer accounts | Slice 6 | done |
-| 13 | Categories, search & filters | Slice 7 | planned |
+| 13 | Categories, search & filters | Slice 7 | done |
 | 14 | Discounts & promo codes | Slice 8 | planned |
 | 15 | Admin sales dashboard | Slice 9 | planned |
 | 16 | Legal pages & cookie consent | Launch | planned |
@@ -248,10 +248,19 @@ spec [0012](../specs/0012-customer-accounts/index.md) · code in [src/features/a
 
 ## Slice 7: Discovery
 
-### 13. Categories, search & filters · needs a decision
+### 13. Categories, search & filters · done
 Help customers find products: category pages, text search, filters by price and variant options, sorting.
 **Done when:** a customer can browse by category, search by name, filter and sort results, and the URL reflects the filters so results can be shared; empty and no results states render.
-- [ ] Design it (spec): `/architect categories, search & filters`
+spec [0013](../specs/0013-categories-search-filters/index.md) · code in [src/features/catalog/listing/](../../src/features/catalog/listing/), [src/features/categories/](../../src/features/categories/)
+- [x] Design it (spec): `/architect categories, search & filters`
+- [x] Build it: `/develop categories, search & filters`
+  - [x] Thin thread: `categories` cache tag and its expiry, the cached listing index, header nav, category pages with paging, not found and empty states (AC-1 to AC-3, AC-5, AC-22)
+  - [x] Home and search: home becomes the full listing, text folding, the header search box, `/search` with Best match and the short query prompt (AC-4, AC-6 to AC-10)
+  - [x] Filters and sort: option groups and counts, per variant matching, price, stock and sale, URL repair and serialization, sort, the panel, Sheet, chips and no results states (AC-11 to AC-21)
+  - [x] Admin arrange inside a category (AC-23)
+  - [x] Safety net: category metadata and canonicals, e2e with axe and keyboard on home, category and search (AC-1 to AC-25)
+- [x] Verify it: `/check verify categories, search & filters`
+- [x] Test it: `/test categories, search & filters`
 
 ## Slice 8: Discounts
 
@@ -302,6 +311,7 @@ Out of scope for the current build pass, kept so the plan stays honest.
 - **Wishlist**: save products for later · needs a decision
 - **Dark mode**: a dark token set with its own contrast pass and a theme switch; the semantic tokens rule keeps it a token change · needs a decision · from spec 0003
 - **Sweep abandoned product image uploads**: delete files in `product-images` that no image row and no order line references, older than a day, if storage cost grows · from spec 0009
+- **Storefront listing in SQL**: move search, filters and counts from the cached in memory index to SQL per request (`pg_trgm`, `unaccent`) once the catalog passes about 2,000 active products or the index nears the cache entry limit · needs a decision · from spec 0013
 - **Trigram search indexes for admin orders**: `pg_trgm` indexes on the searched order columns, once the list is measured as slow · from spec 0010
 - **Redact customer data at Stripe**: remove the name, email and address Stripe keeps on expired Checkout Sessions, if its redaction tooling fits · needs a decision · from spec 0008
 - **Resend bounce and complaint webhooks**: record bounced and complained on `email_sends` and show "Bounced" on the order page, once live · from spec 0011
diff --git a/docs/specs/0013-categories-search-filters/index.md b/docs/specs/0013-categories-search-filters/index.md
new file mode 100644
index 0000000..95c6818
--- /dev/null
+++ b/docs/specs/0013-categories-search-filters/index.md
@@ -0,0 +1,268 @@
+# 0013. Categories, search and filters
+
+**Date**: 2026-10-16 (amended the same day after a cross check: AC-3, AC-5, AC-6, AC-8, AC-9, AC-11, AC-13 to AC-16, AC-18, AC-20, AC-22 to AC-24, the index shape; amended 2026-10-17 after code review: AC-3, AC-15, AC-18, AC-20, AC-21)
+**Status**: Accepted
+
+## Summary
+
+Customers can now find products three ways: a page per visible category (linked from the header), a text search on product names (a box in the header), and the home page, which becomes the full catalog with paging. Every listing gets the same filters (price, option values like size and colour, in stock, on sale) and sort orders, and the URL holds the whole state, so a link shows the same results. To keep it simple at a few hundred products, the whole sellable catalog is read once into one cached list and filtered in plain code on each request, with no schema change and no database query per search. Admins also get to arrange the products inside each category, which sets the category page's default order.
+
+## Requirements
+
+**User stories**:
+- As a shopper, I want to open a category from the header so that I see only the kind of product I came for.
+- As a shopper, I want to search by product name, without worrying about accents or capitals, so that I find a product I already know.
+- As a shopper, I want to filter by price, size, colour, stock and sale, and sort the results, so that I only see what I could buy.
+- As a shopper, I want to share or bookmark a filtered list so that whoever opens it sees the same results.
+- As an admin, I want to arrange the products inside a category so that the best ones show first.
+
+**Acceptance criteria** (the contract):
+
+*Listings and categories*
+- **AC-1**: `/categories/<slug>` for a visible category shows its name, its plain text description, and its listable products as cards in Featured order: `product_categories.position`, then `products.position`, `created_at` newest first, `id` descending.
+- **AC-2**: An unknown slug, a malformed slug, or a hidden category renders the store's not found page (status 200 under Cache Components, as the product page already accepts). Only listable products appear in any listing: status `active` with at least one non archived variant. Draft and archived products never appear.
+- **AC-3**: The header nav lists every visible category in admin order (`categories.position`), on desktop (scrolling sideways when the names overflow) and in the existing mobile menu. With no visible categories there is no nav and no mobile menu button (`StoreShell` already hides both for an empty list). A visible category with no listable products still renders its name and description (nothing when the description is empty), then "Nothing here yet" with a link to all products, and no filter panel.
+- **AC-4**: The home page `/` lists every listable product in Featured order (`products.position`, `created_at` newest first, `id` descending) with the same filters, sorts and paging as a category page. The 48 product cap is gone.
+- **AC-5**: Listings show 24 products per page with numbered page links (previous, next, first, last, the current page ±1, gaps as an ellipsis) inside `<nav aria-label="Pagination">`, the current page marked `aria-current="page"`. Page 1 is the URL without `page`. With a single page there is no pagination nav; previous is absent on the first page and next on the last.
+
+*Search*
+- **AC-6**: Every storefront page has a labelled search box in the header ("Search products"): always visible on desktop, behind a labelled search button on mobile. It is a GET form to `/search?q=`, so it works without JavaScript. `/search` also shows its own search box, filled with the current query. The query is trimmed, then capped at 100 code points (whole characters, never a split surrogate pair).
+- **AC-7**: Search matches product names only. Query and name are folded the same way (lowercase, accents removed, letters with no decomposition mapped: ł→l, ø→o, đ→d, ß→ss, æ→ae, œ→oe) and split into words on anything that is not a letter or digit. A product matches when every query word is the start of some word in its name. So `kosciol` finds "Kościół", `blu tee` finds "Blue Tee", `TEE` finds "Tee", and `tee` does not find "Settee".
+- **AC-8**: Search results default to Best match: products whose name words, joined by single spaces, start with the query words joined the same way come first (so `t-shirt` ranks "T Shirt" first), then every other match; ties in Featured order (`products.position`, then as AC-4).
+- **AC-9**: A query shorter than 2 code points after trimming (including none), or one with no words after folding (such as `!!`), shows "Type at least 2 characters to search" under the box, no results and no filters.
+- **AC-10**: Search text is never logged and never sent to any other service. No log line is written per search or per listing view.
+
+*Filters*
+- **AC-11**: Every listing whose scope has products before filters (home, category, search with a valid query) offers, even when the active filters leave 0 results: a price range (Min and Max inputs in major units, inclusive), one checkbox group per option type, "In stock only", and "On sale only".
+- **AC-12**: Variant filters apply to one variant at a time. A product matches when at least one non archived variant satisfies every active filter together: its value in each filtered option group is one of the selected values (OR inside a group, AND across groups); its `price_cents` is within the range; it is in stock (`stock_quantity > 0`) when "In stock only" is on; it is in stock with a compare at price when "On sale only" is on. A product without a filtered option type never matches that filter.
+- **AC-13**: Option groups come from the listing's products before filters (after search). Option type names and values are grouped by a folded key (the AC-7 fold, then runs of anything but Unicode letters and digits become one `-`, trimmed), so "Colour", "colour " and "COLOUR" are one group, "Red" and "red" one value, and Cyrillic names keep a key. A type or value whose key is empty is skipped. Inside one product, two types with the same key merge into one, and a variant counts each value key once. Each group and value shows its most common spelling. Groups are ordered by how many products have them, then by label; values by first appearance when walking the listing's products in Featured order, each product's values in admin position order. A group with a single value is not shown. A group whose key equals a reserved param (`q`, `sort`, `page`, `min`, `max`, `stock`, `sale`) is not offered.
+- **AC-14**: Each option value shows how many products would match with it added to the other active filters (the counts for one group ignore that group's own selection). "In stock only" and "On sale only" show the count with that toggle on and every other active filter applied. A value with count 0 is shown but disabled, unless it is already selected. A product counts once per value, so the counts inside one group may add up to more than the total; that is intended.
+- **AC-15**: The Min and Max inputs are labelled with the store currency, parsed with `parseMoney` (no floating point; `0` is valid; one decimal comma, `10,50`, reads as a point first), and show the lowest and highest non archived variant price of the scope before filters as placeholders (the same value in both when all prices are equal). A dropped value leaves its input empty.
+
+*Sorting and URL*
+- **AC-16**: A labelled "Sort by" select offers Featured (`featured`), Newest (`newest`, by `created_at`), Price low to high (`price-asc`), Price high to low (`price-desc`), both by the product's lowest non archived variant price, and Name A to Z (`name`, `Intl.Collator` for `STORE_LOCALE`). `/search` also offers Best match (`relevance`), its default; Featured is the default elsewhere and `relevance` is ignored there. The default is never written to the URL. Ties keep the listing's default order.
+- **AC-17**: The URL carries the whole state: `q`, `sort`, `page`, `min`, `max`, `stock=1`, `sale=1`, and one repeated key per option group (`?size=m&color=red&color=blue`, keys and values in folded slug form). Defaults are left out, and params always serialize in one stable order, so one state has one URL. Opening a shared URL renders the same results. Any filter or sort change resets to page 1.
+- **AC-18**: Bad params are repaired or dropped silently, never an error page: min above max are swapped; an unparsable or negative price is dropped; unknown keys, unknown values and an unknown sort are ignored (default sort); a repeated scalar param keeps its first value; a non numeric page is 1 and a page past the end renders the last page (no redirect); at most 10 option groups and 20 values per group are read, the groups counted only after unknown ones are dropped (so tracking params never push out a real filter). The controls show what was actually applied.
+
+*Filter UI*
+- **AC-19**: With JavaScript, each change updates the URL and the results without a full page load: checkboxes and sort at once, prices on blur or Enter. The browser Back button undoes the last change. Without JavaScript the panel is a GET form with an Apply button (only shown when JavaScript is off).
+- **AC-20**: Filters sit in a sidebar on desktop. On small screens a "Filters" button showing the active filter count opens them in a Sheet, which stays open and keeps focus while changes apply. The count adds one per selected value, per price bound and per toggle. On both, active filters show as removable chips above the grid ("Colour: Red", "Min 10 zł", "Max 50 zł", "In stock", "On sale", labels in their most common spelling and prices in the store format), with "Clear all" (which keeps `q` and the sort). The Sheet's footer has a "Show 12 products" button that closes it. The result count ("12 products") sits in a polite live region.
+- **AC-21**: With no results: "No products match." When filters are on, a "Clear filters" link (keeps `q` and the sort). On a search, "Try fewer or shorter words" and a link to all products.
+
+*Caching, admin and SEO*
+- **AC-22**: The listing index is one `'use cache'` read tagged `catalog` and `categories`. Category reads (nav, category page) are tagged `categories`. Every category write expires `categories` with `updateTag` after its commit: create, update, delete, reorder categories, set category products, the new arrange action (AC-23), the product editor's `updateProductCategories`, and `createProduct` (it links categories through `linkAtEnd`). A change shows on the next request. Page shells stay static; the results, which read `searchParams`, render behind Suspense.
+- **AC-23**: On `/admin/categories/<id>` the existing product list (all statuses, loaded in `position` order, Remove and "Add products" kept) becomes the shared sortable list: drag and drop or keyboard, then an explicit Save order button. Remove or Add while the order is unsaved warns, then discards the draft order. On `stale` the page shows a notice and reloads the current list. Saving rewrites `product_categories.position` to `0..n-1` in one raw SQL statement, and refuses with `stale` unless the id list is exactly the category's current set (category row locked first). The page and the action call `requireAdmin()`. It logs `catalog.category.products_reordered` with ids and counts only. The category page's Featured order follows it.
+- **AC-24**: A category page's title is `meta_title`, else the name; its description is `meta_description`, else its description. Home keeps its title; `/search` is titled "Search", and query text never appears in any title or metadata. `/search` is `noindex, follow`. The home and category pages declare a canonical URL of their plain path, without any query.
+- **AC-25**: WCAG AA on every new surface: labelled search inputs, each filter group a `fieldset` with a `legend`, labelled price inputs and sort select, the panel and Sheet fully keyboard operable with visible focus. axe passes on home, a category page and `/search`, with the filters open.
+
+## Decision
+
+**Chosen option**: Option 1: one cached listing index, filtered in pure code
+
+Read every listable product once into a cached index tagged `catalog` and `categories`, and do search, filters, counts, sort and paging as pure functions per request; no schema change.
+
+**Implementation skills**: `vercel:next-cache-components` (Vercel plugin) · `prisma-client-api` (`prisma/skills`, `.agents/skills/prisma-client-api/`) · `shadcn` (`shadcn-ui/ui`, `.agents/skills/shadcn/`) · `accessibility` (`.agents/skills/accessibility/`) · `playwright-best-practices` (`.agents/skills/playwright-best-practices/`) · `next-dev-loop` (`.agents/skills/next-dev-loop/`)
+
+**Calls made in this spec** (pick, why, runner up):
+- **Fold text in our own `foldText`, not `slugify`.** `slugify` turns ł into a separator ("Kościół" → `koscio`), so search and facet keys need an explicit map after NFKD. Runner up: Postgres `unaccent` (needs SQL per query, which Option 1 avoids).
+- **The index stores `inStock` as a boolean, never `stock_quantity`.** Keeps the spec 0005 rule that counts never leave the server, even if a later change sends index rows to the client. Runner up: store the count and convert at render.
+- **`createdAt` as epoch milliseconds in the index.** Plain numbers survive the cache serializer with no surprises. Runner up: `Date`.
+- **Price sort by the lowest non archived variant price**, the same "from" price the card shows, not the lowest filtered variant. The order matches what the shopper reads. Runner up: lowest matching variant price.
+- **Filter changes use `router.push` with `scroll: false`** inside a transition, so Back undoes a filter (AC-19). Runner up: `router.replace`, which keeps history short but makes Back leave the page.
+- **The header search box never prefills.** Prefilling needs `useSearchParams` in the layout and a Suspense boundary in every page's header; `/search` has its own prefilled box instead. Runner up: a prefilled header box behind Suspense.
+- **Canonical is the plain path for every paged URL too** (as you chose). Page 2 and on are then a hint, not indexed on their own; feature 17 can revisit this with the sitemap.
+- **Arranging lives on the existing category edit page**, reusing `src/components/arrange-list.tsx`, not a separate `/arrange` route. Runner up: a separate arrange page like products.
+- **New listing code lives in `src/features/catalog/listing/`** (products are the catalog's), category reads in `src/features/categories/queries.ts`, and route files compose the two. No feature imports the other.
+
+## Rationale
+
+Reasoning and options: see [rationale.md](rationale.md).
+
+## Feature design
+
+### Code layout
+
+- `src/lib/search-text.ts` (pure): `foldText(text)` (lowercase, NFKD, strip combining marks, the AC-7 map), `searchWords(text)` (folded words, split on anything but `\p{L}\p{N}`), `facetKey(text)` (folded, non `\p{L}\p{N}` runs to `-`, trimmed; may be empty, callers skip it).
+- `src/lib/cache-tags.ts`: add `categoriesTag = "categories"`.
+- `src/features/catalog/listing/index-query.ts` (`server-only`): `getListingIndex()`, `'use cache'`, `cacheLife("max")`, tags `catalog` and `categories`.
+- `src/features/catalog/listing/params.ts` (pure): `parseListingParams(searchParams, kind)` (Zod, AC-18) → `ListingState`; `listingHref(path, state)` (AC-17 stable order).
+- `src/features/catalog/listing/listing.ts` (pure): `buildListing(index, scope, state)` → results page, total, page count, option groups with counts, toggle counts, price bounds, the applied state. Internally `matchSearch`, `rankSearch`, `matchVariant`, `facetGroups`, `sortProducts`, `paginate`.
+- `src/features/catalog/listing/components/`: `listing-view.tsx` (server, inside Suspense), `filter-panel.tsx` (client, form + instant apply), `filter-sheet.tsx`, `active-filters.tsx`, `sort-select.tsx`, `pagination.tsx`, `listing-empty.tsx`, `search-box.tsx` (header, client only for the mobile toggle).
+- `src/features/categories/queries.ts` (`server-only`, cached, tag `categories`): `getNavCategories()`, `getCategoryBySlug(slug)`, `getPrerenderedCategorySlugs()`.
+- `src/features/categories/actions/reorder-category-products.ts`, plus `updateTag(categoriesTag)` added to every category action and to the catalog's `update-product-categories.ts`.
+- Routes: `app/(store)/page.tsx` (home listing), `app/(store)/categories/[slug]/page.tsx` (its `generateStaticParams` falls back to a placeholder slug when no category is visible, like the product page), `app/(store)/search/page.tsx` (the prefilled box reads `searchParams`, so it sits inside the Suspense boundary with the results; `generateMetadata` never reads `searchParams` on any of the three); `app/(store)/layout.tsx` passes the nav categories and the search box to `StoreShell`. The old `getActiveProducts` and `HOME_PRODUCT_LIMIT` go away once nothing reads them.
+
+### Data model sketch
+
+No migration. Read only, except `product_categories.position`:
+
+| Table | Read for | Written |
+|---|---|---|
+| `products` (status `active`) | `id`, `name`, `slug`, `position`, `created_at`, first image | no |
+| `product_variants` (`archived = false`) | `price_cents`, `compare_at_price_cents`, `stock_quantity > 0` | no |
+| `product_option_types`, `product_option_values`, `variant_option_values` | names, values, positions, each variant's values | no |
+| `categories` (`visible = true`) | `id`, `name`, `slug`, `description`, `position`, `meta_title`, `meta_description` | no |
+| `product_categories` | membership, `position` (category Featured order) | `position`, by AC-23 |
+
+The index (in memory, per cache entry) is a read only list of:
+
+```ts
+type ListingProduct = {
+  readonly id: string; readonly name: string; readonly slug: string;
+  readonly nameWords: readonly string[];      // searchWords(name); joined by " " for Best match
+  readonly position: number; readonly createdAtMs: number;
+  readonly image: ProductImage;
+  readonly categoryPositions: Readonly<Record<string, number>>; // categoryId → position
+  // Stored once per product (types merged by key, empty keys skipped), referenced by index,
+  // so labels are not repeated on every variant and the cache entry stays small.
+  readonly optionTypes: readonly { key: string; label: string;
+                                   values: readonly { key: string; label: string }[] }[];
+  readonly variants: readonly {
+    readonly priceCents: number; readonly compareAtPriceCents: number | null;
+    readonly inStock: boolean;
+    readonly valueIndexes: readonly (readonly [type: number, value: number])[]; // deduped by key
+  }[];
+};
+```
+
+The card fields (`minPriceCents`, `maxPriceCents`, `soldOut`, `onSale`) are derived from `variants` with the existing `summarizeVariants` / `isOnSale` rules, at read time.
+
+### State transitions
+
+None.
+
+### API surface
+
+| Surface | Method | Key inputs | Key outputs | Auth | Key errors |
+|---|---|---|---|---|---|
+| `/` | GET | `sort`, `page`, `min`, `max`, `stock`, `sale`, option keys | listing page | public | none (bad params repaired, AC-18) |
+| `/categories/[slug]` | GET | `slug` (path), same query params | category header + listing | public | not found UI for unknown, malformed or hidden slug (AC-2) |
+| `/search` | GET | `q` (≤100 chars), same query params | search box + listing, `noindex` | public | prompt when `q` < 2 chars (AC-9) |
+| `getListingIndex()` | cached read | none | `readonly ListingProduct[]` | server only | none |
+| `getNavCategories()` | cached read | none | `{ name, slug }[]` in `position` order | server only | none |
+| `getCategoryBySlug(slug)` | cached read | `slug` | `{ id, name, slug, description, metaTitle, metaDescription } \| null` | server only | `null` for unknown, hidden or malformed |
+| `reorderCategoryProducts` | server action | `categoryId: uuid` (req), `productIds: uuid[]` (req) | `{ ok: true }` | `requireAdmin()` | `stale` (set differs or category gone), `invalid` |
+
+### Value sourcing
+
+| Action | Value produced / displayed | Source |
+|---|---|---|
+| Category page | name, description | `categories.name`, `categories.description` |
+| Category page | Featured order | `product_categories.position`, then `products.position`, `created_at` desc, `id` desc |
+| Home | Featured order | `products.position`, `created_at` desc, `id` desc |
+| Search | Best match tier | `nameWords.join(" ").startsWith(searchWords(q).join(" "))` from the index |
+| Home, search | page title | fixed: home keeps its current title, `/search` is "Search" |
+| Filters button, chips | active count, chip labels | one per selected value, price bound and toggle; group and value labels from the index, prices via the store money format |
+| Header nav | categories and order | `categories` where `visible`, by `position` |
+| Card | image, price range, sold out, sale badge | first image by position; `summarizeVariants` and `isOnSale` over the index variants |
+| Option group | key, label, order | `facetKey(product_option_types.name)`; most common spelling; product count desc, then label |
+| Option value | key, label, order | `facetKey(product_option_values.value)`; most common spelling; first appearance in Featured order by `product_option_values.position` |
+| Value count | number | `buildListing` over the scope with all filters except that group plus that value |
+| Price placeholders | lowest, highest | min / max `price_cents` of non archived variants in the scope before filters, formatted in `STORE_CURRENCY` / `STORE_LOCALE` |
+| Price filter | cents | `min` / `max` params through `parseMoney` |
+| Newest sort | date | `products.created_at` (as `createdAtMs`) |
+| Price sort | price | lowest non archived `price_cents` (the card's "from" price) |
+| Name sort | collation | `Intl.Collator(env.STORE_LOCALE)` |
+| Result count | number | `buildListing` total |
+| Page count | number | `ceil(total / 24)`, at least 1 |
+| Category metadata | title, description | `meta_title ?? name`, `meta_description ?? description` |
+| Canonical | URL | the route's plain path (`/`, `/categories/<slug>`) |
+| Arrange save | positions | index in the submitted `productIds` list, `0..n-1` |
+
+### Key invariants
+
+- Only `active` products with a non archived variant enter the index; only `visible` categories are readable on the storefront.
+- The index and every value sent to the browser carry stock only as a boolean or an availability, never `stock_quantity`.
+- Search, filters, counts, sort and paging are pure functions of (index, scope, state): no I/O, no `Date.now()`, no randomness. The same URL gives the same page for a given index.
+- Every write that changes category membership, order or visibility expires `categories` after commit (deletes that cascade links also expire `catalog`, which the index carries too); every write that changes product data already expires `catalog`.
+- `product_categories.position` is rewritten as a contiguous `0..n-1` by the arrange action; `linkAtEnd` keeps appending after the max.
+- `parseListingParams` never throws: every input maps to a valid `ListingState`.
+
+### Security model
+
+- Storefront pages and reads are public and expose only data already public on product pages. No auth, no personal data.
+- Every input comes from the URL and passes through Zod in `parseListingParams`; search text is matched in memory, never interpolated into SQL.
+- The arrange page and `reorderCategoryProducts` call `requireAdmin()` first; ids validated as UUIDs.
+- Search text is treated as possibly personal (shoppers paste emails into boxes): never logged (AC-10).
+- Rate limiting: a search costs an in memory filter over a cached list, no database round trip, so no new limiter. The production deploy (feature 19) may add a Vercel Firewall rule if abuse shows up.
+
+### Observability
+
+Only `catalog.category.products_reordered` (category id, product count) is new. No per request logs on storefront listings (AC-10). Index build failures surface through the existing error logging.
+
+### Configuration required
+
+None. Uses the existing `STORE_LOCALE` and `STORE_CURRENCY`.
+
+### Critical test scenarios
+
+- Happy path: open a category from the header, filter Color = Red and Size = M, sort by price low to high, open page 2, copy the URL into a fresh context and see the same results, verifies **AC-1**, **AC-3**, **AC-12**, **AC-16**, **AC-17**, **AC-5**.
+- Per variant match: a product with Red S and Blue M is excluded by Red + M, included by Red + S; with "In stock only", a sold out Red S drops it, verifies **AC-12**.
+- Facets: "colour" and "Colour " merge with the most common label; counts ignore the group's own selection; a 0 count value is disabled, verifies **AC-13**, **AC-14**.
+- Search folding: `kosciol` finds "Kościół", `tee` does not find "Settee", a 1 character query shows the prompt, verifies **AC-7**, **AC-9**.
+- Bad params: `?min=50&max=10&page=999&sort=zzz&color=nope` renders the last page, swapped range, default sort, no error, verifies **AC-18**.
+- Cache expiry: hiding a category removes it from the nav and makes its page not found on the next request; linking a product from the product editor adds it to the category page, verifies **AC-2**, **AC-22**.
+- Concurrency: arranging while another admin adds a product to the category returns `stale` and saves nothing, verifies **AC-23**.
+- Auth/permission: a customer or signed out visitor calling `reorderCategoryProducts` is refused by `requireAdmin()`, and the admin page redirects through the proxy, verifies **AC-23**.
+- No JavaScript: the filter form submits with Apply and the search box submits as GET, verifies **AC-6**, **AC-19**.
+- Accessibility: axe and a keyboard only pass through the panel, Sheet, sort and pagination, verifies **AC-25**.
+
+## Build plan
+
+Tracer Bullet: milestone 1 runs one category listing through every layer (cached reads, tags, route, component, nav); each later milestone thickens one segment and ships end to end.
+
+**Milestone 1, thin thread: category pages and the cached index**
+1. [x] Add `categoriesTag`; add `updateTag(categoriesTag)` after commit to create, update, delete, reorder categories, set category products, `updateProductCategories` and `createProduct`, satisfies **AC-22**
+2. [x] `getListingIndex()` with the `ListingProduct` shape (no options yet beyond what the card needs), plus a db test that drafts, archived products and archived variants are out and stock is a boolean, satisfies **AC-2**, **AC-22**. Once options land (task 10), the db test also seeds about 500 products and asserts the serialized index stays well under the cache entry limit
+3. [x] `getNavCategories`, `getCategoryBySlug`, `getPrerenderedCategorySlugs`; header nav from `StoreShell` `navItems`, satisfies **AC-3**
+4. [x] Pure `buildListing` for category scope with Featured order and paging, `parseListingParams` for `page` only, `listingHref`; unit tests, satisfies **AC-1**, **AC-5**, **AC-18**
+5. [x] `/categories/[slug]` route with Suspense, not found state, empty category state, pagination component, satisfies **AC-1**, **AC-2**, **AC-3**, **AC-5**
+
+**Milestone 2, home and search**
+6. [x] Home becomes the listing (all scope); remove `getActiveProducts` and the 48 cap, satisfies **AC-4**
+7. [x] `src/lib/search-text.ts` with unit tests (ł, ß, combining marks, prefix rule), satisfies **AC-7**
+8. [x] Search scope and Best match ranking in `buildListing`; `/search` route with its own box, prompt under 2 characters, `noindex`, satisfies **AC-8**, **AC-9**, **AC-24**
+9. [x] Header search box (desktop inline, mobile toggle), GET form, no logging anywhere on the path, satisfies **AC-6**, **AC-10**
+
+**Milestone 3, filters and sort**
+10. [x] Option data in the index; `facetKey` grouping, labels, ordering, reserved key rule, satisfies **AC-13**
+11. [x] Per variant matching (options, price, stock, sale), disjunctive counts, price bounds; full `parseListingParams` repair rules and stable serialization; unit tests for each rule, satisfies **AC-12**, **AC-14**, **AC-15**, **AC-17**, **AC-18**
+12. [x] Sort select and sort functions (collator from `STORE_LOCALE`), satisfies **AC-16**
+13. [x] Filter panel (GET form, instant apply with `router.push`, prices on blur or Enter), Sheet on small screens, chips with Clear all, live result count, no results states, satisfies **AC-11**, **AC-19**, **AC-20**, **AC-21**
+
+**Milestone 4, admin arrange within a category**
+14. [x] `reorderCategoryProducts` (lock, exact set check, raw SQL positions, log, `updateTag`), db tests for ok and `stale`; sortable product list on `/admin/categories/<id>`, satisfies **AC-23**, **AC-22**
+
+**Milestone 5, safety net**
+15. [x] Category metadata, canonical URLs on home and category pages, satisfies **AC-24**
+16. [x] e2e: the happy path, bad params, no JS form, cache expiry after admin edits, arrange then storefront order, admin denial; axe and keyboard on home, category and search with filters open, satisfies **AC-1** to **AC-25**
+
+## Consequences
+
+**Positive**:
+- No schema change, no new service, no new env var; reads reuse existing cache tags plus one new one.
+- All discovery rules are pure and unit testable; a search never touches the database.
+- The home page finally pages, and the header nav stops being empty.
+
+**Negative / tradeoffs**:
+- The whole sellable catalog sits in one cache entry and is scanned per request. Fine under 500 products; above about 2,000 the entry size and per request CPU call for SQL per request (Follow-up).
+- Any product or category write rebuilds the whole index on the next request, not just the changed product.
+- No typo tolerance: `tshirt` will not find "T Shirt" unless the name says it. Name only search misses products whose name lacks the word a shopper uses.
+- Home, category and search pages now render their results per request (behind Suspense) instead of being fully cached HTML, so they cost a function run each.
+- Canonical to the plain path means paged and filtered views are never indexed on their own.
+- Option matching relies on admins using the same option names across products; "Colour" and "Color" stay two groups.
+
+**Neutral**:
+- `getActiveProducts` and `HOME_PRODUCT_LIMIT` are removed; the spec 0005 Follow-up about home paging closes.
+- `src/features/catalog/listing/` is a new subfolder; `src/features/categories/` gains its first storefront reads.
+- A not found category answers 200, like products today.
+
+## Follow-up
+
+- [ ] If the catalog passes about 2,000 active products, or the index entry nears the cache size limit, move matching to SQL per request (`pg_trgm` and `unaccent` indexes); the pure `buildListing` contract stays as the test oracle.
+- [ ] Feature 17 (SEO): sitemap entries for categories, `ItemList` structured data, and whether paged URLs should canonicalize to themselves.
+- [ ] Feature 18 (analytics): search terms and zero result searches, with consent, if the store wants to learn what people look for.
+- [ ] Consider an admin hint when two products use option names that fold differently but mean the same ("Colour" vs "Color").
+- [ ] Spec 0009 Follow-up (categories cache tag, category product order view) is closed by AC-22 and AC-23.
+- [ ] `src/features/catalog/AGENTS.md` and `src/features/categories/AGENTS.md` still say category actions expire nothing; they go stale once AC-22 lands (for /sync).
+- [ ] `vercel:next-cache-components` is a plugin skill, not listed in root `AGENTS.md` `## Agent skills`; it belongs there next to the caching rule.
diff --git a/docs/specs/0013-categories-search-filters/rationale.md b/docs/specs/0013-categories-search-filters/rationale.md
new file mode 100644
index 0000000..b6bcaf3
--- /dev/null
+++ b/docs/specs/0013-categories-search-filters/rationale.md
@@ -0,0 +1,61 @@
+# 0013. Categories, search and filters: rationale
+
+## Context
+
+Shoppers can only browse one capped grid of 48 products on the home page. Categories exist (flat, ordered, with a visible flag and SEO fields), but only admins see them; the storefront header nav is empty and waiting for them. There is no search and no way to narrow by price, size or colour.
+
+Forces that shape the design:
+- **Small catalog.** Under 500 active products expected in the next year or two. A few admins write; many shoppers read.
+- **Option types are per product with free text names.** "Size" on one tee and "size" on another are separate rows, so any cross product filter must match by name and value text, not by id. Spec 0002 flagged the casing problem.
+- **Cache Components is on.** Catalog reads are `'use cache'` functions tagged `catalog`; every product write and every stock change (the webhook, refunds) already expires that tag. Request data like `searchParams` must sit behind Suspense.
+- **One language, configurable.** `STORE_LOCALE` may be Polish or English, so search must handle accented and special letters (ł does not decompose under Unicode normalization).
+- **Functional style rules.** Pure logic stays free of I/O; DB at the edges.
+- **Spec 0005 rule:** stock counts above the low stock threshold never reach the browser.
+
+Without this feature the store cannot grow past a few dozen products without customers losing them.
+
+## Options considered
+
+### Option 1: One cached index, filtered in pure code
+
+Load every listable product with its sellable variants, option values and category links in one cached read tagged `catalog` and `categories`. Each request parses the URL and runs pure functions for search, filters, facet counts, sort and paging.
+
+**Pros**:
+- No database round trip per search or filter change; one query rebuilds the index after a write.
+- Every rule is a pure function, trivially unit tested, matching the project's functional style.
+- Facet counts (several "what if" counts per request) are cheap loops instead of many SQL aggregates.
+- No migration, no new infrastructure; accent folding is one small function.
+
+**Cons**:
+- Memory and CPU grow with the catalog; past a couple of thousand products the cache entry and the per request scan become a problem.
+- Any write rebuilds the whole index.
+
+### Option 2: SQL per request
+
+Build the filter, sort and paging query with `$queryRaw`, plus a facet count query per option group, with `unaccent` and `pg_trgm` indexes on names.
+
+**Pros**:
+- Scales to tens of thousands of products.
+- Typo tolerant search is one operator away (`pg_trgm` similarity).
+
+**Cons**:
+- Every search and filter change hits the database (the Supabase pooler), and disjunctive facet counts need one query per group or a complex grouping query.
+- A migration for extensions and indexes; raw SQL composition is harder to test than pure functions.
+- Per request results either skip the cache or create one cache entry per URL.
+
+### Option 3: Hosted search engine
+
+Meilisearch, Typesense or Algolia (as of my knowledge; this space moves fast), synced from every catalog write.
+
+**Pros**:
+- Typo tolerance, ranking and facets built in.
+
+**Cons**:
+- A new service to run or pay for, credentials, and a sync path that must stay consistent with stock and status changes (including the webhook).
+- Far more than a few hundred products need.
+
+## Rationale
+
+The catalog is small and read heavy, and every write already expires a cache tag, so the cheapest correct design is to cache the whole sellable catalog once and compute listings in memory. That keeps the database out of the shopper's path, keeps the logic pure (the project's rule), and makes the hardest part, per variant matching with disjunctive facet counts, a set of plain loops with unit tests instead of a tangle of SQL. SQL per request is the right answer only at a scale nobody has asked for; the Follow-up names the threshold and keeps `buildListing` as the oracle if that move ever happens. A hosted engine adds a service and a sync path to solve typo tolerance, which was explicitly not wanted.
+
+Per variant matching was chosen over per product so a filter never shows a product that cannot be bought in the chosen combination. Read time normalization was chosen over cleaning data on save so admins keep the spelling they typed and no backfill is needed.
diff --git a/docs/specs/0013-categories-search-filters/verify.md b/docs/specs/0013-categories-search-filters/verify.md
new file mode 100644
index 0000000..5e0a0b2
--- /dev/null
+++ b/docs/specs/0013-categories-search-filters/verify.md
@@ -0,0 +1,57 @@
+# Verify: categories, search & filters · spec 0013 · updated 2026-10-17
+_Steps derived from spec 0013 acceptance criteria. `/check verify` runs these; `/test` locks the durable ones._
+
+## UI / manual
+- [x] Open a visible category from the header nav → its name, plain text description and its products as cards in `product_categories.position` order → AC-1
+- [x] Visit `/categories/nope`, `/categories/Not_A_Slug` and a hidden category's slug → the store's 404 page; draft, archived and products with only archived variants never appear in any listing → AC-2
+- [x] Header nav lists visible categories in admin order on desktop and in the mobile menu; hide every category → no nav and no "Open menu" button → AC-3
+- [x] A visible category with no listable products → name, description (nothing when empty), "Nothing here yet", a "See all products" link, no filter panel → AC-3
+- [x] `/` lists every listable product (more than 48 when the catalog has them) with filters, sort and paging → AC-4
+- [x] With more than 24 products: 24 per page, `nav[aria-label=Pagination]`, current page `aria-current="page"`, first/last/±1 with an ellipsis, page 1 has no `page` param, no Previous on page 1, no Next on the last, no nav with one page → AC-5
+- [x] Header search box labelled "Search products": inline on desktop, behind a "Search" button on mobile; submits as GET to `/search?q=`; `/search` shows its own box prefilled; a 150 emoji query is cut to 100 whole characters → AC-6
+- [x] Search `kosciol` finds "Kościół", `blu tee` finds "Blue Tee", `TEE` finds "Tee", `tee` does not find "Settee" → AC-7
+- [x] Search `t-shirt` with "Long Sleeve T Shirt" and "T Shirt" present → "T Shirt" first → AC-8
+- [x] `/search`, `/search?q=t`, `/search?q=!!` → "Type at least 2 characters to search", no results, no filters → AC-9
+- [x] Search a few times while watching the server log → no log line contains the query and none is written per search or listing view → AC-10
+- [x] A listing whose filters leave 0 results still shows Price (Min, Max), every option group, "In stock only" and "On sale only" → AC-11
+- [x] Product with Red S (sold out) and Blue M: Red + M excludes it, Red + S includes it, Red + S + In stock only excludes it; a product without Color never matches a Color filter → AC-12
+- [x] Products using "Colour", "colour " and "COLOUR" show one group labelled with the most common spelling; a single value group is hidden; an option named "Sort" is never offered → AC-13
+- [x] With Color = Red on, the Color counts ignore the Red selection, other groups' counts apply it; a count 0 value is disabled unless selected → AC-14
+- [x] Min and Max are labelled with the store currency, accept `0`, show the scope's lowest and highest price as placeholders; typing `abc` and leaving the box empties it → AC-15
+- [x] Sort by offers Featured, Newest, Price low to high, Price high to low, Name A to Z (plus Best match on `/search`, its default); the default never appears in the URL → AC-16
+- [x] Apply filters and a sort, copy the URL into a fresh private window → identical results; reorder the same params by hand → the same canonical links; any change drops `page` → AC-17
+- [x] `/categories/<slug>?min=50&max=10&page=999&sort=zzz&color=nope` → 200, last page, range swapped (chips Min 10, Max 50), Featured, no Color chip → AC-18
+- [x] With JavaScript: checkboxes and sort apply at once, prices on blur or Enter, no full reload, Back undoes the last change; with the app bundles blocked the panel shows Apply and submits as GET → AC-19
+- [x] Desktop sidebar; on a phone a "Filters (n)" button opens a Sheet that stays open and keeps focus while changes apply; chips ("Color: Red", "Min €10.00", "In stock", "On sale") remove one filter each; "Clear all" keeps `q`; "12 products" is announced politely → AC-20
+- [x] Filters leaving nothing → "No products match." and "Clear filters" (keeps `q`); a search with no match → "Try fewer or shorter words" and a link to all products → AC-21
+- [x] As admin: rename, hide, reorder, delete a category, add or remove a product from either side, create a product in a category → the change shows on the very next storefront request → AC-22
+- [x] `/admin/categories/<id>`: drag or keyboard arrange, "Save order" saves; Remove or Add with an unsaved order asks first; another admin adding a product meanwhile → notice and the reloaded list; the storefront category follows the saved order → AC-23
+- [x] Category title is `meta_title` else name, description `meta_description` else description; `/search` titled "Search" with `noindex, follow`; no query text in any title or meta; home and category canonical is the plain path → AC-24
+- [x] axe passes on `/`, a category and `/search` with filters open (Sheet on mobile); every group is a fieldset with a legend; the panel, Sheet, sort and pagination work by keyboard with visible focus → AC-25
+
+## Value sourcing
+- [x] Rename a category and edit its description → category page shows the new `categories.name` / `description` · e2e `the page reads the category's fields, titles and canonical from their sources`
+- [x] Rearrange a category in admin, compare with home → category Featured follows `product_categories.position`, home follows `products.position` · unit `orders home by position…`, `orders a category by its own positions first…`; e2e `an admin arranges the category…`
+- [x] Best match: change a product name so its words start with the query → it moves into the first tier · unit `puts names that start with the query words first…` (the index re-reads names on every `catalog` expiry)
+- [x] Home title stays the brand name; `/search` title "Search" · e2e `the page reads the category's fields…`
+- [x] Active count and chip labels: two values, a Min and In stock → "Filters (4)"; labels use the most common spelling; prices formatted in `STORE_CURRENCY` / `STORE_LOCALE` (try `pl-PL` with PLN) · e2e `the page reads the category's fields…` (four active); unit `merges spellings, labels with the most common…`; `src/lib/money.test.ts` (`pl-PL` with PLN)
+- [x] Hide a category → it leaves the nav; reorder categories → nav order follows `categories.position` · e2e `hiding the category drops it…`; db `lists visible categories in admin order for the nav` and `expires the categories tag after every write…`
+- [x] Card image is the first image by position; sold out only when every live variant has no stock; Sale only on an in stock variant with a compare at price · db `shows the first image by position…`, `is sold out only when every live variant has no stock…`
+- [x] Option group key and order: groups by product count then label; values by first appearance in Featured order and value position
+- [x] Value counts change when another group's selection changes, not when the group's own selection does
+- [x] Price placeholders: archive the cheapest variant → the Min placeholder moves to the next lowest · db `gives the card price range over live variants, ignoring archived ones`; unit `are the lowest and highest variant price of the scope before filters`
+- [x] Price filter: `min=9.5` in EUR is 950 cents; in JPY a fraction is dropped · unit `reads a price in the store currency's own minor units`
+- [x] Newest follows `products.created_at`; price sorts use the lowest live variant price (the card's "from" price) · unit `sorts by %s`
+- [x] Name sort follows `Intl.Collator(STORE_LOCALE)` ("Apple" before "banana"; try `pl-PL` with "Łódź" and "Lato") · unit `sorts by name`, `sorts names by the store locale's collation`
+- [x] Result count and page count: 25 matches → "25 products", 2 pages · unit `needs a second page from the 25th match on`; the count text is `productCount`
+- [x] Category without `meta_title` uses its name; with one uses it · e2e `the page reads the category's fields…`
+- [x] Canonical on `/categories/<slug>?page=2&color=red` is `<site>/categories/<slug>` · e2e `the page reads the category's fields…`
+- [x] Arrange save writes positions `0..n-1` in the submitted order · db `rewrites the category's positions to 0..n-1 in the given order…`
+
+## Commands
+- [x] `pnpm test` → the pure rules pass (`src/lib/search-text.test.ts`, `src/features/catalog/listing/*.test.ts`) → AC-5, AC-7 to AC-9, AC-12 to AC-18
+- [x] `pnpm test:db` → `tests/db/catalog-listing.db.test.ts` and `tests/db/categories.db.test.ts` pass → AC-2, AC-3, AC-22, AC-23
+- [x] `pnpm test:e2e tests/e2e/catalog/discovery.spec.ts` → green on desktop and mobile → AC-1 to AC-25
+
+## Acceptance-criteria coverage
+- AC-1 to AC-25 each have a UI step above; AC-22 and AC-23 also a db test; AC-25 the axe and keyboard e2e.
diff --git a/src/components/layout/store-nav-menu.tsx b/src/components/layout/store-nav-menu.tsx
index 7913afb..c44fd54 100644
--- a/src/components/layout/store-nav-menu.tsx
+++ b/src/components/layout/store-nav-menu.tsx
@@ -19,7 +19,10 @@ export function StoreDesktopNav({ items }: StoreNavProps) {
   if (items.length === 0) return null;
 
   return (
-    <nav aria-label="Main" className="hidden md:block">
+    <nav
+      aria-label="Main"
+      className="hidden min-w-0 [scrollbar-width:none] overflow-x-auto md:block"
+    >
       <ul className="flex items-center gap-1">
         {items.map((item) => (
           <li key={item.href}>
@@ -27,7 +30,7 @@ export function StoreDesktopNav({ items }: StoreNavProps) {
               href={item.href}
               aria-current={item.href === current ? "page" : undefined}
               className={cn(
-                "inline-flex h-11 items-center rounded-md px-3 text-sm text-muted-foreground transition-colors hover:text-foreground",
+                "inline-flex h-11 items-center rounded-md px-3 text-sm whitespace-nowrap text-muted-foreground transition-colors hover:text-foreground",
                 "aria-[current=page]:font-medium aria-[current=page]:text-foreground",
               )}
             >
diff --git a/src/components/layout/store-shell.tsx b/src/components/layout/store-shell.tsx
index 835300d..4a86351 100644
--- a/src/components/layout/store-shell.tsx
+++ b/src/components/layout/store-shell.tsx
@@ -45,7 +45,7 @@ export function StoreShell({
             </Suspense>
             <Wordmark />
           </div>
-          <div className="flex flex-1 justify-center">
+          <div className="flex min-w-0 flex-1 justify-center">
             <Suspense fallback={null}>
               <StoreDesktopNav items={navItems} />
             </Suspense>
diff --git a/src/features/catalog/AGENTS.md b/src/features/catalog/AGENTS.md
index 7789358..c2525bf 100644
--- a/src/features/catalog/AGENTS.md
+++ b/src/features/catalog/AGENTS.md
@@ -2,7 +2,7 @@
 
 ## Overview
 
-Products, option types, variants, ordered image galleries (up to 8, each optionally tied to one option value) and stock history: the admin list, create form, per section edit page and arrange page (`/admin/products`, `/admin/products/<id>`, `/admin/products/arrange`), the storefront home grid (`/`) and product page (`/products/[slug]`). Governing specs: [0005 Core buy loop](../../../docs/specs/0005-core-buy-loop/index.md), [0009 Admin catalog management](../../../docs/specs/0009-admin-catalog-management/index.md). Categories themselves live in `src/features/categories/`.
+Products, option types, variants, ordered image galleries (up to 8, each optionally tied to one option value) and stock history: the admin list, create form, per section edit page and arrange page (`/admin/products`, `/admin/products/<id>`, `/admin/products/arrange`), the storefront listings (home `/`, `/search`, the body of `/categories/[slug]`) and product page (`/products/[slug]`). Governing specs: [0005 Core buy loop](../../../docs/specs/0005-core-buy-loop/index.md), [0009 Admin catalog management](../../../docs/specs/0009-admin-catalog-management/index.md), [0013 Categories, search and filters](../../../docs/specs/0013-categories-search-filters/index.md). Categories themselves live in `src/features/categories/`.
 
 ## Files
 
@@ -12,14 +12,16 @@ Products, option types, variants, ordered image galleries (up to 8, each optiona
 - `status.ts`, `variant-edit.ts`, `stock.ts`, `image-edit.ts`: pure edit rules (status transitions and publish position; variant conflicts, renames and new value combinations; stock changes and moved rows; the images conflict check).
 - `markdown.tsx`: the one description renderer (`ProductDescription`), shared by the cached product page and the admin Preview, so it has no `server-only` import.
 - `paths.ts`: admin and storefront URLs.
+- `listing/`: the storefront listings (spec 0013). `index-query.ts` is the one cached listing index; `index-rows.ts`, `listing.ts`, `params.ts`, `pagination.ts`, `format.ts` are pure (index rows, search / filters / counts / sort / paging, the URL state parser and serializer, page links, the product count label); `components/` holds `ListingView` and its controls, which the home, search and category routes render.
 - `queries.ts`: cached storefront reads; `admin-queries.ts`: live admin reads (never cached): the filtered, keyset paged list, `getProductForEdit`, `getStockHistory`, `getArrangeList`, `getCategoryOptions`, `searchProductsForPicker` (also used by the category page route).
 - `actions/`: `create-product`, `create-image-upload`, and one per edit section or step: `update-details`, `change-status`, `update-variants`, `add-option-value`, `adjust-stock`, `update-images`, `update-product-categories`, `reorder-products`, `delete-product`.
-- `components/editor/`: the edit page sections; `components/` holds the create form, list, arrange page and storefront parts (grid, card, gallery, purchase).
+- `components/editor/`: the edit page sections; `components/` holds the create form, list, arrange page and storefront parts (card, gallery, purchase).
 - `log.ts`: the `catalog.product.*`, `catalog.stock.adjusted` and `catalog.products.reordered` events.
 
 ## Conventions
 
-- Storefront reads are `'use cache'`, tagged `catalog` and `product:<slug>` (`src/lib/cache-tags.ts`); every action that changes what the storefront shows expires both with `updateTag` after the commit (a slug change expires the old and the new tag; `reorderProducts` only `catalog`). The categories actions expire nothing: no cached read uses categories yet. Only `active` products enter the cache.
+- Storefront reads are `'use cache'`, tagged `catalog` and `product:<slug>` (`src/lib/cache-tags.ts`); every action that changes what the storefront shows expires both with `updateTag` after the commit (a slug change expires the old and the new tag; `reorderProducts` only `catalog`). Category membership, order and visibility are tagged `categories`; the listing index carries both `catalog` and `categories`, so `createProduct` and `updateProductCategories` also expire `categories`. Only `active` products enter the cache.
+- Listings read the whole sellable catalog once (`getListingIndex`) and search, filter, count and sort it in plain code per request; no query per search. The URL holds the whole state, and `params.ts` turns any input into a valid state, never an error. Search and filter keys fold text through `src/lib/search-text.ts` (not `slugify`). Index variants carry `inStock`, never the count.
 - The product page gets an availability per variant, never the stock count, so counts above the low stock threshold never reach the browser (`src/lib/availability.ts`).
 - Prices are typed in major units and converted with `parseMoney` (`src/lib/money.ts`) without floating point math.
 - Create and every save are one transaction. Unique violations (23505) map back to the field concerned via `src/lib/db-errors.ts`; invalid input never partly saves.
diff --git a/src/features/catalog/actions/create-product.ts b/src/features/catalog/actions/create-product.ts
index 11650d4..4ffdee5 100644
--- a/src/features/catalog/actions/create-product.ts
+++ b/src/features/catalog/actions/create-product.ts
@@ -3,7 +3,7 @@
 import { updateTag } from "next/cache";
 
 import { requireAdmin } from "@/features/admin-auth/require-admin";
-import { catalogTag, productTag } from "@/lib/cache-tags";
+import { catalogTag, categoriesTag, productTag } from "@/lib/cache-tags";
 import { db } from "@/lib/db";
 import { uniqueViolation } from "@/lib/db-errors";
 import { env } from "@/lib/env";
@@ -207,6 +207,8 @@ export async function createProduct(
   // Only after the commit: the next storefront request reads the new product.
   updateTag(catalogTag);
   updateTag(productTag(product.slug));
+  // It may join categories through linkAtEnd (spec 0013, AC-22).
+  updateTag(categoriesTag);
   logCatalogEvent("catalog.product.created", {
     adminId: admin.id,
     productId: created.id,
diff --git a/src/features/catalog/actions/update-product-categories.ts b/src/features/catalog/actions/update-product-categories.ts
index 615c1d7..c03a7ff 100644
--- a/src/features/catalog/actions/update-product-categories.ts
+++ b/src/features/catalog/actions/update-product-categories.ts
@@ -1,6 +1,9 @@
 "use server";
 
+import { updateTag } from "next/cache";
+
 import { requireAdmin } from "@/features/admin-auth/require-admin";
+import { categoriesTag } from "@/lib/cache-tags";
 import { db } from "@/lib/db";
 import { linkAtEnd, lockCategories } from "@/lib/product-categories";
 import type { ActionResult } from "@/lib/result";
@@ -15,8 +18,8 @@ export type UpdateProductCategoriesError =
   | { readonly code: "not_found" };
 
 // spec 0009, AC-18 and AC-21: sets the product's categories, refused when its stored set
-// differs from the one the page loaded. A new category takes the product at its end. Nothing
-// is expired: no storefront read uses categories until feature 13 (AC-23).
+// differs from the one the page loaded. A new category takes the product at its end. Expires
+// the category pages and the listing index (spec 0013, AC-22).
 //
 // The product lock is FOR NO KEY UPDATE: the category page locks a category and then links a
 // product, whose foreign key needs a key share on the product row, so a full lock here would
@@ -61,6 +64,7 @@ export async function updateProductCategories(
   );
   if (outcome !== "saved") return { ok: false, error: outcome };
 
+  updateTag(categoriesTag);
   logCatalogEvent("catalog.product.updated", {
     adminId: admin.id,
     productId,
diff --git a/src/features/catalog/components/arrange-products.tsx b/src/features/catalog/components/arrange-products.tsx
index 2e0702a..713f12a 100644
--- a/src/features/catalog/components/arrange-products.tsx
+++ b/src/features/catalog/components/arrange-products.tsx
@@ -12,7 +12,6 @@ import {
 
 import type { ArrangeItem } from "../admin-queries";
 import { reorderProducts } from "../actions/reorder-products";
-import { HOME_PRODUCT_LIMIT } from "../queries";
 import { adminProductsPath } from "../paths";
 
 // spec 0009, AC-20: every active product in home grid order; each drop saves at once.
@@ -30,9 +29,8 @@ export function ArrangeProducts({ products }: { readonly products: readonly Arra
         <div className="flex flex-col gap-1">
           <h1 className="text-2xl font-semibold">Arrange products</h1>
           <p className="max-w-prose text-sm text-muted-foreground">
-            The home page shows active products in this order, the first {HOME_PRODUCT_LIMIT} of
-            them. Drag a product, or focus its handle and use Space and the arrow keys. Each move
-            saves at once.
+            The home page shows active products in this order. Drag a product, or focus its handle
+            and use Space and the arrow keys. Each move saves at once.
           </p>
         </div>
       </div>
diff --git a/src/features/catalog/components/product-grid.tsx b/src/features/catalog/components/product-grid.tsx
deleted file mode 100644
index 8e02855..0000000
--- a/src/features/catalog/components/product-grid.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { StoreIcon } from "lucide-react";
-
-import {
-  Empty,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/components/ui/empty";
-
-import { getActiveProducts } from "../queries";
-import { ProductCard } from "./product-card";
-
-// The first row loads eagerly: it is what a visitor sees without scrolling.
-const EAGER_CARDS = 4;
-
-export async function ProductGrid() {
-  const products = await getActiveProducts();
-
-  if (products.length === 0) {
-    return (
-      <Empty className="border">
-        <EmptyHeader>
-          <EmptyMedia variant="icon">
-            <StoreIcon aria-hidden="true" />
-          </EmptyMedia>
-          <EmptyTitle>
-            <h2>Nothing for sale just yet</h2>
-          </EmptyTitle>
-          <EmptyDescription>New products are on their way. Check back soon.</EmptyDescription>
-        </EmptyHeader>
-      </Empty>
-    );
-  }
-
-  return (
-    <section aria-labelledby="products-heading" className="flex flex-col gap-6">
-      <h2 id="products-heading" className="font-heading text-3xl">
-        Shop all
-      </h2>
-      <ul className="grid grid-cols-2 gap-x-4 gap-y-10 sm:grid-cols-3 lg:grid-cols-4 lg:gap-x-6">
-        {products.map((product, index) => (
-          <ProductCard key={product.id} product={product} priority={index < EAGER_CARDS} />
-        ))}
-      </ul>
-    </section>
-  );
-}
diff --git a/src/features/catalog/listing/components/active-filters.tsx b/src/features/catalog/listing/components/active-filters.tsx
new file mode 100644
index 0000000..fc8adc3
--- /dev/null
+++ b/src/features/catalog/listing/components/active-filters.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { XIcon } from "lucide-react";
+import Link from "next/link";
+
+import { useStoreFormat } from "@/components/store-format-provider";
+import { buttonVariants } from "@/components/ui/button";
+import { formatMoney } from "@/lib/money";
+import { cn } from "@/lib/utils";
+
+import type { FacetGroup } from "../listing";
+import { clearedFilters, type ListingState, toggleOption, withChange } from "../params";
+import { useListingNav } from "./listing-nav";
+
+type Chip = { readonly id: string; readonly label: string; readonly next: ListingState };
+
+function chips(
+  state: ListingState,
+  groups: readonly FacetGroup[],
+  money: (cents: number) => string,
+): readonly Chip[] {
+  const options = state.options.flatMap((option) => {
+    const group = groups.find((candidate) => candidate.key === option.key);
+    return option.values.map((value) => ({
+      id: `${option.key}=${value}`,
+      label: `${group?.label ?? option.key}: ${group?.values.find((v) => v.key === value)?.label ?? value}`,
+      next: toggleOption(state, option.key, value),
+    }));
+  });
+  return [
+    ...options,
+    ...(state.minCents === null
+      ? []
+      : [
+          {
+            id: "min",
+            label: `Min ${money(state.minCents)}`,
+            next: withChange(state, { minCents: null }),
+          },
+        ]),
+    ...(state.maxCents === null
+      ? []
+      : [
+          {
+            id: "max",
+            label: `Max ${money(state.maxCents)}`,
+            next: withChange(state, { maxCents: null }),
+          },
+        ]),
+    ...(state.inStock
+      ? [{ id: "stock", label: "In stock", next: withChange(state, { inStock: false }) }]
+      : []),
+    ...(state.onSale
+      ? [{ id: "sale", label: "On sale", next: withChange(state, { onSale: false }) }]
+      : []),
+  ];
+}
+
+// spec 0013, AC-20: each active filter as a removable chip, plus Clear all (the query stays).
+// Links, so they work without JavaScript; with it, Next keeps the page and the panel.
+export function ActiveFilters({ groups }: { readonly groups: readonly FacetGroup[] }) {
+  const { state, href } = useListingNav();
+  const format = useStoreFormat();
+  const list = chips(state, groups, (cents) => formatMoney(cents, format));
+  if (list.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <ul aria-label="Active filters" className="flex flex-wrap gap-2">
+        {list.map((chip) => (
+          <li key={chip.id}>
+            <Link
+              href={href(chip.next)}
+              scroll={false}
+              className={cn(
+                buttonVariants({ variant: "secondary", size: "sm" }),
+                "h-9 rounded-full pr-2.5 pl-3.5",
+              )}
+            >
+              {chip.label}
+              <XIcon data-icon="inline-end" aria-hidden="true" />
+              <span className="sr-only">, remove</span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+      <Link
+        href={href(clearedFilters(state))}
+        scroll={false}
+        className={cn(buttonVariants({ variant: "link", size: "sm" }), "h-9")}
+      >
+        Clear all
+      </Link>
+    </div>
+  );
+}
diff --git a/src/features/catalog/listing/components/filter-panel.tsx b/src/features/catalog/listing/components/filter-panel.tsx
new file mode 100644
index 0000000..a2714d5
--- /dev/null
+++ b/src/features/catalog/listing/components/filter-panel.tsx
@@ -0,0 +1,225 @@
+"use client";
+
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useHydrated } from "@/hooks/use-hydrated";
+import { cn } from "@/lib/utils";
+
+import { productCount } from "../format";
+import type { FacetGroup, PriceBounds } from "../listing";
+import { priceParam, toggleOption, withChange, withPrices } from "../params";
+import { useListingNav } from "./listing-nav";
+
+export const FILTER_FORM_ID = "listing-filters";
+
+export type FilterData = {
+  readonly groups: readonly FacetGroup[];
+  readonly inStockCount: number;
+  readonly onSaleCount: number;
+  readonly priceBounds: PriceBounds | null;
+};
+
+// Native checkboxes, not the Base UI one: it needs JavaScript to toggle, and the panel must also
+// work as a plain GET form (AC-19).
+function CheckRow({
+  id,
+  name,
+  value,
+  label,
+  count,
+  checked,
+  disabled,
+  onChange,
+}: {
+  readonly id: string;
+  readonly name: string;
+  readonly value: string;
+  readonly label: string;
+  readonly count: number;
+  readonly checked: boolean;
+  readonly disabled: boolean;
+  readonly onChange: () => void;
+}) {
+  return (
+    <div className="flex min-h-9 items-center gap-3">
+      <input
+        type="checkbox"
+        id={id}
+        name={name}
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+        className="size-4 shrink-0 accent-primary disabled:cursor-not-allowed"
+      />
+      <Label
+        htmlFor={id}
+        className={cn("flex-1 font-normal", disabled && "cursor-not-allowed opacity-60")}
+      >
+        {label}
+        <span aria-hidden="true" className="ml-auto text-muted-foreground tabular-nums">
+          {count}
+        </span>
+        <span className="sr-only">({productCount(count)})</span>
+      </Label>
+    </div>
+  );
+}
+
+const fieldsetClass = "flex min-w-0 flex-col gap-1";
+const legendClass = "mb-2 text-sm font-medium";
+
+// AC-15: Min and Max in major units, applied on blur or Enter. The text stays what was typed
+// until the applied value changes; a dropped value empties its box.
+function PriceRange({
+  idPrefix,
+  bounds,
+}: {
+  readonly idPrefix: string;
+  readonly bounds: FilterData["priceBounds"];
+}) {
+  const { state, apply, currency } = useListingNav();
+  const shown = (cents: number | null) => (cents === null ? "" : priceParam(cents, currency));
+  const applied = `${shown(state.minCents)}|${shown(state.maxCents)}`;
+  const [seen, setSeen] = useState(applied);
+  const [min, setMin] = useState(shown(state.minCents));
+  const [max, setMax] = useState(shown(state.maxCents));
+  if (seen !== applied) {
+    setSeen(applied);
+    setMin(shown(state.minCents));
+    setMax(shown(state.maxCents));
+  }
+
+  function commit() {
+    const next = withPrices(state, min.trim(), max.trim(), currency);
+    setMin(shown(next.minCents));
+    setMax(shown(next.maxCents));
+    if (next.minCents !== state.minCents || next.maxCents !== state.maxCents) apply(next);
+  }
+
+  const field = (
+    which: "min" | "max",
+    value: string,
+    set: (text: string) => void,
+    placeholder: number | undefined,
+  ) => (
+    <div className="flex min-w-0 flex-1 flex-col gap-2">
+      <Label htmlFor={`${idPrefix}-${which}`}>
+        {which === "min" ? "Min" : "Max"} ({currency})
+      </Label>
+      <Input
+        id={`${idPrefix}-${which}`}
+        name={which}
+        inputMode="decimal"
+        autoComplete="off"
+        value={value}
+        placeholder={placeholder === undefined ? undefined : priceParam(placeholder, currency)}
+        onChange={(event) => set(event.target.value)}
+        onBlur={commit}
+        onKeyDown={(event) => {
+          if (event.key !== "Enter") return;
+          event.preventDefault();
+          commit();
+        }}
+        className="h-11"
+      />
+    </div>
+  );
+
+  return (
+    <fieldset className={fieldsetClass}>
+      <legend className={legendClass}>Price</legend>
+      <div className="flex gap-3">
+        {field("min", min, setMin, bounds?.minCents)}
+        {field("max", max, setMax, bounds?.maxCents)}
+      </div>
+    </fieldset>
+  );
+}
+
+// spec 0013, AC-11 to AC-15: price, stock, sale and one group per option type. A GET form to
+// the listing's own path: with JavaScript each change applies at once, without it Apply submits.
+export function FilterPanel({
+  idPrefix,
+  formId,
+  data,
+}: {
+  readonly idPrefix: string;
+  readonly formId: string;
+  readonly data: FilterData;
+}) {
+  const { state, apply, kind, path } = useListingNav();
+  const hydrated = useHydrated();
+
+  return (
+    <form
+      id={formId}
+      method="get"
+      action={path}
+      aria-label="Filters"
+      className="flex flex-col gap-6"
+      onSubmit={(event) => {
+        if (hydrated) event.preventDefault();
+      }}
+    >
+      {kind === "search" ? <input type="hidden" name="q" value={state.q} /> : null}
+      <PriceRange idPrefix={idPrefix} bounds={data.priceBounds} />
+      <fieldset className={fieldsetClass}>
+        <legend className={legendClass}>Availability</legend>
+        <CheckRow
+          id={`${idPrefix}-stock`}
+          name="stock"
+          value="1"
+          label="In stock only"
+          count={data.inStockCount}
+          checked={state.inStock}
+          disabled={false}
+          onChange={() => apply(withChange(state, { inStock: !state.inStock }))}
+        />
+        <CheckRow
+          id={`${idPrefix}-sale`}
+          name="sale"
+          value="1"
+          label="On sale only"
+          count={data.onSaleCount}
+          checked={state.onSale}
+          disabled={false}
+          onChange={() => apply(withChange(state, { onSale: !state.onSale }))}
+        />
+      </fieldset>
+      {data.groups.map((group) => {
+        const selected = state.options.find((option) => option.key === group.key)?.values ?? [];
+        return (
+          <fieldset key={group.key} className={fieldsetClass}>
+            <legend className={legendClass}>{group.label}</legend>
+            {group.values.map((value) => {
+              const checked = selected.includes(value.key);
+              return (
+                <CheckRow
+                  key={value.key}
+                  id={`${idPrefix}-${group.key}-${value.key}`}
+                  name={group.key}
+                  value={value.key}
+                  label={value.label}
+                  count={value.count}
+                  checked={checked}
+                  // AC-14: nothing would match with it, unless it is already on.
+                  disabled={value.count === 0 && !checked}
+                  onChange={() => apply(toggleOption(state, group.key, value.key))}
+                />
+              );
+            })}
+          </fieldset>
+        );
+      })}
+      {hydrated ? null : (
+        <Button type="submit" className="h-11">
+          Apply
+        </Button>
+      )}
+    </form>
+  );
+}
diff --git a/src/features/catalog/listing/components/filter-sheet.tsx b/src/features/catalog/listing/components/filter-sheet.tsx
new file mode 100644
index 0000000..effcd54
--- /dev/null
+++ b/src/features/catalog/listing/components/filter-sheet.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { SlidersHorizontalIcon } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+
+import { productCount } from "../format";
+import { activeFilterCount } from "../params";
+import { type FilterData, FilterPanel } from "./filter-panel";
+import { useListingNav } from "./listing-nav";
+
+// spec 0013, AC-20: below lg the panel opens in a Sheet. Its open state lives here, above the
+// results, so it stays open (and keeps focus) while each change applies.
+export function FilterSheet({
+  total,
+  data,
+}: {
+  readonly total: number;
+  readonly data: FilterData;
+}) {
+  const { state } = useListingNav();
+  const [open, setOpen] = useState(false);
+  const count = activeFilterCount(state);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger render={<Button variant="outline" className="h-11 lg:hidden" />}>
+        <SlidersHorizontalIcon data-icon="inline-start" aria-hidden="true" />
+        Filters
+        {count > 0 ? (
+          <span className="tabular-nums">
+            <span aria-hidden="true">({count})</span>
+            <span className="sr-only">, {count} active</span>
+          </span>
+        ) : null}
+      </SheetTrigger>
+      <SheetContent side="left" className="w-full max-w-sm">
+        <SheetHeader>
+          <SheetTitle>Filters</SheetTitle>
+        </SheetHeader>
+        <div className="flex-1 overflow-y-auto px-4">
+          <FilterPanel idPrefix="sheet-filters" formId="listing-filters-sheet" data={data} />
+        </div>
+        <SheetFooter>
+          <SheetClose render={<Button className="h-11" />}>Show {productCount(total)}</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/src/features/catalog/listing/components/listing-controls.tsx b/src/features/catalog/listing/components/listing-controls.tsx
new file mode 100644
index 0000000..38d21bc
--- /dev/null
+++ b/src/features/catalog/listing/components/listing-controls.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { useHydrated } from "@/hooks/use-hydrated";
+import { cn } from "@/lib/utils";
+
+import { productCount } from "../format";
+import type { ListingKind, ListingState } from "../params";
+import { ActiveFilters } from "./active-filters";
+import { type FilterData, FILTER_FORM_ID, FilterPanel } from "./filter-panel";
+import { FilterSheet } from "./filter-sheet";
+import { ListingNavProvider, useListingNav } from "./listing-nav";
+import { SortSelect } from "./sort-select";
+
+// The results heading: visible on home ("Shop all"), for screen readers elsewhere.
+export type ListingHeading = { readonly text: string; readonly visible: boolean };
+
+type ListingControlsProps = FilterData & {
+  readonly kind: ListingKind;
+  readonly path: string;
+  readonly heading: ListingHeading;
+  readonly state: ListingState;
+  readonly total: number;
+  // The results: the grid and pagination, or the no results state.
+  readonly children: React.ReactNode;
+};
+
+function ResultsArea({
+  heading,
+  total,
+  data,
+  children,
+}: {
+  readonly heading: ListingHeading;
+  readonly total: number;
+  readonly data: FilterData;
+  readonly children: React.ReactNode;
+}) {
+  const { pending } = useListingNav();
+  const hydrated = useHydrated();
+
+  return (
+    <section aria-labelledby="results-heading" className="flex min-w-0 flex-col gap-6">
+      <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+        <div className="flex flex-col gap-1">
+          <h2
+            id="results-heading"
+            className={heading.visible ? "font-heading text-3xl" : "sr-only"}
+          >
+            {heading.text}
+          </h2>
+          {/* AC-20: announced politely after each change. */}
+          <p role="status" className="text-sm text-muted-foreground tabular-nums">
+            {productCount(total)}
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          {hydrated ? <FilterSheet total={total} data={data} /> : null}
+          {/* Without JavaScript the sort joins the filter form, so the panel's one Apply
+              (AC-19) submits both. */}
+          <SortSelect />
+        </div>
+      </div>
+      <ActiveFilters groups={data.groups} />
+      <div
+        aria-busy={pending}
+        className={cn("flex flex-col gap-12 transition-opacity", pending && "opacity-60")}
+      >
+        {children}
+      </div>
+    </section>
+  );
+}
+
+// spec 0013, AC-11 to AC-21: the filter sidebar (a Sheet on small screens), sort, chips and the
+// live result count around the server rendered results.
+export function ListingControls({
+  kind,
+  path,
+  heading,
+  state,
+  total,
+  groups,
+  inStockCount,
+  onSaleCount,
+  priceBounds,
+  children,
+}: ListingControlsProps) {
+  const hydrated = useHydrated();
+  const data: FilterData = { groups, inStockCount, onSaleCount, priceBounds };
+
+  return (
+    <ListingNavProvider kind={kind} path={path} state={state}>
+      <div className="grid items-start gap-8 lg:grid-cols-[15rem_minmax(0,1fr)] lg:gap-12">
+        {/* Without JavaScript there is no Sheet, so the panel shows on every screen size. */}
+        <aside
+          aria-labelledby="filters-heading"
+          className={cn("flex flex-col gap-4", hydrated && "hidden lg:flex")}
+        >
+          <h2 id="filters-heading" className="text-base font-medium">
+            Filters
+          </h2>
+          <FilterPanel idPrefix="filters" formId={FILTER_FORM_ID} data={data} />
+        </aside>
+        <ResultsArea heading={heading} total={total} data={data}>
+          {children}
+        </ResultsArea>
+      </div>
+    </ListingNavProvider>
+  );
+}
diff --git a/src/features/catalog/listing/components/listing-empty.tsx b/src/features/catalog/listing/components/listing-empty.tsx
new file mode 100644
index 0000000..805182c
--- /dev/null
+++ b/src/features/catalog/listing/components/listing-empty.tsx
@@ -0,0 +1,122 @@
+import { PackageOpenIcon, SearchIcon, SearchXIcon, StoreIcon } from "lucide-react";
+import Link from "next/link";
+
+import { buttonVariants } from "@/components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { homePath } from "../../paths";
+import type { ListingKind } from "../params";
+
+function AllProductsLink({ primary = false }: { readonly primary?: boolean }) {
+  return (
+    <Link
+      href={homePath}
+      className={buttonVariants({ variant: primary ? "default" : "outline", className: "h-11" })}
+    >
+      See all products
+    </Link>
+  );
+}
+
+// spec 0005: the home page before anything is for sale.
+export function EmptyCatalog() {
+  return (
+    <Empty className="border">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <StoreIcon aria-hidden="true" />
+        </EmptyMedia>
+        <EmptyTitle>
+          <h2>Nothing for sale just yet</h2>
+        </EmptyTitle>
+        <EmptyDescription>New products are on their way. Check back soon.</EmptyDescription>
+      </EmptyHeader>
+    </Empty>
+  );
+}
+
+// spec 0013, AC-3 and AC-21: a category with no listable products, or a search nothing matches.
+// No filters either: there is nothing to narrow.
+export function EmptyScope({ kind }: { readonly kind: Exclude<ListingKind, "home"> }) {
+  return kind === "category" ? (
+    <Empty className="border">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <PackageOpenIcon aria-hidden="true" />
+        </EmptyMedia>
+        <EmptyTitle>
+          <h2>Nothing here yet</h2>
+        </EmptyTitle>
+        <EmptyDescription>Products for this category are on their way.</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <AllProductsLink primary />
+      </EmptyContent>
+    </Empty>
+  ) : (
+    <Empty className="border">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <SearchXIcon aria-hidden="true" />
+        </EmptyMedia>
+        <EmptyTitle>
+          <h2>No products match.</h2>
+        </EmptyTitle>
+        <EmptyDescription>Try fewer or shorter words.</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <AllProductsLink />
+      </EmptyContent>
+    </Empty>
+  );
+}
+
+// spec 0013, AC-21: the filters leave nothing.
+export function NoResults({
+  kind,
+  clearHref,
+}: {
+  readonly kind: ListingKind;
+  // The same listing without filters; null when none are on.
+  readonly clearHref: string | null;
+}) {
+  return (
+    <Empty className="border">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <SearchXIcon aria-hidden="true" />
+        </EmptyMedia>
+        <EmptyTitle>
+          <h3>No products match.</h3>
+        </EmptyTitle>
+        {kind === "search" ? (
+          <EmptyDescription>Try fewer or shorter words.</EmptyDescription>
+        ) : null}
+      </EmptyHeader>
+      <EmptyContent className="flex-row flex-wrap justify-center">
+        {clearHref !== null ? (
+          <Link href={clearHref} scroll={false} className={buttonVariants({ className: "h-11" })}>
+            Clear filters
+          </Link>
+        ) : null}
+        {kind === "search" ? <AllProductsLink /> : null}
+      </EmptyContent>
+    </Empty>
+  );
+}
+
+// spec 0013, AC-9: a query too short to search.
+export function SearchPrompt() {
+  return (
+    <p className="flex items-center gap-2 text-muted-foreground">
+      <SearchIcon aria-hidden="true" className="size-4" />
+      Type at least 2 characters to search
+    </p>
+  );
+}
diff --git a/src/features/catalog/listing/components/listing-nav.tsx b/src/features/catalog/listing/components/listing-nav.tsx
new file mode 100644
index 0000000..3be5799
--- /dev/null
+++ b/src/features/catalog/listing/components/listing-nav.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { createContext, useContext, useOptimistic, useTransition } from "react";
+
+import { useStoreFormat } from "@/components/store-format-provider";
+
+import { type ListingKind, listingLinks, type ListingState } from "../params";
+
+type ListingNav = {
+  // The state on screen: the URL's, or the one a change is moving to.
+  readonly state: ListingState;
+  readonly pending: boolean;
+  readonly kind: ListingKind;
+  readonly path: string;
+  readonly currency: string;
+  readonly href: (state: ListingState) => string;
+  readonly apply: (next: ListingState) => void;
+};
+
+const ListingNavContext = createContext<ListingNav | null>(null);
+
+// spec 0013, AC-19: every change pushes the new URL in a transition, so the results swap without
+// a full load, the panel (and an open Sheet) keeps its state and focus, and Back undoes it. The
+// optimistic state lets a second click build on the first before the server answers.
+export function ListingNavProvider({
+  kind,
+  path,
+  state,
+  children,
+}: {
+  readonly kind: ListingKind;
+  readonly path: string;
+  readonly state: ListingState;
+  readonly children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const { currency } = useStoreFormat();
+  const [shown, setShown] = useOptimistic(state);
+  const [pending, startTransition] = useTransition();
+  const href = listingLinks(path, kind, currency);
+
+  function apply(next: ListingState) {
+    startTransition(() => {
+      setShown(next);
+      router.push(href(next), { scroll: false });
+    });
+  }
+
+  return (
+    <ListingNavContext.Provider
+      value={{ state: shown, pending, kind, path, currency, href, apply }}
+    >
+      {children}
+    </ListingNavContext.Provider>
+  );
+}
+
+export function useListingNav(): ListingNav {
+  const nav = useContext(ListingNavContext);
+  if (!nav) throw new Error("useListingNav must be used inside ListingNavProvider.");
+  return nav;
+}
diff --git a/src/features/catalog/listing/components/listing-skeleton.tsx b/src/features/catalog/listing/components/listing-skeleton.tsx
new file mode 100644
index 0000000..3cb849f
--- /dev/null
+++ b/src/features/catalog/listing/components/listing-skeleton.tsx
@@ -0,0 +1,32 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+// While a listing renders: the sidebar and a row of cards.
+export function ListingSkeleton() {
+  return (
+    <div
+      className="grid items-start gap-8 lg:grid-cols-[15rem_minmax(0,1fr)] lg:gap-12"
+      aria-hidden="true"
+    >
+      <div className="hidden flex-col gap-4 lg:flex">
+        <Skeleton className="h-5 w-20" />
+        <Skeleton className="h-11 w-full" />
+        <Skeleton className="h-24 w-full" />
+      </div>
+      <div className="flex flex-col gap-6">
+        <div className="flex items-end justify-between gap-4">
+          <Skeleton className="h-5 w-24" />
+          <Skeleton className="h-11 w-48" />
+        </div>
+        <div className="grid grid-cols-2 gap-x-4 gap-y-10 sm:grid-cols-3 lg:gap-x-6 xl:grid-cols-4">
+          {Array.from({ length: 4 }, (_, index) => (
+            <div key={index} className="flex flex-col gap-3">
+              <Skeleton className="aspect-product w-full" />
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-4 w-1/3" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/catalog/listing/components/listing-view.tsx b/src/features/catalog/listing/components/listing-view.tsx
new file mode 100644
index 0000000..c50c31e
--- /dev/null
+++ b/src/features/catalog/listing/components/listing-view.tsx
@@ -0,0 +1,78 @@
+import { env } from "@/lib/env";
+
+import { ProductCard } from "../../components/product-card";
+import { getListingIndex } from "../index-query";
+import { buildListing } from "../listing";
+import { clearedFilters, type ListingScope, listingLinks, parseListingParams } from "../params";
+import { ListingControls, type ListingHeading } from "./listing-controls";
+import { EmptyCatalog, EmptyScope, NoResults, SearchPrompt } from "./listing-empty";
+import { Pagination } from "./pagination";
+
+// The first row loads eagerly: it is what a visitor sees without scrolling.
+const EAGER_CARDS = 4;
+
+type SearchParams = Record<string, string | string[] | undefined>;
+
+// spec 0013: one listing (home, category or search) for the URL's state. It reads the search
+// params, so it renders per request behind the page's Suspense boundary (AC-22). Nothing here
+// logs: search text never leaves the request (AC-10).
+export async function ListingView({
+  scope,
+  path,
+  searchParams,
+  heading,
+}: {
+  readonly scope: ListingScope;
+  // The listing's own path, without a query.
+  readonly path: string;
+  readonly searchParams: Promise<SearchParams>;
+  readonly heading: ListingHeading;
+}) {
+  const { kind } = scope;
+  const state = parseListingParams(await searchParams, kind, env.STORE_CURRENCY);
+  const listing = buildListing(await getListingIndex(), scope, state, env.STORE_LOCALE);
+
+  if (listing.status === "prompt") return <SearchPrompt />;
+  if (listing.scopeTotal === 0) {
+    return kind === "home" ? <EmptyCatalog /> : <EmptyScope kind={kind} />;
+  }
+  const href = listingLinks(path, kind, env.STORE_CURRENCY);
+
+  return (
+    <ListingControls
+      kind={kind}
+      path={path}
+      heading={heading}
+      state={listing.state}
+      total={listing.total}
+      groups={listing.groups}
+      inStockCount={listing.inStockCount}
+      onSaleCount={listing.onSaleCount}
+      priceBounds={listing.priceBounds}
+    >
+      {listing.total === 0 ? (
+        <NoResults
+          kind={kind}
+          clearHref={listing.activeFilters > 0 ? href(clearedFilters(listing.state)) : null}
+        />
+      ) : (
+        <>
+          <ul className="grid grid-cols-2 gap-x-4 gap-y-10 sm:grid-cols-3 lg:gap-x-6 xl:grid-cols-4">
+            {listing.products.map((product, index) => (
+              <ProductCard
+                key={product.id}
+                product={product}
+                priority={listing.page === 1 && index < EAGER_CARDS}
+              />
+            ))}
+          </ul>
+          <Pagination
+            page={listing.page}
+            pageCount={listing.pageCount}
+            pageHref={(page) => href({ ...listing.state, page })}
+          />
+        </>
+      )}
+    </ListingControls>
+  );
+}
diff --git a/src/features/catalog/listing/components/pagination.tsx b/src/features/catalog/listing/components/pagination.tsx
new file mode 100644
index 0000000..404d9a8
--- /dev/null
+++ b/src/features/catalog/listing/components/pagination.tsx
@@ -0,0 +1,74 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import Link from "next/link";
+
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+import { pageItems } from "../pagination";
+
+const pageLink = cn(buttonVariants({ variant: "ghost" }), "size-11 px-0 tabular-nums");
+
+// spec 0013, AC-5: numbered page links; none at all for a single page. Plain links, so paging
+// works without JavaScript and every page has its own URL.
+export function Pagination({
+  page: current,
+  pageCount,
+  pageHref: href,
+}: {
+  readonly page: number;
+  readonly pageCount: number;
+  readonly pageHref: (page: number) => string;
+}) {
+  if (pageCount <= 1) return null;
+
+  return (
+    <nav aria-label="Pagination" className="flex justify-center">
+      <ul className="flex flex-wrap items-center gap-1">
+        {current > 1 ? (
+          <li>
+            <Link
+              href={href(current - 1)}
+              className={cn(buttonVariants({ variant: "ghost" }), "h-11")}
+            >
+              <ChevronLeftIcon data-icon="inline-start" aria-hidden="true" />
+              Previous
+            </Link>
+          </li>
+        ) : null}
+        {pageItems(current, pageCount).map((item, index) =>
+          item.kind === "gap" ? (
+            <li key={`gap-${index}`} aria-hidden="true" className="px-2 text-muted-foreground">
+              …
+            </li>
+          ) : (
+            <li key={item.page}>
+              <Link
+                href={href(item.page)}
+                aria-current={item.page === current ? "page" : undefined}
+                aria-label={`Page ${item.page}`}
+                className={cn(
+                  pageLink,
+                  item.page === current &&
+                    "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
+                )}
+              >
+                {item.page}
+              </Link>
+            </li>
+          ),
+        )}
+        {current < pageCount ? (
+          <li>
+            <Link
+              href={href(current + 1)}
+              className={cn(buttonVariants({ variant: "ghost" }), "h-11")}
+            >
+              Next
+              <ChevronRightIcon data-icon="inline-end" aria-hidden="true" />
+            </Link>
+          </li>
+        ) : null}
+      </ul>
+    </nav>
+  );
+}
diff --git a/src/features/catalog/listing/components/search-box.tsx b/src/features/catalog/listing/components/search-box.tsx
new file mode 100644
index 0000000..6918e21
--- /dev/null
+++ b/src/features/catalog/listing/components/search-box.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { SearchIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { useHydrated } from "@/hooks/use-hydrated";
+import { cn } from "@/lib/utils";
+
+import { searchPath } from "../../paths";
+
+// spec 0013, AC-6: a GET form to /search, so it works without JavaScript. The text is never
+// logged or sent anywhere else (AC-10).
+export function SearchForm({
+  id,
+  label,
+  defaultValue,
+  className,
+}: {
+  readonly id: string;
+  // The landmark's name: the header box and the /search box both sit on /search.
+  readonly label: string;
+  readonly defaultValue?: string;
+  readonly className?: string;
+}) {
+  return (
+    <form
+      role="search"
+      aria-label={label}
+      action={searchPath}
+      className={cn("flex items-center gap-2", className)}
+    >
+      <Label htmlFor={id} className="sr-only">
+        Search products
+      </Label>
+      <Input
+        id={id}
+        type="search"
+        name="q"
+        defaultValue={defaultValue}
+        autoComplete="off"
+        enterKeyHint="search"
+        placeholder="Search products"
+        className="h-11 min-w-0 flex-1"
+      />
+      <Button type="submit" variant="outline" size="icon" aria-label="Search" className="size-11">
+        <SearchIcon aria-hidden="true" />
+      </Button>
+    </form>
+  );
+}
+
+// The header box never prefills: that would need the search params in the layout (spec 0013,
+// Decision). It shows from md, where the desktop nav does (AC-6: always visible on desktop);
+// below that it sits behind a Search button, which before hydration is a plain link to /search,
+// which has its own box.
+export function HeaderSearch() {
+  const hydrated = useHydrated();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SearchForm id="header-search" label="Store search" className="hidden w-48 md:flex lg:w-64" />
+      {hydrated ? (
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetTrigger
+            aria-label="Search"
+            render={<Button variant="ghost" size="icon" className="size-11 md:hidden" />}
+          >
+            <SearchIcon className="size-5" aria-hidden="true" />
+          </SheetTrigger>
+          <SheetContent side="top">
+            <SheetHeader>
+              <SheetTitle>Search</SheetTitle>
+            </SheetHeader>
+            <SearchForm id="header-search-mobile" label="Store search" className="px-4 pb-6" />
+          </SheetContent>
+        </Sheet>
+      ) : (
+        <Link
+          href={searchPath}
+          aria-label="Search"
+          className={cn(buttonVariants({ variant: "ghost", size: "icon" }), "size-11 md:hidden")}
+        >
+          <SearchIcon className="size-5" aria-hidden="true" />
+        </Link>
+      )}
+    </>
+  );
+}
diff --git a/src/features/catalog/listing/components/sort-select.tsx b/src/features/catalog/listing/components/sort-select.tsx
new file mode 100644
index 0000000..d3cadd6
--- /dev/null
+++ b/src/features/catalog/listing/components/sort-select.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { ChevronDownIcon } from "lucide-react";
+
+import { Label } from "@/components/ui/label";
+
+import { type SortKey, sortsFor, withChange } from "../params";
+import { FILTER_FORM_ID } from "./filter-panel";
+import { useListingNav } from "./listing-nav";
+
+const sortLabels: Readonly<Record<SortKey, string>> = {
+  relevance: "Best match",
+  featured: "Featured",
+  newest: "Newest",
+  "price-asc": "Price low to high",
+  "price-desc": "Price high to low",
+  name: "Name A to Z",
+};
+
+// spec 0013, AC-16. A native select: it joins the filter form, so it also submits without
+// JavaScript (the Base UI Select needs it).
+export function SortSelect() {
+  const { state, apply, kind } = useListingNav();
+  return (
+    <div className="flex items-center gap-2">
+      <Label htmlFor="listing-sort" className="shrink-0 font-normal text-muted-foreground">
+        Sort by
+      </Label>
+      <div className="relative">
+        <select
+          id="listing-sort"
+          name="sort"
+          form={FILTER_FORM_ID}
+          value={state.sort}
+          onChange={(event) => {
+            const sort = sortsFor(kind).find((key) => key === event.target.value);
+            if (sort) apply(withChange(state, { sort }));
+          }}
+          className="h-11 appearance-none rounded-md border border-input bg-background py-2 pr-9 pl-3 text-sm shadow-xs"
+        >
+          {sortsFor(kind).map((key) => (
+            <option key={key} value={key}>
+              {sortLabels[key]}
+            </option>
+          ))}
+        </select>
+        <ChevronDownIcon
+          aria-hidden="true"
+          className="pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/catalog/listing/format.ts b/src/features/catalog/listing/format.ts
new file mode 100644
index 0000000..5d1a9d6
--- /dev/null
+++ b/src/features/catalog/listing/format.ts
@@ -0,0 +1,4 @@
+// "1 product", "12 products": the result count, the Sheet's close button and each filter count.
+export function productCount(count: number): string {
+  return `${count} ${count === 1 ? "product" : "products"}`;
+}
diff --git a/src/features/catalog/listing/index-query.ts b/src/features/catalog/listing/index-query.ts
new file mode 100644
index 0000000..5c01476
--- /dev/null
+++ b/src/features/catalog/listing/index-query.ts
@@ -0,0 +1,52 @@
+import "server-only";
+
+import { cacheLife, cacheTag } from "next/cache";
+
+import { catalogTag, categoriesTag } from "@/lib/cache-tags";
+import { db } from "@/lib/db";
+
+import { firstImageSelect, toImage } from "../queries";
+import { buildIndexProduct } from "./index-rows";
+import type { ListingProduct } from "./listing";
+
+// spec 0013, AC-22: every listable product (active, with a non archived variant) read once into
+// one cached list; search, filters and counts then run in memory (listing.ts). Tagged catalog
+// for product writes and categories for membership and order.
+export async function getListingIndex(): Promise<readonly ListingProduct[]> {
+  "use cache";
+  cacheLife("max");
+  cacheTag(catalogTag, categoriesTag);
+
+  const products = await db.product.findMany({
+    where: { status: "active", variants: { some: { archived: false } } },
+    select: {
+      id: true,
+      name: true,
+      slug: true,
+      position: true,
+      createdAt: true,
+      images: firstImageSelect,
+      categories: { select: { categoryId: true, position: true } },
+      optionTypes: {
+        orderBy: { position: "asc" },
+        select: {
+          name: true,
+          values: { orderBy: { position: "asc" }, select: { id: true, value: true } },
+        },
+      },
+      variants: {
+        where: { archived: false },
+        orderBy: { position: "asc" },
+        select: {
+          priceCents: true,
+          compareAtPriceCents: true,
+          stockQuantity: true,
+          optionValues: { select: { optionValueId: true } },
+        },
+      },
+    },
+  });
+  return products.map((product) =>
+    buildIndexProduct({ ...product, image: toImage(product.images[0]) }),
+  );
+}
diff --git a/src/features/catalog/listing/index-rows.ts b/src/features/catalog/listing/index-rows.ts
new file mode 100644
index 0000000..150ceca
--- /dev/null
+++ b/src/features/catalog/listing/index-rows.ts
@@ -0,0 +1,94 @@
+import { facetKey, searchWords } from "@/lib/search-text";
+
+import type { ProductImage } from "../queries";
+import type { ListingOptionType, ListingProduct } from "./listing";
+
+// Pure: one product row as the listing index stores it (spec 0013, Data model sketch).
+
+export type IndexRow = {
+  readonly id: string;
+  readonly name: string;
+  readonly slug: string;
+  readonly position: number;
+  readonly createdAt: Date;
+  readonly image: ProductImage;
+  readonly categories: readonly { readonly categoryId: string; readonly position: number }[];
+  // In admin position order, values too.
+  readonly optionTypes: readonly {
+    readonly name: string;
+    readonly values: readonly { readonly id: string; readonly value: string }[];
+  }[];
+  // Non archived only.
+  readonly variants: readonly {
+    readonly priceCents: number;
+    readonly compareAtPriceCents: number | null;
+    readonly stockQuantity: number;
+    readonly optionValues: readonly { readonly optionValueId: string }[];
+  }[];
+};
+
+// AC-13: types whose names fold to one key merge into one (the first spelling labels it), and
+// values merge by key inside it; a type or value with an empty key is skipped. Labels are kept
+// once per product and variants point at them by index, so the cache entry stays small.
+// The index of the entry with this key, appending a new one (the first spelling) when absent.
+function slotFor<T extends { readonly key: string }>(
+  list: T[],
+  key: string,
+  create: () => T,
+): number {
+  const found = list.findIndex((entry) => entry.key === key);
+  return found >= 0 ? found : list.push(create()) - 1;
+}
+
+export function buildIndexProduct(row: IndexRow): ListingProduct {
+  const types: { key: string; label: string; values: { key: string; label: string }[] }[] = [];
+  // option value id → [type index, value index]
+  const place = new Map<string, readonly [number, number]>();
+  for (const type of row.optionTypes) {
+    const key = facetKey(type.name);
+    if (key === "") continue;
+    const t = slotFor(types, key, () => ({ key, label: type.name.trim(), values: [] }));
+    const merged = types[t];
+    if (!merged) continue;
+    for (const value of type.values) {
+      const valueKey = facetKey(value.value);
+      if (valueKey === "") continue;
+      const v = slotFor(merged.values, valueKey, () => ({
+        key: valueKey,
+        label: value.value.trim(),
+      }));
+      place.set(value.id, [t, v]);
+    }
+  }
+
+  const optionTypes: readonly ListingOptionType[] = types;
+  return {
+    id: row.id,
+    name: row.name,
+    slug: row.slug,
+    nameWords: searchWords(row.name),
+    position: row.position,
+    createdAtMs: row.createdAt.getTime(),
+    image: row.image,
+    categoryPositions: Object.fromEntries(
+      row.categories.map((link) => [link.categoryId, link.position]),
+    ),
+    optionTypes,
+    variants: row.variants.map((variant) => {
+      // A variant counts each value key once (two merged types may both hold "red").
+      const seen = new Set<string>();
+      const valueIndexes = variant.optionValues.flatMap((link) => {
+        const at = place.get(link.optionValueId);
+        if (!at || seen.has(`${at[0]}:${at[1]}`)) return [];
+        seen.add(`${at[0]}:${at[1]}`);
+        return [at];
+      });
+      return {
+        priceCents: variant.priceCents,
+        compareAtPriceCents: variant.compareAtPriceCents,
+        inStock: variant.stockQuantity > 0,
+        valueIndexes,
+      };
+    }),
+  };
+}
diff --git a/src/features/catalog/listing/listing.test.ts b/src/features/catalog/listing/listing.test.ts
new file mode 100644
index 0000000..3a587c5
--- /dev/null
+++ b/src/features/catalog/listing/listing.test.ts
@@ -0,0 +1,563 @@
+import { describe, expect, it } from "vitest";
+
+import { buildIndexProduct } from "./index-rows";
+import { buildListing, type Listing, type ListingProduct, PAGE_SIZE } from "./listing";
+import { type ListingScope, parseListingParams } from "./params";
+
+const image = { src: "/placeholder.svg", alt: "", width: null, height: null };
+
+type Spec = {
+  readonly name: string;
+  readonly position?: number;
+  readonly createdAt?: number;
+  readonly categories?: Record<string, number>;
+  // Option type name → values in admin order.
+  readonly options?: Record<string, readonly string[]>;
+  readonly variants?: readonly {
+    readonly price?: number;
+    readonly stock?: number;
+    readonly compareAt?: number;
+    // Option type name → value.
+    readonly values?: Record<string, string>;
+  }[];
+};
+
+let serial = 0;
+
+// Through buildIndexProduct, so the fixtures have the index's real shape (merged keys, indexes).
+function product(spec: Spec): ListingProduct {
+  serial += 1;
+  const id = `00000000-0000-7000-8000-${String(serial).padStart(12, "0")}`;
+  const types = Object.entries(spec.options ?? {}).map(([name, values], t) => ({
+    name,
+    values: values.map((value, v) => ({ id: `${id}:${t}:${v}`, value })),
+  }));
+  const valueId = (typeName: string, value: string) => {
+    const type = types.find((candidate) => candidate.name === typeName);
+    return type?.values.find((candidate) => candidate.value === value)?.id ?? "missing";
+  };
+  return buildIndexProduct({
+    id,
+    name: spec.name,
+    slug: spec.name.toLowerCase().replace(/[^a-z0-9]+/g, "-"),
+    position: spec.position ?? 0,
+    createdAt: new Date(spec.createdAt ?? 0),
+    image,
+    categories: Object.entries(spec.categories ?? {}).map(([categoryId, position]) => ({
+      categoryId,
+      position,
+    })),
+    optionTypes: types,
+    variants: (spec.variants ?? [{}]).map((variant) => ({
+      priceCents: variant.price ?? 1000,
+      compareAtPriceCents: variant.compareAt ?? null,
+      stockQuantity: variant.stock ?? 5,
+      optionValues: Object.entries(variant.values ?? {}).map(([type, value]) => ({
+        optionValueId: valueId(type, value),
+      })),
+    })),
+  });
+}
+
+function list(
+  index: readonly ListingProduct[],
+  params: Record<string, string | string[]> = {},
+  scope: ListingScope = { kind: "home" },
+): Listing {
+  const result = buildListing(index, scope, parseListingParams(params, scope.kind, "EUR"), "en");
+  if (result.status !== "ok") throw new Error("expected a listing");
+  return result;
+}
+
+const names = (listing: Listing) => listing.products.map((card) => card.name);
+
+describe("order and scope (AC-1, AC-4)", () => {
+  it("orders home by position, newest first, then id descending", () => {
+    const index = [
+      product({ name: "Old", position: 0, createdAt: 1 }),
+      product({ name: "New", position: 0, createdAt: 2 }),
+      product({ name: "Later", position: 1, createdAt: 3 }),
+      product({ name: "Twin A", position: 2, createdAt: 4 }),
+      product({ name: "Twin B", position: 2, createdAt: 4 }),
+    ];
+
+    expect(names(list(index))).toEqual(["New", "Old", "Later", "Twin B", "Twin A"]);
+  });
+
+  it("orders a category by its own positions first and lists only its products", () => {
+    const index = [
+      product({ name: "A", position: 0, categories: { linen: 2 } }),
+      product({ name: "B", position: 1, categories: { linen: 0 } }),
+      product({ name: "C", position: 2, categories: { wool: 0 } }),
+      product({ name: "D", position: 3, categories: { linen: 0 }, createdAt: 9 }),
+    ];
+
+    const listing = list(index, {}, { kind: "category", categoryId: "linen" });
+
+    // D and B tie in the category; products.position breaks it.
+    expect(names(listing)).toEqual(["B", "D", "A"]);
+    expect(listing.scopeTotal).toBe(3);
+  });
+});
+
+describe("paging (AC-5, AC-18)", () => {
+  const index = Array.from({ length: 50 }, (_, i) => product({ name: `P${i}`, position: i }));
+
+  it("shows 24 a page", () => {
+    const listing = list(index, { page: "2" });
+
+    expect(PAGE_SIZE).toBe(24);
+    expect(listing.pageCount).toBe(3);
+    expect(names(listing)[0]).toBe("P24");
+    expect(listing.products).toHaveLength(24);
+  });
+
+  it("renders the last page for a page past the end", () => {
+    const listing = list(index, { page: "999" });
+
+    expect(listing.page).toBe(3);
+    expect(listing.state.page).toBe(3);
+    expect(names(listing)).toEqual(["P48", "P49"]);
+  });
+
+  it("needs a second page from the 25th match on", () => {
+    const at = (count: number) => list(index.slice(0, count));
+
+    expect(at(24)).toMatchObject({ total: 24, pageCount: 1 });
+    expect(at(25)).toMatchObject({ total: 25, pageCount: 2 });
+  });
+
+  it("has one page when nothing matches", () => {
+    const listing = list(index, { min: "999" });
+
+    expect(listing).toMatchObject({ total: 0, page: 1, pageCount: 1, scopeTotal: 50 });
+  });
+});
+
+describe("search (AC-7 to AC-9)", () => {
+  const index = [
+    product({ name: "Kościół candle", position: 2 }),
+    product({ name: "Blue Tee", position: 1 }),
+    product({ name: "Settee", position: 0 }),
+    product({ name: "Long Sleeve T Shirt", position: 0 }),
+    product({ name: "T Shirt", position: 5 }),
+  ];
+  const search = (q: string, params: Record<string, string> = {}) =>
+    buildListing(
+      index,
+      { kind: "search" },
+      parseListingParams({ q, ...params }, "search", "EUR"),
+      "en",
+    );
+
+  it("matches folded word prefixes of the name only", () => {
+    const find = (q: string) => {
+      const result = search(q);
+      return result.status === "ok" ? names(result) : [];
+    };
+
+    expect(find("kosciol")).toEqual(["Kościół candle"]);
+    expect(find("blu tee")).toEqual(["Blue Tee"]);
+    expect(find("TEE")).toEqual(["Blue Tee"]);
+    expect(find("zzz")).toEqual([]);
+  });
+
+  it("puts names that start with the query words first, ties in Featured order (AC-8)", () => {
+    const result = search("t-shirt");
+
+    expect(result.status === "ok" && names(result)).toEqual(["T Shirt", "Long Sleeve T Shirt"]);
+  });
+
+  it("prompts instead of searching a query under 2 characters or with no words", () => {
+    expect(search("t")).toEqual({ status: "prompt" });
+    expect(search("")).toEqual({ status: "prompt" });
+    expect(search("!!")).toEqual({ status: "prompt" });
+    expect(search(" a ")).toEqual({ status: "prompt" });
+    expect(search("ab").status).toBe("ok");
+  });
+
+  it("prompts for a query of symbols or emoji only, whatever its length (AC-9)", () => {
+    expect(search("😀😀")).toEqual({ status: "prompt" });
+    expect(search("-- ** --")).toEqual({ status: "prompt" });
+  });
+
+  it("can still sort a search by another key", () => {
+    const result = search("shirt", { sort: "name" });
+
+    expect(result.status === "ok" && names(result)).toEqual(["Long Sleeve T Shirt", "T Shirt"]);
+  });
+});
+
+describe("per variant filters (AC-12)", () => {
+  const options = { Color: ["Red", "Blue"], Size: ["S", "M"] };
+  const mixed = product({
+    name: "Mixed",
+    options,
+    variants: [
+      { values: { Color: "Red", Size: "S" }, stock: 0, price: 1000 },
+      { values: { Color: "Blue", Size: "M" }, price: 3000 },
+    ],
+  });
+  const plain = product({ name: "Plain", position: 1 });
+  const index = [mixed, plain];
+
+  it("needs one variant to satisfy every option filter together", () => {
+    expect(names(list(index, { color: "red", size: "m" }))).toEqual([]);
+    expect(names(list(index, { color: "red", size: "s" }))).toEqual(["Mixed"]);
+    expect(names(list(index, { color: ["red", "blue"], size: "m" }))).toEqual(["Mixed"]);
+  });
+
+  it("drops a product whose only matching variant is sold out with In stock only", () => {
+    expect(names(list(index, { color: "red", stock: "1" }))).toEqual([]);
+    expect(names(list(index, { color: "blue", stock: "1" }))).toEqual(["Mixed"]);
+  });
+
+  it("never matches an option filter on a product without that option", () => {
+    expect(names(list(index, { color: "blue" }))).toEqual(["Mixed"]);
+  });
+
+  it("filters price on the same variant, inclusive", () => {
+    expect(names(list(index, { color: "red", min: "20" }))).toEqual([]);
+    expect(names(list(index, { min: "10", max: "10" }))).toEqual(["Mixed", "Plain"]);
+    expect(names(list(index, { min: "30" }))).toEqual(["Mixed"]);
+  });
+
+  it("counts sale only on an in stock variant with a compare at price", () => {
+    const sale = product({
+      name: "Sale",
+      variants: [{ compareAt: 2000, stock: 0 }, { stock: 3 }],
+    });
+    const realSale = product({ name: "Real sale", variants: [{ compareAt: 2000, stock: 1 }] });
+
+    expect(names(list([sale, realSale], { sale: "1" }))).toEqual(["Real sale"]);
+  });
+});
+
+describe("option groups (AC-13)", () => {
+  it("merges spellings, labels with the most common, and orders groups and values", () => {
+    const index = [
+      product({ name: "A", position: 0, options: { Colour: ["Red", "Green"], Size: ["M", "S"] } }),
+      product({ name: "B", position: 1, options: { "colour ": ["red", "Blue"] } }),
+      product({ name: "C", position: 2, options: { COLOUR: ["RED", "Blue"], Fit: ["Slim"] } }),
+    ];
+
+    const { groups } = list(index);
+
+    expect(groups.map((group) => [group.label, group.values.map((value) => value.label)])).toEqual([
+      ["Colour", ["Red", "Green", "Blue"]],
+      ["Size", ["M", "S"]],
+    ]);
+    // Fit has one value only, so it is not offered.
+    expect(groups.find((group) => group.key === "fit")).toBeUndefined();
+  });
+
+  it("merges two types with one key inside a product and counts a value once per variant", () => {
+    const twice = product({
+      name: "Twice",
+      options: { Color: ["Red", "Blue"], color: ["red"] },
+      variants: [{ values: { Color: "Red", color: "red" } }, { values: { Color: "Blue" } }],
+    });
+
+    const listing = list([twice]);
+
+    expect(twice.optionTypes).toHaveLength(1);
+    expect(listing.groups[0]?.values.map((value) => [value.key, value.count])).toEqual([
+      ["red", 1],
+      ["blue", 1],
+    ]);
+  });
+
+  it("skips empty keys and never offers a group named like a reserved param", () => {
+    const index = [
+      product({
+        name: "A",
+        options: { Sort: ["Up", "Down"], "!!": ["X", "Y"], Size: ["—", "S", "M"] },
+      }),
+    ];
+
+    const { groups } = list(index);
+
+    expect(groups.map((group) => group.key)).toEqual(["size"]);
+    expect(groups[0]?.values.map((value) => value.key)).toEqual(["s", "m"]);
+  });
+
+  it("labels a tied spelling by the first one in Featured order", () => {
+    const first = product({ name: "A", position: 0, options: { COLOR: ["Red", "Blue"] } });
+    const second = product({ name: "B", position: 1, options: { Color: ["red", "blue"] } });
+
+    expect(list([first, second]).groups[0]).toMatchObject({ label: "COLOR" });
+    expect(
+      list([
+        { ...first, position: 1 },
+        { ...second, position: 0 },
+      ]).groups[0],
+    ).toMatchObject({ label: "Color" });
+  });
+
+  it("orders groups used by as many products by label", () => {
+    const { groups } = list([
+      product({ name: "A", options: { Size: ["S", "M"], Fit: ["Slim", "Wide"] } }),
+    ]);
+
+    expect(groups.map((group) => group.label)).toEqual(["Fit", "Size"]);
+  });
+
+  it("keeps a Cyrillic option a key of its own", () => {
+    const { groups } = list([product({ name: "A", options: { Цвет: ["Красный", "Синий"] } })]);
+
+    expect(groups[0]).toMatchObject({ key: "цвет", label: "Цвет" });
+  });
+
+  it("ignores unknown groups and values in the URL, and the state says so", () => {
+    const index = [product({ name: "A", options: { Color: ["Red", "Blue"] } })];
+
+    const listing = list(index, { color: ["red", "nope"], fabric: "silk" });
+
+    expect(listing.state.options).toEqual([{ key: "color", values: ["red"] }]);
+    expect(listing.activeFilters).toBe(1);
+  });
+
+  it("applies at most 10 groups, counting only groups the listing offers (AC-18)", () => {
+    const options = Object.fromEntries(
+      Array.from({ length: 12 }, (_, i) => [`G${String(i).padStart(2, "0")}`, ["A", "B"]]),
+    );
+    const values = Object.fromEntries(Object.keys(options).map((name) => [name, "A"]));
+    const index = [product({ name: "A", options, variants: [{ values }] })];
+    const params = Object.fromEntries(Object.keys(options).map((name) => [name, "a"]));
+
+    const listing = list(index, params);
+
+    expect(listing.state.options.map((group) => group.key)).toEqual(
+      Array.from({ length: 10 }, (_, i) => `g${String(i).padStart(2, "0")}`),
+    );
+  });
+
+  it("keeps a real filter behind any number of tracking params in a shared link (AC-17)", () => {
+    const index = [
+      product({
+        name: "Red",
+        options: { Color: ["Red", "Blue"] },
+        variants: [{ values: { Color: "Red" } }],
+      }),
+      product({
+        name: "Blue",
+        options: { Color: ["Red", "Blue"] },
+        variants: [{ values: { Color: "Blue" } }],
+      }),
+    ];
+    const tracking = Object.fromEntries(
+      ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"]
+        .concat(["fbclid", "gclid", "msclkid", "mc_cid", "mc_eid", "ref"])
+        .map((key) => [key, "x"]),
+    );
+
+    const listing = list(index, { ...tracking, color: "red" });
+
+    expect(listing.state.options).toEqual([{ key: "color", values: ["red"] }]);
+    expect(names(listing)).toEqual(["Red"]);
+  });
+});
+
+describe("counts (AC-14)", () => {
+  const options = { Color: ["Red", "Blue"], Size: ["S", "M"] };
+  const index = [
+    product({
+      name: "Red S",
+      options,
+      variants: [{ values: { Color: "Red", Size: "S" } }],
+    }),
+    product({
+      name: "Red M and Blue M",
+      options,
+      variants: [
+        { values: { Color: "Red", Size: "M" } },
+        { values: { Color: "Blue", Size: "M" }, stock: 0 },
+      ],
+    }),
+  ];
+  const counts = (listing: Listing, key: string) =>
+    Object.fromEntries(
+      listing.groups
+        .find((group) => group.key === key)
+        ?.values.map((value) => [value.key, [value.count, value.selected]]) ?? [],
+    );
+
+  it("ignores the group's own selection and applies every other filter", () => {
+    const listing = list(index, { color: "red", size: "m" });
+
+    expect(counts(listing, "color")).toEqual({ red: [1, true], blue: [1, false] });
+    expect(counts(listing, "size")).toEqual({ s: [1, false], m: [1, true] });
+  });
+
+  it("gives zero for a value nothing would match, and counts products not variants", () => {
+    const listing = list(index, { size: "s" });
+
+    expect(counts(listing, "color")).toEqual({ red: [1, false], blue: [0, false] });
+    expect(counts(list(index), "color")).toEqual({ red: [2, false], blue: [1, false] });
+  });
+
+  it("counts each toggle with it on and every other filter applied", () => {
+    const listing = list(index, { color: "blue" });
+
+    expect(listing.inStockCount).toBe(0);
+    expect(list(index).inStockCount).toBe(2);
+    expect(list(index).onSaleCount).toBe(0);
+  });
+});
+
+describe("the scope behind filters and counts (AC-3, AC-11, AC-13)", () => {
+  const options = { Color: ["Red", "Blue"] };
+  const inCategory = product({
+    name: "Linen Tee",
+    categories: { c: 0 },
+    options,
+    variants: [
+      { price: 2000, values: { Color: "Red" } },
+      { price: 4000, values: { Color: "Blue" } },
+    ],
+  });
+  const elsewhere = product({
+    name: "Wool Coat",
+    position: 1,
+    options: { Size: ["S", "M"] },
+    variants: [
+      { price: 90000, values: { Size: "S" } },
+      { price: 95000, values: { Size: "M" } },
+    ],
+  });
+  const index = [inCategory, elsewhere];
+
+  it("offers a category only the groups and prices of its own products", () => {
+    const listing = list(index, {}, { kind: "category", categoryId: "c" });
+
+    expect(listing.groups.map((group) => group.key)).toEqual(["color"]);
+    expect(listing.priceBounds).toEqual({ minCents: 2000, maxCents: 4000 });
+  });
+
+  it("offers a search only the groups and prices of what it found", () => {
+    const result = buildListing(
+      index,
+      { kind: "search" },
+      parseListingParams({ q: "coat" }, "search", "EUR"),
+      "en",
+    );
+
+    expect(result.status === "ok" && result.groups.map((group) => group.key)).toEqual(["size"]);
+    expect(result.status === "ok" && result.priceBounds).toEqual({
+      minCents: 90000,
+      maxCents: 95000,
+    });
+  });
+
+  it("keeps every group when the filters leave nothing", () => {
+    const listing = list(index, { min: "999999" });
+
+    expect(listing.total).toBe(0);
+    expect(listing.groups.map((group) => group.key)).toEqual(["color", "size"]);
+    expect(listing.priceBounds).toEqual({ minCents: 2000, maxCents: 95000 });
+  });
+
+  it("gives an empty category no groups, no prices and one page", () => {
+    const listing = list(index, {}, { kind: "category", categoryId: "empty" });
+
+    expect(listing).toMatchObject({
+      total: 0,
+      scopeTotal: 0,
+      page: 1,
+      pageCount: 1,
+      groups: [],
+      priceBounds: null,
+    });
+  });
+});
+
+describe("price bounds (AC-15)", () => {
+  it("are the lowest and highest variant price of the scope before filters", () => {
+    const index = [
+      product({ name: "A", variants: [{ price: 500 }, { price: 9000 }] }),
+      product({ name: "B", variants: [{ price: 1200 }] }),
+    ];
+
+    expect(list(index, { min: "50" }).priceBounds).toEqual({ minCents: 500, maxCents: 9000 });
+    expect(list([index[1] as ListingProduct]).priceBounds).toEqual({
+      minCents: 1200,
+      maxCents: 1200,
+    });
+  });
+});
+
+describe("sorts (AC-16)", () => {
+  const index = [
+    product({ name: "banana", position: 0, createdAt: 1, variants: [{ price: 3000 }] }),
+    product({
+      name: "Apple",
+      position: 1,
+      createdAt: 3,
+      variants: [{ price: 900 }, { price: 9000 }],
+    }),
+    product({ name: "cherry", position: 2, createdAt: 2, variants: [{ price: 3000 }] }),
+  ];
+
+  it.each([
+    ["featured", ["banana", "Apple", "cherry"]],
+    ["newest", ["Apple", "cherry", "banana"]],
+    // By the lowest variant price; the 3000 tie keeps Featured order.
+    ["price-asc", ["Apple", "banana", "cherry"]],
+    ["price-desc", ["banana", "cherry", "Apple"]],
+    // Locale collation, not code points: "Apple" before "banana".
+    ["name", ["Apple", "banana", "cherry"]],
+  ])("sorts by %s", (sort, expected) => {
+    expect(names(list(index, { sort }))).toEqual(expected);
+  });
+
+  it("sorts names by the store locale's collation", () => {
+    const polish = [
+      product({ name: "Mama", position: 0 }),
+      product({ name: "Łódź", position: 1 }),
+      product({ name: "Lato", position: 2 }),
+    ];
+    const state = parseListingParams({ sort: "name" }, "home", "PLN");
+
+    const result = buildListing(polish, { kind: "home" }, state, "pl-PL");
+
+    // Code points would put Ł after M; Polish puts it right after L.
+    expect(result.status === "ok" && names(result)).toEqual(["Lato", "Łódź", "Mama"]);
+  });
+
+  it("keeps the category's own order for ties", () => {
+    const tied = [
+      product({ name: "X", position: 0, categories: { c: 1 }, variants: [{ price: 100 }] }),
+      product({ name: "Y", position: 1, categories: { c: 0 }, variants: [{ price: 100 }] }),
+    ];
+
+    expect(names(list(tied, { sort: "price-asc" }, { kind: "category", categoryId: "c" }))).toEqual(
+      ["Y", "X"],
+    );
+  });
+});
+
+describe("cards", () => {
+  it("carry the from price, sold out and sale from the variants", () => {
+    const index = [
+      product({ name: "Gone", variants: [{ stock: 0, compareAt: 5000 }] }),
+      product({
+        name: "Range",
+        position: 1,
+        variants: [{ price: 1000, compareAt: 2000 }, { price: 1500 }],
+      }),
+    ];
+
+    expect(
+      list(index).products.map(({ name, minPriceCents, maxPriceCents, soldOut, onSale }) => ({
+        name,
+        minPriceCents,
+        maxPriceCents,
+        soldOut,
+        onSale,
+      })),
+    ).toEqual([
+      { name: "Gone", minPriceCents: 1000, maxPriceCents: 1000, soldOut: true, onSale: false },
+      { name: "Range", minPriceCents: 1000, maxPriceCents: 1500, soldOut: false, onSale: true },
+    ]);
+  });
+});
diff --git a/src/features/catalog/listing/listing.ts b/src/features/catalog/listing/listing.ts
new file mode 100644
index 0000000..a613c35
--- /dev/null
+++ b/src/features/catalog/listing/listing.ts
@@ -0,0 +1,392 @@
+import { matchesWords, searchWords } from "@/lib/search-text";
+
+import { isSaleVariant, summarizeCard } from "../product-summary";
+import type { ProductCard, ProductImage } from "../queries";
+import {
+  activeFilterCount,
+  defaultSort,
+  type ListingScope,
+  type ListingState,
+  MAX_OPTION_GROUPS,
+  reservedParams,
+  type SortKey,
+  sortOptions,
+} from "./params";
+
+// Pure: search, filters, counts, sort and paging over the cached listing index (spec 0013,
+// Decision). No I/O, no clock, no randomness: the same index and URL give the same page.
+
+export const PAGE_SIZE = 24;
+export const SEARCH_MIN_LENGTH = 2;
+
+export type ListingVariant = {
+  readonly priceCents: number;
+  readonly compareAtPriceCents: number | null;
+  // Never the count itself (spec 0005), even if index rows ever reach the browser.
+  readonly inStock: boolean;
+  // [option type, value] indexes into the product's optionTypes, one per value key.
+  readonly valueIndexes: readonly (readonly [type: number, value: number])[];
+};
+
+export type ListingOptionType = {
+  readonly key: string;
+  readonly label: string;
+  readonly values: readonly { readonly key: string; readonly label: string }[];
+};
+
+export type ListingProduct = {
+  readonly id: string;
+  readonly name: string;
+  readonly slug: string;
+  readonly nameWords: readonly string[];
+  readonly position: number;
+  readonly createdAtMs: number;
+  readonly image: ProductImage;
+  // categoryId → the product's position in that category.
+  readonly categoryPositions: Readonly<Record<string, number>>;
+  // Merged by key inside the product, empty keys skipped, values in admin position order.
+  readonly optionTypes: readonly ListingOptionType[];
+  readonly variants: readonly ListingVariant[];
+};
+
+export type FacetValue = {
+  readonly key: string;
+  readonly label: string;
+  readonly count: number;
+  readonly selected: boolean;
+};
+
+export type FacetGroup = {
+  readonly key: string;
+  readonly label: string;
+  readonly values: readonly FacetValue[];
+};
+
+// The lowest and highest live variant price of the scope before filters (AC-15).
+export type PriceBounds = { readonly minCents: number; readonly maxCents: number };
+
+export type Listing = {
+  readonly status: "ok";
+  readonly products: readonly ProductCard[];
+  // Matches after filters, and the scope before them.
+  readonly total: number;
+  readonly scopeTotal: number;
+  readonly page: number;
+  readonly pageCount: number;
+  readonly groups: readonly FacetGroup[];
+  readonly inStockCount: number;
+  readonly onSaleCount: number;
+  readonly priceBounds: PriceBounds | null;
+  // What was actually applied: unknown groups and values dropped, the page clamped (AC-18).
+  readonly state: ListingState;
+  readonly activeFilters: number;
+};
+
+// AC-9: no search runs for a query this short or with no words.
+export type ListingResult = Listing | { readonly status: "prompt" };
+
+export function searchQueryReady(q: string): boolean {
+  return Array.from(q).length >= SEARCH_MIN_LENGTH && searchWords(q).length > 0;
+}
+
+type Compare = (a: ListingProduct, b: ListingProduct) => number;
+
+// AC-4: products.position, created_at newest first, id descending.
+const homeFeatured: Compare = (a, b) =>
+  a.position - b.position ||
+  b.createdAtMs - a.createdAtMs ||
+  (a.id < b.id ? 1 : a.id > b.id ? -1 : 0);
+
+// AC-1: the category's own order first.
+function categoryFeatured(categoryId: string): Compare {
+  return (a, b) =>
+    (a.categoryPositions[categoryId] ?? 0) - (b.categoryPositions[categoryId] ?? 0) ||
+    homeFeatured(a, b);
+}
+
+function minPrice(product: ListingProduct): number {
+  return Math.min(...product.variants.map((variant) => variant.priceCents));
+}
+
+// AC-8: the name, word by word, starts with the query.
+function bestMatch(queryWords: readonly string[]): Compare {
+  const phrase = queryWords.join(" ");
+  const tier = (product: ListingProduct) =>
+    product.nameWords.join(" ").startsWith(phrase) ? 0 : 1;
+  return (a, b) => tier(a) - tier(b) || homeFeatured(a, b);
+}
+
+// AC-16: the chosen sort, ties in the listing's default order (the array is sorted by that
+// first, and toSorted is stable).
+function sortCompare(sort: SortKey, featured: Compare, collator: Intl.Collator): Compare | null {
+  switch (sort) {
+    case "relevance":
+      return null;
+    case "featured":
+      return featured;
+    case "newest":
+      return (a, b) => b.createdAtMs - a.createdAtMs;
+    case "price-asc":
+      return (a, b) => minPrice(a) - minPrice(b);
+    case "price-desc":
+      return (a, b) => minPrice(b) - minPrice(a);
+    case "name":
+      return (a, b) => collator.compare(a.name, b.name);
+  }
+}
+
+// The value keys a variant has in each group (two merged types may give it two in one group).
+function variantValues(
+  product: ListingProduct,
+  variant: ListingVariant,
+): ReadonlyMap<string, ReadonlySet<string>> {
+  const groups = new Map<string, Set<string>>();
+  for (const [t, v] of variant.valueIndexes) {
+    const type = product.optionTypes[t];
+    const value = type?.values[v];
+    if (!type || !value) continue;
+    const keys = groups.get(type.key) ?? new Set<string>();
+    keys.add(value.key);
+    groups.set(type.key, keys);
+  }
+  return groups;
+}
+
+type VariantFilters = Pick<
+  ListingState,
+  "options" | "minCents" | "maxCents" | "inStock" | "onSale"
+>;
+
+// AC-12: one variant satisfies every active filter together. A variant without a filtered
+// group never matches it.
+function variantMatches(
+  values: ReadonlyMap<string, ReadonlySet<string>>,
+  variant: ListingVariant,
+  filters: VariantFilters,
+): boolean {
+  if (filters.minCents !== null && variant.priceCents < filters.minCents) return false;
+  if (filters.maxCents !== null && variant.priceCents > filters.maxCents) return false;
+  if (filters.inStock && !variant.inStock) return false;
+  if (filters.onSale && !isSaleVariant(variant)) return false;
+  return filters.options.every((group) => {
+    const has = values.get(group.key);
+    return has !== undefined && group.values.some((value) => has.has(value));
+  });
+}
+
+type Prepared = {
+  readonly product: ListingProduct;
+  readonly variants: readonly {
+    readonly variant: ListingVariant;
+    readonly values: ReadonlyMap<string, ReadonlySet<string>>;
+  }[];
+};
+
+function matches(prepared: Prepared, filters: VariantFilters): boolean {
+  return prepared.variants.some(({ variant, values }) => variantMatches(values, variant, filters));
+}
+
+// The most common spelling; the first seen wins a tie.
+function commonLabel(counts: ReadonlyMap<string, number>): string {
+  let best = "";
+  let bestCount = 0;
+  for (const [label, count] of counts) {
+    if (count > bestCount) {
+      best = label;
+      bestCount = count;
+    }
+  }
+  return best;
+}
+
+type GroupDraft = {
+  // Label spelling → products using it, one per product, so the counts sum to the products.
+  readonly labels: Map<string, number>;
+  // Insertion order is the order of first appearance.
+  readonly values: Map<string, Map<string, number>>;
+};
+
+// AC-13: the option groups of the scope before filters, walked in Featured order.
+function facetDrafts(
+  products: readonly ListingProduct[],
+  collator: Intl.Collator,
+): readonly ListingOptionType[] {
+  const drafts = new Map<string, GroupDraft>();
+  for (const product of products) {
+    for (const type of product.optionTypes) {
+      const draft = drafts.get(type.key) ?? { labels: new Map(), values: new Map() };
+      draft.labels.set(type.label, (draft.labels.get(type.label) ?? 0) + 1);
+      for (const value of type.values) {
+        const labels = draft.values.get(value.key) ?? new Map<string, number>();
+        labels.set(value.label, (labels.get(value.label) ?? 0) + 1);
+        draft.values.set(value.key, labels);
+      }
+      drafts.set(type.key, draft);
+    }
+  }
+  return [...drafts]
+    .filter(([key, draft]) => !reservedParams.has(key) && draft.values.size > 1)
+    .map(([key, draft]) => ({
+      key,
+      label: commonLabel(draft.labels),
+      products: [...draft.labels.values()].reduce((sum, count) => sum + count, 0),
+      values: [...draft.values].map(([valueKey, labels]) => ({
+        key: valueKey,
+        label: commonLabel(labels),
+      })),
+    }))
+    .toSorted((a, b) => b.products - a.products || collator.compare(a.label, b.label))
+    .map(({ key, label, values }) => ({ key, label, values }));
+}
+
+function toCard(product: ListingProduct): ProductCard {
+  return {
+    id: product.id,
+    name: product.name,
+    slug: product.slug,
+    image: product.image,
+    ...summarizeCard(product.variants),
+  };
+}
+
+// The products a listing draws from and their default order; null for a search too short to
+// run (AC-9).
+function scopeOf(
+  index: readonly ListingProduct[],
+  scope: ListingScope,
+  q: string,
+  featured: Compare,
+): { readonly inScope: readonly ListingProduct[]; readonly defaultOrder: Compare } | null {
+  switch (scope.kind) {
+    case "search": {
+      if (!searchQueryReady(q)) return null;
+      const queryWords = searchWords(q);
+      return {
+        inScope: index.filter((product) => matchesWords(product.nameWords, queryWords)),
+        defaultOrder: bestMatch(queryWords),
+      };
+    }
+    case "category":
+      return {
+        inScope: index.filter(
+          (product) => product.categoryPositions[scope.categoryId] !== undefined,
+        ),
+        defaultOrder: featured,
+      };
+    case "home":
+      return { inScope: index, defaultOrder: featured };
+  }
+}
+
+export function buildListing(
+  index: readonly ListingProduct[],
+  scope: ListingScope,
+  state: ListingState,
+  locale: string,
+): ListingResult {
+  const { kind } = scope;
+  const collator = new Intl.Collator(locale);
+  const featured = scope.kind === "category" ? categoryFeatured(scope.categoryId) : homeFeatured;
+
+  const scoped = scopeOf(index, scope, state.q, featured);
+  if (scoped === null) return { status: "prompt" };
+  const { inScope, defaultOrder } = scoped;
+  // Featured order drives the facet value order (AC-13); the default order the results.
+  const byFeatured = inScope.toSorted(featured);
+
+  const groupDrafts = facetDrafts(byFeatured, collator);
+  const known = new Map(
+    groupDrafts.map((group) => [group.key, new Set(group.values.map((v) => v.key))]),
+  );
+  // AC-18: the group cap counts only groups this listing offers, so unrelated params never
+  // crowd out a real filter.
+  const options = sortOptions(
+    state.options.flatMap((group) => {
+      const values = known.get(group.key);
+      const kept = values ? group.values.filter((value) => values.has(value)) : [];
+      return kept.length > 0 ? [{ key: group.key, values: kept }] : [];
+    }),
+  ).slice(0, MAX_OPTION_GROUPS);
+  const filters: VariantFilters = {
+    options,
+    minCents: state.minCents,
+    maxCents: state.maxCents,
+    inStock: state.inStock,
+    onSale: state.onSale,
+  };
+
+  const prepared: readonly Prepared[] = byFeatured.map((product) => ({
+    product,
+    variants: product.variants.map((variant) => ({
+      variant,
+      values: variantValues(product, variant),
+    })),
+  }));
+
+  // AC-14: a value's count is the products matching with it in place of its group's own
+  // selection, every other filter kept.
+  const groups: readonly FacetGroup[] = groupDrafts.map((group) => {
+    const selected = options.find((option) => option.key === group.key)?.values ?? [];
+    const others = { ...filters, options: options.filter((option) => option.key !== group.key) };
+    const counts = new Map<string, number>();
+    for (const item of prepared) {
+      const hit = new Set<string>();
+      for (const { variant, values } of item.variants) {
+        if (!variantMatches(values, variant, others)) continue;
+        for (const value of values.get(group.key) ?? []) hit.add(value);
+      }
+      for (const value of hit) counts.set(value, (counts.get(value) ?? 0) + 1);
+    }
+    return {
+      key: group.key,
+      label: group.label,
+      values: group.values.map((value) => ({
+        ...value,
+        count: counts.get(value.key) ?? 0,
+        selected: selected.includes(value.key),
+      })),
+    };
+  });
+  const inStockCount = prepared.filter((item) =>
+    matches(item, { ...filters, inStock: true }),
+  ).length;
+  const onSaleCount = prepared.filter((item) => matches(item, { ...filters, onSale: true })).length;
+
+  const prices = inScope.flatMap((product) =>
+    product.variants.map((variant) => variant.priceCents),
+  );
+  const priceBounds: PriceBounds | null =
+    prices.length > 0 ? { minCents: Math.min(...prices), maxCents: Math.max(...prices) } : null;
+
+  const sortBy = sortCompare(state.sort, featured, collator);
+  const ordered = inScope.toSorted(defaultOrder);
+  const resultIds = new Set(
+    prepared.filter((item) => matches(item, filters)).map((item) => item.product.id),
+  );
+  const filtered = ordered.filter((product) => resultIds.has(product.id));
+  const sorted = sortBy ? filtered.toSorted(sortBy) : filtered;
+
+  const pageCount = Math.max(1, Math.ceil(sorted.length / PAGE_SIZE));
+  const page = Math.min(state.page, pageCount);
+  const applied: ListingState = {
+    ...state,
+    // relevance only exists on search; the parser already enforces that.
+    sort: state.sort === "relevance" && kind !== "search" ? defaultSort(kind) : state.sort,
+    page,
+    options,
+  };
+  return {
+    status: "ok",
+    products: sorted.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE).map(toCard),
+    total: sorted.length,
+    scopeTotal: inScope.length,
+    page,
+    pageCount,
+    groups,
+    inStockCount,
+    onSaleCount,
+    priceBounds,
+    state: applied,
+    activeFilters: activeFilterCount(applied),
+  };
+}
diff --git a/src/features/catalog/listing/pagination.test.ts b/src/features/catalog/listing/pagination.test.ts
new file mode 100644
index 0000000..b9a448a
--- /dev/null
+++ b/src/features/catalog/listing/pagination.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+
+import { pageItems } from "./pagination";
+
+const show = (current: number, count: number) =>
+  pageItems(current, count)
+    .map((item) => (item.kind === "gap" ? "…" : String(item.page)))
+    .join(" ");
+
+describe("pageItems (spec 0013, AC-5)", () => {
+  it.each([
+    [1, 1, "1"],
+    [1, 2, "1 2"],
+    [1, 3, "1 2 3"],
+    [1, 10, "1 2 … 10"],
+    [5, 10, "1 … 4 5 6 … 10"],
+    [10, 10, "1 … 9 10"],
+    [3, 10, "1 2 3 4 … 10"],
+    [8, 10, "1 … 7 8 9 10"],
+  ])("page %i of %i shows %s", (current, count, expected) => {
+    expect(show(current, count)).toBe(expected);
+  });
+});
diff --git a/src/features/catalog/listing/pagination.ts b/src/features/catalog/listing/pagination.ts
new file mode 100644
index 0000000..831390d
--- /dev/null
+++ b/src/features/catalog/listing/pagination.ts
@@ -0,0 +1,15 @@
+// Pure: which page links a listing shows (spec 0013, AC-5): first, last, the current page ±1,
+// and a gap wherever pages are skipped.
+
+export type PageItem = { readonly kind: "page"; readonly page: number } | { readonly kind: "gap" };
+
+export function pageItems(current: number, pageCount: number): readonly PageItem[] {
+  const pages = [...new Set([1, current - 1, current, current + 1, pageCount])]
+    .filter((page) => page >= 1 && page <= pageCount)
+    .toSorted((a, b) => a - b);
+  return pages.flatMap((page, index): PageItem[] => {
+    const previous = pages[index - 1];
+    const item: PageItem = { kind: "page", page };
+    return previous !== undefined && page - previous > 1 ? [{ kind: "gap" }, item] : [item];
+  });
+}
diff --git a/src/features/catalog/listing/params.test.ts b/src/features/catalog/listing/params.test.ts
new file mode 100644
index 0000000..5e3621b
--- /dev/null
+++ b/src/features/catalog/listing/params.test.ts
@@ -0,0 +1,241 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  activeFilterCount,
+  clearedFilters,
+  listingHref,
+  type ListingState,
+  parseListingParams,
+  toggleOption,
+  withPrices,
+} from "./params";
+
+const parse = (params: Record<string, string | string[]>, kind: "home" | "search" = "home") =>
+  parseListingParams(params, kind, "EUR");
+
+const base = parse({});
+
+describe("parseListingParams (spec 0013, AC-17, AC-18)", () => {
+  it("defaults to page 1, the kind's default sort and no filters", () => {
+    expect(base).toEqual({
+      q: "",
+      sort: "featured",
+      page: 1,
+      minCents: null,
+      maxCents: null,
+      inStock: false,
+      onSale: false,
+      options: [],
+    });
+    expect(parse({}, "search").sort).toBe("relevance");
+  });
+
+  it("reads every param", () => {
+    expect(
+      parse(
+        {
+          q: "  linen tee ",
+          sort: "price-asc",
+          page: "3",
+          min: "10",
+          max: "49.99",
+          stock: "1",
+          sale: "1",
+          size: ["m", "s"],
+          color: "red",
+        },
+        "search",
+      ),
+    ).toEqual({
+      q: "linen tee",
+      sort: "price-asc",
+      page: 3,
+      minCents: 1000,
+      maxCents: 4999,
+      inStock: true,
+      onSale: true,
+      options: [
+        { key: "color", values: ["red"] },
+        { key: "size", values: ["m", "s"] },
+      ],
+    });
+  });
+
+  it("swaps min above max and accepts 0", () => {
+    expect(parse({ min: "50", max: "10" })).toMatchObject({ minCents: 1000, maxCents: 5000 });
+    expect(parse({ min: "0" }).minCents).toBe(0);
+  });
+
+  it("drops an unparsable or negative price", () => {
+    expect(parse({ min: "-5", max: "abc" })).toMatchObject({ minCents: null, maxCents: null });
+    expect(parse({ min: "1.999" }).minCents).toBeNull();
+  });
+
+  it("reads a price in the store currency's own minor units", () => {
+    expect(parse({ min: "9.5" }).minCents).toBe(950);
+    // JPY has no minor units, so a fraction is not a price and the bound is dropped.
+    expect(parseListingParams({ min: "9.5", max: "950" }, "home", "JPY")).toMatchObject({
+      minCents: null,
+      maxCents: 950,
+    });
+  });
+
+  it("ignores an unknown sort, and relevance outside search", () => {
+    expect(parse({ sort: "zzz" }).sort).toBe("featured");
+    expect(parse({ sort: "relevance" }).sort).toBe("featured");
+    expect(parse({ sort: "relevance" }, "search").sort).toBe("relevance");
+  });
+
+  it("keeps the first value of a repeated scalar param", () => {
+    expect(
+      parse({ sort: ["newest", "name"], page: ["2", "5"], q: ["a b", "c"] }, "search"),
+    ).toMatchObject({
+      sort: "newest",
+      page: 2,
+      q: "a b",
+    });
+  });
+
+  it("reads a non numeric or zero page as 1 and keeps a huge one for clamping", () => {
+    expect(parse({ page: "two" }).page).toBe(1);
+    expect(parse({ page: "0" }).page).toBe(1);
+    expect(parse({ page: "-2" }).page).toBe(1);
+    expect(parse({ page: "999999999999999999999" }).page).toBe(Number.MAX_SAFE_INTEGER);
+  });
+
+  it("only reads q on search, trimmed and capped at 100 whole characters", () => {
+    expect(parse({ q: "tee" }).q).toBe("");
+    const emoji = "😀".repeat(120);
+    const q = parse({ q: ` ${emoji} ` }, "search").q;
+    expect(Array.from(q)).toHaveLength(100);
+    expect(q).toBe("😀".repeat(100));
+  });
+
+  it("folds option keys and values, dedupes and never reads a reserved key as a group", () => {
+    expect(parse({ Colour: ["Red", "red", "RED", "!!"], "": "x", stock: "yes" }).options).toEqual([
+      { key: "colour", values: ["red"] },
+    ]);
+  });
+
+  it("reads at most 20 values per group, and leaves the group cap to buildListing", () => {
+    const params = Object.fromEntries(
+      Array.from({ length: 12 }, (_, i) => [
+        `g${i}`,
+        Array.from({ length: 25 }, (_, j) => `v${j}`),
+      ]),
+    );
+    const { options } = parse(params);
+
+    expect(options).toHaveLength(12);
+    expect(options.every((group) => group.values.length === 20)).toBe(true);
+  });
+});
+
+describe("listingHref", () => {
+  it("leaves out every default, so the plain state is the plain path", () => {
+    expect(listingHref("/", base, "home", "EUR")).toBe("/");
+    expect(listingHref("/search", { ...parse({}, "search"), q: "tee" }, "search", "EUR")).toBe(
+      "/search?q=tee",
+    );
+  });
+
+  it("writes params in one stable order whatever order they came in", () => {
+    const a = parse({ color: ["red", "blue"], page: "2", stock: "1", min: "10", size: "m" });
+    const b = parse({ size: "m", min: "10.00", stock: "1", page: "2", color: ["blue", "red"] });
+
+    expect(listingHref("/", a, "home", "EUR")).toBe(
+      "/?min=10&stock=1&color=blue&color=red&size=m&page=2",
+    );
+    expect(listingHref("/", b, "home", "EUR")).toBe(listingHref("/", a, "home", "EUR"));
+  });
+
+  it("keeps a price fraction and round trips through the parser", () => {
+    const state = parse({ min: "9.5", max: "20", sort: "name", sale: "1" });
+    const href = listingHref("/categories/linen", state, "category", "EUR");
+
+    expect(href).toBe("/categories/linen?sort=name&min=9.50&max=20&sale=1");
+    const reparsed = parseListingParams(
+      Object.fromEntries(new URL(href, "https://shop.example").searchParams),
+      "category",
+      "EUR",
+    );
+    expect(reparsed).toEqual(state);
+  });
+
+  it("keeps a query with spaces, symbols and accents as one q param", () => {
+    const state = parse({ q: "a&b = 50% łódź" }, "search");
+    const href = listingHref("/search", state, "search", "EUR");
+
+    const reparsed = parseListingParams(
+      Object.fromEntries(new URL(href, "https://shop.example").searchParams),
+      "search",
+      "EUR",
+    );
+    expect(reparsed.q).toBe("a&b = 50% łódź");
+  });
+
+  it("writes a currency without minor units as whole numbers", () => {
+    const state = parseListingParams({ min: "500", max: "1200" }, "home", "JPY");
+
+    expect(state).toMatchObject({ minCents: 500, maxCents: 1200 });
+    expect(listingHref("/", state, "home", "JPY")).toBe("/?min=500&max=1200");
+  });
+
+  it("never writes relevance off search, or q off search", () => {
+    const state: ListingState = { ...base, q: "tee", sort: "featured" };
+    expect(listingHref("/", state, "home", "EUR")).toBe("/");
+  });
+});
+
+describe("state changes", () => {
+  const paged = parse({ page: "4", q: "tee", color: "red", stock: "1" }, "search");
+
+  it("starts again at page 1 on any filter or sort change (AC-17)", () => {
+    expect(toggleOption(paged, "size", "m").page).toBe(1);
+    expect(withPrices(paged, "5", "", "EUR").page).toBe(1);
+  });
+
+  it("toggles a value in and out of its group, dropping an empty group", () => {
+    const on = toggleOption(paged, "color", "blue");
+    expect(on.options).toEqual([{ key: "color", values: ["blue", "red"] }]);
+    expect(toggleOption(toggleOption(on, "color", "blue"), "color", "red").options).toEqual([]);
+  });
+
+  it("repairs typed prices like the parser: swapped, dropped, fractions", () => {
+    expect(withPrices(base, "50", "10", "EUR")).toMatchObject({ minCents: 1000, maxCents: 5000 });
+    expect(withPrices(base, "abc", "12.5", "EUR")).toMatchObject({
+      minCents: null,
+      maxCents: 1250,
+    });
+    expect(withPrices(base, "500", "", "JPY")).toMatchObject({ minCents: 500, maxCents: null });
+  });
+
+  it("reads a decimal comma as a point, and only one (AC-15)", () => {
+    expect(withPrices(base, "10,50", " 20,5 ", "PLN")).toMatchObject({
+      minCents: 1050,
+      maxCents: 2050,
+    });
+    expect(withPrices(base, "1,000,00", "1,", "PLN")).toMatchObject({
+      minCents: null,
+      maxCents: null,
+    });
+    expect(parse({ min: "9,5" }).minCents).toBe(950);
+    expect(listingHref("/", withPrices(base, "10,50", "", "PLN"), "home", "PLN")).toBe(
+      "/?min=10.50",
+    );
+  });
+
+  it("clears every filter but keeps q and the sort (AC-20, AC-21)", () => {
+    const sorted = { ...paged, sort: "newest" as const, minCents: 100 };
+    expect(clearedFilters(sorted)).toEqual({ ...base, q: "tee", sort: "newest" });
+  });
+
+  it("counts one per value, per price bound and per toggle (AC-20)", () => {
+    expect(activeFilterCount(base)).toBe(0);
+    expect(
+      activeFilterCount(
+        parse({ color: ["red", "blue"], size: "m", min: "1", max: "2", stock: "1", sale: "1" }),
+      ),
+    ).toBe(7);
+  });
+});
diff --git a/src/features/catalog/listing/params.ts b/src/features/catalog/listing/params.ts
new file mode 100644
index 0000000..768e9e5
--- /dev/null
+++ b/src/features/catalog/listing/params.ts
@@ -0,0 +1,269 @@
+import { z } from "zod";
+
+import { centsToInput, parseMoney } from "@/lib/money";
+import { facetKey } from "@/lib/search-text";
+
+// Pure: a listing's whole state as it lives in the URL (spec 0013, AC-17, AC-18). Every input
+// maps to a valid state, never an error, so a shared or hand edited link always opens.
+
+export type ListingScope =
+  | { readonly kind: "home" }
+  | { readonly kind: "category"; readonly categoryId: string }
+  | { readonly kind: "search" };
+
+export type ListingKind = ListingScope["kind"];
+
+export const sortKeys = [
+  "relevance",
+  "featured",
+  "newest",
+  "price-asc",
+  "price-desc",
+  "name",
+] as const;
+export type SortKey = (typeof sortKeys)[number];
+
+export type OptionFilter = { readonly key: string; readonly values: readonly string[] };
+
+export type ListingState = {
+  // Search only; "" elsewhere.
+  readonly q: string;
+  readonly sort: SortKey;
+  // 1 based. The parser keeps any positive number; buildListing clamps it to the last page.
+  readonly page: number;
+  // Inclusive, in minor units; min never above max.
+  readonly minCents: number | null;
+  readonly maxCents: number | null;
+  readonly inStock: boolean;
+  readonly onSale: boolean;
+  // Groups sorted by key and values by key, so one state has one URL.
+  readonly options: readonly OptionFilter[];
+};
+
+export const SEARCH_QUERY_MAX = 100;
+export const MAX_OPTION_GROUPS = 10;
+export const MAX_OPTION_VALUES = 20;
+
+// Query params with a meaning of their own; an option group with one of these keys is never
+// offered (AC-13), so the two can never collide.
+export const reservedParams: ReadonlySet<string> = new Set([
+  "q",
+  "sort",
+  "page",
+  "min",
+  "max",
+  "stock",
+  "sale",
+]);
+
+export function defaultSort(kind: ListingKind): SortKey {
+  return kind === "search" ? "relevance" : "featured";
+}
+
+export function sortsFor(kind: ListingKind): readonly SortKey[] {
+  return kind === "search" ? sortKeys : sortKeys.filter((key) => key !== "relevance");
+}
+
+const emptyState: ListingState = {
+  q: "",
+  sort: "featured",
+  page: 1,
+  minCents: null,
+  maxCents: null,
+  inStock: false,
+  onSale: false,
+  options: [],
+};
+
+export type RawParams = Readonly<Record<string, string | readonly string[] | undefined>>;
+
+// AC-18: a repeated scalar param keeps its first value.
+const first = (value: string | readonly string[] | undefined): string | undefined =>
+  typeof value === "string" ? value : value?.[0];
+
+const all = (value: string | readonly string[] | undefined): readonly string[] =>
+  value === undefined ? [] : typeof value === "string" ? [value] : value;
+
+const pageSchema = z
+  .string()
+  .regex(/^\d+$/)
+  // A page past the end renders the last page, so a huge number only needs to stay a number.
+  .transform((text) => Math.max(1, Math.min(Number(text), Number.MAX_SAFE_INTEGER)))
+  .catch(1);
+
+// Only the exact "1" turns a toggle on; anything else is off.
+const flagSchema = z
+  .literal("1")
+  .transform(() => true)
+  .catch(false);
+
+const sortSchema = (kind: ListingKind) =>
+  z
+    .enum(sortKeys)
+    .refine((key) => sortsFor(kind).includes(key))
+    .catch(defaultSort(kind));
+
+// The bounds stay text here: withPrices parses and repairs them like the typed inputs.
+const priceTextSchema = z.string().catch("");
+
+// AC-6: trimmed, then capped at whole characters, never a split surrogate pair.
+const querySchema = z
+  .string()
+  .transform((text) => Array.from(text.trim()).slice(0, SEARCH_QUERY_MAX).join(""))
+  .catch("");
+
+// The search query as the listing and the search page's own box read it.
+export function searchQuery(params: RawParams): string {
+  return querySchema.parse(first(params.q));
+}
+
+// A decimal comma ("10,50", as shoppers in comma locales type it) reads as a point; parseMoney
+// stays the one parser (AC-15). The URL always carries the point form.
+function price(text: string | undefined, currency: string): number | null {
+  if (text === undefined) return null;
+  const parsed = parseMoney(text.trim().replace(/^(\d+),(\d+)$/, "$1.$2"), currency);
+  return parsed.ok ? parsed.cents : null;
+}
+
+// Unknown groups and values are dropped later by buildListing, which knows the listing's
+// filters; here they are only normalized, deduplicated and capped per group. The group cap
+// (MAX_OPTION_GROUPS) waits for buildListing too: counted here, tracking params such as
+// `utm_source` or `fbclid` would push a real filter out of a shared link (AC-17).
+function optionFilters(params: RawParams): readonly OptionFilter[] {
+  const groups = new Map<string, string[]>();
+  for (const [name, value] of Object.entries(params)) {
+    const key = facetKey(name);
+    if (key === "" || reservedParams.has(key)) continue;
+    const values = groups.get(key) ?? [];
+    for (const raw of all(value)) {
+      const valueKey = facetKey(raw);
+      if (valueKey === "" || values.includes(valueKey) || values.length >= MAX_OPTION_VALUES) {
+        continue;
+      }
+      values.push(valueKey);
+    }
+    if (values.length > 0) groups.set(key, values);
+  }
+  return sortOptions([...groups].map(([key, values]) => ({ key, values })));
+}
+
+export function sortOptions(options: readonly OptionFilter[]): readonly OptionFilter[] {
+  return options
+    .map((group) => ({ key: group.key, values: group.values.toSorted() }))
+    .toSorted((a, b) => (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
+}
+
+export function parseListingParams(
+  params: RawParams,
+  kind: ListingKind,
+  currency: string,
+): ListingState {
+  const prices = withPrices(
+    emptyState,
+    priceTextSchema.parse(first(params.min)),
+    priceTextSchema.parse(first(params.max)),
+    currency,
+  );
+  return {
+    q: kind === "search" ? searchQuery(params) : "",
+    sort: sortSchema(kind).parse(first(params.sort)),
+    page: pageSchema.parse(first(params.page)),
+    minCents: prices.minCents,
+    maxCents: prices.maxCents,
+    inStock: flagSchema.parse(first(params.stock)),
+    onSale: flagSchema.parse(first(params.sale)),
+    options: optionFilters(params),
+  };
+}
+
+// The URL form of a price: major units, without a zero fraction ("12", "12.50").
+export function priceParam(cents: number, currency: string): string {
+  return centsToInput(cents, currency).replace(/\.0+$/, "");
+}
+
+// AC-17: one stable order and no defaults, so one state has one URL. Page 1 has no `page`.
+export function listingHref(
+  path: string,
+  state: ListingState,
+  kind: ListingKind,
+  currency: string,
+): string {
+  const query = new URLSearchParams();
+  if (kind === "search" && state.q !== "") query.append("q", state.q);
+  if (state.sort !== defaultSort(kind)) query.append("sort", state.sort);
+  if (state.minCents !== null) query.append("min", priceParam(state.minCents, currency));
+  if (state.maxCents !== null) query.append("max", priceParam(state.maxCents, currency));
+  if (state.inStock) query.append("stock", "1");
+  if (state.onSale) query.append("sale", "1");
+  for (const group of sortOptions(state.options)) {
+    for (const value of group.values) query.append(group.key, value);
+  }
+  if (state.page > 1) query.append("page", String(state.page));
+  const text = query.toString();
+  return text === "" ? path : `${path}?${text}`;
+}
+
+// A listing's links: its path, kind and the store currency bound once, so callers pass a state.
+export function listingLinks(
+  path: string,
+  kind: ListingKind,
+  currency: string,
+): (state: ListingState) => string {
+  return (state) => listingHref(path, state, kind, currency);
+}
+
+// Any filter or sort change starts again at page 1 (AC-17).
+export function withChange(state: ListingState, change: Partial<ListingState>): ListingState {
+  return { ...state, page: 1, ...change };
+}
+
+// What "Clear all" and "Clear filters" lead to: the sort and the query stay (AC-20, AC-21).
+export function clearedFilters(state: ListingState): ListingState {
+  return withChange(state, {
+    minCents: null,
+    maxCents: null,
+    inStock: false,
+    onSale: false,
+    options: [],
+  });
+}
+
+export function toggleOption(
+  state: ListingState,
+  groupKey: string,
+  valueKey: string,
+): ListingState {
+  const current = state.options.find((group) => group.key === groupKey)?.values ?? [];
+  const values = current.includes(valueKey)
+    ? current.filter((value) => value !== valueKey)
+    : [...current, valueKey];
+  const others = state.options.filter((group) => group.key !== groupKey);
+  return withChange(state, {
+    options: sortOptions(values.length > 0 ? [...others, { key: groupKey, values }] : others),
+  });
+}
+
+// AC-20: one per selected value, per price bound and per toggle.
+export function activeFilterCount(state: ListingState): number {
+  return (
+    state.options.reduce((sum, group) => sum + group.values.length, 0) +
+    (state.minCents === null ? 0 : 1) +
+    (state.maxCents === null ? 0 : 1) +
+    (state.inStock ? 1 : 0) +
+    (state.onSale ? 1 : 0)
+  );
+}
+
+// The price inputs as typed, with the parser's repair rules: unparsable dropped, min above max
+// swapped (AC-15, AC-18).
+export function withPrices(
+  state: ListingState,
+  minText: string,
+  maxText: string,
+  currency: string,
+): ListingState {
+  const min = price(minText === "" ? undefined : minText, currency);
+  const max = price(maxText === "" ? undefined : maxText, currency);
+  const swap = min !== null && max !== null && min > max;
+  return withChange(state, { minCents: swap ? max : min, maxCents: swap ? min : max });
+}
diff --git a/src/features/catalog/paths.ts b/src/features/catalog/paths.ts
index 51e0bc0..48efdb9 100644
--- a/src/features/catalog/paths.ts
+++ b/src/features/catalog/paths.ts
@@ -12,3 +12,7 @@ export function adminProductPath(id: string): string {
 export function productPath(slug: string): string {
   return `/products/${slug}`;
 }
+
+// spec 0013: the storefront listings.
+export const homePath = "/";
+export const searchPath = "/search";
diff --git a/src/features/catalog/product-summary.test.ts b/src/features/catalog/product-summary.test.ts
index f4983cf..e78b1bf 100644
--- a/src/features/catalog/product-summary.test.ts
+++ b/src/features/catalog/product-summary.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { isOnSale, summarizeVariants } from "./product-summary";
+import { summarizeCard, summarizeVariants } from "./product-summary";
 
 describe("summarizeVariants", () => {
   it("sums stock and finds the price range", () => {
@@ -40,23 +40,34 @@ describe("summarizeVariants", () => {
 });
 
 // covers: spec 0009 AC-16
-describe("isOnSale", () => {
-  it("is true when an in stock variant has a compare at price", () => {
+describe("summarizeCard", () => {
+  it("finds the price range and is on sale when an in stock variant has a compare at price", () => {
     expect(
-      isOnSale([
-        { stockQuantity: 0, compareAtPriceCents: null },
-        { stockQuantity: 2, compareAtPriceCents: 3000 },
+      summarizeCard([
+        { priceCents: 2500, compareAtPriceCents: null, inStock: false },
+        { priceCents: 1900, compareAtPriceCents: 3000, inStock: true },
       ]),
-    ).toBe(true);
+    ).toEqual({ minPriceCents: 1900, maxPriceCents: 2500, soldOut: false, onSale: true });
   });
 
   it("ignores a compare at price on a sold out variant", () => {
     expect(
-      isOnSale([
-        { stockQuantity: 0, compareAtPriceCents: 3000 },
-        { stockQuantity: 4, compareAtPriceCents: null },
-      ]),
+      summarizeCard([
+        { priceCents: 1000, compareAtPriceCents: 3000, inStock: false },
+        { priceCents: 1000, compareAtPriceCents: null, inStock: true },
+      ]).onSale,
     ).toBe(false);
-    expect(isOnSale([])).toBe(false);
+  });
+
+  it("is sold out only when no variant is in stock, and at 0 with none", () => {
+    expect(
+      summarizeCard([{ priceCents: 1000, compareAtPriceCents: 3000, inStock: false }]),
+    ).toMatchObject({ soldOut: true, onSale: false });
+    expect(summarizeCard([])).toEqual({
+      minPriceCents: 0,
+      maxPriceCents: 0,
+      soldOut: true,
+      onSale: false,
+    });
   });
 });
diff --git a/src/features/catalog/product-summary.ts b/src/features/catalog/product-summary.ts
index e49ee3b..8656a6a 100644
--- a/src/features/catalog/product-summary.ts
+++ b/src/features/catalog/product-summary.ts
@@ -23,15 +23,33 @@ export function summarizeVariants(variants: readonly VariantFacts[]): ProductSum
   };
 }
 
-// spec 0009, AC-16: a card shows "Sale" when a variant a customer could buy now has a compare at
-// price. Callers pass only non archived variants.
-export function isOnSale(
-  variants: readonly {
-    readonly stockQuantity: number;
-    readonly compareAtPriceCents: number | null;
-  }[],
-): boolean {
-  return variants.some(
-    (variant) => variant.stockQuantity > 0 && variant.compareAtPriceCents !== null,
-  );
+type CardVariant = {
+  readonly priceCents: number;
+  readonly compareAtPriceCents: number | null;
+  readonly inStock: boolean;
+};
+
+// spec 0009, AC-16: "Sale" means a variant a customer could buy now has a compare at price. The
+// "On sale only" filter (spec 0013, AC-12) reads the same rule.
+export function isSaleVariant(variant: CardVariant): boolean {
+  return variant.inStock && variant.compareAtPriceCents !== null;
+}
+
+export type CardSummary = {
+  readonly minPriceCents: number;
+  readonly maxPriceCents: number;
+  readonly soldOut: boolean;
+  readonly onSale: boolean;
+};
+
+// What a product card shows, from availability alone: the listing index never holds a stock
+// count. Callers pass only non archived variants; none at all reads as sold out at 0.
+export function summarizeCard(variants: readonly CardVariant[]): CardSummary {
+  const prices = variants.map((variant) => variant.priceCents);
+  return {
+    minPriceCents: prices.length > 0 ? Math.min(...prices) : 0,
+    maxPriceCents: prices.length > 0 ? Math.max(...prices) : 0,
+    soldOut: !variants.some((variant) => variant.inStock),
+    onSale: variants.some(isSaleVariant),
+  };
 }
diff --git a/src/features/catalog/queries.ts b/src/features/catalog/queries.ts
index e2e5f7c..fb97874 100644
--- a/src/features/catalog/queries.ts
+++ b/src/features/catalog/queries.ts
@@ -3,15 +3,13 @@ import "server-only";
 import { cacheLife, cacheTag } from "next/cache";
 
 import { type Availability, availability } from "@/lib/availability";
-import { catalogTag, productTag } from "@/lib/cache-tags";
+import { productTag } from "@/lib/cache-tags";
 import { db } from "@/lib/db";
 import { PLACEHOLDER_IMAGE, productImageUrl } from "@/lib/product-image";
 import { SLUG_PATTERN } from "@/lib/slug";
 
-import { isOnSale, summarizeVariants } from "./product-summary";
-
-// The home grid stops here until feature 13 adds paging (spec 0005, AC-6).
-export const HOME_PRODUCT_LIMIT = 48;
+// How many product pages the build prerenders; the rest render on their first visit.
+const PRERENDERED_PRODUCTS = 48;
 
 export type ProductImage = {
   readonly src: string;
@@ -27,13 +25,14 @@ const placeholderImage: ProductImage = {
   height: null,
 };
 
-const imageSelect = {
+// The card image: the first by position.
+export const firstImageSelect = {
   orderBy: { position: "asc" },
   take: 1,
   select: { storagePath: true, altText: true, width: true, height: true },
 } as const;
 
-function toImage(
+export function toImage(
   row:
     | { storagePath: string; altText: string; width: number | null; height: number | null }
     | undefined,
@@ -47,6 +46,7 @@ function toImage(
   };
 }
 
+// A listing card (spec 0013 builds them from the listing index).
 export type ProductCard = {
   readonly id: string;
   readonly name: string;
@@ -59,42 +59,6 @@ export type ProductCard = {
   readonly onSale: boolean;
 };
 
-// Cached until an admin action expires the catalog tag; drafts never enter it (spec 0005).
-export async function getActiveProducts(): Promise<readonly ProductCard[]> {
-  "use cache";
-  cacheLife("max");
-  cacheTag(catalogTag);
-
-  const products = await db.product.findMany({
-    where: { status: "active" },
-    orderBy: [{ position: "asc" }, { createdAt: "desc" }, { id: "desc" }],
-    take: HOME_PRODUCT_LIMIT,
-    select: {
-      id: true,
-      name: true,
-      slug: true,
-      images: imageSelect,
-      variants: {
-        where: { archived: false },
-        select: { priceCents: true, stockQuantity: true, compareAtPriceCents: true },
-      },
-    },
-  });
-  return products.map((product) => {
-    const summary = summarizeVariants(product.variants);
-    return {
-      id: product.id,
-      name: product.name,
-      slug: product.slug,
-      image: toImage(product.images[0]),
-      minPriceCents: summary.minPriceCents,
-      maxPriceCents: summary.maxPriceCents,
-      soldOut: summary.soldOut,
-      onSale: isOnSale(product.variants),
-    };
-  });
-}
-
 // What the product page and its picker get: an availability per variant, never the stock
 // count itself, so counts above the low stock threshold never reach the browser (AC-7).
 export type ProductVariantView = {
@@ -213,7 +177,7 @@ export async function getPrerenderedSlugs(): Promise<readonly string[]> {
   const products = await db.product.findMany({
     where: { status: "active" },
     orderBy: [{ createdAt: "desc" }, { id: "desc" }],
-    take: HOME_PRODUCT_LIMIT,
+    take: PRERENDERED_PRODUCTS,
     select: { slug: true },
   });
   return products.map((product) => product.slug);
diff --git a/src/features/categories/AGENTS.md b/src/features/categories/AGENTS.md
index 450f3bb..6810d84 100644
--- a/src/features/categories/AGENTS.md
+++ b/src/features/categories/AGENTS.md
@@ -2,24 +2,25 @@
 
 ## Overview
 
-Admin only category management: `/admin/categories` (ordered list with product counts, Hidden badge, drag and drop reorder), `/admin/categories/new` and `/admin/categories/<id>` (fields, the category's products with Remove and an "Add products" search, delete). Storefront category pages come with feature 13 and will add their reads here. Governing spec: [0009 Admin catalog management](../../../docs/specs/0009-admin-catalog-management/index.md) (AC-17 to AC-21, AC-24).
+Admin only category management: `/admin/categories` (ordered list with product counts, Hidden badge, drag and drop reorder), `/admin/categories/new` and `/admin/categories/<id>` (fields, the category's products with Remove and an "Add products" search, delete). Storefront: the header nav and the category page header and metadata (`/categories/[slug]`, whose listing body comes from catalog), plus arranging the products inside a category. Governing specs: [0009 Admin catalog management](../../../docs/specs/0009-admin-catalog-management/index.md) (AC-17 to AC-21, AC-24), [0013 Categories, search and filters](../../../docs/specs/0013-categories-search-filters/index.md).
 
 ## Files
 
 - `schemas.ts`: pure. `categoryFieldsSchema` (name, slug, plain text description, visible) is shared by the form (`zodResolver`) and the actions, plus the per action schemas; `categoryFieldErrors` maps issues to fields.
 - `admin-queries.ts`: `getAdminCategories()` and `getCategoryForEdit(id)`, live reads (never cached).
-- `actions/`: `create-category`, `update-category`, `delete-category`, `reorder-categories`, `set-category-products`.
-- `components/`: the list page (built on `src/components/arrange-list.tsx`), the editor, form, product list and delete button.
-- `paths.ts`: admin URLs. `log.ts`: `catalog.category.created`, `.updated`, `.deleted`, `catalog.categories.reordered` (ids and counts only, never names or descriptions).
+- `queries.ts`: cached storefront reads of visible categories only: `getNavCategories`, `getCategoryBySlug` (null for unknown, malformed or hidden), `getPrerenderedCategorySlugs`.
+- `actions/`: `create-category`, `update-category`, `delete-category`, `reorder-categories`, `set-category-products`, `reorder-category-products`.
+- `components/`: the list page (built on `src/components/arrange-list.tsx`), the editor, form, product list (`category-products.tsx`, with arranging split into `arranged-products.tsx`, `use-draft-order.ts` and `discard-order-dialog.tsx`) and delete button; `category-header.tsx` for the storefront page.
+- `paths.ts`: admin URLs and `categoryPath`. `log.ts`: `catalog.category.created`, `.updated`, `.deleted`, `.products_reordered`, `catalog.categories.reordered` (ids and counts only, never names or descriptions).
 
 ## Conventions
 
-- Every page and action calls `requireAdmin()` first; an unknown or malformed id shows the not found state.
-- Never import `src/features/catalog/` internals. Linking products goes through `src/lib/product-categories.ts` (`lockCategories`, `linkAtEnd`), which the catalog's Categories section shares; the category page route composes `searchProductsForPicker` from catalog itself.
+- Every admin page and action calls `requireAdmin()` first; an unknown or malformed id shows the not found state.
+- Never import `src/features/catalog/` internals. Linking products goes through `src/lib/product-categories.ts` (`lockCategories`, `linkAtEnd`), which the catalog's Categories section shares; routes compose the two: the admin category page takes `searchProductsForPicker` from catalog, the storefront category page takes `ListingView`.
 - A product joins a category at the end (`max(position) + 1`, category row locked first). Adding a link that exists or removing one already gone is a no op, not an error.
-- Updates compare `loadedUpdatedAt` under `FOR UPDATE` and return `stale` on a mismatch. Reorder takes the full id list, refuses with `stale` unless it is exactly the current set, and rewrites positions `0..n-1` in one raw SQL statement so `updated_at` stays put.
+- Updates compare `loadedUpdatedAt` under `FOR UPDATE` and return `stale` on a mismatch. Reorder (categories, and products inside a category) takes the full id list, refuses with `stale` unless it is exactly the current set, and rewrites positions `0..n-1` in one raw SQL statement so `updated_at` stays put.
 - Deleting removes the category and its links; the products stay unchanged.
-- No cache tag yet: nothing cached reads categories. Feature 13 adds a `categories` tag with the first storefront read and must expire it from these actions and from the catalog's category writes.
+- Storefront reads are `'use cache'`, tagged `categories` (`src/lib/cache-tags.ts`); every action here expires it with `updateTag` after the commit, and delete also expires `catalog` (the listing index carries both tags).
 
 ## Tests
 
diff --git a/src/features/categories/actions/create-category.ts b/src/features/categories/actions/create-category.ts
index 186ad32..899421d 100644
--- a/src/features/categories/actions/create-category.ts
+++ b/src/features/categories/actions/create-category.ts
@@ -1,6 +1,9 @@
 "use server";
 
+import { updateTag } from "next/cache";
+
 import { requireAdmin } from "@/features/admin-auth/require-admin";
+import { categoriesTag } from "@/lib/cache-tags";
 import { db } from "@/lib/db";
 import { uniqueViolation } from "@/lib/db-errors";
 import type { ActionResult } from "@/lib/result";
@@ -14,8 +17,7 @@ export type CategoryFormError =
   | { readonly code: "stale" }
   | { readonly code: "not_found" };
 
-// spec 0009, AC-17: a new category goes last. No cache tag yet: nothing on the storefront reads
-// categories until feature 13 (AC-23).
+// spec 0009, AC-17: a new category goes last. Expires the storefront nav (spec 0013, AC-22).
 export async function createCategory(
   input: unknown,
 ): Promise<ActionResult<{ readonly categoryId: string }, CategoryFormError>> {
@@ -43,6 +45,7 @@ export async function createCategory(
     return { ok: false, error: { code: "slug_taken" } };
   }
 
+  updateTag(categoriesTag);
   logCategoryEvent("catalog.category.created", { adminId: admin.id, categoryId });
   return { ok: true, data: { categoryId } };
 }
diff --git a/src/features/categories/actions/delete-category.ts b/src/features/categories/actions/delete-category.ts
index 30b5398..978f930 100644
--- a/src/features/categories/actions/delete-category.ts
+++ b/src/features/categories/actions/delete-category.ts
@@ -1,6 +1,9 @@
 "use server";
 
+import { updateTag } from "next/cache";
+
 import { requireAdmin } from "@/features/admin-auth/require-admin";
+import { catalogTag, categoriesTag } from "@/lib/cache-tags";
 import { db } from "@/lib/db";
 import type { ActionResult } from "@/lib/result";
 
@@ -26,6 +29,9 @@ export async function deleteCategory(
   });
   if (products === null) return { ok: false, error: { code: "not_found" } };
 
+  // The cascade drops links too; the listing index carries both tags (spec 0013, AC-22).
+  updateTag(categoriesTag);
+  updateTag(catalogTag);
   logCategoryEvent("catalog.category.deleted", { adminId: admin.id, categoryId, products });
   return { ok: true, data: null };
 }
diff --git a/src/features/categories/actions/reorder-categories.ts b/src/features/categories/actions/reorder-categories.ts
index bf0f79c..4a870af 100644
--- a/src/features/categories/actions/reorder-categories.ts
+++ b/src/features/categories/actions/reorder-categories.ts
@@ -1,6 +1,9 @@
 "use server";
 
+import { updateTag } from "next/cache";
+
 import { requireAdmin } from "@/features/admin-auth/require-admin";
+import { categoriesTag } from "@/lib/cache-tags";
 import { db } from "@/lib/db";
 import type { ActionResult } from "@/lib/result";
 import { sameIdSet } from "@/lib/sortable";
@@ -39,6 +42,7 @@ export async function reorderCategories(
   });
   if (!saved) return { ok: false, error: { code: "stale" } };
 
+  updateTag(categoriesTag);
   logCategoryEvent("catalog.categories.reordered", { adminId: admin.id, count: orderedIds.length });
   return { ok: true, data: null };
 }
diff --git a/src/features/categories/actions/reorder-category-products.ts b/src/features/categories/actions/reorder-category-products.ts
new file mode 100644
index 0000000..9d3415d
--- /dev/null
+++ b/src/features/categories/actions/reorder-category-products.ts
@@ -0,0 +1,60 @@
+"use server";
+
+import { updateTag } from "next/cache";
+
+import { requireAdmin } from "@/features/admin-auth/require-admin";
+import { categoriesTag } from "@/lib/cache-tags";
+import { db } from "@/lib/db";
+import type { ActionResult } from "@/lib/result";
+import { sameIdSet } from "@/lib/sortable";
+
+import { logCategoryEvent } from "../log";
+import { reorderCategoryProductsSchema } from "../schemas";
+
+export type ReorderCategoryProductsError =
+  { readonly code: "stale" } | { readonly code: "invalid" };
+
+// spec 0013, AC-23: the category's full product list in its new order, which the category
+// page's Featured order follows. The category row is locked first (the order setCategoryProducts
+// and linkAtEnd take it in), so an add or remove meanwhile either waits or makes this stale.
+// Positions become 0..n-1 in one raw statement.
+export async function reorderCategoryProducts(
+  input: unknown,
+): Promise<ActionResult<null, ReorderCategoryProductsError>> {
+  const admin = await requireAdmin();
+
+  const parsed = reorderCategoryProductsSchema.safeParse(input);
+  if (!parsed.success) return { ok: false, error: { code: "invalid" } };
+  const { categoryId, productIds } = parsed.data;
+
+  const saved = await db.$transaction(async (tx) => {
+    const [category] = await tx.$queryRaw<{ id: string }[]>`
+      SELECT id FROM categories WHERE id = ${categoryId}::uuid FOR UPDATE`;
+    if (!category) return false;
+    const current = await tx.productCategory.findMany({
+      where: { categoryId },
+      select: { productId: true },
+    });
+    if (
+      !sameIdSet(
+        productIds,
+        current.map((link) => link.productId),
+      )
+    )
+      return false;
+    await tx.$executeRaw`
+      UPDATE product_categories pc SET position = v.ord - 1
+      FROM unnest(${productIds}::uuid[]) WITH ORDINALITY AS v(id, ord)
+      WHERE pc.category_id = ${categoryId}::uuid AND pc.product_id = v.id`;
+    return true;
+  });
+  if (!saved) return { ok: false, error: { code: "stale" } };
+
+  updateTag(categoriesTag);
+  logCategoryEvent("catalog.category.products_reordered", {
+    adminId: admin.id,
+    categoryId,
+    count: productIds.length,
+  });
+  return { ok: true, data: null };
+}
diff --git a/src/features/categories/actions/set-category-products.ts b/src/features/categories/actions/set-category-products.ts
index f44c88d..2cafbb5 100644
--- a/src/features/categories/actions/set-category-products.ts
+++ b/src/features/categories/actions/set-category-products.ts
@@ -1,6 +1,9 @@
 "use server";
 
+import { updateTag } from "next/cache";
+
 import { requireAdmin } from "@/features/admin-auth/require-admin";
+import { categoriesTag } from "@/lib/cache-tags";
 import { db } from "@/lib/db";
 import { linkAtEnd } from "@/lib/product-categories";
 import type { ActionResult } from "@/lib/result";
@@ -63,6 +66,7 @@ export async function setCategoryProducts(
   );
   if ("code" in outcome) return { ok: false, error: outcome };
 
+  updateTag(categoriesTag);
   logCategoryEvent("catalog.category.updated", { adminId: admin.id, categoryId, ...outcome });
   return { ok: true, data: null };
 }
diff --git a/src/features/categories/actions/update-category.ts b/src/features/categories/actions/update-category.ts
index 071bd04..1adf774 100644
--- a/src/features/categories/actions/update-category.ts
+++ b/src/features/categories/actions/update-category.ts
@@ -1,6 +1,9 @@
 "use server";
 
+import { updateTag } from "next/cache";
+
 import { requireAdmin } from "@/features/admin-auth/require-admin";
+import { categoriesTag } from "@/lib/cache-tags";
 import { db } from "@/lib/db";
 import { uniqueViolation } from "@/lib/db-errors";
 import type { ActionResult } from "@/lib/result";
@@ -38,6 +41,8 @@ export async function updateCategory(
   }
   if (outcome !== "saved") return { ok: false, error: { code: outcome } };
 
+  // A rename, slug change or hide shows on the next storefront request (spec 0013, AC-22).
+  updateTag(categoriesTag);
   logCategoryEvent("catalog.category.updated", { adminId: admin.id, categoryId });
   return { ok: true, data: null };
 }
diff --git a/src/features/categories/components/arranged-products.tsx b/src/features/categories/components/arranged-products.tsx
new file mode 100644
index 0000000..234ef2b
--- /dev/null
+++ b/src/features/categories/components/arranged-products.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { XIcon } from "lucide-react";
+import Link from "next/link";
+
+import { SortableList } from "@/components/sortable-list";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+
+import type { CategoryProduct } from "../admin-queries";
+import { statusLabels } from "./product-status";
+
+// spec 0013, AC-23: the category's products in their draft order, arranged by drag and drop or
+// keyboard, each with Remove, and the Save order bar.
+export function ArrangedProducts({
+  products,
+  disabled,
+  saving,
+  dirty,
+  status,
+  onReorder,
+  onRemove,
+  onSave,
+}: {
+  // In the draft order.
+  readonly products: readonly CategoryProduct[];
+  readonly disabled: boolean;
+  readonly saving: boolean;
+  readonly dirty: boolean;
+  // The last save's outcome, shown when nothing is unsaved.
+  readonly status: string | null;
+  readonly onReorder: (ids: readonly string[]) => void;
+  readonly onRemove: (product: CategoryProduct) => void;
+  readonly onSave: () => void;
+}) {
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="text-sm text-muted-foreground">
+        The category page shows its products in this order. Drag a product, or focus its handle and
+        use Space and the arrow keys, then save the order.
+      </p>
+      <SortableList
+        label="Products in this category"
+        items={products}
+        disabled={disabled}
+        onReorder={onReorder}
+        renderItem={(product, handle, index) => (
+          <div className="flex flex-wrap items-center gap-3 rounded-md border bg-card p-2 pr-3">
+            {handle}
+            <span className="w-6 text-right text-sm text-muted-foreground tabular-nums">
+              {index + 1}
+            </span>
+            <Link
+              href={`/admin/products/${product.id}`}
+              className="min-w-0 flex-1 font-medium underline-offset-4 hover:underline"
+            >
+              {product.name}
+            </Link>
+            <Badge variant={product.status === "active" ? "secondary" : "outline"}>
+              {statusLabels[product.status]}
+            </Badge>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={disabled}
+              onClick={() => onRemove(product)}
+            >
+              <XIcon data-icon="inline-start" aria-hidden="true" />
+              Remove<span className="sr-only"> {product.name}</span>
+            </Button>
+          </div>
+        )}
+      />
+      <div className="flex flex-wrap items-center gap-3">
+        <Button type="button" disabled={!dirty || disabled} onClick={onSave}>
+          {saving ? <Spinner data-icon="inline-start" /> : null}
+          Save order
+        </Button>
+        <p role="status" className="text-sm text-muted-foreground">
+          {dirty ? "Unsaved order." : status}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/categories/components/category-form.tsx b/src/features/categories/components/category-form.tsx
index b96cf77..de10594 100644
--- a/src/features/categories/components/category-form.tsx
+++ b/src/features/categories/components/category-form.tsx
@@ -186,7 +186,7 @@ export function CategoryForm({
           <div className="flex flex-col gap-1">
             <FieldLabel htmlFor="category-visible">Visible</FieldLabel>
             <FieldDescription id="category-visible-description">
-              Shoppers will see visible categories once the storefront lists them.
+              Shoppers see a visible category in the store header and on its own page.
             </FieldDescription>
           </div>
         </Field>
diff --git a/src/features/categories/components/category-header.tsx b/src/features/categories/components/category-header.tsx
new file mode 100644
index 0000000..2166190
--- /dev/null
+++ b/src/features/categories/components/category-header.tsx
@@ -0,0 +1,33 @@
+import { notFound } from "next/navigation";
+
+import { Skeleton } from "@/components/ui/skeleton";
+
+import { getCategoryBySlug } from "../queries";
+
+// spec 0013, AC-1 to AC-3: the category's name and plain text description. Reads only the
+// path, so a prerendered category serves it from the static shell. An unknown, malformed or
+// hidden slug gets the store's 404 page (status 200 under Cache Components, like products).
+export async function CategoryHeader({ params }: { readonly params: Promise<{ slug: string }> }) {
+  const category = await getCategoryBySlug((await params).slug);
+  if (!category) notFound();
+
+  return (
+    <header className="flex flex-col gap-3">
+      <h1 className="font-heading text-4xl text-balance md:text-5xl">{category.name}</h1>
+      {category.description ? (
+        <p className="max-w-prose text-lg whitespace-pre-line text-muted-foreground">
+          {category.description}
+        </p>
+      ) : null}
+    </header>
+  );
+}
+
+export function CategoryHeaderSkeleton() {
+  return (
+    <div className="flex flex-col gap-3" aria-hidden="true">
+      <Skeleton className="h-12 w-2/3 max-w-md" />
+      <Skeleton className="h-6 w-full max-w-prose" />
+    </div>
+  );
+}
diff --git a/src/features/categories/components/category-products.tsx b/src/features/categories/components/category-products.tsx
index 0e803f9..945123a 100644
--- a/src/features/categories/components/category-products.tsx
+++ b/src/features/categories/components/category-products.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { PlusIcon, XIcon } from "lucide-react";
-import Link from "next/link";
+import { PlusIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 
@@ -11,22 +10,32 @@ import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/toast";
 import { useHydrated } from "@/hooks/use-hydrated";
 
+import { reorderCategoryProducts } from "../actions/reorder-category-products";
 import { setCategoryProducts } from "../actions/set-category-products";
 import type { CategoryProduct } from "../admin-queries";
-
-const statusLabels = { draft: "Draft", active: "Active", archived: "Archived" } as const;
+import { ArrangedProducts } from "./arranged-products";
+import { DiscardOrderDialog } from "./discard-order-dialog";
+import { statusLabels } from "./product-status";
+import { useDraftOrder } from "./use-draft-order";
 
 const errorMessages = {
   unknown_product: "That product was deleted meanwhile. Search again.",
   not_found: "This category no longer exists. Go back to the categories.",
 } as const;
 
-function productHref(id: string) {
-  return `/admin/products/${id}`;
-}
+const staleOrderMessage =
+  "The products in this category changed meanwhile, so the order was not saved. Here is the current list.";
+
+type Change = {
+  readonly productId: string;
+  readonly action: "add" | "remove";
+  readonly name: string;
+};
 
 // spec 0009, AC-18: the category's products with Remove buttons, and the "Add products" search
 // results with Add buttons. The search itself is a plain GET form on the page.
+// spec 0013, AC-23: the list is arranged as a draft until Save order (ArrangedProducts); the
+// category page's Featured order follows it.
 export function CategoryProducts({
   categoryId,
   products,
@@ -34,6 +43,7 @@ export function CategoryProducts({
   searched,
 }: {
   readonly categoryId: string;
+  // In the category's own order.
   readonly products: readonly CategoryProduct[];
   // The search results, or null when nothing was searched.
   readonly results: readonly CategoryProduct[] | null;
@@ -44,10 +54,22 @@ export function CategoryProducts({
   const [pending, startTransition] = useTransition();
   const [busy, setBusy] = useState<string | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
-  const linked = new Set(products.map((product) => product.id));
+  const [status, setStatus] = useState<string | null>(null);
+  const loaded = products.map((product) => product.id);
+  const draft = useDraftOrder(loaded);
+  const [discarding, setDiscarding] = useState<Change | null>(null);
+  const linked = new Set(loaded);
+  const byId = new Map(products.map((product) => [product.id, product]));
+  const shown = draft.order.flatMap((id) => {
+    const product = byId.get(id);
+    return product ? [product] : [];
+  });
+  const disabled = pending || !hydrated;
 
-  function change(productId: string, action: "add" | "remove", name: string) {
+  function change({ productId, action, name }: Change) {
     setNotice(null);
+    setStatus(null);
+    draft.reset();
     setBusy(productId);
     startTransition(async () => {
       const result = await setCategoryProducts({
@@ -69,40 +91,49 @@ export function CategoryProducts({
     });
   }
 
+  // Remove or Add would drop an unsaved order, so it asks first.
+  function request(next: Change) {
+    if (draft.dirty) setDiscarding(next);
+    else change(next);
+  }
+
+  function saveOrder() {
+    setNotice(null);
+    setStatus(null);
+    startTransition(async () => {
+      const result = await reorderCategoryProducts({ categoryId, productIds: draft.order });
+      if (result.ok) {
+        setStatus("Order saved.");
+        router.refresh();
+        return;
+      }
+      setNotice(staleOrderMessage);
+      draft.reset();
+      router.refresh();
+    });
+  }
+
   return (
     <div className="flex flex-col gap-6">
       <FormNotice message={notice} />
       {products.length === 0 ? (
         <p className="text-sm text-muted-foreground">No products in this category yet.</p>
       ) : (
-        <ul
-          aria-label="Products in this category"
-          className="flex flex-col divide-y rounded-md border"
-        >
-          {products.map((product) => (
-            <li key={product.id} className="flex flex-wrap items-center gap-3 p-3">
-              <Link
-                href={productHref(product.id)}
-                className="min-w-0 flex-1 font-medium underline-offset-4 hover:underline"
-              >
-                {product.name}
-              </Link>
-              <Badge variant={product.status === "active" ? "secondary" : "outline"}>
-                {statusLabels[product.status]}
-              </Badge>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                disabled={pending || !hydrated}
-                onClick={() => change(product.id, "remove", product.name)}
-              >
-                <XIcon data-icon="inline-start" aria-hidden="true" />
-                Remove<span className="sr-only"> {product.name}</span>
-              </Button>
-            </li>
-          ))}
-        </ul>
+        <ArrangedProducts
+          products={shown}
+          disabled={disabled}
+          saving={pending && busy === null}
+          dirty={draft.dirty}
+          status={status}
+          onReorder={(next) => {
+            setStatus(null);
+            draft.setOrder(next);
+          }}
+          onRemove={(product) =>
+            request({ productId: product.id, action: "remove", name: product.name })
+          }
+          onSave={saveOrder}
+        />
       )}
 
       {results === null ? null : (
@@ -127,8 +158,10 @@ export function CategoryProducts({
                       type="button"
                       variant="outline"
                       size="sm"
-                      disabled={pending || !hydrated}
-                      onClick={() => change(product.id, "add", product.name)}
+                      disabled={disabled}
+                      onClick={() =>
+                        request({ productId: product.id, action: "add", name: product.name })
+                      }
                     >
                       <PlusIcon data-icon="inline-start" aria-hidden="true" />
                       {busy === product.id ? "Adding…" : "Add"}
@@ -141,6 +174,16 @@ export function CategoryProducts({
           )}
         </section>
       )}
+
+      <DiscardOrderDialog
+        action={discarding?.action ?? null}
+        onCancel={() => setDiscarding(null)}
+        onConfirm={() => {
+          const next = discarding;
+          setDiscarding(null);
+          if (next) change(next);
+        }}
+      />
     </div>
   );
 }
diff --git a/src/features/categories/components/discard-order-dialog.tsx b/src/features/categories/components/discard-order-dialog.tsx
new file mode 100644
index 0000000..97fc403
--- /dev/null
+++ b/src/features/categories/components/discard-order-dialog.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+// spec 0013, AC-23: Add or Remove reloads the list in its saved order, so with an unsaved order
+// it asks first. Open while `action` is set.
+export function DiscardOrderDialog({
+  action,
+  onCancel,
+  onConfirm,
+}: {
+  readonly action: "add" | "remove" | null;
+  readonly onCancel: () => void;
+  readonly onConfirm: () => void;
+}) {
+  return (
+    <Dialog open={action !== null} onOpenChange={(open) => (open ? null : onCancel())}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Discard the unsaved order?</DialogTitle>
+          <DialogDescription>
+            {action === "add" ? "Adding" : "Removing"} a product reloads the list in its saved
+            order, so the order you arranged is lost.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose render={<Button variant="outline" />}>Keep arranging</DialogClose>
+          <Button type="button" onClick={onConfirm}>
+            Discard and {action === "add" ? "add" : "remove"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/features/categories/components/product-status.ts b/src/features/categories/components/product-status.ts
new file mode 100644
index 0000000..b52019d
--- /dev/null
+++ b/src/features/categories/components/product-status.ts
@@ -0,0 +1 @@
+export const statusLabels = { draft: "Draft", active: "Active", archived: "Archived" } as const;
diff --git a/src/features/categories/components/use-draft-order.ts b/src/features/categories/components/use-draft-order.ts
new file mode 100644
index 0000000..58e374b
--- /dev/null
+++ b/src/features/categories/components/use-draft-order.ts
@@ -0,0 +1,19 @@
+import { useState } from "react";
+
+// spec 0013, AC-23: the arranged order is a draft over the loaded list until Save order. A
+// refresh with a new list (a save, a reload after stale, an add or remove) replaces the draft.
+export function useDraftOrder(loaded: readonly string[]) {
+  const loadedKey = loaded.join(",");
+  const [order, setOrder] = useState<readonly string[]>(loaded);
+  const [seen, setSeen] = useState(loadedKey);
+  if (seen !== loadedKey) {
+    setSeen(loadedKey);
+    setOrder(loaded);
+  }
+  return {
+    order,
+    setOrder,
+    reset: () => setOrder(loaded),
+    dirty: order.join(",") !== loadedKey,
+  } as const;
+}
diff --git a/src/features/categories/log.ts b/src/features/categories/log.ts
index 8d5d23e..20f2986 100644
--- a/src/features/categories/log.ts
+++ b/src/features/categories/log.ts
@@ -11,6 +11,8 @@ type CategoryEvents = {
   };
   "catalog.category.deleted": { readonly categoryId: string; readonly products: number };
   "catalog.categories.reordered": { readonly count: number };
+  // spec 0013, AC-23: like the rest, ids and a count; the new order itself is in the database.
+  "catalog.category.products_reordered": { readonly categoryId: string; readonly count: number };
 };
 
 export const logCategoryEvent = createAdminEventLogger<CategoryEvents>();
diff --git a/src/features/categories/paths.ts b/src/features/categories/paths.ts
index dcb2cea..cb7f581 100644
--- a/src/features/categories/paths.ts
+++ b/src/features/categories/paths.ts
@@ -4,3 +4,8 @@ export const newCategoryPath = `${adminCategoriesPath}/new`;
 export function adminCategoryPath(id: string): string {
   return `${adminCategoriesPath}/${id}`;
 }
+
+// The storefront category page (spec 0013, AC-1).
+export function categoryPath(slug: string): string {
+  return `/categories/${slug}`;
+}
diff --git a/src/features/categories/queries.ts b/src/features/categories/queries.ts
new file mode 100644
index 0000000..3e81f90
--- /dev/null
+++ b/src/features/categories/queries.ts
@@ -0,0 +1,64 @@
+import "server-only";
+
+import { cacheLife, cacheTag } from "next/cache";
+
+import { categoriesTag } from "@/lib/cache-tags";
+import { db } from "@/lib/db";
+import { SLUG_PATTERN } from "@/lib/slug";
+
+// Cached storefront reads (spec 0013, AC-22): only visible categories, tagged `categories`, so
+// every category write shows on the next request.
+
+export type NavCategory = { readonly name: string; readonly slug: string };
+
+// AC-3: the header nav, in admin order.
+export async function getNavCategories(): Promise<readonly NavCategory[]> {
+  "use cache";
+  cacheLife("max");
+  cacheTag(categoriesTag);
+
+  return db.category.findMany({
+    where: { visible: true },
+    orderBy: [{ position: "asc" }, { id: "asc" }],
+    select: { name: true, slug: true },
+  });
+}
+
+export type StoreCategory = {
+  readonly id: string;
+  readonly name: string;
+  readonly slug: string;
+  readonly description: string | null;
+  readonly metaTitle: string | null;
+  readonly metaDescription: string | null;
+};
+
+// AC-2: null for an unknown, malformed or hidden slug.
+export async function getCategoryBySlug(slug: string): Promise<StoreCategory | null> {
+  "use cache";
+  cacheLife("max");
+  cacheTag(categoriesTag);
+  if (!SLUG_PATTERN.test(slug)) return null;
+
+  return db.category.findFirst({
+    where: { slug, visible: true },
+    select: {
+      id: true,
+      name: true,
+      slug: true,
+      description: true,
+      metaTitle: true,
+      metaDescription: true,
+    },
+  });
+}
+
+// Prerendered at build: every visible category (there are few).
+export async function getPrerenderedCategorySlugs(): Promise<readonly string[]> {
+  const categories = await db.category.findMany({
+    where: { visible: true },
+    orderBy: [{ position: "asc" }, { id: "asc" }],
+    select: { slug: true },
+  });
+  return categories.map((category) => category.slug);
+}
diff --git a/src/features/categories/schemas.ts b/src/features/categories/schemas.ts
index e0f8e11..b8810c4 100644
--- a/src/features/categories/schemas.ts
+++ b/src/features/categories/schemas.ts
@@ -37,6 +37,12 @@ export const reorderCategoriesSchema = z.object({
   orderedIds: z.array(z.uuid()).max(10_000),
 });
 
+// spec 0013, AC-23: the category's whole product list, in its new order.
+export const reorderCategoryProductsSchema = z.object({
+  categoryId: z.uuid(),
+  productIds: z.array(z.uuid()).max(10_000),
+});
+
 export const setCategoryProductsSchema = z.object({
   categoryId: z.uuid(),
   add: z.array(z.uuid()).max(100).default([]),
diff --git a/src/lib/cache-tags.ts b/src/lib/cache-tags.ts
index b1d42ab..0216a29 100644
--- a/src/lib/cache-tags.ts
+++ b/src/lib/cache-tags.ts
@@ -10,3 +10,7 @@ export function productTag(slug: string): string {
 // The one store_settings row (spec 0007): the delivery fee and free delivery threshold the cart
 // and checkout show. Pay never reads it through the cache.
 export const storeSettingsTag = "store-settings";
+
+// Category membership, order and visibility (spec 0013, AC-22): the header nav, category pages
+// and the listing index. Every category write expires it after its commit.
+export const categoriesTag = "categories";
diff --git a/src/lib/search-text.test.ts b/src/lib/search-text.test.ts
new file mode 100644
index 0000000..8bce0a9
--- /dev/null
+++ b/src/lib/search-text.test.ts
@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+
+import { facetKey, foldText, matchesWords, searchWords } from "./search-text";
+
+describe("foldText", () => {
+  it.each([
+    ["Kościół", "kosciol"],
+    ["ŁÓDŹ", "lodz"],
+    ["Øre", "ore"],
+    ["Đorđe", "dorde"],
+    ["Straße", "strasse"],
+    ["Æble", "aeble"],
+    ["Cœur", "coeur"],
+    ["Crème Brûlée", "creme brulee"],
+    // A precomposed letter and a letter plus a combining mark fold the same way.
+    ["é", "e"],
+    ["İstanbul", "istanbul"],
+  ])("folds %s to %s", (text, folded) => {
+    expect(foldText(text)).toBe(folded);
+  });
+});
+
+describe("searchWords", () => {
+  it("splits on anything that is not a letter or digit", () => {
+    expect(searchWords("T-Shirt, 2-pack!")).toEqual(["t", "shirt", "2", "pack"]);
+    expect(searchWords("  ")).toEqual([]);
+    expect(searchWords("!!")).toEqual([]);
+  });
+
+  it("keeps letters of other scripts", () => {
+    expect(searchWords("Футболка Синяя")).toEqual(["футболка", "синяя"]);
+  });
+});
+
+describe("facetKey", () => {
+  it("merges spellings of one option name or value", () => {
+    expect(facetKey("Colour")).toBe("colour");
+    expect(facetKey("colour ")).toBe("colour");
+    expect(facetKey("COLOUR")).toBe("colour");
+    expect(facetKey("Navy  Blue")).toBe("navy-blue");
+    expect(facetKey("--Extra / Large--")).toBe("extra-large");
+  });
+
+  it("keeps a key for Cyrillic names and is empty without letters or digits", () => {
+    expect(facetKey("Цвет")).toBe("цвет");
+    expect(facetKey("—")).toBe("");
+    expect(facetKey("")).toBe("");
+  });
+});
+
+describe("matchesWords (spec 0013, AC-7)", () => {
+  const name = (text: string) => searchWords(text);
+
+  it.each([
+    ["kosciol", "Kościół", true],
+    ["blu tee", "Blue Tee", true],
+    ["TEE", "Tee", true],
+    ["tee", "Settee", false],
+    ["tee blue", "Blue Tee", true],
+    ["blue shirt", "Blue Tee", false],
+  ])("%s against %s is %s", (query, product, expected) => {
+    expect(matchesWords(name(product), searchWords(query))).toBe(expected);
+  });
+});
diff --git a/src/lib/search-text.ts b/src/lib/search-text.ts
new file mode 100644
index 0000000..4b633f5
--- /dev/null
+++ b/src/lib/search-text.ts
@@ -0,0 +1,44 @@
+// Pure: the one text fold behind storefront search and the filter keys (spec 0013, AC-7, AC-13).
+// Not `slugify`: it turns ł into a separator ("Kościół" → `koscio`), so letters that NFKD leaves
+// whole are mapped by hand after the combining marks go.
+
+const unsplitLetters: Readonly<Record<string, string>> = {
+  ł: "l",
+  ø: "o",
+  đ: "d",
+  ß: "ss",
+  æ: "ae",
+  œ: "oe",
+};
+
+const unsplitPattern = /[łøđßæœ]/g;
+
+// Lowercase, accents removed, the letters above mapped. Search and filter keys both use it, so
+// "Kościół", "KOSCIOL" and "kosciol" are one thing everywhere.
+export function foldText(text: string): string {
+  return text
+    .toLowerCase()
+    .normalize("NFKD")
+    .replace(/\p{M}/gu, "")
+    .replace(unsplitPattern, (letter) => unsplitLetters[letter] ?? letter);
+}
+
+// The folded words of a text, split on anything that is not a letter or digit.
+export function searchWords(text: string): readonly string[] {
+  return foldText(text)
+    .split(/[^\p{L}\p{N}]+/u)
+    .filter((word) => word !== "");
+}
+
+// A filter key or value key: folded, each run of anything but letters and digits one `-`,
+// trimmed. Empty when the text has no letter or digit; callers skip those.
+export function facetKey(text: string): string {
+  return foldText(text)
+    .replace(/[^\p{L}\p{N}]+/gu, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+// AC-7: every query word starts some word of the name.
+export function matchesWords(nameWords: readonly string[], queryWords: readonly string[]): boolean {
+  return queryWords.every((query) => nameWords.some((word) => word.startsWith(query)));
+}
diff --git a/tests/db/catalog-actions.db.test.ts b/tests/db/catalog-actions.db.test.ts
index 8b9628a..f7aab06 100644
--- a/tests/db/catalog-actions.db.test.ts
+++ b/tests/db/catalog-actions.db.test.ts
@@ -102,6 +102,8 @@ describe("createProduct", () => {
     ]);
     expect(mocks.updateTag).toHaveBeenCalledWith("catalog");
     expect(mocks.updateTag).toHaveBeenCalledWith("product:linen-shirt");
+    // spec 0013, AC-22: it may join categories.
+    expect(mocks.updateTag).toHaveBeenCalledWith("categories");
     expect(mocks.info).toHaveBeenCalledWith(
       {
         event: "catalog.product.created",
diff --git a/tests/db/catalog-arrange-delete.db.test.ts b/tests/db/catalog-arrange-delete.db.test.ts
index 0501136..d548673 100644
--- a/tests/db/catalog-arrange-delete.db.test.ts
+++ b/tests/db/catalog-arrange-delete.db.test.ts
@@ -290,8 +290,8 @@ describe("updateProductCategories", () => {
       ]),
     );
     expect(await testDb.productCategory.count({ where: { productId: product.id } })).toBe(2);
-    // AC-23: no storefront read uses categories yet.
-    expect(mocks.updateTag).not.toHaveBeenCalled();
+    // spec 0013, AC-22: the category pages and the listing index follow.
+    expect(mocks.updateTag.mock.calls.map(([tag]) => tag)).toEqual(["categories"]);
   });
 
   it("refuses a save over another change to the product's categories", async () => {
diff --git a/tests/db/catalog-listing.db.test.ts b/tests/db/catalog-listing.db.test.ts
new file mode 100644
index 0000000..a0842d3
--- /dev/null
+++ b/tests/db/catalog-listing.db.test.ts
@@ -0,0 +1,310 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { resetDatabaseBeforeEach, testDb } from "./client";
+import { createProductWithOptions, createSimpleProduct, createVariant } from "./fixtures";
+
+// The storefront discovery reads against a real Postgres (spec 0013): the cached listing index
+// (AC-2, AC-22) and the category reads (AC-2, AC-3).
+
+const mocks = vi.hoisted(() => ({ cacheTag: vi.fn(), cacheLife: vi.fn() }));
+
+vi.mock("server-only", () => ({}));
+vi.mock("@/lib/db", async () => ({ db: (await import("./client")).testDb }));
+vi.mock("@/lib/env", () => ({ env: { NEXT_PUBLIC_SUPABASE_URL: "http://127.0.0.1:55321" } }));
+vi.mock("next/cache", () => ({ cacheTag: mocks.cacheTag, cacheLife: mocks.cacheLife }));
+
+const { getListingIndex } = await import("@/features/catalog/listing/index-query");
+const { buildListing } = await import("@/features/catalog/listing/listing");
+const { parseListingParams } = await import("@/features/catalog/listing/params");
+const { getCategoryBySlug, getNavCategories, getPrerenderedCategorySlugs } =
+  await import("@/features/categories/queries");
+
+resetDatabaseBeforeEach();
+
+beforeEach(() => vi.clearAllMocks());
+
+const at = (minute: number) => new Date(Date.UTC(2026, 8, 1, 12, minute));
+
+// A listable product: active with one live variant.
+async function listed(
+  slug: string,
+  data: Partial<{
+    status: "draft" | "active" | "archived";
+    position: number;
+    createdAt: Date;
+  }> = {},
+  variant: Partial<{ priceCents: number; stockQuantity: number }> = {},
+) {
+  const product = await testDb.product.create({
+    data: { name: slug, slug, status: "active", ...data },
+  });
+  await createVariant(product.id, { sku: `SKU-${slug}`, ...variant });
+  return product;
+}
+
+async function homeCards() {
+  const listing = buildListing(
+    await getListingIndex(),
+    { kind: "home" },
+    parseListingParams({}, "home", "EUR"),
+    "en",
+  );
+  if (listing.status !== "ok") throw new Error("home never prompts");
+  return listing.products;
+}
+
+describe("getListingIndex", () => {
+  it("holds only active products with a live variant, and is tagged catalog and categories", async () => {
+    await listed("old-first", { position: 0, createdAt: at(1) });
+    await listed("new-first", { position: 0, createdAt: at(2) });
+    await listed("later", { position: 1, createdAt: at(3) });
+    await listed("a-draft", { status: "draft", createdAt: at(4) });
+    await listed("archived", { status: "archived", createdAt: at(5) });
+    await testDb.product.create({ data: { name: "bare", slug: "bare", status: "active" } });
+    const gone = await listed("only-archived-variants");
+    await testDb.productVariant.updateMany({
+      where: { productId: gone.id },
+      data: { archived: true },
+    });
+
+    expect((await homeCards()).map((card) => card.slug)).toEqual([
+      "new-first",
+      "old-first",
+      "later",
+    ]);
+    expect(mocks.cacheTag).toHaveBeenCalledWith("catalog", "categories");
+    expect(mocks.cacheLife).toHaveBeenCalledWith("max");
+  });
+
+  it("has no paging cap: every listable product is in the index", async () => {
+    for (let i = 0; i < 50; i += 1) await listed(`p-${i}`);
+
+    expect(await getListingIndex()).toHaveLength(50);
+  });
+
+  it("keeps stock only as a boolean, never the count", async () => {
+    const shirt = await listed("shirt", {}, { stockQuantity: 12 });
+    await createVariant(shirt.id, { sku: "B", stockQuantity: 0, optionKey: "b", position: 1 });
+
+    const [entry] = await getListingIndex();
+
+    expect(entry?.variants.map((variant) => variant.inStock)).toEqual([true, false]);
+    for (const variant of entry?.variants ?? []) {
+      expect(Object.keys(variant).toSorted()).toEqual([
+        "compareAtPriceCents",
+        "inStock",
+        "priceCents",
+        "valueIndexes",
+      ]);
+    }
+  });
+
+  it("gives the card price range over live variants, ignoring archived ones", async () => {
+    const shirt = await listed("shirt", {}, { priceCents: 1500 });
+    await createVariant(shirt.id, { sku: "B", priceCents: 2500, optionKey: "b" });
+    const archived = await createVariant(shirt.id, { sku: "C", priceCents: 100, optionKey: "c" });
+    await testDb.productVariant.update({ where: { id: archived.id }, data: { archived: true } });
+
+    const [card] = await homeCards();
+
+    expect(card).toMatchObject({ minPriceCents: 1500, maxPriceCents: 2500, soldOut: false });
+  });
+
+  it("is sold out only when every live variant has no stock, and on sale only in stock", async () => {
+    await createSimpleProduct("gone", 0);
+    await createSimpleProduct("left", 1);
+    const sale = await listed("sale", {}, { stockQuantity: 2 });
+    const soldOutSale = await listed("sold-out-sale", {}, { stockQuantity: 0 });
+    await testDb.productVariant.updateMany({
+      where: { productId: { in: [sale.id, soldOutSale.id] } },
+      data: { compareAtPriceCents: 4000 },
+    });
+
+    const cards = new Map((await homeCards()).map((card) => [card.slug, card]));
+
+    expect(cards.get("tee-gone")?.soldOut).toBe(true);
+    expect(cards.get("tee-left")?.soldOut).toBe(false);
+    expect(cards.get("sale")?.onSale).toBe(true);
+    expect(cards.get("sold-out-sale")).toMatchObject({ onSale: false, soldOut: true });
+  });
+
+  it("shows the first image by position, or the decorative placeholder", async () => {
+    const withImage = await listed("with-image", { createdAt: at(2) });
+    await listed("without-image", { createdAt: at(1) });
+    await testDb.productImage.createMany({
+      data: [
+        {
+          productId: withImage.id,
+          storagePath: "products/second.png",
+          altText: "Back",
+          position: 1,
+        },
+        {
+          productId: withImage.id,
+          storagePath: "products/first.png",
+          altText: "Front",
+          position: 0,
+          width: 800,
+          height: 1000,
+        },
+      ],
+    });
+
+    const [first, second] = await homeCards();
+
+    expect(first?.image).toEqual({
+      src: "http://127.0.0.1:55321/storage/v1/object/public/product-images/products/first.png",
+      alt: "Front",
+      width: 800,
+      height: 1000,
+    });
+    expect(second?.image).toEqual({ src: "/placeholder.svg", alt: "", width: null, height: null });
+  });
+
+  it("carries option values per variant and the category positions", async () => {
+    const { product, variants } = await createProductWithOptions("tee");
+    const category = await testDb.category.create({
+      data: { name: "Tees", slug: "tees", position: 0 },
+    });
+    await testDb.productCategory.create({
+      data: { productId: product.id, categoryId: category.id, position: 7 },
+    });
+
+    const [entry] = await getListingIndex();
+
+    expect(entry?.categoryPositions).toEqual({ [category.id]: 7 });
+    expect(entry?.optionTypes).toEqual([
+      {
+        key: "size",
+        label: "Size",
+        values: [
+          { key: "s", label: "S" },
+          { key: "m", label: "M" },
+        ],
+      },
+      {
+        key: "color",
+        label: "Color",
+        values: [
+          { key: "red", label: "Red" },
+          { key: "blue", label: "Blue" },
+        ],
+      },
+    ]);
+    // S Red, S Blue, M Red, M Blue: each variant points at its size and colour.
+    expect(entry?.variants.map((variant) => variant.valueIndexes.toSorted())).toEqual([
+      [
+        [0, 0],
+        [1, 0],
+      ],
+      [
+        [0, 0],
+        [1, 1],
+      ],
+      [
+        [0, 1],
+        [1, 0],
+      ],
+      [
+        [0, 1],
+        [1, 1],
+      ],
+    ]);
+    expect(variants).toHaveLength(4);
+  });
+
+  it("stays well under the cache entry limit at 500 products", async () => {
+    const products = Array.from({ length: 500 }, (_, i) => ({
+      name: `Linen shirt number ${i}`,
+      slug: `linen-${i}`,
+      status: "active" as const,
+    }));
+    await testDb.product.createMany({ data: products });
+    const rows = await testDb.product.findMany({ select: { id: true } });
+    for (const row of rows) {
+      const size = await testDb.productOptionType.create({
+        data: {
+          productId: row.id,
+          name: "Size",
+          position: 0,
+          values: {
+            create: ["XS", "S", "M", "L", "XL"].map((value, position) => ({ value, position })),
+          },
+        },
+        include: { values: true },
+      });
+      await testDb.productVariant.createMany({
+        data: size.values.map((value, position) => ({
+          productId: row.id,
+          sku: `SKU-${row.id}-${value.value}`,
+          priceCents: 3000 + position * 100,
+          stockQuantity: 3,
+          position,
+          optionKey: value.id,
+        })),
+      });
+      const variantRows = await testDb.productVariant.findMany({
+        where: { productId: row.id },
+        select: { id: true, optionKey: true },
+      });
+      await testDb.variantOptionValue.createMany({
+        data: variantRows.map((variant) => ({
+          variantId: variant.id,
+          optionValueId: variant.optionKey,
+        })),
+      });
+    }
+
+    const index = await getListingIndex();
+
+    expect(index).toHaveLength(500);
+    // Next's cache entries go up to 2 MB; keep a wide margin.
+    expect(new TextEncoder().encode(JSON.stringify(index)).length).toBeLessThan(1_000_000);
+  }, 120_000);
+});
+
+describe("category reads", () => {
+  async function category(slug: string, position: number, visible = true) {
+    return testDb.category.create({
+      data: {
+        name: `Cat ${slug}`,
+        slug,
+        position,
+        visible,
+        description: "Light and cool.",
+        metaTitle: slug === "linen" ? "Linen shirts" : null,
+      },
+    });
+  }
+
+  it("lists visible categories in admin order for the nav, tagged categories", async () => {
+    await category("wool", 1);
+    await category("linen", 0);
+    await category("hidden", 2, false);
+
+    expect(await getNavCategories()).toEqual([
+      { name: "Cat linen", slug: "linen" },
+      { name: "Cat wool", slug: "wool" },
+    ]);
+    expect(await getPrerenderedCategorySlugs()).toEqual(["linen", "wool"]);
+    expect(mocks.cacheTag).toHaveBeenCalledWith("categories");
+  });
+
+  it("finds a visible category by slug, and null for unknown, malformed or hidden", async () => {
+    const linen = await category("linen", 0);
+    await category("hidden", 1, false);
+
+    expect(await getCategoryBySlug("linen")).toEqual({
+      id: linen.id,
+      name: "Cat linen",
+      slug: "linen",
+      description: "Light and cool.",
+      metaTitle: "Linen shirts",
+      metaDescription: null,
+    });
+    expect(await getCategoryBySlug("hidden")).toBeNull();
+    expect(await getCategoryBySlug("nope")).toBeNull();
+    expect(await getCategoryBySlug("Not A Slug")).toBeNull();
+    expect(mocks.cacheTag).toHaveBeenCalledWith("categories");
+  });
+});
diff --git a/tests/db/catalog-queries.db.test.ts b/tests/db/catalog-queries.db.test.ts
index e1ef558..424542a 100644
--- a/tests/db/catalog-queries.db.test.ts
+++ b/tests/db/catalog-queries.db.test.ts
@@ -3,8 +3,8 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { resetDatabaseBeforeEach, testDb } from "./client";
 import { createProductWithOptions, createSimpleProduct, createVariant } from "./fixtures";
 
-// The catalog reads against a real Postgres: the home grid (AC-6), the product page view
-// (AC-7), their cache tags (AC-14) and the admin list (AC-1).
+// The catalog reads against a real Postgres: the product page view (AC-7), its cache tag
+// (AC-14) and the admin list (AC-1). The listing index has catalog-listing.db.test.ts.
 
 const mocks = vi.hoisted(() => ({ cacheTag: vi.fn(), cacheLife: vi.fn() }));
 
@@ -13,8 +13,7 @@ vi.mock("@/lib/db", async () => ({ db: (await import("./client")).testDb }));
 vi.mock("@/lib/env", () => ({ env: { NEXT_PUBLIC_SUPABASE_URL: "http://127.0.0.1:55321" } }));
 vi.mock("next/cache", () => ({ cacheTag: mocks.cacheTag, cacheLife: mocks.cacheLife }));
 
-const { getActiveProducts, getPrerenderedSlugs, getProductBySlug, HOME_PRODUCT_LIMIT } =
-  await import("@/features/catalog/queries");
+const { getPrerenderedSlugs, getProductBySlug } = await import("@/features/catalog/queries");
 const { getAdminProducts, parseAdminProductsParams } =
   await import("@/features/catalog/admin-queries");
 
@@ -31,89 +30,6 @@ async function product(
   return testDb.product.create({ data: { name: slug, slug, status: "active", ...data } });
 }
 
-describe("getActiveProducts", () => {
-  it("lists active products by position, then newest first, and tags the list", async () => {
-    await product("old-first", { position: 0, createdAt: at(1) });
-    await product("new-first", { position: 0, createdAt: at(2) });
-    await product("later", { position: 1, createdAt: at(3) });
-    await product("a-draft", { status: "draft", createdAt: at(4) });
-    await product("archived", { status: "archived", createdAt: at(5) });
-
-    const cards = await getActiveProducts();
-
-    expect(cards.map((card) => card.slug)).toEqual(["new-first", "old-first", "later"]);
-    expect(mocks.cacheTag).toHaveBeenCalledWith("catalog");
-  });
-
-  it(`stops at ${48} products`, async () => {
-    await testDb.product.createMany({
-      data: Array.from({ length: 50 }, (_, i) => ({
-        name: `P${i}`,
-        slug: `p-${i}`,
-        status: "active" as const,
-      })),
-    });
-
-    expect(HOME_PRODUCT_LIMIT).toBe(48);
-    expect(await getActiveProducts()).toHaveLength(48);
-  });
-
-  it("gives the price range of live variants, ignoring archived ones", async () => {
-    const shirt = await product("shirt", {});
-    await createVariant(shirt.id, { sku: "A", priceCents: 1500, optionKey: "a" });
-    await createVariant(shirt.id, { sku: "B", priceCents: 2500, optionKey: "b" });
-    const archived = await createVariant(shirt.id, { sku: "C", priceCents: 100, optionKey: "c" });
-    await testDb.productVariant.update({ where: { id: archived.id }, data: { archived: true } });
-
-    const [card] = await getActiveProducts();
-
-    expect(card).toMatchObject({ minPriceCents: 1500, maxPriceCents: 2500, soldOut: false });
-  });
-
-  it("is sold out only when every live variant has no stock", async () => {
-    const { product: gone } = await createSimpleProduct("gone", 0);
-    const { product: left } = await createSimpleProduct("left", 1);
-
-    const cards = await getActiveProducts();
-
-    expect(cards.find((card) => card.id === gone.id)?.soldOut).toBe(true);
-    expect(cards.find((card) => card.id === left.id)?.soldOut).toBe(false);
-  });
-
-  it("shows the first image by position, or the decorative placeholder", async () => {
-    const withImage = await product("with-image", { createdAt: at(2) });
-    await product("without-image", { createdAt: at(1) });
-    await testDb.productImage.createMany({
-      data: [
-        {
-          productId: withImage.id,
-          storagePath: "products/second.png",
-          altText: "Back",
-          position: 1,
-        },
-        {
-          productId: withImage.id,
-          storagePath: "products/first.png",
-          altText: "Front",
-          position: 0,
-          width: 800,
-          height: 1000,
-        },
-      ],
-    });
-
-    const [first, second] = await getActiveProducts();
-
-    expect(first?.image).toEqual({
-      src: "http://127.0.0.1:55321/storage/v1/object/public/product-images/products/first.png",
-      alt: "Front",
-      width: 800,
-      height: 1000,
-    });
-    expect(second?.image).toEqual({ src: "/placeholder.svg", alt: "", width: null, height: null });
-  });
-});
-
 describe("getProductBySlug", () => {
   it("never sends a stock count above 5, only an availability", async () => {
     const shirt = await product("shirt", {});
@@ -251,29 +167,6 @@ describe("getAdminProducts", () => {
 
 // covers: spec 0009 AC-16
 describe("sale prices", () => {
-  it("marks a card on sale only when an in stock, live variant has a compare at price", async () => {
-    const sale = await product("sale", { position: 0 });
-    await createVariant(sale.id, { sku: "SALE-A", stockQuantity: 2, optionKey: "a" });
-    await testDb.productVariant.updateMany({
-      where: { sku: "SALE-A" },
-      data: { compareAtPriceCents: 4000 },
-    });
-    const soldOutSale = await product("sold-out-sale", { position: 1 });
-    await createVariant(soldOutSale.id, { sku: "SOS-A", stockQuantity: 0, optionKey: "a" });
-    await createVariant(soldOutSale.id, { sku: "SOS-B", stockQuantity: 3, optionKey: "b" });
-    await testDb.productVariant.updateMany({
-      where: { sku: "SOS-A" },
-      data: { compareAtPriceCents: 4000 },
-    });
-
-    const cards = await getActiveProducts();
-
-    expect(cards.map((card) => [card.slug, card.onSale])).toEqual([
-      ["sale", true],
-      ["sold-out-sale", false],
-    ]);
-  });
-
   it("gives each variant its compare at price on the product page", async () => {
     const { product: tee, variant } = await createSimpleProduct("1");
     await testDb.productVariant.update({
diff --git a/tests/db/categories.db.test.ts b/tests/db/categories.db.test.ts
index e00ff67..3d4ea3f 100644
--- a/tests/db/categories.db.test.ts
+++ b/tests/db/categories.db.test.ts
@@ -4,12 +4,13 @@ import { resetDatabaseBeforeEach, testDb } from "./client";
 import { createSimpleProduct } from "./fixtures";
 
 // The category actions and admin reads against a real Postgres (spec 0009, AC-17 to AC-21,
-// AC-24).
+// AC-24), their cache expiry and the arrange action (spec 0013, AC-22, AC-23).
 
-const mocks = vi.hoisted(() => ({ requireAdmin: vi.fn(), info: vi.fn() }));
+const mocks = vi.hoisted(() => ({ requireAdmin: vi.fn(), info: vi.fn(), updateTag: vi.fn() }));
 
 vi.mock("server-only", () => ({}));
 vi.mock("@/lib/db", async () => ({ db: (await import("./client")).testDb }));
+vi.mock("next/cache", () => ({ updateTag: mocks.updateTag }));
 vi.mock("@/features/admin-auth/require-admin", () => ({ requireAdmin: mocks.requireAdmin }));
 vi.mock("@/lib/logger", async (importOriginal) =>
   (await import("./logger-mock")).mockLoggerModule(importOriginal, {
@@ -24,6 +25,8 @@ const { updateCategory } = await import("@/features/categories/actions/update-ca
 const { deleteCategory } = await import("@/features/categories/actions/delete-category");
 const { reorderCategories } = await import("@/features/categories/actions/reorder-categories");
 const { setCategoryProducts } = await import("@/features/categories/actions/set-category-products");
+const { reorderCategoryProducts } =
+  await import("@/features/categories/actions/reorder-category-products");
 const { getAdminCategories, getCategoryForEdit } =
   await import("@/features/categories/admin-queries");
 
@@ -211,3 +214,159 @@ describe("setCategoryProducts and deleteCategory", () => {
     expect(await getCategoryForEdit("nope")).toBeNull();
   });
 });
+
+const tags = () => mocks.updateTag.mock.calls.map(([tag]) => tag);
+
+describe("category cache expiry (spec 0013, AC-22)", () => {
+  it("expires the categories tag after every write, and catalog after a delete", async () => {
+    const id = await create("linen");
+    expect(tags()).toEqual(["categories"]);
+
+    mocks.updateTag.mockClear();
+    const { updatedAt } = await testDb.category.findUniqueOrThrow({ where: { id } });
+    await updateCategory({
+      ...fields("linen"),
+      visible: false,
+      categoryId: id,
+      loadedUpdatedAt: updatedAt.toISOString(),
+    });
+    expect(tags()).toEqual(["categories"]);
+
+    mocks.updateTag.mockClear();
+    await reorderCategories({ orderedIds: [id] });
+    expect(tags()).toEqual(["categories"]);
+
+    mocks.updateTag.mockClear();
+    const { product } = await createSimpleProduct("1");
+    await setCategoryProducts({ categoryId: id, add: [product.id] });
+    expect(tags()).toEqual(["categories"]);
+
+    mocks.updateTag.mockClear();
+    await deleteCategory({ categoryId: id });
+    expect(tags()).toEqual(["categories", "catalog"]);
+  });
+
+  it("expires nothing when a write is refused", async () => {
+    await createCategory({ ...fields("bad slug"), slug: "Bad Slug" });
+    await reorderCategories({ orderedIds: ["01890000-0000-7000-8000-000000000000"] });
+    await deleteCategory({ categoryId: "01890000-0000-7000-8000-000000000000" });
+
+    expect(mocks.updateTag).not.toHaveBeenCalled();
+  });
+});
+
+describe("reorderCategoryProducts (spec 0013, AC-23)", () => {
+  async function linked(count: number) {
+    const id = await create("linen");
+    const products = [];
+    for (let i = 0; i < count; i += 1)
+      products.push((await createSimpleProduct(String(i))).product);
+    await setCategoryProducts({ categoryId: id, add: products.map((product) => product.id) });
+    return { id, ids: products.map((product) => product.id) };
+  }
+
+  it("rewrites the category's positions to 0..n-1 in the given order and logs counts only", async () => {
+    const { id, ids } = await linked(3);
+    const [a, b, c] = ids;
+    mocks.updateTag.mockClear();
+
+    expect(await reorderCategoryProducts({ categoryId: id, productIds: [c, a, b] })).toEqual({
+      ok: true,
+      data: null,
+    });
+
+    const rows = await testDb.productCategory.findMany({
+      where: { categoryId: id },
+      orderBy: { position: "asc" },
+      select: { productId: true, position: true },
+    });
+    expect(rows).toEqual([
+      { productId: c, position: 0 },
+      { productId: a, position: 1 },
+      { productId: b, position: 2 },
+    ]);
+    expect((await getCategoryForEdit(id))?.products.map((product) => product.id)).toEqual([
+      c,
+      a,
+      b,
+    ]);
+    expect(tags()).toEqual(["categories"]);
+    expect(mocks.info).toHaveBeenCalledWith(
+      {
+        event: "catalog.category.products_reordered",
+        adminId: "admin-1",
+        categoryId: id,
+        count: 3,
+      },
+      "catalog.category.products_reordered",
+    );
+  });
+
+  it("leaves the products' own updated_at alone", async () => {
+    const { id, ids } = await linked(2);
+    const before = await testDb.product.findMany({ select: { id: true, updatedAt: true } });
+
+    await reorderCategoryProducts({ categoryId: id, productIds: ids.toReversed() });
+
+    expect(await testDb.product.findMany({ select: { id: true, updatedAt: true } })).toEqual(
+      before,
+    );
+  });
+
+  it("refuses with stale unless the list is exactly the category's current set, saving nothing", async () => {
+    const { id, ids } = await linked(2);
+    const [a, b] = ids;
+    const { product: other } = await createSimpleProduct("other");
+    mocks.updateTag.mockClear();
+
+    for (const productIds of [[a], [a, b, other.id], [a, a], [b, other.id]]) {
+      expect(await reorderCategoryProducts({ categoryId: id, productIds })).toEqual({
+        ok: false,
+        error: { code: "stale" },
+      });
+    }
+    expect(
+      await reorderCategoryProducts({
+        categoryId: "01890000-0000-7000-8000-000000000000",
+        productIds: [a, b],
+      }),
+    ).toEqual({ ok: false, error: { code: "stale" } });
+    expect((await getCategoryForEdit(id))?.products.map((product) => product.id)).toEqual([a, b]);
+    expect(mocks.updateTag).not.toHaveBeenCalled();
+  });
+
+  it("refuses with stale when a product joins meanwhile", async () => {
+    const { id, ids } = await linked(2);
+    const { product: late } = await createSimpleProduct("late");
+    await setCategoryProducts({ categoryId: id, add: [late.id] });
+
+    expect(await reorderCategoryProducts({ categoryId: id, productIds: ids.toReversed() })).toEqual(
+      {
+        ok: false,
+        error: { code: "stale" },
+      },
+    );
+  });
+
+  it("answers invalid for malformed input", async () => {
+    expect(await reorderCategoryProducts({ categoryId: "nope", productIds: [] })).toEqual({
+      ok: false,
+      error: { code: "invalid" },
+    });
+    expect(
+      await reorderCategoryProducts({ categoryId: "01890000-0000-7000-8000-000000000000" }),
+    ).toEqual({
+      ok: false,
+      error: { code: "invalid" },
+    });
+  });
+
+  it("is refused for anyone requireAdmin turns away", async () => {
+    const { id, ids } = await linked(1);
+    mocks.requireAdmin.mockRejectedValueOnce(new Error("NEXT_REDIRECT"));
+
+    await expect(reorderCategoryProducts({ categoryId: id, productIds: ids })).rejects.toThrow(
+      "NEXT_REDIRECT",
+    );
+  });
+});
diff --git a/tests/e2e/a11y.ts b/tests/e2e/a11y.ts
index d6d6c3d..1ac8eba 100644
--- a/tests/e2e/a11y.ts
+++ b/tests/e2e/a11y.ts
@@ -26,8 +26,9 @@ export async function expectNoA11yViolations(page: Page) {
 }
 
 // Tabs forward until the target has focus, so a keyboard test proves the target is reachable in
-// tab order rather than focusing it directly.
-export async function tabTo(page: Page, target: Locator, maxPresses = 40) {
+// tab order rather than focusing it directly. The header holds a link per visible category
+// (spec 0013), and e2e runs leave many behind in a local database, hence the generous cap.
+export async function tabTo(page: Page, target: Locator, maxPresses = 200) {
   for (let presses = 0; presses < maxPresses; presses += 1) {
     if (await target.evaluate((element) => element === document.activeElement)) return;
     await page.keyboard.press("Tab");
diff --git a/tests/e2e/catalog/discovery.spec.ts b/tests/e2e/catalog/discovery.spec.ts
new file mode 100644
index 0000000..8931392
--- /dev/null
+++ b/tests/e2e/catalog/discovery.spec.ts
@@ -0,0 +1,410 @@
+import { randomUUID } from "node:crypto";
+
+import { expect, type Page, test } from "@playwright/test";
+
+import { expectNoA11yViolations, tabTo } from "../a11y";
+import { createTestUser, signInFully, withDb } from "../admin/support";
+import { seedProduct, type SeededProduct } from "./support";
+
+// spec 0013: category pages, search, filters and sort, and arranging inside a category.
+//
+// Rows written straight to the database never expire the cached listing index, so each test
+// ends its setup with a real admin action (adding the last product to the category from its
+// page), which expires the `categories` tag the index and the nav carry (AC-22).
+
+type VariantSeed = {
+  readonly color: "Red" | "Blue";
+  readonly size: "S" | "M";
+  readonly stock: number;
+  readonly priceCents: number;
+};
+
+// A product with Color (Red, Blue) and Size (S, M) and only the given variants.
+async function seedOptionsProduct(label: string, variants: readonly VariantSeed[]) {
+  const product = await seedProduct({ stock: 0, label });
+  return withDb(async (db) => {
+    await db.query("DELETE FROM product_variants WHERE product_id = $1", [product.id]);
+    const valueIds = new Map<string, string>();
+    for (const [position, [name, values]] of [
+      ["Color", ["Red", "Blue"]],
+      ["Size", ["S", "M"]],
+    ].entries()) {
+      const type = await db.query<{ id: string }>(
+        `INSERT INTO product_option_types (id, product_id, name, position)
+         VALUES (gen_random_uuid(), $1, $2, $3) RETURNING id`,
+        [product.id, name, position],
+      );
+      for (const [index, value] of (values as string[]).entries()) {
+        const row = await db.query<{ id: string }>(
+          `INSERT INTO product_option_values (id, option_type_id, value, position)
+           VALUES (gen_random_uuid(), $1, $2, $3) RETURNING id`,
+          [type.rows[0]!.id, value, index],
+        );
+        valueIds.set(value, row.rows[0]!.id);
+      }
+    }
+    for (const [position, variant] of variants.entries()) {
+      const ids = [valueIds.get(variant.color)!, valueIds.get(variant.size)!].toSorted();
+      const row = await db.query<{ id: string }>(
+        `INSERT INTO product_variants
+           (id, product_id, sku, price_cents, stock_quantity, position, option_key, updated_at)
+         VALUES (gen_random_uuid(), $1, $2, $3, $4, $5, $6, now()) RETURNING id`,
+        [
+          product.id,
+          `${product.slug}-${variant.color}-${variant.size}`.toUpperCase(),
+          variant.priceCents,
+          variant.stock,
+          position,
+          ids.join(","),
+        ],
+      );
+      for (const id of ids) {
+        await db.query(
+          "INSERT INTO variant_option_values (variant_id, option_value_id) VALUES ($1, $2)",
+          [row.rows[0]!.id, id],
+        );
+      }
+    }
+    return product;
+  });
+}
+
+type Category = { readonly id: string; readonly name: string; readonly slug: string };
+
+// A visible category holding the products in the given order, created far ahead of the others
+// so its nav link is never crowded out.
+async function seedCategory(products: readonly SeededProduct[], description = "") {
+  const suffix = randomUUID().slice(0, 6);
+  const name = `Shelf ${suffix}`;
+  const slug = `shelf-${suffix}`;
+  return withDb(async (db): Promise<Category> => {
+    const row = await db.query<{ id: string }>(
+      `INSERT INTO categories (id, name, slug, description, visible, position, updated_at)
+       VALUES (gen_random_uuid(), $1, $2, $3, true, -1000000 + floor(random() * 1000)::int, now())
+       RETURNING id`,
+      [name, slug, description || null],
+    );
+    const id = row.rows[0]!.id;
+    for (const [position, product] of products.entries()) {
+      await db.query(
+        "INSERT INTO product_categories (product_id, category_id, position) VALUES ($1, $2, $3)",
+        [product.id, id, position],
+      );
+    }
+    return { id, name, slug };
+  });
+}
+
+async function signIn(page: Page) {
+  const admin = await createTestUser({ enrolled: true });
+  await signInFully(page, admin);
+}
+
+// The admin action that expires the cached reads: add `last` from the category page.
+async function addFromAdmin(page: Page, category: Category, last: SeededProduct) {
+  await page.goto(`/admin/categories/${category.id}?q=${encodeURIComponent(last.name)}`);
+  await page.getByRole("button", { name: `Add ${last.name}` }).click();
+  await expect(
+    page
+      .getByRole("list", { name: "Products in this category" })
+      .getByRole("link", { name: last.name }),
+  ).toBeVisible();
+}
+
+async function cardNames(page: Page) {
+  return page
+    .getByRole("region", { name: /Products|Results|Shop all/ })
+    .getByRole("heading", { level: 3 })
+    .allTextContents();
+}
+
+test.describe("a category with options", () => {
+  async function setup(page: Page, label: string) {
+    const tag = randomUUID().slice(0, 6);
+    // Red S (sold out) and Blue M: excluded by Red + M, included by Red + S without In stock.
+    const mixed = await seedOptionsProduct(`${label} mixed ${tag}`, [
+      { color: "Red", size: "S", stock: 0, priceCents: 1000 },
+      { color: "Blue", size: "M", stock: 4, priceCents: 3000 },
+    ]);
+    const redM = await seedOptionsProduct(`${label} red m ${tag}`, [
+      { color: "Red", size: "M", stock: 3, priceCents: 2500 },
+    ]);
+    const cheap = await seedOptionsProduct(`${label} cheap ${tag}`, [
+      { color: "Red", size: "M", stock: 3, priceCents: 1200 },
+      { color: "Blue", size: "S", stock: 3, priceCents: 1200 },
+    ]);
+    const category = await seedCategory([mixed, redM], "Light and cool.");
+    await signIn(page);
+    await addFromAdmin(page, category, cheap);
+    return { mixed, redM, cheap, category };
+  }
+
+  test("a shopper opens it from the nav, filters, sorts and shares the URL", async ({
+    page,
+    browser,
+    isMobile,
+  }) => {
+    const { mixed, redM, cheap, category } = await setup(page, "Happy");
+
+    await page.goto("/");
+    if (isMobile) await page.getByRole("button", { name: "Open menu" }).click();
+    const link = page
+      .getByRole("navigation", { name: "Main" })
+      .getByRole("link", { name: category.name });
+    await expect(link).toHaveAttribute("href", `/categories/${category.slug}`);
+    // A long menu (local runs leave many categories) can scroll the link out of the Sheet.
+    if (isMobile) await page.goto(`/categories/${category.slug}`);
+    else await link.click();
+    await expect(page.getByRole("heading", { level: 1, name: category.name })).toBeVisible();
+    await expect(page.getByText("Light and cool.")).toBeVisible();
+    // AC-1: Featured order is the category's own.
+    await expect.poll(() => cardNames(page)).toEqual([mixed.name, redM.name, cheap.name]);
+
+    if (isMobile) await page.getByRole("button", { name: "Filters" }).click();
+    const panel = isMobile
+      ? page.getByRole("dialog", { name: "Filters" })
+      : page.getByRole("complementary");
+    await panel.getByRole("checkbox", { name: /^Red/ }).check();
+    await expect(page).toHaveURL(/color=red/);
+    await panel.getByRole("checkbox", { name: /^M\b/ }).check();
+    await expect(page).toHaveURL(/color=red&size=m/);
+    if (isMobile) {
+      // AC-20: the Sheet stays open while each change applies.
+      await expect(panel).toBeVisible();
+      await page.keyboard.press("Escape");
+    }
+    // AC-12: Mixed has Red only in S, so Red + M leaves it out.
+    await expect(page.getByRole("status").filter({ hasText: "2 products" })).toBeVisible();
+
+    await page.getByLabel("Sort by").selectOption("price-asc");
+    await expect(page).toHaveURL(/sort=price-asc/);
+    await expect.poll(() => cardNames(page)).toEqual([cheap.name, redM.name]);
+    await expect(page.getByRole("list", { name: "Active filters" })).toContainText("Color: Red");
+
+    // AC-19: Back undoes the last change.
+    await page.goBack();
+    await expect(page).not.toHaveURL(/sort=/);
+
+    // AC-17: the URL alone gives the same results.
+    const url = `/categories/${category.slug}?sort=price-asc&color=red&size=m`;
+    const other = await (await browser.newContext()).newPage();
+    await other.goto(url);
+    await expect.poll(() => cardNames(other)).toEqual([cheap.name, redM.name]);
+  });
+
+  test("bad params are repaired, never an error", async ({ page }) => {
+    const { category } = await setup(page, "Repair");
+
+    const response = await page.goto(
+      `/categories/${category.slug}?min=50&max=10&page=999&sort=zzz&color=nope&color=red`,
+    );
+
+    expect(response?.status()).toBe(200);
+    // AC-24: the canonical is the plain path, whatever the query.
+    await expect(page.locator('link[rel="canonical"]')).toHaveAttribute(
+      "href",
+      new RegExp(`/categories/${category.slug}$`),
+    );
+    await expect(page.getByLabel("Sort by")).toHaveValue("featured");
+    const chips = page.getByRole("list", { name: "Active filters" });
+    await expect(chips).toContainText("Color: Red");
+    await expect(chips).toContainText("Min €10.00");
+    await expect(chips).toContainText("Max €50.00");
+    await expect(page.getByRole("status").filter({ hasText: /products?$/ })).toBeVisible();
+  });
+
+  // The app's bundles never load, so React never takes over: the state before hydration, or
+  // after a failed download. The streamed results still show (Next reveals them with inline
+  // scripts); a browser with JavaScript fully off keeps the Suspense fallback instead.
+  test("without the app's JavaScript the panel is a GET form with Apply", async ({
+    browser,
+    page,
+  }) => {
+    const { category } = await setup(page, "Nojs");
+    const shopper = await (await browser.newContext()).newPage();
+    // Scripts only: a production build serves its CSS from chunks/ too, and an unstyled page
+    // lets the fill images cover the panel.
+    await shopper.route(/\/_next\/static\/chunks\/.+\.js(\?|$)/, (route) => route.abort());
+
+    await shopper.goto(`/categories/${category.slug}`);
+    await shopper
+      .getByRole("form", { name: "Filters" })
+      .getByRole("checkbox", { name: /^Blue/ })
+      .check();
+    await shopper
+      .getByRole("form", { name: "Filters" })
+      .getByRole("button", { name: "Apply" })
+      .click();
+
+    await expect(shopper).toHaveURL(/color=blue/);
+    await expect(shopper.getByRole("list", { name: "Active filters" })).toContainText(
+      "Color: Blue",
+    );
+  });
+
+  test("an admin arranges the category and its Featured order follows", async ({
+    page,
+    browser,
+    isMobile,
+  }) => {
+    test.skip(isMobile, "The admin keyboard arrange runs on desktop.");
+    const { mixed, redM, cheap, category } = await setup(page, "Arrange");
+    // setup left the admin on the category page with the three products.
+    await page.reload();
+    const handle = page.getByRole("button", { name: `Move ${cheap.name}`, exact: true });
+    await expect(handle).toBeEnabled();
+    await handle.focus();
+    await page.keyboard.press("Space");
+    await expect(page.getByRole("status").filter({ hasText: "Picked up" })).toBeAttached();
+    await page.keyboard.press("ArrowUp");
+    await expect(
+      page.getByRole("status").filter({ hasText: "moved to position 2" }),
+    ).toBeAttached();
+    await page.keyboard.press("ArrowUp");
+    await expect(
+      page.getByRole("status").filter({ hasText: "moved to position 1" }),
+    ).toBeAttached();
+    await page.keyboard.press("Space");
+    await expect(page.getByText("Unsaved order.")).toBeVisible();
+    await page.getByRole("button", { name: "Save order" }).click();
+    await expect(page.getByText("Order saved.")).toBeVisible();
+
+    const shopper = await (await browser.newContext()).newPage();
+    await shopper.goto(`/categories/${category.slug}`);
+    await expect.poll(() => cardNames(shopper)).toEqual([cheap.name, mixed.name, redM.name]);
+  });
+
+  test("hiding the category drops it from the nav and its page", async ({ page }) => {
+    const { category } = await setup(page, "Hide");
+    await page.goto(`/admin/categories/${category.id}`);
+    await expect(page.getByRole("button", { name: "Save category" })).toBeEnabled();
+    await page.getByRole("checkbox", { name: "Visible" }).click();
+    await page.getByRole("button", { name: "Save category" }).click();
+    await expect(page.getByText("Hidden", { exact: true })).toBeVisible();
+
+    await page.goto(`/categories/${category.slug}`);
+    await expect(page.getByRole("heading", { level: 1 })).toHaveText("We can't find that page");
+    await expect(page.getByRole("link", { name: category.name })).toHaveCount(0);
+  });
+
+  // verify.md, Value sourcing: the category's own fields, titles, canonicals and the count.
+  test("the page reads the category's fields, titles and canonical from their sources", async ({
+    page,
+    browser,
+    isMobile,
+  }) => {
+    const { category } = await setup(page, "Source");
+    const shopper = await (await browser.newContext()).newPage();
+
+    // No meta_title: the title is the name; any page or filter keeps the plain canonical.
+    await shopper.goto(`/categories/${category.slug}?page=2&color=red`);
+    await expect(shopper).toHaveTitle(`${category.name} · BeStore`);
+    await expect(shopper.locator('link[rel="canonical"]')).toHaveAttribute(
+      "href",
+      new RegExp(`/categories/${category.slug}$`),
+    );
+
+    // A meta_title wins; the rename and new description show on the next request.
+    await withDb((db) =>
+      db.query("UPDATE categories SET meta_title = $2 WHERE id = $1", [category.id, "Cool shelf"]),
+    );
+    const renamed = `${category.name} renamed`;
+    await page.goto(`/admin/categories/${category.id}`);
+    await expect(page.getByRole("button", { name: "Save category" })).toBeEnabled();
+    await page.getByLabel("Name", { exact: true }).fill(renamed);
+    await page.getByLabel("Description").fill("Fresh copy.");
+    await page.getByRole("button", { name: "Save category" }).click();
+    await expect(page.getByRole("heading", { level: 1 })).toHaveText(renamed);
+
+    await shopper.goto(`/categories/${category.slug}`);
+    await expect(shopper.getByRole("heading", { level: 1 })).toHaveText(renamed);
+    await expect(shopper.getByText("Fresh copy.")).toBeVisible();
+    await expect(shopper).toHaveTitle("Cool shelf · BeStore");
+
+    await shopper.goto("/");
+    await expect(shopper).toHaveTitle("BeStore");
+    await shopper.goto("/search?q=shelf");
+    await expect(shopper).toHaveTitle("Search · BeStore");
+
+    // Two values, a Min and In stock: four active filters.
+    await shopper.goto(`/categories/${category.slug}?color=red&color=blue&min=10&stock=1`);
+    const filters = isMobile
+      ? shopper.getByRole("button", { name: /^Filters/ })
+      : shopper.getByRole("list", { name: "Active filters" }).getByRole("listitem");
+    if (isMobile) await expect(filters).toContainText("(4)");
+    else await expect(filters).toHaveCount(4);
+  });
+
+  test("home, category and search pass axe with the filters open", async ({ page, isMobile }) => {
+    const { category, cheap } = await setup(page, "Axe");
+    const openFilters = async () => {
+      if (isMobile) await page.getByRole("button", { name: "Filters" }).click();
+    };
+
+    await page.goto("/");
+    await openFilters();
+    await expectNoA11yViolations(page);
+
+    await page.goto(`/categories/${category.slug}?color=red`);
+    await openFilters();
+    await expectNoA11yViolations(page);
+
+    await page.goto(`/search?q=${encodeURIComponent(cheap.name)}`);
+    await openFilters();
+    await expectNoA11yViolations(page);
+  });
+
+  test("the filters work by keyboard alone", async ({ page, isMobile }) => {
+    test.skip(isMobile, "The keyboard pass runs on the desktop sidebar.");
+    const { category } = await setup(page, "Keys");
+    await page.goto(`/categories/${category.slug}`);
+
+    const blue = page.getByRole("complementary").getByRole("checkbox", { name: /^Blue/ });
+    await tabTo(page, blue);
+    await page.keyboard.press("Space");
+    await expect(page).toHaveURL(/color=blue/);
+    // AC-19: focus stays on the box that changed.
+    await expect(blue).toBeFocused();
+    await expect(blue).toBeChecked();
+
+    const min = page.getByRole("complementary").getByLabel("Min (EUR)");
+    await min.focus();
+    await page.keyboard.type("20");
+    await page.keyboard.press("Enter");
+    await expect(page).toHaveURL(/min=20/);
+  });
+});
+
+test.describe("search", () => {
+  test("the header box searches, folded and by word start, and short queries prompt", async ({
+    page,
+    isMobile,
+  }) => {
+    const tag = randomUUID().slice(0, 6);
+    const church = await seedProduct({ stock: 2, label: `Kościół candle ${tag}` });
+    const settee = await seedProduct({ stock: 2, label: `Settee ${tag}` });
+    const category = await seedCategory([church]);
+    await signIn(page);
+    await addFromAdmin(page, category, settee);
+
+    await page.goto("/");
+    if (isMobile) await page.getByRole("button", { name: "Search" }).click();
+    const box = page.getByRole("searchbox", { name: "Search products" }).first();
+    await box.fill(`kosciol ${tag}`);
+    await box.press("Enter");
+    await expect(page).toHaveURL(new RegExp(`/search\\?q=kosciol`));
+    await expect(page).toHaveTitle(/^Search/);
+    await expect.poll(() => cardNames(page)).toEqual([church.name]);
+    await expect(page.locator('meta[name="robots"]')).toHaveAttribute("content", /noindex/);
+    // AC-24: the query never reaches the title.
+    await expect(page).not.toHaveTitle(/kosciol/i);
+
+    await page.goto(`/search?q=tee+${tag}`);
+    await expect(page.getByRole("heading", { level: 2, name: "No products match." })).toBeVisible();
+    await expect(page.getByText("Try fewer or shorter words")).toBeVisible();
+
+    await page.goto("/search?q=k");
+    await expect(page.getByText("Type at least 2 characters to search")).toBeVisible();
+    await expect(page.getByRole("searchbox", { name: "Search products" }).last()).toHaveValue("k");
+  });
+});
diff --git a/tests/e2e/storefront-home.spec.ts b/tests/e2e/storefront-home.spec.ts
index b8eace5..ebdb098 100644
--- a/tests/e2e/storefront-home.spec.ts
+++ b/tests/e2e/storefront-home.spec.ts
@@ -29,8 +29,14 @@ test.describe("storefront home", () => {
     await expect(header.getByRole("link", { name: brand.name })).toHaveAttribute("href", "/");
     const footer = page.getByRole("contentinfo");
     await expect(footer).toContainText(new RegExp(`© \\d{4} ${brand.name}`));
-    // No nav links yet, so no menu button on phones either.
-    await expect(page.getByRole("button", { name: "Open menu" })).toHaveCount(0);
+    // spec 0013, AC-6: a search box on every page.
+    await expect(
+      header
+        .getByRole("search", { name: "Store search" })
+        .or(header.getByRole("link", { name: "Search" }))
+        .or(header.getByRole("button", { name: "Search" }))
+        .first(),
+    ).toBeVisible();
   });
 
   test("shows the heading on any screen size", async ({ page }) => {