diff --git a/README.md b/README.md
index e40afdbb..b1100cb8 100644
--- a/README.md
+++ b/README.md
@@ -72,6 +72,12 @@ Here are some useful links for getting started with Wix Headless and the availab
       <td></td>
       <td>Wix Rentals</td>
     </tr>
+    <tr>
+      <td><a href="https://github.com/wix/headless-templates/tree/main/astro/benny-pets">Benny Pets</a></td>
+      <td>A designed storefront with variant selection, cart, and checkout using Astro and Wix Headless.</td>
+      <td><a href="https://benny-site-tuvitk-0a06.wix-site-host.com">Live demo</a></td>
+      <td>Wix Stores, Wix eCommerce, Wix Forms</td>
+    </tr>
     <tr>
       <td colspan="4" align="center"><strong>Next.js</strong></td>
     </tr>
diff --git a/astro/benny-pets/.gitignore b/astro/benny-pets/.gitignore
new file mode 100644
index 00000000..dd0f070e
--- /dev/null
+++ b/astro/benny-pets/.gitignore
@@ -0,0 +1,28 @@
+# wix integration
+.wix/
+
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+.env.local
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
diff --git a/astro/benny-pets/.vscode/extensions.json b/astro/benny-pets/.vscode/extensions.json
new file mode 100644
index 00000000..22a15055
--- /dev/null
+++ b/astro/benny-pets/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
diff --git a/astro/benny-pets/.vscode/launch.json b/astro/benny-pets/.vscode/launch.json
new file mode 100644
index 00000000..d6422097
--- /dev/null
+++ b/astro/benny-pets/.vscode/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
diff --git a/astro/benny-pets/.vscode/settings.json b/astro/benny-pets/.vscode/settings.json
new file mode 100644
index 00000000..54ecf2af
--- /dev/null
+++ b/astro/benny-pets/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "editor.quickSuggestions": {
+    "strings": "on"
+  }
+}
diff --git a/astro/benny-pets/README.md b/astro/benny-pets/README.md
new file mode 100644
index 00000000..472e0a67
--- /dev/null
+++ b/astro/benny-pets/README.md
@@ -0,0 +1,53 @@
+# Benny Pets — Wix Stores storefront
+
+A designed storefront on top of [Wix Stores](https://dev.wix.com/docs/sdk/backend-modules/stores/introduction)
+and [Wix eCommerce](https://dev.wix.com/docs/sdk/backend-modules/ecom/introduction): a catalog,
+a product page with variant selection, a cart, and checkout — plus a contact
+form rendered from [Wix Forms](https://dev.wix.com/docs/sdk/backend-modules/forms/introduction).
+
+Everything on screen comes from Wix at request time. Every route is
+server-rendered, and the page ships no framework runtime — the animation and
+cart interactions are plain modules, so there are no islands to hydrate.
+
+## Wix apps used
+
+| App | What it powers |
+|---|---|
+| Wix Stores | The catalog: products, prices, images, options and variants |
+| Wix eCommerce | The visitor's cart and the checkout session |
+| Wix Forms | The footer contact form — fields come from the form definition |
+
+## Routes
+
+| Route | What it does |
+|---|---|
+| `/` | Home — best sellers, a catalog-driven gallery, and the contact form |
+| `/store` | The full catalog |
+| `/store/[slug]` | Product detail with option selection; unknown slugs 404 |
+| `/cart` | The visitor's cart, with quantity, removal, and checkout |
+| `POST /api/cart/add` | `{ productId, variantId?, quantity }` — refuses to guess a variant |
+| `POST /api/cart/update` | `{ lineItemId, quantity }` |
+| `POST /api/cart/remove` | `{ lineItemId }` |
+| `POST /api/checkout` | Creates a checkout and returns its redirect-session URL |
+| `POST /api/contact` | Submits the contact form, keyed by each field's Wix target |
+
+## Getting started
+
+```bash
+npm install
+npm run dev
+```
+
+The `@wix/astro` integration authenticates every SDK call from the visitor's
+session, so there is no client to construct and no client id in the source.
+
+## Notes
+
+- **Prices** are the `formattedAmount` Wix returns, so the store's own currency
+  is always what shows.
+- **Variants**: a product with options can't be added until one is chosen, and
+  the price updates to the chosen variant. Single-variant products get a
+  one-click add.
+- **The contact form's id** lives in `src/lib/constants.ts`. It matches the form
+  this template's site provisions; point it at your own form if you connect
+  this code to a site you built yourself.
diff --git a/astro/benny-pets/astro.config.mjs b/astro/benny-pets/astro.config.mjs
new file mode 100644
index 00000000..b608ae8f
--- /dev/null
+++ b/astro/benny-pets/astro.config.mjs
@@ -0,0 +1,40 @@
+// @ts-check
+import { defineConfig } from "astro/config";
+import wix from "@wix/astro";
+import wixPages from "@wix/astro-pages";
+import wixHostingAdapter from "@wix/astro-wix-hosting-adapter";
+import { transform } from "esbuild";
+
+// Astro ships the SSR build unminified and `vite.build.minify` only reaches the client build. The
+// deploy transport picks its path by server-bundle size, and past ~2.25MiB of server code it
+// switches to a route that cannot authorize — so this is what keeps the template provisionable.
+const minifyServerBundle = () => {
+  let isSsr = false;
+  return {
+    name: "benny-pets:minify-server-bundle",
+    apply: "build",
+    enforce: "post",
+    configResolved(config) {
+      isSsr = Boolean(config.build.ssr);
+    },
+    async renderChunk(code) {
+      if (!isSsr) return null;
+      const { code: minified } = await transform(code, {
+        minify: true, format: "esm", target: "node20", keepNames: true, legalComments: "none",
+      });
+      return { code: minified, map: null };
+    },
+  };
+};
+
+// https://astro.build/config
+export default defineConfig({
+  // Every route renders per request: the catalog, the cart and the contact
+  // form are all read from Wix at request time.
+  output: "server",
+  adapter: wixHostingAdapter(),
+  integrations: [wix(), wixPages()],
+  security: { checkOrigin: false },
+
+  vite: { plugins: [minifyServerBundle()] },
+});
diff --git a/astro/benny-pets/package.json b/astro/benny-pets/package.json
new file mode 100644
index 00000000..ed22e0c5
--- /dev/null
+++ b/astro/benny-pets/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "wix-astro-benny-pets",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "astro": "astro",
+    "dev": "astro dev",
+    "build": "astro build"
+  },
+  "dependencies": {
+    "@wix/astro": "^2.39.0",
+    "@wix/astro-pages": "^2.0.4",
+    "@wix/astro-wix-hosting-adapter": "^2.0.0",
+    "@wix/categories": "^1.0.216",
+    "@wix/ecom": "^1.0.2252",
+    "@wix/essentials": "^1.0.6",
+    "@wix/forms": "^1.0.462",
+    "@wix/redirects": "^1.0.118",
+    "@wix/sdk": "^1.21.5",
+    "@wix/stores": "^1.0.829",
+    "astro": "^5.8.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.8.3"
+  },
+  "devDependencies": {
+    "esbuild": "^0.27.7"
+  }
+}
diff --git a/astro/benny-pets/public/favicon.ico b/astro/benny-pets/public/favicon.ico
new file mode 100644
index 00000000..718d6fea
Binary files /dev/null and b/astro/benny-pets/public/favicon.ico differ
diff --git a/astro/benny-pets/public/gallery1.jpg b/astro/benny-pets/public/gallery1.jpg
new file mode 100644
index 00000000..6ac3af1b
Binary files /dev/null and b/astro/benny-pets/public/gallery1.jpg differ
diff --git a/astro/benny-pets/public/gallery2.jpg b/astro/benny-pets/public/gallery2.jpg
new file mode 100644
index 00000000..0b859cb2
Binary files /dev/null and b/astro/benny-pets/public/gallery2.jpg differ
diff --git a/astro/benny-pets/public/gallery3.jpg b/astro/benny-pets/public/gallery3.jpg
new file mode 100644
index 00000000..4cfa79fc
Binary files /dev/null and b/astro/benny-pets/public/gallery3.jpg differ
diff --git a/astro/benny-pets/public/hero-bg.jpg b/astro/benny-pets/public/hero-bg.jpg
new file mode 100644
index 00000000..1109f5b8
Binary files /dev/null and b/astro/benny-pets/public/hero-bg.jpg differ
diff --git a/astro/benny-pets/src/components/ContactForm.astro b/astro/benny-pets/src/components/ContactForm.astro
new file mode 100644
index 00000000..fc208fc1
--- /dev/null
+++ b/astro/benny-pets/src/components/ContactForm.astro
@@ -0,0 +1,103 @@
+---
+import { getContactFields, type ContactField } from "../lib/contact-form";
+
+// The fields come from Wix Forms, so relabelling or adding a field in the
+// dashboard changes this form with no code change.
+const fields: ContactField[] = await getContactFields();
+---
+
+{
+  fields.length > 0 && (
+    <form class="footer-form animate-in from-right" id="contact-form">
+      {fields.map((field) =>
+        field.type === "textarea" ? (
+          <textarea
+            class="footer-textarea"
+            name={field.target}
+            data-type={field.type}
+            placeholder={field.label}
+            required={field.required}
+          />
+        ) : field.type === "select" ? (
+          <select class="footer-input" name={field.target} data-type={field.type} required={field.required}>
+            <option value="">{field.label}</option>
+            {field.options.map((option) => (
+              <option value={option}>{option}</option>
+            ))}
+          </select>
+        ) : field.type === "checkbox" ? (
+          <label class="footer-checkbox">
+            <input type="checkbox" name={field.target} data-type={field.type} required={field.required} />
+            <span>{field.label}</span>
+          </label>
+        ) : (
+          <input
+            class="footer-input"
+            type={field.type}
+            name={field.target}
+            data-type={field.type}
+            placeholder={field.label}
+            required={field.required}
+          />
+        ),
+      )}
+      <div class="footer-send-row">
+        <button type="submit" class="footer-send-btn">
+          Send
+        </button>
+      </div>
+    </form>
+  )
+}
+
+<script>
+  import { showToast } from "../scripts/site.js";
+
+  const form = document.getElementById("contact-form");
+
+  // Values are typed per the field's own definition — a number field submits a
+  // number, a checkbox a boolean, a checkbox group an array.
+  function readValues(formEl) {
+    const data = new FormData(formEl);
+    const values = {};
+    formEl.querySelectorAll("[name][data-type]").forEach((input) => {
+      const name = input.name;
+      const type = input.dataset.type;
+      if (type === "checkbox") {
+        values[name] = input.checked;
+      } else if (type === "checkbox-group") {
+        values[name] = data.getAll(name);
+      } else if (type === "number") {
+        const raw = data.get(name);
+        values[name] = raw === "" || raw === null ? null : Number(raw);
+      } else {
+        values[name] = data.get(name) ?? "";
+      }
+    });
+    return values;
+  }
+
+  form?.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const button = form.querySelector("button[type=submit]");
+    if (button.disabled) return;
+    button.disabled = true;
+    button.textContent = "…";
+    try {
+      const res = await fetch("/api/contact", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(readValues(form)),
+      });
+      if (!res.ok) throw new Error("submission rejected");
+      showToast("Message sent!");
+      form.reset();
+    } catch (err) {
+      console.error("[contact] submission failed:", err);
+      showToast("Could not send — please try again.");
+    } finally {
+      button.disabled = false;
+      button.textContent = "Send";
+    }
+  });
+</script>
diff --git a/astro/benny-pets/src/components/Nav.astro b/astro/benny-pets/src/components/Nav.astro
new file mode 100644
index 00000000..8f39d7dc
--- /dev/null
+++ b/astro/benny-pets/src/components/Nav.astro
@@ -0,0 +1,24 @@
+---
+import WaveLink from "./WaveLink.astro";
+
+interface Props {
+  cartCount?: number;
+  /** The homepage calls it "Shop", the store and cart pages call it "Store". */
+  shopLabel?: string;
+  /** On the homepage, "Home" scrolls to the top instead of reloading. */
+  homeScrollsToTop?: boolean;
+}
+
+const { cartCount = 0, shopLabel = "Store", homeScrollsToTop = false } = Astro.props;
+---
+
+<ul class="hero-nav">
+  <li>
+    <WaveLink href="/" text="Home" id={homeScrollsToTop ? "nav-home" : undefined} />
+  </li>
+  <li><WaveLink href="/store" text={shopLabel} /></li>
+  <li><WaveLink href="/#about" text="About" /></li>
+  <li>
+    <WaveLink href="/cart" text={cartCount > 0 ? `Cart (${cartCount})` : "Cart"} cartLabel />
+  </li>
+</ul>
diff --git a/astro/benny-pets/src/components/ProductCard.astro b/astro/benny-pets/src/components/ProductCard.astro
new file mode 100644
index 00000000..9a7b74d6
--- /dev/null
+++ b/astro/benny-pets/src/components/ProductCard.astro
@@ -0,0 +1,31 @@
+---
+import type { Product } from "../lib/catalog";
+
+interface Props {
+  product: Product;
+  delay?: number;
+}
+
+const { product, delay = 0 } = Astro.props;
+---
+
+<a
+  href={`/store/${product.slug}`}
+  class="product-card animate-in"
+  data-categories={product.categoryIds.join(" ")}
+  style={`transition-delay: ${delay}s; text-decoration: none;`}
+>
+  {
+    product.imageUrl ? (
+      <img class="product-thumb" src={product.imageUrl} alt={product.name} />
+    ) : (
+      <div class="product-thumb product-thumb-placeholder" aria-label={product.name} />
+    )
+  }
+  <div class="product-info">
+    <p class="product-name">{product.name}</p>
+    {product.sub && <p class="product-sub">{product.sub}</p>}
+    <p class="product-price">{product.price}</p>
+    <span class="add-to-cart">View Product</span>
+  </div>
+</a>
diff --git a/astro/benny-pets/src/components/QuickAdd.astro b/astro/benny-pets/src/components/QuickAdd.astro
new file mode 100644
index 00000000..76f6cfaf
--- /dev/null
+++ b/astro/benny-pets/src/components/QuickAdd.astro
@@ -0,0 +1,25 @@
+---
+import type { Product } from "../lib/catalog";
+
+interface Props {
+  product: Product;
+  class?: string;
+}
+
+const { product, class: className } = Astro.props;
+// A product with more than one variant needs the shopper to choose first, so
+// it links to the detail page instead of adding something on their behalf.
+const needsChoice = product.variantCount > 1;
+---
+
+{
+  needsChoice ? (
+    <a href={`/store/${product.slug}`} class={className}>
+      Choose Options
+    </a>
+  ) : (
+    <button class={className} data-quick-add data-product-id={product._id} data-name={product.name}>
+      Add to Cart
+    </button>
+  )
+}
diff --git a/astro/benny-pets/src/components/WaveLink.astro b/astro/benny-pets/src/components/WaveLink.astro
new file mode 100644
index 00000000..cdc2a0a9
--- /dev/null
+++ b/astro/benny-pets/src/components/WaveLink.astro
@@ -0,0 +1,36 @@
+---
+interface Props {
+  href: string;
+  text: string;
+  class?: string;
+  id?: string;
+  cartLabel?: boolean;
+}
+
+const { href, text, class: className, id, cartLabel } = Astro.props;
+---
+
+<a
+  href={href}
+  class={className}
+  id={id}
+  data-wave
+  data-wave-amp="8"
+  data-wave-stagger="40"
+  data-cart-label={cartLabel ? "" : undefined}
+>
+  {
+    [...text].map((ch, i) =>
+      ch === " " ? (
+        <span class="wm-space" />
+      ) : (
+        <span
+          class="wm-letter"
+          style={`transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1) ${i * 0.04}s`}
+        >
+          {ch}
+        </span>
+      ),
+    )
+  }
+</a>
diff --git a/astro/benny-pets/src/components/WaveText.astro b/astro/benny-pets/src/components/WaveText.astro
new file mode 100644
index 00000000..d3ebafc1
--- /dev/null
+++ b/astro/benny-pets/src/components/WaveText.astro
@@ -0,0 +1,34 @@
+---
+interface Props {
+  text: string;
+  class?: string;
+  id?: string;
+  amplitude?: number;
+  stagger?: number;
+}
+
+const { text, class: className, id, amplitude = 14, stagger = 45 } = Astro.props;
+---
+
+<div
+  class={className}
+  id={id}
+  data-wave
+  data-wave-amp={amplitude}
+  data-wave-stagger={stagger}
+>
+  {
+    [...text].map((ch, i) =>
+      ch === " " ? (
+        <span class="wm-space" />
+      ) : (
+        <span
+          class="wm-letter"
+          style={`transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1) ${i * 0.03}s`}
+        >
+          {ch}
+        </span>
+      ),
+    )
+  }
+</div>
diff --git a/astro/benny-pets/src/layouts/Base.astro b/astro/benny-pets/src/layouts/Base.astro
new file mode 100644
index 00000000..690f7d77
--- /dev/null
+++ b/astro/benny-pets/src/layouts/Base.astro
@@ -0,0 +1,30 @@
+---
+import "../styles/globals.css";
+
+interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title}</title>
+    {description && <meta name="description" content={description} />}
+    <link rel="icon" href="/favicon.ico" />
+    <slot name="head" />
+  </head>
+  <body>
+    <div class="cursor" id="cursor"></div>
+    <slot />
+    <div class="cart-toast" id="toast"></div>
+    <script>
+      import "../scripts/site.js";
+    </script>
+  </body>
+</html>
diff --git a/astro/benny-pets/src/lib/cart.ts b/astro/benny-pets/src/lib/cart.ts
new file mode 100644
index 00000000..1b16bd7f
--- /dev/null
+++ b/astro/benny-pets/src/lib/cart.ts
@@ -0,0 +1,35 @@
+import { currentCart } from "@wix/ecom";
+
+/**
+ * A visitor with no cart yet gets an error rather than an empty cart — that's
+ * a normal state, not a failure.
+ */
+export async function getCartSafe() {
+  try {
+    return await currentCart.getCurrentCart();
+  } catch {
+    return null;
+  }
+}
+
+export function countItems(cart: any): number {
+  return cart?.lineItems?.reduce((sum: number, item: any) => sum + (item.quantity ?? 0), 0) ?? 0;
+}
+
+export async function getCartCount(): Promise<number> {
+  return countItems(await getCartSafe());
+}
+
+/**
+ * Totals come from the estimate call, which is what actually knows the
+ * currency and the discounts — never add up line prices by hand.
+ */
+export async function getCartSubtotal(): Promise<string | null> {
+  try {
+    const { priceSummary }: any = await currentCart.estimateCurrentCartTotals({});
+    return priceSummary?.subtotal?.formattedAmount ?? null;
+  } catch (err) {
+    console.error("[cart] could not estimate totals:", err);
+    return null;
+  }
+}
diff --git a/astro/benny-pets/src/lib/catalog.ts b/astro/benny-pets/src/lib/catalog.ts
new file mode 100644
index 00000000..5e83462c
--- /dev/null
+++ b/astro/benny-pets/src/lib/catalog.ts
@@ -0,0 +1,218 @@
+import { media } from "@wix/sdk";
+import { categories } from "@wix/categories";
+import { productsV3 } from "@wix/stores";
+
+/**
+ * Wix media fields are `wix:image://` identifiers, not URLs — they have to go
+ * through the SDK helper. A hand-built CDN URL 403s.
+ */
+export function resolveImage(image: any, w = 600, h = 600): string | null {
+  if (!image) return null;
+  const url = typeof image === "string" ? image : image.url;
+  if (!url) return null;
+  if (!url.startsWith("wix:image://")) return url;
+  try {
+    return media.getScaledToFillImageUrl(url, w, h, {});
+  } catch (err) {
+    console.error("[catalog] could not resolve image:", err);
+    return null;
+  }
+}
+
+export type Product = {
+  _id: string;
+  slug: string;
+  name: string;
+  /** Already formatted by Wix, currency included — never build this yourself. */
+  price: string;
+  description: string;
+  /** The description's opening line — pack size, count, or sizes available. */
+  sub: string;
+  imageUrl: string | null;
+  /** More than one means the shopper has to pick a variant before adding. */
+  variantCount: number;
+  /** Real category ids, for the store's filter. */
+  categoryIds: string[];
+};
+
+export type Category = {
+  _id: string;
+  name: string;
+  slug: string;
+};
+
+/** The Wix Stores install creates this root category; the filter has its own All. */
+const ROOT_CATEGORY_SLUG = "all-products";
+
+export type ProductOption = {
+  name: string;
+  choices: string[];
+};
+
+export type ProductVariant = {
+  _id: string;
+  /** Option name → chosen value, e.g. `{ Size: "M" }`. */
+  choices: Record<string, string>;
+  price: string;
+  visible: boolean;
+};
+
+export type ProductDetail = Product & {
+  options: ProductOption[];
+  variants: ProductVariant[];
+};
+
+const LIST_FIELDS = ["CURRENCY", "PLAIN_DESCRIPTION", "DIRECT_CATEGORIES_INFO"] as const;
+const DETAIL_FIELDS = ["CURRENCY", "PLAIN_DESCRIPTION", "VARIANT_OPTION_CHOICE_NAMES"] as const;
+
+/** `plainDescription` is HTML — flatten it for anywhere it's bound as text. */
+function descriptionText(product: any): string {
+  const raw = product?.plainDescription;
+  if (typeof raw !== "string") return "";
+  return raw.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+}
+
+/** The opening sentence, which the seeded copy leads with ("5 KG / 11 LBS."). */
+function leadLine(description: string): string {
+  const [first] = description.split(/(?<=\.)\s/);
+  return first && first.length <= 48 ? first.replace(/\.$/, "") : "";
+}
+
+function toProduct(product: any, w: number, h: number): Product {
+  const description = descriptionText(product);
+  return {
+    _id: product._id,
+    slug: product.slug ?? "",
+    name: product.name ?? "",
+    price: product.actualPriceRange?.minValue?.formattedAmount ?? "",
+    description,
+    sub: leadLine(description),
+    imageUrl: resolveImage(product.media?.main?.image, w, h),
+    variantCount: product.variantSummary?.variantCount ?? 1,
+    categoryIds: (product.directCategoriesInfo?.categories ?? [])
+      .map((category: any) => category._id ?? category.id)
+      .filter(Boolean),
+  };
+}
+
+/**
+ * The store's real categories, read live so one the owner adds later appears
+ * on its own. The query needs at least one filter — a bare `find()` is
+ * rejected as an empty condition.
+ */
+export async function listCategories(): Promise<Category[]> {
+  try {
+    const { items } = await categories
+      .queryCategories({ treeReference: { appNamespace: "@wix/stores" } })
+      .exists("name", true)
+      .find();
+    return (items ?? [])
+      .filter((category: any) => category.slug !== ROOT_CATEGORY_SLUG)
+      .map((category: any) => ({ _id: category._id, name: category.name, slug: category.slug }));
+  } catch (err) {
+    console.error("[catalog] could not list categories:", err);
+    return [];
+  }
+}
+
+/**
+ * Every read below runs in page frontmatter, where an unguarded throw would
+ * truncate the response mid-stream. Each one logs and degrades instead.
+ */
+export async function listProducts(limit = 20, w = 600, h = 600): Promise<Product[]> {
+  try {
+    const { items } = await productsV3
+      .queryProducts({ fields: [...LIST_FIELDS] as any })
+      .limit(limit)
+      .find();
+    return items.map((product: any) => toProduct(product, w, h));
+  } catch (err) {
+    console.error("[catalog] could not list products:", err);
+    return [];
+  }
+}
+
+/**
+ * The detail read has to be `getProductBySlug` rather than a query: only this
+ * one returns `variantsInfo`, and a cart line item references a variant.
+ */
+export async function getProductBySlug(
+  slug: string,
+  w = 800,
+  h = 800,
+): Promise<ProductDetail | null> {
+  try {
+    const { product }: any = await productsV3.getProductBySlug(slug, {
+      fields: [...DETAIL_FIELDS] as any,
+    });
+    if (!product) return null;
+
+    const options: ProductOption[] = (product.options ?? []).map((option: any) => ({
+      name: option.name ?? "",
+      choices: (option.choicesSettings?.choices ?? []).map((choice: any) => choice.name ?? ""),
+    }));
+
+    const variants: ProductVariant[] = (product.variantsInfo?.variants ?? []).map((variant: any) => ({
+      _id: variant._id,
+      choices: Object.fromEntries(
+        (variant.choices ?? [])
+          .map((choice: any) => [
+            choice.optionChoiceNames?.optionName,
+            choice.optionChoiceNames?.choiceName,
+          ])
+          .filter(([name, value]: any[]) => name && value),
+      ),
+      price: variant.price?.actualPrice?.formattedAmount ?? "",
+      visible: variant.visible !== false,
+    }));
+
+    return { ...toProduct(product, w, h), options, variants };
+  } catch (err: any) {
+    // A slug with nothing behind it is a 404, not something to shout about.
+    if (err?.details?.applicationError?.code !== "NOT_FOUND") {
+      console.error("[catalog] could not load product:", err);
+    }
+    return null;
+  }
+}
+
+/**
+ * Current catalog image per product id. A cart line item keeps the image it
+ * was given when it was added, so a cart built before a product had one shows
+ * an empty slot until this fills it in.
+ */
+export async function getProductImages(
+  productIds: string[],
+  w = 240,
+  h = 240,
+): Promise<Record<string, string | null>> {
+  const ids = [...new Set(productIds.filter(Boolean))];
+  if (ids.length === 0) return {};
+  try {
+    const { items } = await productsV3.queryProducts().in("_id", ids).limit(ids.length).find();
+    return Object.fromEntries(
+      items.map((product: any) => [product._id, resolveImage(product.media?.main?.image, w, h)]),
+    );
+  } catch (err) {
+    console.error("[catalog] could not load product images:", err);
+    return {};
+  }
+}
+
+/**
+ * The variant a "quick add" button may use: only ever returned when the
+ * product has exactly one, so nothing is added on the shopper's behalf when
+ * there was a choice to make.
+ */
+export async function resolveSoleVariantId(productId: string): Promise<string | null> {
+  try {
+    // `getProduct` returns the product itself, unlike `getProductBySlug`,
+    // which wraps it in `{ product }`.
+    const product: any = await productsV3.getProduct(productId);
+    const visible = (product?.variantsInfo?.variants ?? []).filter((v: any) => v.visible !== false);
+    return visible.length === 1 ? visible[0]._id : null;
+  } catch (err) {
+    console.error("[catalog] could not resolve variant:", err);
+    return null;
+  }
+}
diff --git a/astro/benny-pets/src/lib/constants.ts b/astro/benny-pets/src/lib/constants.ts
new file mode 100644
index 00000000..3cb0674e
--- /dev/null
+++ b/astro/benny-pets/src/lib/constants.ts
@@ -0,0 +1,15 @@
+/**
+ * Wix Stores' app id — the same value on every site, used to build the
+ * catalog reference a cart line item needs.
+ */
+export const STORES_APP_ID = "1380b703-ce81-ff05-f115-39571d94dfcd";
+
+/**
+ * The contact form rendered in the footer.
+ *
+ * This GUID comes from the site template this code is paired with in
+ * `templates.json`; a site created from that template provisions the same
+ * form. Point it at your own form id (Wix dashboard → Forms) if you connect
+ * this code to a site you built yourself.
+ */
+export const CONTACT_FORM_ID = "db5a5c36-3337-4163-be77-e41e09f7216e";
diff --git a/astro/benny-pets/src/lib/contact-form.ts b/astro/benny-pets/src/lib/contact-form.ts
new file mode 100644
index 00000000..1db03f75
--- /dev/null
+++ b/astro/benny-pets/src/lib/contact-form.ts
@@ -0,0 +1,61 @@
+import { httpClient } from "@wix/essentials";
+import { CONTACT_FORM_ID } from "./constants";
+
+export type ContactField = {
+  target: string;
+  label: string;
+  type: "text" | "email" | "tel" | "number" | "textarea" | "select" | "checkbox";
+  required: boolean;
+  options: string[];
+};
+
+/**
+ * The form's field definitions, read over REST rather than through
+ * `forms.getForm()`.
+ *
+ * `@wix/forms`' form-schema module is a namespace re-export of one very large
+ * generated module, so importing it pulls ~4 MB into the server bundle even
+ * for a single call — enough on its own to exceed the hosting size limit.
+ * This endpoint returns the same definitions for ~0 KB. (`@wix/forms` is still
+ * used for `submissions`, which is small.)
+ *
+ * Note the REST shape differs from the SDK's: fields live under `fields` (not
+ * `formFields`), and carry `view` / `validation` instead of `inputOptions`.
+ */
+const FORM_SCHEMA_URL = `https://www.wixapis.com/form-schema-service/v4/forms/${CONTACT_FORM_ID}`;
+
+function toField(field: any): ContactField | null {
+  // Display-only nodes (the submit button, text blocks) carry no target.
+  if (!field?.target || field.hidden) return null;
+
+  const view = field.view ?? {};
+  const validation = field.validation ?? {};
+  const label = view.label || field.target;
+  const required = validation.required === true;
+  const choices: string[] = validation.string?.enum ?? [];
+
+  let type: ContactField["type"] = "text";
+  if (choices.length > 0) type = "select";
+  else if (view.fieldType === "TEXT_AREA") type = "textarea";
+  else if (view.fieldType === "CONTACTS_EMAIL" || validation.string?.format === "EMAIL") type = "email";
+  else if (view.fieldType === "CONTACTS_PHONE" || validation.string?.format === "PHONE") type = "tel";
+  else if (validation.number) type = "number";
+  else if (validation.boolean) type = "checkbox";
+
+  return { target: field.target, label, required, type, options: choices };
+}
+
+export async function getContactFields(): Promise<ContactField[]> {
+  try {
+    const response = await httpClient.fetchWithAuth(FORM_SCHEMA_URL);
+    if (!response.ok) {
+      console.error("[contact] form schema request failed:", response.status);
+      return [];
+    }
+    const { form } = await response.json();
+    return (form?.fields ?? []).map(toField).filter(Boolean) as ContactField[];
+  } catch (err) {
+    console.error("[contact] could not load the form:", err);
+    return [];
+  }
+}
diff --git a/astro/benny-pets/src/pages/404.astro b/astro/benny-pets/src/pages/404.astro
new file mode 100644
index 00000000..bff92218
--- /dev/null
+++ b/astro/benny-pets/src/pages/404.astro
@@ -0,0 +1,17 @@
+---
+import Nav from "../components/Nav.astro";
+import Base from "../layouts/Base.astro";
+import { getCartCount } from "../lib/cart";
+
+const cartCount = await getCartCount();
+---
+
+<Base title="Not Found — BENNY PETS">
+  <section class="store-hero cart-hero">
+    <Nav cartCount={cartCount} />
+  </section>
+  <div class="page-message">
+    <p>That page doesn't exist.</p>
+    <a href="/" class="cart-empty-btn">Back to Home</a>
+  </div>
+</Base>
diff --git a/astro/benny-pets/src/pages/api/_json.ts b/astro/benny-pets/src/pages/api/_json.ts
new file mode 100644
index 00000000..b083b940
--- /dev/null
+++ b/astro/benny-pets/src/pages/api/_json.ts
@@ -0,0 +1,7 @@
+/** Shared JSON reply for the API routes (the underscore keeps it off the router). */
+export function json(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
diff --git a/astro/benny-pets/src/pages/api/cart/add.ts b/astro/benny-pets/src/pages/api/cart/add.ts
new file mode 100644
index 00000000..46a5b24b
--- /dev/null
+++ b/astro/benny-pets/src/pages/api/cart/add.ts
@@ -0,0 +1,39 @@
+import type { APIRoute } from "astro";
+import { currentCart } from "@wix/ecom";
+import { countItems } from "../../../lib/cart";
+import { resolveSoleVariantId } from "../../../lib/catalog";
+import { STORES_APP_ID } from "../../../lib/constants";
+import { json } from "../_json";
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const { productId, variantId, quantity = 1 } = await request.json();
+    if (!productId) return json({ message: "productId is required" }, 400);
+
+    // A Wix Stores line item resolves to a *variant*. Without one the call
+    // succeeds and adds nothing, so only a product with a single variant may
+    // be added without the shopper choosing.
+    const variant = variantId ?? (await resolveSoleVariantId(productId));
+    if (!variant) {
+      return json({ message: "This product has options — choose one first." }, 409);
+    }
+
+    const { cart } = await currentCart.addToCurrentCart({
+      lineItems: [
+        {
+          catalogReference: {
+            appId: STORES_APP_ID,
+            catalogItemId: productId,
+            options: { variantId: variant },
+          },
+          quantity: Math.max(1, Number(quantity) || 1),
+        },
+      ],
+    });
+
+    return json({ count: countItems(cart) });
+  } catch (err) {
+    console.error("[api/cart/add]", err);
+    return json({ message: "Could not add to cart" }, 500);
+  }
+};
diff --git a/astro/benny-pets/src/pages/api/cart/remove.ts b/astro/benny-pets/src/pages/api/cart/remove.ts
new file mode 100644
index 00000000..e98f1dbf
--- /dev/null
+++ b/astro/benny-pets/src/pages/api/cart/remove.ts
@@ -0,0 +1,19 @@
+import type { APIRoute } from "astro";
+import { currentCart } from "@wix/ecom";
+import { countItems } from "../../../lib/cart";
+import { json } from "../_json";
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const { lineItemId } = await request.json();
+    if (!lineItemId) return json({ message: "lineItemId is required" }, 400);
+
+    // Bare array of ids, not `{ lineItemIds: [...] }`.
+    const { cart } = await currentCart.removeLineItemsFromCurrentCart([lineItemId]);
+
+    return json({ count: countItems(cart) });
+  } catch (err) {
+    console.error("[api/cart/remove]", err);
+    return json({ message: "Could not remove item" }, 500);
+  }
+};
diff --git a/astro/benny-pets/src/pages/api/cart/update.ts b/astro/benny-pets/src/pages/api/cart/update.ts
new file mode 100644
index 00000000..b5160732
--- /dev/null
+++ b/astro/benny-pets/src/pages/api/cart/update.ts
@@ -0,0 +1,26 @@
+import type { APIRoute } from "astro";
+import { currentCart } from "@wix/ecom";
+import { countItems } from "../../../lib/cart";
+import { json } from "../_json";
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const { lineItemId, quantity } = await request.json();
+    if (!lineItemId) return json({ message: "lineItemId is required" }, 400);
+
+    const nextQuantity = Number(quantity);
+    if (!Number.isFinite(nextQuantity) || nextQuantity < 1) {
+      return json({ message: "quantity must be 1 or higher" }, 400);
+    }
+
+    // Takes a bare array of `{ _id, quantity }` — not `{ lineItems: [...] }`.
+    const { cart } = await currentCart.updateCurrentCartLineItemQuantity([
+      { _id: lineItemId, quantity: nextQuantity },
+    ]);
+
+    return json({ count: countItems(cart) });
+  } catch (err) {
+    console.error("[api/cart/update]", err);
+    return json({ message: "Could not update quantity" }, 500);
+  }
+};
diff --git a/astro/benny-pets/src/pages/api/checkout.ts b/astro/benny-pets/src/pages/api/checkout.ts
new file mode 100644
index 00000000..b8ee1ce9
--- /dev/null
+++ b/astro/benny-pets/src/pages/api/checkout.ts
@@ -0,0 +1,29 @@
+import type { APIRoute } from "astro";
+import { currentCart } from "@wix/ecom";
+import { redirects } from "@wix/redirects";
+import { json } from "./_json";
+
+/**
+ * A headless site has no Wix checkout page of its own, so the checkout lives
+ * behind a redirect session — `checkout.getWixCheckoutUrl()` 404s here.
+ */
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const origin = new URL(request.url).origin;
+    const { checkoutId } = await currentCart.createCheckoutFromCurrentCart({
+      channelType: "WEB",
+    });
+
+    const { redirectSession } = await redirects.createRedirectSession({
+      ecomCheckout: { checkoutId },
+      // Where Wix sends the shopper back to when they leave the checkout.
+      callbacks: { postFlowUrl: origin, cartPageUrl: `${origin}/cart` },
+    });
+
+    if (!redirectSession?.fullUrl) return json({ message: "Checkout is unavailable" }, 502);
+    return json({ checkoutUrl: redirectSession.fullUrl });
+  } catch (err) {
+    console.error("[api/checkout]", err);
+    return json({ message: "Could not start checkout" }, 500);
+  }
+};
diff --git a/astro/benny-pets/src/pages/api/contact.ts b/astro/benny-pets/src/pages/api/contact.ts
new file mode 100644
index 00000000..a274d5ea
--- /dev/null
+++ b/astro/benny-pets/src/pages/api/contact.ts
@@ -0,0 +1,30 @@
+import type { APIRoute } from "astro";
+import { submissions } from "@wix/forms";
+import { CONTACT_FORM_ID } from "../../lib/constants";
+import { json } from "./_json";
+
+/**
+ * The body is keyed by each field's Wix Forms `target`, which the form
+ * component reads from the form definition — nothing here assumes a field set.
+ */
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const values = await request.json();
+    if (!values || typeof values !== "object" || Object.keys(values).length === 0) {
+      return json({ message: "Nothing to submit" }, 400);
+    }
+
+    const { status } = await submissions.createSubmission({
+      formId: CONTACT_FORM_ID,
+      submissions: values,
+    });
+
+    if (status !== "PENDING" && status !== "CONFIRMED") {
+      return json({ message: "The form could not be submitted" }, 502);
+    }
+    return json({ ok: true });
+  } catch (err) {
+    console.error("[api/contact]", err);
+    return json({ message: "Could not send the message" }, 500);
+  }
+};
diff --git a/astro/benny-pets/src/pages/cart.astro b/astro/benny-pets/src/pages/cart.astro
new file mode 100644
index 00000000..9517f748
--- /dev/null
+++ b/astro/benny-pets/src/pages/cart.astro
@@ -0,0 +1,138 @@
+---
+import Nav from "../components/Nav.astro";
+import WaveText from "../components/WaveText.astro";
+import Base from "../layouts/Base.astro";
+import { countItems, getCartSafe, getCartSubtotal } from "../lib/cart";
+import { getProductImages, resolveImage } from "../lib/catalog";
+
+const cart = await getCartSafe();
+const lineItems: any[] = cart?.lineItems ?? [];
+const itemCount = countItems(cart);
+
+// Totals come from the estimate call, not from adding up line prices here.
+const subtotal = lineItems.length > 0 ? await getCartSubtotal() : null;
+
+// A line item keeps the image it had when it was added, so fill in anything
+// that was added before its product had one.
+const catalogImages = await getProductImages(
+  lineItems.filter((item) => !resolveImage(item.image)).map((item) => item.catalogReference?.catalogItemId),
+  240,
+  240,
+);
+---
+
+<Base title="Cart — BENNY PETS" description="Your Benny Pets cart.">
+  <section class="store-hero cart-hero">
+    <Nav cartCount={itemCount} />
+    <WaveText text="YOUR CART" class="store-wordmark" />
+  </section>
+
+  <div class="cart-page">
+    {
+      lineItems.length === 0 ? (
+        <div class="cart-empty">
+          <p class="cart-empty-msg">Your cart is empty.</p>
+          <a href="/store" class="cart-empty-btn">
+            Browse the Store
+          </a>
+        </div>
+      ) : (
+        <div class="cart-inner">
+          <ul class="cart-list">
+            {lineItems.map((item) => {
+              const name = item.productName?.original ?? item.productName?.translated ?? "";
+              const imageUrl =
+                resolveImage(item.image, 240, 240) ??
+                catalogImages[item.catalogReference?.catalogItemId] ??
+                null;
+              const quantity = item.quantity ?? 1;
+              return (
+                <li class="cart-item">
+                  <div class="cart-item-img">
+                    {imageUrl ? <img src={imageUrl} alt={name} /> : <div class="cart-item-img-placeholder" />}
+                  </div>
+                  <div class="cart-item-info">
+                    <p class="cart-item-name">{name}</p>
+                    {item.descriptionLines?.map((line: any) => (
+                      <p class="cart-item-variant">
+                        {line.name?.original}: {line.colorInfo?.original ?? line.plainText?.original}
+                      </p>
+                    ))}
+                    <p class="cart-item-price">{item.price?.formattedAmount} each</p>
+                  </div>
+                  <div class="cart-item-qty">
+                    <button data-action="qty" data-line={item._id} data-qty={quantity - 1}>
+                      −
+                    </button>
+                    <span>{quantity}</span>
+                    <button data-action="qty" data-line={item._id} data-qty={quantity + 1}>
+                      +
+                    </button>
+                  </div>
+                  <p class="cart-item-line-price">{item.lineItemPrice?.formattedAmount}</p>
+                  <button class="cart-item-remove" data-action="remove" data-line={item._id} aria-label={`Remove ${name}`}>
+                    ✕
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+
+          <div class="cart-summary">
+            <div class="cart-summary-row">
+              <span>Subtotal</span>
+              <span>{subtotal ?? "—"}</span>
+            </div>
+            <p class="cart-summary-note">Shipping &amp; taxes calculated at checkout</p>
+            <button class="cart-checkout-btn" id="checkout">Proceed to Checkout</button>
+            <a href="/store" class="cart-continue-link">← Continue Shopping</a>
+          </div>
+        </div>
+      )
+    }
+  </div>
+</Base>
+
+<script>
+  import { postJSON, showToast } from "../scripts/site.js";
+
+  let busy = false;
+
+  // Quantity and removal round-trip through the API and re-render from the
+  // server, so what is on screen is always the real cart.
+  document.querySelectorAll("[data-action]").forEach((button) => {
+    button.addEventListener("click", async () => {
+      if (busy) return;
+      busy = true;
+      const lineItemId = button.dataset.line;
+      const quantity = Number(button.dataset.qty ?? 0);
+      const remove = button.dataset.action === "remove" || quantity < 1;
+      try {
+        await postJSON(remove ? "/api/cart/remove" : "/api/cart/update", { lineItemId, quantity });
+        window.location.reload();
+      } catch (err) {
+        console.error("[cart] update failed:", err);
+        showToast(remove ? "Could not remove that item." : "Could not update the quantity.");
+        busy = false;
+      }
+    });
+  });
+
+  const checkout = document.getElementById("checkout");
+  checkout?.addEventListener("click", async () => {
+    if (busy) return;
+    busy = true;
+    checkout.disabled = true;
+    checkout.textContent = "Redirecting…";
+    try {
+      const { checkoutUrl } = await postJSON("/api/checkout", {});
+      window.location.href = checkoutUrl;
+    } catch (err) {
+      console.error("[checkout] could not start:", err);
+      showToast("Could not start checkout. Please try again.");
+      checkout.disabled = false;
+      checkout.textContent = "Proceed to Checkout";
+      busy = false;
+    }
+  });
+</script>
diff --git a/astro/benny-pets/src/pages/index.astro b/astro/benny-pets/src/pages/index.astro
new file mode 100644
index 00000000..52cea369
--- /dev/null
+++ b/astro/benny-pets/src/pages/index.astro
@@ -0,0 +1,303 @@
+---
+import ContactForm from "../components/ContactForm.astro";
+import Nav from "../components/Nav.astro";
+import ProductCard from "../components/ProductCard.astro";
+import QuickAdd from "../components/QuickAdd.astro";
+import WaveText from "../components/WaveText.astro";
+import Base from "../layouts/Base.astro";
+import { getCartCount } from "../lib/cart";
+import { listProducts } from "../lib/catalog";
+
+const WORD = "BENNY PETS";
+const LETTER_DELAY = 0.07;
+
+const [products, cartCount] = await Promise.all([listProducts(12, 600, 600), getCartCount()]);
+
+const bestSellers = products.slice(0, 4);
+// The gallery has six card slots; fill them from the catalog, cycling when the
+// store has fewer products than slots.
+const gallerySlots = products.length > 0 ? [0, 1, 2, 3, 4, 5].map((i) => products[i % products.length]) : [];
+
+const reviews = [
+  { quote: "My dog's food arrived fast and the quality is outstanding. Totally worth it!", title: '"Absolutely Amazing!"', name: "Sarah Mitchell", dir: "from-left" },
+  { quote: "Best pet store around. My cat loves every toy I've bought here!", title: '"Best Pet Store Ever!"', name: "James Carter", dir: "" },
+  { quote: "Great prices, amazing selection. I've been a loyal customer for over a year.", title: '"Highly Recommend!"', name: "Emma Thompson", dir: "from-right" },
+];
+
+const welcomeText =
+  "Your one-stop destination for premium pet products. We believe every pet deserves the very best — from nourishing food and fun toys to cozy beds and grooming essentials. Shop with confidence and give your furry friend the love they deserve.";
+---
+
+<Base title="BENNY PETS" description="Premium food, toys & accessories for your best friend.">
+  <div class="loading-overlay" id="loading-overlay">
+    <div class="loading-letters" id="loading-letters">
+      {
+        [...WORD].map((ch, i) =>
+          ch === " " ? (
+            <span style="width: 0.28em; display: inline-block;" />
+          ) : (
+            <span class="loading-letter" style={`animation-delay: ${i * LETTER_DELAY}s`}>
+              {ch}
+            </span>
+          ),
+        )
+      }
+    </div>
+  </div>
+  <noscript><style is:inline>.loading-overlay { display: none !important; }</style></noscript>
+
+  <section class="hero">
+    <Nav cartCount={cartCount} shopLabel="Shop" homeScrollsToTop />
+    <WaveText text="BENNY PETS" class="hero-wordmark" id="hero-wordmark" />
+    <img class="hero-dog" src="/hero-bg.jpg" alt="Dalmatian with a tennis ball" />
+    <div class="hero-copy animate-in">
+      <p class="hero-eyebrow">
+        Premium food, toys &amp; accessories for your<br />best friend. Delivered to your door.
+      </p>
+      <a href="/store" class="hero-btn">Shop Now</a>
+    </div>
+  </section>
+
+  <section class="welcome" id="about">
+    <span class="section-tag animate-in">Welcome to Benny Pets</span>
+    <p class="welcome-body">
+      {
+        welcomeText.split(" ").map((word, wi) => (
+          <span class="blur-word" style={`transition-delay: ${wi * 0.04}s`}>
+            {[...word].map((ch) => (
+              <span class="w-letter">{ch}</span>
+            ))}
+          </span>
+        ))
+      }
+    </p>
+  </section>
+
+  <section class="products" id="shop">
+    <span class="section-tag animate-in">Our Best Sellers</span>
+    {
+      bestSellers.length === 0 ? (
+        <p class="store-empty">No products yet — add some in your Wix dashboard and they appear here.</p>
+      ) : (
+        <div class="product-grid">
+          {bestSellers.map((product, i) => (
+            <ProductCard product={product} delay={0.1 + i * 0.1} />
+          ))}
+        </div>
+      )
+    }
+  </section>
+
+  {
+    gallerySlots.length > 0 && (
+      <section class="col-gallery" id="col-gallery">
+        <span class="section-tag">Shop Collection</span>
+        <div class="col-sticky">
+          <div class="gallery-col">
+            <img class="gallery-photo" src="/gallery1.jpg" alt="Dog resting" />
+            <div class="gallery-card">
+              {gallerySlots[0].imageUrl && <img src={gallerySlots[0].imageUrl} alt={gallerySlots[0].name} />}
+              <div class="gallery-card-info">
+                <a class="gallery-card-name" href={`/store/${gallerySlots[0].slug}`}>
+                  {gallerySlots[0].name}
+                </a>
+                <span class="gallery-card-price">{gallerySlots[0].price}</span>
+                <QuickAdd product={gallerySlots[0]} class="gallery-card-btn" />
+              </div>
+            </div>
+            <div class="gallery-accent" style="background: var(--lime); color: #1a1700;">
+              <span class="gallery-accent-label">Best Seller</span>
+              <p class="gallery-accent-heading">Premium Nutrition for Happy Dogs</p>
+            </div>
+            <div class="gallery-card">
+              {gallerySlots[1].imageUrl && <img src={gallerySlots[1].imageUrl} alt={gallerySlots[1].name} />}
+              <div class="gallery-card-info">
+                <a class="gallery-card-name" href={`/store/${gallerySlots[1].slug}`}>
+                  {gallerySlots[1].name}
+                </a>
+                <span class="gallery-card-price">{gallerySlots[1].price}</span>
+                <QuickAdd product={gallerySlots[1]} class="gallery-card-btn" />
+              </div>
+            </div>
+          </div>
+
+          <div class="gallery-col">
+            <div class="gallery-accent" style="background: var(--olive); color: var(--lime);">
+              <span class="gallery-accent-label">Our Collection</span>
+              <p class="gallery-accent-heading">Shop Everything Your Pet Needs</p>
+            </div>
+            <img class="gallery-photo" src="/gallery2.jpg" alt="Dalmatian with a tennis ball" />
+            <div class="gallery-card">
+              {gallerySlots[2].imageUrl && <img src={gallerySlots[2].imageUrl} alt={gallerySlots[2].name} />}
+              <div class="gallery-card-info">
+                <a class="gallery-card-name" href={`/store/${gallerySlots[2].slug}`}>
+                  {gallerySlots[2].name}
+                </a>
+                <span class="gallery-card-price">{gallerySlots[2].price}</span>
+                <QuickAdd product={gallerySlots[2]} class="gallery-card-btn" />
+              </div>
+            </div>
+            <div class="gallery-card">
+              {gallerySlots[3].imageUrl && <img src={gallerySlots[3].imageUrl} alt={gallerySlots[3].name} />}
+              <div class="gallery-card-info">
+                <a class="gallery-card-name" href={`/store/${gallerySlots[3].slug}`}>
+                  {gallerySlots[3].name}
+                </a>
+                <span class="gallery-card-price">{gallerySlots[3].price}</span>
+                <QuickAdd product={gallerySlots[3]} class="gallery-card-btn" />
+              </div>
+            </div>
+          </div>
+
+          <div class="gallery-col">
+            <div class="gallery-card">
+              {gallerySlots[4].imageUrl && <img src={gallerySlots[4].imageUrl} alt={gallerySlots[4].name} />}
+              <div class="gallery-card-info">
+                <a class="gallery-card-name" href={`/store/${gallerySlots[4].slug}`}>
+                  {gallerySlots[4].name}
+                </a>
+                <span class="gallery-card-price">{gallerySlots[4].price}</span>
+                <QuickAdd product={gallerySlots[4]} class="gallery-card-btn" />
+              </div>
+            </div>
+            <img class="gallery-photo" src="/gallery3.jpg" alt="Dog on an olive background" />
+            <div class="gallery-card">
+              {gallerySlots[5].imageUrl && <img src={gallerySlots[5].imageUrl} alt={gallerySlots[5].name} />}
+              <div class="gallery-card-info">
+                <a class="gallery-card-name" href={`/store/${gallerySlots[5].slug}`}>
+                  {gallerySlots[5].name}
+                </a>
+                <span class="gallery-card-price">{gallerySlots[5].price}</span>
+                <QuickAdd product={gallerySlots[5]} class="gallery-card-btn" />
+              </div>
+            </div>
+            <div class="gallery-accent" style="background: var(--cream); color: var(--muted);">
+              <span class="gallery-accent-label">Quality Promise</span>
+              <p class="gallery-accent-heading">Natural &amp; Organic Ingredients</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  <div class="testimonials-scroll-wrapper">
+    <section class="testimonials-banner">
+      <h2 class="animate-in">What our happy<br />customers say</h2>
+    </section>
+    {
+      reviews.map(({ quote, title, name, dir }) => (
+        <section class="review-section">
+          <div class={`review-card animate-in ${dir}`}>
+            <div class="review-meta">
+              <span>{title}</span>
+              <span>{name}</span>
+            </div>
+            <p class="review-quote">{quote}</p>
+          </div>
+        </section>
+      ))
+    }
+  </div>
+
+  <footer>
+    <div class="footer-top">
+      <div class="footer-left animate-in from-left">
+        <span class="footer-label">Get In Touch</span>
+        <p class="footer-desc">
+          Have a question about your order, need product advice, or just want to share a photo of
+          your happy pet? We'd love to hear from you!
+        </p>
+        <div class="footer-contact-item">
+          <span class="footer-label">Phone</span>
+          <span>+1 (800) 729-7283</span>
+        </div>
+        <div class="footer-contact-item">
+          <span class="footer-label">Email</span>
+          <a href="mailto:hello@bennypets.com">hello@bennypets.com</a>
+        </div>
+      </div>
+      <ContactForm />
+    </div>
+    <hr class="footer-rule" />
+    <div class="footer-base">
+      <span>©2025 Benny Pets. All rights reserved. Made with love for pets everywhere.</span>
+    </div>
+    <WaveText text="BENNY PETS" class="footer-wordmark" />
+  </footer>
+</Base>
+
+<script>
+  import { postJSON, setCartCount, showToast } from "../scripts/site.js";
+
+  const WORD_LENGTH = "BENNY PETS".length;
+  const LETTER_DELAY = 0.07;
+
+  // ── LOADING: fly the wordmark into the hero, then drop the overlay ──
+  const overlay = document.getElementById("loading-overlay");
+  const letters = document.getElementById("loading-letters");
+  const heroWordmark = document.getElementById("hero-wordmark");
+  const animDone = (WORD_LENGTH * LETTER_DELAY + 0.85) * 1000;
+
+  setTimeout(() => {
+    const from = letters?.getBoundingClientRect();
+    const to = heroWordmark?.getBoundingClientRect();
+    if (!from || !to || !letters) return;
+    const scale = to.width / from.width;
+    const tx = to.left + to.width / 2 - (from.left + from.width / 2);
+    const ty = to.top + to.height / 2 - (from.top + from.height / 2);
+    letters.style.transition = "transform 0.65s cubic-bezier(0.76,0,0.24,1), opacity 0.3s ease 0.35s";
+    letters.style.transformOrigin = "center center";
+    letters.style.transform = `translate(${tx}px,${ty}px) scale(${scale})`;
+    letters.style.opacity = "0";
+  }, animDone);
+  setTimeout(() => overlay?.classList.add("hide"), animDone + 700);
+  setTimeout(() => overlay?.remove(), animDone + 900);
+
+  // ── PARALLAX: hero dog, column gallery, 3D review cards ──
+  const gallery = document.getElementById("col-gallery");
+  const heroDog = document.querySelector(".hero-dog");
+  const reviewCards = [...document.querySelectorAll(".review-card")];
+
+  function onScroll() {
+    if (heroDog) heroDog.style.transform = `translateX(-50%) translateY(${window.scrollY * 0.12}px)`;
+    if (gallery) {
+      const top = gallery.offsetTop;
+      const height = gallery.offsetHeight - window.innerHeight;
+      const progress = Math.max(0, Math.min(1, (window.scrollY - top) / (height || 1)));
+      gallery.querySelectorAll(".gallery-col").forEach((col, i) => {
+        col.style.transform = `translateY(${(progress - 0.5) * 180 * (i % 2 === 0 ? -1 : 1)}px)`;
+      });
+    }
+    reviewCards.forEach((card, i) => {
+      const rect = card.getBoundingClientRect();
+      const pct = (rect.top + rect.height / 2 - window.innerHeight / 2) / window.innerHeight;
+      card.style.transform = `perspective(900px) rotateY(${pct * 18 * (i % 2 === 0 ? 1 : -1)}deg) rotateX(${pct * -6}deg)`;
+    });
+  }
+  window.addEventListener("scroll", onScroll, { passive: true });
+  onScroll();
+
+  document.getElementById("nav-home")?.addEventListener("click", (event) => {
+    event.preventDefault();
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  });
+
+  // ── Quick add for single-variant products ──
+  document.querySelectorAll("[data-quick-add]").forEach((button) => {
+    button.addEventListener("click", async () => {
+      if (button.disabled) return;
+      button.disabled = true;
+      try {
+        const { count } = await postJSON("/api/cart/add", { productId: button.dataset.productId });
+        setCartCount(count);
+        showToast(`${button.dataset.name} added to cart ✓`);
+      } catch (err) {
+        console.error("[cart] quick add failed:", err);
+        showToast("Could not add to cart. Please try again.");
+      } finally {
+        button.disabled = false;
+      }
+    });
+  });
+</script>
diff --git a/astro/benny-pets/src/pages/store/[slug].astro b/astro/benny-pets/src/pages/store/[slug].astro
new file mode 100644
index 00000000..c3a0f2e0
--- /dev/null
+++ b/astro/benny-pets/src/pages/store/[slug].astro
@@ -0,0 +1,210 @@
+---
+import WaveLink from "../../components/WaveLink.astro";
+import Base from "../../layouts/Base.astro";
+import { getCartCount } from "../../lib/cart";
+import { getProductBySlug } from "../../lib/catalog";
+
+const { slug } = Astro.params;
+
+const [product, cartCount] = await Promise.all([getProductBySlug(slug ?? "", 800, 800), getCartCount()]);
+
+// An unknown slug is a 404, never a redirect.
+if (!product) Astro.response.status = 404;
+
+const cartLabel = cartCount > 0 ? `Cart (${cartCount})` : "Cart";
+const visibleVariants = product?.variants.filter((variant) => variant.visible) ?? [];
+// With a single variant there is nothing to choose, so it can be added straight away.
+const soleVariantId = visibleVariants.length === 1 ? visibleVariants[0]._id : "";
+---
+
+{
+  product ? (
+    <Base title={`${product.name} — BENNY PETS`} description={product.description || product.name}>
+      <div class="product-page">
+        <nav class="product-page-nav">
+          <WaveLink href="/" text="← Home" class="product-back" />
+          <WaveLink href="/store" text="Store" class="product-back" />
+          <WaveLink href="/cart" text={cartLabel} class="product-back product-back-cart" cartLabel />
+        </nav>
+
+        <div class="product-page-inner">
+          <div class="product-page-img">
+            {product.imageUrl ? (
+              <img src={product.imageUrl} alt={product.name} />
+            ) : (
+              <div class="product-page-img-placeholder" />
+            )}
+          </div>
+
+          <div
+            class="product-page-info"
+            id="product-info"
+            data-product-id={product._id}
+            data-name={product.name}
+            data-variant-id={soleVariantId}
+            data-variants={JSON.stringify(
+              visibleVariants.map((variant) => ({
+                id: variant._id,
+                choices: variant.choices,
+                price: variant.price,
+              })),
+            )}
+          >
+            <span class="section-tag">Benny Pets</span>
+            <h1 class="product-page-name">{product.name}</h1>
+            <p class="product-page-price" id="product-price">{product.price}</p>
+            {product.description && <p class="product-page-desc">{product.description}</p>}
+
+            {product.options.length > 0 && (
+              <div class="product-page-options">
+                {product.options.map((option) => (
+                  <label class="product-option">
+                    <span class="product-option-label">{option.name}</span>
+                    <select data-option={option.name}>
+                      <option value="">Select {option.name}</option>
+                      {option.choices.map((choice) => (
+                        <option value={choice}>{choice}</option>
+                      ))}
+                    </select>
+                  </label>
+                ))}
+              </div>
+            )}
+
+            <div class="product-page-qty">
+              <button data-qty="dec" aria-label="Decrease quantity">
+                −
+              </button>
+              <span id="qty">1</span>
+              <button data-qty="inc" aria-label="Increase quantity">
+                +
+              </button>
+            </div>
+
+            <div class="product-page-actions">
+              <button class="product-page-cart-btn" id="add-to-cart">
+                Add to Cart
+              </button>
+              <button class="product-page-buy-btn" id="buy-now">
+                Buy Now
+              </button>
+            </div>
+
+            <a href="/cart" class="product-page-view-cart" id="view-cart" hidden={cartCount === 0}>
+              {`View Cart (${cartCount} item${cartCount !== 1 ? "s" : ""}) →`}
+            </a>
+          </div>
+        </div>
+      </div>
+    </Base>
+  ) : (
+    <Base title="Not Found — BENNY PETS">
+      <div class="product-page">
+        <nav class="product-page-nav">
+          <WaveLink href="/" text="← Home" class="product-back" />
+          <WaveLink href="/store" text="Store" class="product-back" />
+          <WaveLink href="/cart" text={cartLabel} class="product-back product-back-cart" cartLabel />
+        </nav>
+        <div class="page-message">
+          <p>We couldn't find that product.</p>
+          <a href="/store" class="cart-empty-btn">
+            Browse the Store
+          </a>
+        </div>
+      </div>
+    </Base>
+  )
+}
+
+<script>
+  import { postJSON, setCartCount, showToast } from "../../scripts/site.js";
+
+  const info = document.getElementById("product-info");
+  const qtyLabel = document.getElementById("qty");
+  const priceLabel = document.getElementById("product-price");
+  const addButton = document.getElementById("add-to-cart");
+  const buyButton = document.getElementById("buy-now");
+  const viewCart = document.getElementById("view-cart");
+  const selects = [...document.querySelectorAll("[data-option]")];
+
+  if (info && qtyLabel && addButton && buyButton) {
+    const productId = info.dataset.productId;
+    const productName = info.dataset.name;
+    const variants = JSON.parse(info.dataset.variants || "[]");
+    let variantId = info.dataset.variantId || "";
+    let qty = 1;
+    let busy = false;
+
+    // The shopper's picks resolve to a real variant — nothing is ever added
+    // for a product whose options haven't all been chosen.
+    function syncVariant() {
+      if (selects.length === 0) return;
+      const chosen = {};
+      selects.forEach((select) => {
+        if (select.value) chosen[select.dataset.option] = select.value;
+      });
+      const complete = Object.keys(chosen).length === selects.length;
+      const match = complete
+        ? variants.find((variant) =>
+            Object.entries(chosen).every(([option, value]) => variant.choices[option] === value),
+          )
+        : null;
+      variantId = match?.id ?? "";
+      if (match?.price && priceLabel) priceLabel.textContent = match.price;
+      addButton.disabled = !variantId;
+      buyButton.disabled = !variantId;
+      addButton.title = variantId ? "" : "Choose an option first";
+    }
+
+    selects.forEach((select) => select.addEventListener("change", syncVariant));
+    syncVariant();
+
+    document.querySelectorAll("[data-qty]").forEach((button) => {
+      button.addEventListener("click", () => {
+        qty = button.dataset.qty === "inc" ? qty + 1 : Math.max(1, qty - 1);
+        qtyLabel.textContent = String(qty);
+      });
+    });
+
+    function setBusy(state) {
+      busy = state;
+      addButton.disabled = state || !variantId;
+      buyButton.disabled = state || !variantId;
+      addButton.textContent = state ? "…" : "Add to Cart";
+      buyButton.textContent = state ? "…" : "Buy Now";
+    }
+
+    addButton.addEventListener("click", async () => {
+      if (busy || !variantId) return;
+      setBusy(true);
+      try {
+        const { count } = await postJSON("/api/cart/add", { productId, variantId, quantity: qty });
+        setCartCount(count);
+        if (viewCart) {
+          viewCart.hidden = count === 0;
+          viewCart.textContent = `View Cart (${count} item${count !== 1 ? "s" : ""}) →`;
+        }
+        showToast(`${qty > 1 ? qty + "× " : ""}${productName} added to cart ✓`);
+      } catch (err) {
+        console.error("[cart] add failed:", err);
+        showToast("Could not add to cart. Please try again.");
+      } finally {
+        setBusy(false);
+      }
+    });
+
+    buyButton.addEventListener("click", async () => {
+      if (busy || !variantId) return;
+      setBusy(true);
+      try {
+        await postJSON("/api/cart/add", { productId, variantId, quantity: qty });
+        const { checkoutUrl } = await postJSON("/api/checkout", {});
+        window.location.href = checkoutUrl;
+      } catch (err) {
+        console.error("[checkout] could not start:", err);
+        showToast("Could not start checkout. Please try again.");
+        setBusy(false);
+      }
+    });
+  }
+</script>
diff --git a/astro/benny-pets/src/pages/store/index.astro b/astro/benny-pets/src/pages/store/index.astro
new file mode 100644
index 00000000..e38276d6
--- /dev/null
+++ b/astro/benny-pets/src/pages/store/index.astro
@@ -0,0 +1,144 @@
+---
+import Nav from "../../components/Nav.astro";
+import ProductCard from "../../components/ProductCard.astro";
+import QuickAdd from "../../components/QuickAdd.astro";
+import WaveText from "../../components/WaveText.astro";
+import Base from "../../layouts/Base.astro";
+import { getCartCount } from "../../lib/cart";
+import { listCategories, listProducts } from "../../lib/catalog";
+
+const GRID_SIZE = 8;
+
+const [products, categories, cartCount] = await Promise.all([
+  listProducts(40, 600, 600),
+  listCategories(),
+  getCartCount(),
+]);
+
+const gridProducts = products.slice(0, GRID_SIZE);
+// Anything past the grid is listed compactly rather than dropped.
+const listedProducts = products.slice(GRID_SIZE);
+---
+
+<Base title="Our Store — BENNY PETS" description="Shop every product in the Benny Pets catalog.">
+  <section class="store-hero">
+    <Nav cartCount={cartCount} />
+    <WaveText text="OUR STORE" class="store-wordmark" />
+  </section>
+
+  {
+    categories.length > 0 && (
+      <div class="store-categories">
+        <button class="store-cat-btn active" data-cat="all">
+          All
+        </button>
+        {categories.map((category) => (
+          <button class="store-cat-btn" data-cat={category._id}>
+            {category.name}
+          </button>
+        ))}
+      </div>
+    )
+  }
+
+  <section class="store-grid-section">
+    <p class="store-empty" id="store-empty" hidden>No products in this category yet.</p>
+    {
+      products.length === 0 ? (
+        <p class="store-empty">No products yet — add some in your Wix dashboard and they appear here.</p>
+      ) : (
+        <div class="product-grid">
+          {gridProducts.map((product, i) => (
+            <ProductCard product={product} delay={i * 0.07} />
+          ))}
+        </div>
+      )
+    }
+  </section>
+
+  {
+    listedProducts.length > 0 && (
+      <section class="store-list-section animate-in" id="store-list-section">
+        <span class="section-tag">More Products</span>
+        <ul class="store-list">
+          {listedProducts.map((product, i) => (
+            <li
+              class="store-list-item animate-in"
+              data-categories={product.categoryIds.join(" ")}
+              style={`transition-delay: ${i * 0.05}s`}
+            >
+              <a class="store-list-name" href={`/store/${product.slug}`}>
+                {product.name}
+              </a>
+              <span class="store-list-sub">{product.sub}</span>
+              <span class="store-list-price">{product.price}</span>
+              <QuickAdd product={product} class="store-list-btn" />
+            </li>
+          ))}
+        </ul>
+      </section>
+    )
+  }
+
+  <footer class="store-footer-bar">
+    <a href="/" class="store-back-link">← Back to Home</a>
+    <span>©2025 Benny Pets</span>
+  </footer>
+</Base>
+
+<script>
+  import { postJSON, setCartCount, showToast } from "../../scripts/site.js";
+
+  // Filtering is by real category id — the buttons come from the store's own
+  // categories, so one added in the dashboard filters with no code change.
+  const buttons = [...document.querySelectorAll(".store-cat-btn")];
+  const cards = [...document.querySelectorAll(".product-card")];
+  const rows = [...document.querySelectorAll(".store-list-item")];
+  const emptyMessage = document.getElementById("store-empty");
+  const listSection = document.getElementById("store-list-section");
+
+  function matches(element, category) {
+    return category === "all" || (element.dataset.categories || "").split(" ").includes(category);
+  }
+
+  function applyCategory(category) {
+    let visibleCards = 0;
+    let visibleRows = 0;
+    cards.forEach((card) => {
+      const show = matches(card, category);
+      card.hidden = !show;
+      if (show) visibleCards += 1;
+    });
+    rows.forEach((row) => {
+      const show = matches(row, category);
+      row.hidden = !show;
+      if (show) visibleRows += 1;
+    });
+    if (emptyMessage) emptyMessage.hidden = visibleCards > 0 || visibleRows > 0;
+    if (listSection) listSection.hidden = visibleRows === 0;
+  }
+
+  buttons.forEach((button) => {
+    button.addEventListener("click", () => {
+      buttons.forEach((other) => other.classList.toggle("active", other === button));
+      applyCategory(button.dataset.cat);
+    });
+  });
+
+  document.querySelectorAll("[data-quick-add]").forEach((button) => {
+    button.addEventListener("click", async () => {
+      if (button.disabled) return;
+      button.disabled = true;
+      try {
+        const { count } = await postJSON("/api/cart/add", { productId: button.dataset.productId });
+        setCartCount(count);
+        showToast(`${button.dataset.name} added to cart ✓`);
+      } catch (err) {
+        console.error("[cart] quick add failed:", err);
+        showToast("Could not add to cart. Please try again.");
+      } finally {
+        button.disabled = false;
+      }
+    });
+  });
+</script>
diff --git a/astro/benny-pets/src/scripts/site.js b/astro/benny-pets/src/scripts/site.js
new file mode 100644
index 00000000..975e7577
--- /dev/null
+++ b/astro/benny-pets/src/scripts/site.js
@@ -0,0 +1,137 @@
+/**
+ * Site-wide client behaviour. In the Next app these lived in `useEffect`s but
+ * were pure DOM work, so they port to plain modules — no framework, no island.
+ * Imported once from the layout; pages import the named helpers they need.
+ */
+
+const LETTER_TRANSITION = "transform 0.4s cubic-bezier(0.34,1.56,0.64,1)";
+
+/** Ripple the letters of a wave container upward, one after another. */
+export function triggerWave(container, amplitude = 14, stagger = 45) {
+  const letters = container?.querySelectorAll(".wm-letter");
+  if (!letters) return;
+  letters.forEach((letter, i) => {
+    clearTimeout(letter._waveTimer);
+    letter._waveTimer = setTimeout(() => {
+      letter.style.transform = `translateY(-${amplitude}px)`;
+      setTimeout(() => {
+        letter.style.transform = "translateY(0)";
+      }, 320);
+    }, i * stagger);
+  });
+}
+
+/** Rebuild a wave element's letters — used when a label changes (cart count). */
+export function setWaveText(container, text) {
+  if (!container) return;
+  container.textContent = "";
+  [...text].forEach((ch, i) => {
+    const span = document.createElement("span");
+    if (ch === " ") {
+      span.className = "wm-space";
+    } else {
+      span.className = "wm-letter";
+      span.style.transition = `${LETTER_TRANSITION} ${i * 0.04}s`;
+      span.textContent = ch;
+    }
+    container.appendChild(span);
+  });
+}
+
+let toastTimer;
+export function showToast(message) {
+  const el = document.getElementById("toast");
+  if (!el) return;
+  el.textContent = message;
+  el.classList.add("show");
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => el.classList.remove("show"), 2400);
+}
+
+/** POST JSON to one of the /api routes and return the parsed body. */
+export async function postJSON(url, body) {
+  const res = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", Accept: "application/json" },
+    body: JSON.stringify(body ?? {}),
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.message || "Request failed");
+  return data;
+}
+
+/** Update every cart label on the page (nav links carry wave letters). */
+export function setCartCount(count) {
+  document.querySelectorAll("[data-cart-label]").forEach((el) => {
+    setWaveText(el, count > 0 ? `Cart (${count})` : "Cart");
+  });
+}
+
+function initCursor() {
+  const cursor = document.getElementById("cursor");
+  if (!cursor) return;
+  let raf = 0;
+  window.addEventListener(
+    "mousemove",
+    (e) => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        cursor.style.transform = `translate(${e.clientX - 7}px,${e.clientY - 7}px)`;
+      });
+    },
+    { passive: true },
+  );
+  // Delegated so it also covers markup added after load (cart re-renders).
+  document.addEventListener("mouseover", (e) => {
+    if (e.target?.closest?.("a,button")) cursor.classList.add("expanded");
+  });
+  document.addEventListener("mouseout", (e) => {
+    if (e.target?.closest?.("a,button")) cursor.classList.remove("expanded");
+  });
+}
+
+function initReveal() {
+  const io = new IntersectionObserver(
+    (entries) =>
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) entry.target.classList.add("visible");
+      }),
+    { threshold: 0.08 },
+  );
+  document.querySelectorAll(".animate-in, .blur-word").forEach((el) => io.observe(el));
+}
+
+function initWaves() {
+  document.querySelectorAll("[data-wave]").forEach((el) => {
+    el.addEventListener("mouseenter", () =>
+      triggerWave(el, Number(el.dataset.waveAmp) || 14, Number(el.dataset.waveStagger) || 45),
+    );
+  });
+}
+
+/** The welcome paragraph: hovering a letter lifts its neighbours less and less. */
+function initWelcomeLetters() {
+  document.querySelectorAll(".blur-word").forEach((word) => {
+    const letters = [...word.querySelectorAll(".w-letter")];
+    letters.forEach((letter, index) => {
+      letter.addEventListener("mouseenter", () => {
+        letters.forEach((other, i) => {
+          clearTimeout(other._welcomeTimer);
+          const distance = Math.abs(i - index);
+          const amplitude = Math.max(3, 12 - distance * 3);
+          other._welcomeTimer = setTimeout(() => {
+            other.style.transform = `translateY(-${amplitude}px)`;
+            setTimeout(() => {
+              other.style.transform = "translateY(0)";
+            }, 300);
+          }, distance * 40);
+        });
+      });
+    });
+  });
+}
+
+initCursor();
+initReveal();
+initWaves();
+initWelcomeLetters();
diff --git a/astro/benny-pets/src/styles/globals.css b/astro/benny-pets/src/styles/globals.css
new file mode 100644
index 00000000..35d9dfe0
--- /dev/null
+++ b/astro/benny-pets/src/styles/globals.css
@@ -0,0 +1,741 @@
+@import url('https://fonts.googleapis.com/css2?family=Boldonse&family=JetBrains+Mono:wght@400;700&family=Sora:wght@400;700&display=swap');
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --olive   : #8B8246;
+  --lime    : #DFE701;
+  --cream   : #F2F1EA;
+  --white   : #FFFFFF;
+  --dark    : #0D0D0D;
+  --muted   : #5F6860;
+  --body-tx : #8B8246;
+  --f-display : 'Boldonse', Impact, sans-serif;
+  --f-mono    : 'JetBrains Mono', monospace;
+  --f-body    : 'Sora', sans-serif;
+  --m: 30px;
+}
+
+/* Class rules like `.product-card { display: flex }` outbid the browser's own
+   [hidden] rule, so anything toggled with the attribute needs this. */
+[hidden] { display: none !important; }
+
+html { scroll-behavior: smooth; }
+body {
+  font-family: var(--f-mono);
+  background: var(--cream);
+  color: var(--muted);
+  overflow-x: hidden;
+  cursor: none;
+}
+
+/* ── CUSTOM CURSOR ── */
+.cursor {
+  position: fixed;
+  width: 14px; height: 14px;
+  background: var(--lime);
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 99999;
+  top: 0; left: 0;
+  transition: width 0.2s ease, height 0.2s ease, margin 0.2s ease;
+  will-change: transform;
+}
+.cursor.expanded {
+  width: 36px; height: 36px;
+  margin: -11px 0 0 -11px;
+}
+a, button { cursor: none; }
+
+/* ── LOADING OVERLAY ── */
+.loading-overlay {
+  position: fixed; inset: 0; z-index: 10000;
+  background: var(--olive);
+  display: flex; align-items: center; justify-content: center;
+  pointer-events: none;
+  transition: opacity 0.4s ease;
+}
+.loading-overlay.hide { opacity: 0; }
+.loading-letters {
+  display: flex;
+  font-family: var(--f-display);
+  font-size: clamp(48px, 11vw, 180px);
+  color: var(--lime);
+  letter-spacing: -0.04em;
+  text-transform: uppercase;
+  line-height: 1;
+  transform-origin: center center;
+  will-change: transform;
+}
+.loading-letter {
+  display: inline-block;
+  opacity: 0;
+  transform: translateY(60px);
+  animation: letterUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+@keyframes letterUp {
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ── SCROLL ANIMATIONS ── */
+.animate-in {
+  opacity: 0;
+  transform: translateY(48px);
+  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.animate-in.from-left  { transform: translateX(-48px); }
+.animate-in.from-right { transform: translateX(48px); }
+.animate-in.visible    { opacity: 1; transform: translate(0,0); }
+
+/* ── BLUR WORD REVEAL ── */
+.blur-word {
+  display: inline-block;
+  opacity: 0;
+  filter: blur(14px);
+  transition: opacity 0.55s ease, filter 0.55s ease,
+              transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+  margin-right: 0.28em;
+}
+.blur-word.visible { opacity: 1; filter: blur(0); }
+.w-letter {
+  display: inline-block;
+  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* ── HERO ── */
+.hero {
+  background: var(--olive);
+  position: relative;
+  height: 100vh;
+  min-height: 500px;
+  overflow: hidden;
+}
+.hero-nav {
+  position: absolute; top: 10px; left: var(--m); right: var(--m);
+  display: flex; justify-content: space-between; align-items: center;
+  z-index: 10; list-style: none;
+}
+.hero-nav a {
+  color: var(--lime); text-decoration: none; font-family: var(--f-mono);
+  font-size: clamp(10px, 1.17vw, 15px); font-weight: 400; letter-spacing: -0.13em;
+  text-transform: uppercase;
+  display: inline-flex; overflow: visible;
+}
+.hero-nav a .wm-letter {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* WORDMARK — letters as spans */
+.hero-wordmark {
+  position: absolute; top: 11%; left: var(--m); right: var(--m);
+  font-family: var(--f-display); font-size: 15.6vw;
+  font-weight: 400; line-height: .82; color: var(--lime); letter-spacing: -0.04em;
+  text-transform: uppercase; z-index: 3; pointer-events: auto; white-space: nowrap;
+  display: flex; gap: 0;
+}
+.wm-letter {
+  display: inline-block;
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transform-origin: bottom center;
+}
+.hero-wordmark:hover .wm-letter { animation: none; }
+.wm-space { display: inline-block; width: 0.3em; }
+
+.hero-dog {
+  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
+  width: 70%; height: auto; z-index: 1;
+  will-change: transform;
+}
+.hero-copy {
+  position: absolute; bottom: var(--m); left: var(--m);
+  z-index: 4; display: flex; flex-direction: column; gap: 0;
+}
+.hero-eyebrow {
+  color: var(--lime); font-family: var(--f-mono); font-size: clamp(9px, 1.17vw, 15px);
+  font-weight: 400; letter-spacing: -0.13em; text-transform: uppercase; line-height: 1.4; margin-bottom: 6px;
+}
+.hero-btn {
+  display: inline-block; background: var(--lime); color: var(--muted);
+  padding: clamp(6px, 0.78vw, 10px) clamp(14px, 1.75vw, 22px); font-family: var(--f-mono);
+  font-weight: 700; font-size: clamp(9px, 1.09vw, 14px); text-transform: uppercase;
+  text-decoration: none; width: fit-content; border: none;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  margin-top: clamp(8px, 1vw, 13px);
+}
+.hero-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(223,231,1,.4); }
+
+/* ── WELCOME ── */
+.welcome {
+  background: var(--cream);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: var(--m);
+}
+.section-tag {
+  font-family: var(--f-mono); font-size: 12px; font-weight: 700;
+  text-transform: uppercase; color: var(--muted); display: block;
+}
+.welcome-body {
+  font-family: var(--f-body); font-size: clamp(22px, 5.44vw, 72px);
+  font-weight: 700; line-height: .88; letter-spacing: -0.04em; color: var(--body-tx);
+  max-width: 85vw;
+}
+
+/* ── PRODUCTS ── */
+.products {
+  background: var(--cream);
+  min-height: 100vh;
+  display: flex; flex-direction: column; justify-content: center;
+  padding: 60px var(--m);
+}
+.products .section-tag { text-align: center; margin-bottom: 32px; }
+.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
+.product-card {
+  display: flex; flex-direction: column;
+  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.product-card:hover { transform: translateY(-6px); }
+.product-thumb {
+  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #e5e4da;
+  transition: filter 0.35s ease;
+}
+.product-card:hover .product-thumb { filter: brightness(0.96); }
+.product-info { padding: 14px 0 0; }
+.product-name {
+  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
+  text-transform: uppercase; line-height: 1.4; color: var(--muted);
+}
+.product-sub {
+  font-family: var(--f-mono); font-size: 11px; font-weight: 400;
+  text-transform: uppercase; color: var(--muted); margin-top: 2px;
+}
+.product-price { font-family: var(--f-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
+.product-thumb-placeholder { background: #e5e4da; }
+.add-to-cart {
+  margin-top: 10px; background: var(--lime); color: var(--muted); border: none;
+  padding: 7px 16px; font-family: var(--f-mono); font-size: 11px; font-weight: 700;
+  text-transform: uppercase; width: 100%;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.add-to-cart:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(223,231,1,.4); }
+.add-to-cart:active { transform: scale(0.98); }
+
+/* ── COLUMN GALLERY ── */
+.col-gallery {
+  height: 220vh;
+  background: var(--dark);
+  position: relative;
+}
+.col-gallery > .section-tag {
+  position: absolute;
+  top: var(--m); left: var(--m);
+  color: rgba(255,255,255,.3);
+  z-index: 2;
+}
+.col-sticky {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  padding: 0 var(--m);
+}
+.gallery-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  will-change: transform;
+  /* start offset so columns bleed above and below the container */
+  margin-top: -220px;
+  margin-bottom: -220px;
+}
+.gallery-card {
+  flex: 0 0 auto;
+  background: var(--cream);
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.gallery-card:hover { transform: scale(1.01); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
+.gallery-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
+.gallery-card-info {
+  padding: 14px var(--m);
+  background: var(--cream);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.gallery-card-name {
+  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
+  text-transform: uppercase; color: var(--muted);
+}
+.gallery-card-sub {
+  font-family: var(--f-mono); font-size: 10px; font-weight: 400;
+  text-transform: uppercase; color: var(--muted); opacity: .7;
+}
+.gallery-card-price {
+  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
+  text-transform: uppercase; color: var(--muted); margin-top: 2px;
+}
+.gallery-card-btn {
+  margin-top: 10px; background: var(--lime); color: var(--muted); border: none;
+  padding: 8px 0; font-family: var(--f-mono); font-size: 10px; font-weight: 700;
+  text-transform: uppercase; width: 100%;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.gallery-card-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(223,231,1,.4); }
+
+/* color accent cards inside gallery */
+.gallery-accent {
+  flex: 0 0 auto;
+  padding: 30px var(--m);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 340px;
+}
+.gallery-accent-label {
+  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
+  text-transform: uppercase; opacity: .55; letter-spacing: 0.04em;
+}
+.gallery-accent-heading {
+  font-family: var(--f-body); font-size: clamp(22px, 2.6vw, 44px);
+  font-weight: 700; line-height: .88; letter-spacing: -0.03em;
+  padding-top: 120px;
+}
+/* prevent image cards from showing overflow below */
+.gallery-card { overflow: hidden; }
+
+/* ── TESTIMONIALS BANNER (sticky) ── */
+.testimonials-scroll-wrapper { position: relative; }
+.testimonials-banner {
+  background: var(--olive);
+  height: 100vh;
+  display: flex; align-items: center; justify-content: center;
+  padding: var(--m);
+  position: sticky; top: 0; z-index: 0;
+}
+.testimonials-banner h2 {
+  font-family: var(--f-display); font-size: clamp(56px, 10.1vw, 160px);
+  font-weight: 400; color: var(--lime); line-height: 1.0; letter-spacing: -0.04em;
+  text-align: center;
+}
+
+/* ── REVIEW SECTIONS ── */
+.review-section {
+  background: transparent;
+  height: 100vh;
+  display: flex; align-items: center;
+  padding: var(--m);
+  position: relative; z-index: 1;
+}
+.review-section:nth-child(2) .review-card { margin-right: auto; }
+.review-section:nth-child(3) .review-card { margin: 0 auto; }
+.review-section:nth-child(4) .review-card { margin-left: auto; }
+.review-card {
+  width: 42%; min-width: 280px;
+  border: 1px solid rgba(139,130,70,.25);
+  background: var(--cream);
+  padding: var(--m);
+  display: flex; flex-direction: column; gap: 120px;
+  will-change: transform;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+.review-card:hover { border-color: rgba(139,130,70,.55); box-shadow: 0 8px 40px rgba(0,0,0,.06); }
+.review-meta {
+  display: flex; justify-content: space-between;
+  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
+  text-transform: uppercase; color: var(--muted);
+}
+.review-quote {
+  font-family: var(--f-body); font-size: clamp(22px, 3.2vw, 48px);
+  font-weight: 700; line-height: .9; letter-spacing: -0.03em; color: var(--body-tx);
+}
+
+/* ── FOOTER ── */
+footer {
+  background: var(--olive);
+  padding: var(--m); padding-bottom: 0;
+  position: relative; z-index: 1;
+  overflow: hidden;
+}
+.footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding-bottom: 48px; }
+.footer-label {
+  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
+  text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 16px; display: block;
+}
+.footer-desc {
+  font-family: var(--f-body); font-size: 14px; color: rgba(255,255,255,.75);
+  line-height: 1.6; max-width: 420px; margin-bottom: 32px;
+}
+.footer-contact-item { margin-bottom: 20px; }
+.footer-contact-item .footer-label { margin-bottom: 4px; }
+.footer-contact-item a, .footer-contact-item span {
+  font-family: var(--f-body); font-size: 14px; color: rgba(255,255,255,.75);
+  text-decoration: none; display: block; line-height: 1.5; transition: color 0.2s;
+}
+.footer-contact-item a:hover { color: var(--lime); }
+.footer-form { display: flex; flex-direction: column; }
+.footer-form-row { display: grid; grid-template-columns: 1fr 1fr; }
+.footer-input {
+  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.3);
+  padding: 14px 0; color: white; font-family: var(--f-body); font-size: 14px; outline: none;
+  width: 100%; transition: border-color 0.25s;
+}
+.footer-form-row .footer-input:first-child { padding-right: 20px; }
+.footer-input:focus { border-color: var(--lime); }
+.footer-input::placeholder { color: rgba(255,255,255,.4); }
+.footer-textarea {
+  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.3);
+  padding: 14px 0; color: white; font-family: var(--f-body); font-size: 14px; outline: none;
+  width: 100%; resize: none; height: 80px; transition: border-color 0.25s;
+}
+.footer-textarea:focus { border-color: var(--lime); }
+.footer-textarea::placeholder { color: rgba(255,255,255,.4); }
+.footer-send-row { margin-top: 24px; }
+.footer-send-btn {
+  background: none; border: 1px solid rgba(255,255,255,.6); border-radius: 999px;
+  padding: 10px 32px; color: white; font-family: var(--f-body); font-size: 14px;
+  transition: background 0.2s, border-color 0.2s, transform 0.2s;
+}
+.footer-send-btn:hover { background: rgba(255,255,255,.1); border-color: white; transform: translateY(-1px); }
+.footer-rule { border: none; border-top: 1px solid rgba(255,255,255,.12); margin: 0; }
+.footer-base {
+  display: flex; justify-content: flex-end; padding: 16px 0 24px;
+  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
+  text-transform: uppercase; color: rgba(255,255,255,.28); letter-spacing: 0.02em;
+}
+.footer-wordmark {
+  font-family: var(--f-display); font-size: 15.6vw;
+  font-weight: 400; color: var(--lime); line-height: 1;
+  letter-spacing: -0.04em; text-transform: uppercase;
+  margin: 24px calc(-1 * var(--m)) 0;
+  display: flex; white-space: nowrap;
+  background: var(--olive);
+  padding: 0.2em var(--m) 0.05em;
+  overflow: visible;
+}
+.footer-wordmark .wm-letter { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }
+.footer-wordmark .wm-space  { display: inline-block; width: 0.3em; }
+
+/* ── TOAST ── */
+.cart-toast {
+  position: fixed; bottom: 32px; right: 32px; background: var(--dark);
+  color: white; padding: 14px 24px; font-family: var(--f-mono); font-size: 13px;
+  font-weight: 700; opacity: 0; transform: translateY(12px);
+  transition: opacity .3s, transform .3s; pointer-events: none; z-index: 9999;
+}
+.cart-toast.show { opacity: 1; transform: translateY(0); }
+
+/* ── STORE PAGE ── */
+.store-hero {
+  background: var(--olive);
+  height: 75vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: var(--m);
+  position: relative;
+  overflow: hidden;
+}
+.store-wordmark {
+  font-family: var(--f-display);
+  font-size: 13.2vw;
+  color: var(--lime);
+  line-height: .9;
+  letter-spacing: -0.04em;
+  text-transform: uppercase;
+  font-weight: 400;
+  display: flex;
+  white-space: nowrap;
+}
+.store-wordmark .wm-letter {
+  display: inline-block;
+  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
+  transform-origin: bottom center;
+}
+.store-wordmark .wm-space { display: inline-block; width: 0.3em; }
+.store-categories {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 32px var(--m) 24px;
+  background: var(--cream);
+}
+.store-cat-btn {
+  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.06em;
+  padding: 8px 18px; border: 1.5px solid var(--muted);
+  background: transparent; color: var(--muted);
+  transition: background 0.2s, color 0.2s, border-color 0.2s;
+}
+.store-cat-btn:hover, .store-cat-btn.active {
+  background: var(--lime); color: #1a1700; border-color: var(--lime);
+}
+.store-grid-section {
+  background: var(--cream);
+  padding: 0 var(--m) 60px;
+}
+.store-empty {
+  font-family: var(--f-mono); font-size: 12px; color: var(--muted); opacity: .6;
+  padding: 40px 0;
+}
+.store-list-section {
+  background: var(--cream);
+  padding: 0 var(--m) 80px;
+}
+.store-list {
+  list-style: none;
+  margin-top: 24px;
+}
+.store-list-item {
+  display: grid;
+  grid-template-columns: 1fr auto auto auto;
+  align-items: center;
+  gap: 24px;
+  padding: 20px 0;
+  border-bottom: 1px solid rgba(95,104,96,.18);
+  font-family: var(--f-mono);
+}
+.store-list-item:first-child { border-top: 1px solid rgba(95,104,96,.18); }
+.store-list-name { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
+.store-list-sub  { font-size: 10px; font-weight: 400; color: var(--muted); opacity: .65; }
+.store-list-price { font-size: 13px; font-weight: 700; color: var(--muted); }
+.store-list-btn {
+  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
+  text-transform: uppercase; padding: 8px 18px;
+  background: var(--lime); color: #1a1700; border: none;
+  transition: transform 0.2s;
+}
+.store-list-btn:hover { transform: translateY(-1px); }
+.store-footer-bar {
+  background: var(--olive);
+  padding: 24px var(--m);
+  display: flex; justify-content: space-between; align-items: center;
+  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
+  text-transform: uppercase; color: var(--lime); letter-spacing: 0.04em;
+}
+.store-back-link { color: var(--lime); text-decoration: none; }
+
+/* ── PRODUCT PAGE ── */
+.product-page {
+  min-height: 100vh;
+  background: var(--cream);
+}
+.product-page-nav {
+  display: flex; gap: 32px; align-items: center;
+  padding: 24px var(--m);
+  border-bottom: 1px solid rgba(95,104,96,.15);
+}
+.product-back {
+  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--muted); text-decoration: none;
+  display: inline-flex; overflow: visible;
+}
+.product-back:hover { color: var(--olive); }
+.product-back .wm-letter { display: inline-block; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }
+.product-back .wm-space { display: inline-block; width: 0.3em; }
+.product-page-inner {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 60px;
+  padding: 60px var(--m);
+  max-width: 1400px;
+}
+.product-page-img img {
+  width: 100%; aspect-ratio: 1;
+  object-fit: cover; display: block;
+}
+.product-page-img-placeholder {
+  width: 100%; aspect-ratio: 1;
+  background: rgba(95,104,96,.12);
+}
+.product-page-name {
+  font-family: var(--f-body); font-size: clamp(28px, 4vw, 64px);
+  font-weight: 700; line-height: .9; letter-spacing: -0.03em;
+  color: var(--muted); margin: 12px 0 8px;
+}
+.product-page-sub {
+  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
+  text-transform: uppercase; color: var(--muted); opacity: .6;
+  margin-bottom: 16px;
+}
+.product-page-price {
+  font-family: var(--f-mono); font-size: 20px; font-weight: 700;
+  color: var(--muted); margin-bottom: 24px;
+}
+.product-page-desc {
+  font-family: var(--f-body); font-size: 15px; line-height: 1.65;
+  color: var(--muted); opacity: .85; margin-bottom: 36px;
+  max-width: 460px;
+}
+.product-page-qty {
+  display: flex; align-items: center; gap: 0;
+  margin-bottom: 24px; width: fit-content;
+  border: 1.5px solid rgba(95,104,96,.3);
+}
+.product-page-qty button {
+  width: 44px; height: 44px;
+  background: transparent; border: none;
+  font-family: var(--f-mono); font-size: 18px; font-weight: 700;
+  color: var(--muted);
+  transition: background 0.15s;
+}
+.product-page-qty button:hover { background: rgba(95,104,96,.08); }
+.product-page-qty span {
+  width: 52px; text-align: center;
+  font-family: var(--f-mono); font-size: 14px; font-weight: 700;
+  color: var(--muted); border-left: 1.5px solid rgba(95,104,96,.3);
+  border-right: 1.5px solid rgba(95,104,96,.3); line-height: 44px;
+}
+.product-page-actions { display: flex; gap: 12px; flex-wrap: wrap; }
+.product-page-cart-btn {
+  flex: 1; min-width: 160px; padding: 16px 0;
+  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.06em;
+  background: transparent; color: var(--muted);
+  border: 1.5px solid rgba(95,104,96,.5);
+  transition: background 0.2s, border-color 0.2s;
+}
+.product-page-cart-btn:hover { background: rgba(95,104,96,.08); border-color: var(--muted); }
+.product-page-buy-btn {
+  flex: 1; min-width: 160px; padding: 16px 0;
+  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.06em;
+  background: var(--lime); color: #1a1700; border: none;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.product-page-buy-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(223,231,1,.35); }
+
+/* gallery editorial photos */
+.gallery-photo {
+  width: 100%;
+  object-fit: cover;
+  display: block;
+  aspect-ratio: 3 / 4;
+}
+.gallery-photo--wide {
+  aspect-ratio: 4 / 1;
+}
+
+/* ── CART PAGE ── */
+.cart-hero { justify-content: flex-end; }
+.nav-cart-link { color: var(--lime); text-decoration: none; font-family: var(--f-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
+.cart-page { background: var(--cream); min-height: 60vh; padding: 60px var(--m) 100px; }
+.cart-loading, .cart-empty { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; padding: 60px 0; }
+.cart-empty-msg { font-family: var(--f-body); font-size: clamp(22px, 3vw, 48px); font-weight: 700; color: var(--muted); letter-spacing: -0.03em; }
+.cart-empty-btn {
+  display: inline-block; background: var(--lime); color: #1a1700;
+  padding: 12px 28px; font-family: var(--f-mono); font-size: 11px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none;
+  transition: transform 0.2s;
+}
+.cart-empty-btn:hover { transform: translateY(-2px); }
+.cart-inner { display: grid; grid-template-columns: 1fr 360px; gap: 60px; align-items: start; }
+.cart-list { list-style: none; }
+.cart-item {
+  display: grid; grid-template-columns: 100px 1fr auto auto auto;
+  align-items: center; gap: 24px;
+  padding: 24px 0;
+  border-bottom: 1px solid rgba(95,104,96,.15);
+}
+.cart-item:first-child { border-top: 1px solid rgba(95,104,96,.15); }
+.cart-item-img { width: 100px; height: 100px; flex-shrink: 0; overflow: hidden; }
+.cart-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.cart-item-img-placeholder { width: 100%; height: 100%; background: #e5e4da; }
+.cart-item-name { font-family: var(--f-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
+.cart-item-variant { font-family: var(--f-mono); font-size: 10px; color: var(--muted); opacity: .65; text-transform: uppercase; }
+.cart-item-price { font-family: var(--f-mono); font-size: 11px; color: var(--muted); margin-top: 6px; }
+.cart-item-qty {
+  display: flex; align-items: center; gap: 0;
+  border: 1.5px solid rgba(95,104,96,.25);
+}
+.cart-item-qty button {
+  width: 36px; height: 36px; background: transparent; border: none;
+  font-family: var(--f-mono); font-size: 16px; font-weight: 700; color: var(--muted);
+}
+.cart-item-qty button:hover { background: rgba(95,104,96,.08); }
+.cart-item-qty span {
+  width: 40px; text-align: center;
+  font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--muted);
+  border-left: 1.5px solid rgba(95,104,96,.25); border-right: 1.5px solid rgba(95,104,96,.25);
+  line-height: 36px;
+}
+.cart-item-line-price { font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
+.cart-item-remove {
+  background: transparent; border: none; color: var(--muted); opacity: .45;
+  font-size: 14px; padding: 8px; transition: opacity 0.2s;
+}
+.cart-item-remove:hover { opacity: 1; }
+.cart-summary {
+  position: sticky; top: 40px;
+  background: var(--cream); border: 1.5px solid rgba(95,104,96,.2);
+  padding: 32px;
+  display: flex; flex-direction: column; gap: 16px;
+}
+.cart-summary-row {
+  display: flex; justify-content: space-between; align-items: center;
+  font-family: var(--f-mono); font-size: 13px; font-weight: 700;
+  text-transform: uppercase; color: var(--muted);
+}
+.cart-summary-note { font-family: var(--f-mono); font-size: 10px; color: var(--muted); opacity: .55; text-transform: uppercase; }
+.cart-checkout-btn {
+  width: 100%; padding: 16px 0;
+  font-family: var(--f-mono); font-size: 12px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.06em;
+  background: var(--lime); color: #1a1700; border: none;
+  transition: transform 0.2s, box-shadow 0.2s;
+  margin-top: 8px;
+}
+.cart-checkout-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(223,231,1,.35); }
+.cart-checkout-btn:disabled { opacity: .6; }
+.cart-continue-link {
+  display: block; text-align: center;
+  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
+  text-transform: uppercase; color: var(--muted); text-decoration: none; opacity: .55;
+}
+.cart-continue-link:hover { opacity: 1; }
+
+/* product page view-cart link */
+.product-page-view-cart {
+  display: inline-block; margin-top: 16px;
+  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
+  text-transform: uppercase; color: var(--muted); text-decoration: none;
+  border-bottom: 1px solid currentColor; padding-bottom: 2px;
+  transition: color 0.2s;
+}
+.product-page-view-cart:hover { color: var(--olive); }
+.product-back-cart { margin-left: auto; }
+
+/* ── PRODUCT OPTIONS ── */
+.product-page-options { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; }
+.product-option { display: flex; flex-direction: column; gap: 6px; }
+.product-option-label {
+  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
+}
+.product-option select {
+  font-family: var(--f-mono); font-size: 11px; text-transform: uppercase;
+  padding: 10px 14px; border: 1px solid var(--muted); background: transparent;
+  color: var(--muted); border-radius: 0; cursor: none; min-width: 150px;
+}
+.product-page-cart-btn[disabled], .product-page-buy-btn[disabled] { opacity: 0.45; }
+
+/* ── FOOTER FORM EXTRAS ── */
+.footer-checkbox {
+  display: flex; align-items: center; gap: 10px;
+  font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; color: var(--muted);
+}
+select.footer-input { appearance: none; }
+
+/* ── EMPTY / MESSAGE STATES ── */
+.page-message {
+  padding: 140px var(--m); text-align: center;
+  display: flex; flex-direction: column; align-items: center; gap: 22px;
+  font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; color: var(--muted);
+}
diff --git a/astro/benny-pets/tsconfig.json b/astro/benny-pets/tsconfig.json
new file mode 100644
index 00000000..8bf91d3b
--- /dev/null
+++ b/astro/benny-pets/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}
diff --git a/templates.json b/templates.json
index 59f68cb2..8ab6c8db 100644
--- a/templates.json
+++ b/templates.json
@@ -64,6 +64,14 @@
       "siteTemplateId": "307dedf5-7179-483c-9e6c-6cdcdd6684b3",
       "gitPath": "astro/rentals",
       "vibeCompatible": false
+    },
+    {
+      "name": "benny-pets",
+      "title": "Benny Pets (Wix Stores)",
+      "subtitle": "Designed product catalog, cart, and checkout",
+      "siteTemplateId": "1fe095c6-5015-431d-a216-069181c126ce",
+      "gitPath": "astro/benny-pets",
+      "vibeCompatible": false
     }
   ]
 }